University-of-Basel-Studentprojects/Programmierprojekt
Archived
1
0
Fork 0
Code Issues 17 Pull Requests Actions Wiki Activity

Add: Prototype outreach website with placeholders

Browse Source 
Initial version of the outreach landing page.
Includes placeholder and stock images and placeholder developer names for team section.
This commit is contained in:
Jona Walpert
2026-03-30 23:55:12 +02:00
parent 2cd4324c68
commit 5448f5683d
13 changed files with 869 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files
outreach/index.html
+180 -42
View File
@@ -1,53 +1,191 @@
<html>
<!-- Dies ist ein html Kommentar -->
<!-- Ändert in diesem File sämtliche Platzhalter, wie z.B. den Spielnamen in der nächsten Linie -->
<head><title>Example Game</title><link rel="stylesheet" href="main.css"></head>
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Casono — Texas Hold'em Poker</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="images/logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Lato:wght@300;400;700&display=swap"
rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<!-- Header nicht verändern -->
<header class="site-header"><div class="wrapper"><a class="site-title" href="/cs108/">Programmierprojekt - Computerspiele</a></div></header><div class="page-content"><div class="wrapper"><div class="home">
<header class="sticky-nav">
<nav>
<div class="logo" data-aos="fade-down"><img src="images/logo.png" alt="Casono" class="site-logo"></div>
<ul id="nav-links" data-aos="fade-down" data-aos-delay="100">
<li><a href="#hero">Home</a></li>
<li><a href="#about">Über</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#world">Tisch</a></li>
<li><a href="#resources">Download</a></li>
<li><a href="#team">Team</a></li>
</ul>
<button class="burger-menu" id="burger-menu" aria-label="Toggle navigation menu">
<span></span>
<span></span>
<span></span>
</button>
</nav>
</header>
<h1>Example Game</h1>
Hier k&ouml;nnt ihr einen Satz &uuml;ber euer Spiel sagen.
<main>
<section id="hero" class="hero-section">
<div class="hero-content">
<h1 data-aos="zoom-in">Casono</h1>
<p class="tagline" data-aos="fade-up" data-aos-delay="300">Erlebe den Nervenkitzel von Texas Hold'em
Poker</p>
<p class="description" data-aos="fade-up" data-aos-delay="500">Casono ist ein stilvolles Texas Hold'em
Poker-Erlebnis mit spannenden Matches und eleganter Optik.</p>
<a href="#features" class="cta-button" data-aos="zoom-in-up" data-aos-delay="700">Mehr erfahren</a>
</div>
<div class="hero-overlay"></div>
</section>
<!-- Dieser Block ist dafür verantwortlich, den Trailer / das Gameplay Video und euren Screenshot einzubauen. Verändert ihn nicht, sondern überschreibt einfach die Dateien -->
<br>
<img width="250" src="screenshot.png">
<br>
<br>
<h2>Trailer</h2>
<video controls width="250">
<source src="video.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<br>
<br>
<section id="about" class="content-section">
<h2 data-aos="fade-up">Über Casono</h2>
<p data-aos="fade-up" data-aos-delay="100">Casono kombiniert echtes Casino-Feeling mit leicht zugänglichem
Gameplay. Spiele online gegen Freunde.</p>
<div class="about-video-container" data-aos="zoom-in" data-aos-delay="200">
<video class="about-video" controls playsinline preload="metadata" loading="lazy">
<source src="video.mp4" type="video/mp4">
Ihr Browser unterstützt das Video-Tag nicht.
</video>
</div>
</section>
<!-- Entwickler anpassen -->
<section id="features" class="features-section">
<h2 data-aos="fade-up">Key Features</h2>
<div class="features-grid">
<div class="feature-card" data-accent="1" data-aos="fade-up" data-aos-delay="100">
<h3>Sitzungen & Matchmaking</h3>
<p>Realistisches Poker-Erlebnis mit spannenden Matches.</p>
</div>
<h3>Entwickler:</h3>
<ul>
<li> Edgar Codd </li>
<li> Lynn Conway </li>
<li> Ada Lovelace </li>
<li> Alan Turing </li>
</ul>
<div class="feature-card" data-accent="2" data-aos="fade-up" data-aos-delay="300">
<h3>Stilvolles UI</h3>
<p>Elegante udn intuitive Benutzeroberfläche für ein immersives Erlebnis.</p>
</div>
<div class="feature-card" data-accent="3" data-aos="fade-up" data-aos-delay="400">
<h3>Einfache Installation</h3>
<p>Download, entpacken, starten, fertig!</p>
</div>
</div>
</section>
<!-- Nachfolgend sollt ihr die Tasten angeben, welche man braucht um euer Spiel zu Spielen. Um weitere Tasten hinzuzufügen könnt Ihr einfach eine Zeile kopieren und den Buchstaben oder das Wort zwischen <i>Beispiel:</i> ändern. -->
<section id="world" class="content-section world-section">
<h2 data-aos="fade-up">Der Tisch</h2>
<p data-aos="fade-up" data-aos-delay="100"> Spielen udn chatten in einer gemeinsamen eleganten Ansicht.</p>
<div class="world-map-container" data-aos="zoom-in" data-aos-delay="200">
<img src="images/table_preview.png" alt="Table Preview" class="world-map-image" loading="lazy">
</div>
</section>
<h2>Steuerung:</h2>
<i>Pfeiltasten:</i> bewegen<br/>
<i>Leertaste:</i> springen<br/>
<i>I:</i> Inventar<br/>
<i>Esc:</i> Spiel beenden<br/>
<i>P:</i> Spiel pausieren
<section id="resources" class="resources-section">
<h2 data-aos="zoom-in-up">Download & Ressourcen</h2>
<div class="download-section" data-aos="zoom-in-up" data-aos-delay="100">
<a href="downloads/casono-latest.zip" class="download-button" download="casono-latest.zip">Download Game
(ZIP)</a>
</div>
<!-- Falls ihr noch zusätzliche Informationen wie Items oder andere Erklärungen angeben wollt, könnt Ihr das wie nachfolgend machen. -->
<div class="run-instructions" data-aos="fade-up" data-aos-delay="200">
<div class="code-window" role="region" aria-label="Run instructions">
<code>
# Requires Java 25
<h2>Inventar:</h2>
<i>Eisblock:</i> Gegner k&ouml;nnen sich nicht mehr bewegen<br/>
<i>Schwarzes Loch:</i> Steuerung der Gegner wird invertiert
# Start the Server:
java -jar casono.jar server &lt;listenport&gt;
</div></div></div></div></body>
</html>
# Start the Client:
java -jar casono.jar client &lt;serverip&gt;:&lt;serverport&gt; [username]
# Replace &lt;listenport&gt;, &lt;serverip&gt;, &lt;serverport&gt; and [username] with your values.
</code>
</div>
</div>
</section>
<section id="team" class="team-section">
<h2 data-aos="fade-up">Das Team</h2>
<div class="team-grid">
<div class="team-member" data-aos="fade-up" data-aos-delay="100">
<img src="images/team/lars.svg" alt="Lars Winzer" class="team-photo" loading="lazy">
<h3>Lars Winzer</h3>
<p>Server architecture & Server side networking</p>
</div>
<div class="team-member" data-aos="fade-up" data-aos-delay="200">
<img src="images/team/jona.svg" alt="Jona Walpert" class="team-photo" loading="lazy">
<h3>Jona Walpert</h3>
<p>UI & UX Design</p>
</div>
<div class="team-member" data-aos="fade-up" data-aos-delay="300">
<img src="images/team/matthis.svg" alt="Matthis Müller" class="team-photo" loading="lazy">
<h3>Matthis Müller</h3>
<p>Client side development</p>
</div>
<div class="team-member" data-aos="fade-up" data-aos-delay="400">
<img src="images/team/julian.svg" alt="Julian Gerber" class="team-photo" loading="lazy">
<h3>Julian Gerber</h3>
<p>UI & UX Design, Game Engine</p>
</div>
</div>
<div class="github-link" data-aos="fade-up" data-aos-delay="500">
<a href="https://git.scicore.unibas.ch/cs108-fs26/Gruppe-13">
<i class="fa-brands fa-github github-icon"></i>
Projekt-Repo
</a>
</div>
</section>
</main>
<footer>
<p>2026 Casono — Gruppe 13</p>
</footer>
<div id="trailer-modal" class="modal">
<div class="modal-content">
<span class="close-button" id="close-trailer-modal">&times;</span>
<video id="trailer-video" width="100%" controls autoplay muted loop playsinline>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="demo-modal" class="modal">
<div class="modal-content">
<span class="close-button" id="close-demo-modal">&times;</span>
<video id="demo-video" width="100%" controls autoplay muted loop playsinline>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</div>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({ duration: 800, once: true });
document.getElementById('burger-menu')?.addEventListener('click', function () {
const nav = document.querySelector('nav ul');
nav.classList.toggle('nav-active');
this.classList.toggle('active');
});
// modal open/close handlers
document.getElementById('close-trailer-modal')?.addEventListener('click', () => {
document.getElementById('trailer-modal').classList.remove('show');
});
document.getElementById('close-demo-modal')?.addEventListener('click', () => {
document.getElementById('demo-modal').classList.remove('show');
});
</script>
</script>
</body>
</html>