Jona Walpert
5448f5683d
Initial version of the outreach landing page. Includes placeholder and stock images and placeholder developer names for team section.
191 lines
8.5 KiB
HTML
191 lines
8.5 KiB
HTML
<!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 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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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
|
|
|
|
# Start the Server:
|
|
java -jar casono.jar server <listenport>
|
|
|
|
# Start the Client:
|
|
java -jar casono.jar client <serverip>:<serverport> [username]
|
|
|
|
# Replace <listenport>, <serverip>, <serverport> 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">×</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">×</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> |