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

Feat: Add English - German Switch, Add Trailer & Gameplay section

Browse Source
This commit is contained in:
Jona Walpert
2026-04-13 01:02:35 +02:00
parent 1b154c685e
commit 786b7e990d
2 changed files with 228 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
outreach/index.html
+157 -30
View File
@@ -21,13 +21,15 @@
<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>
<li><a href="#hero" data-i18n="navHome">Home</a></li>
<li><a href="#about" data-i18n="navAbout">Über</a></li>
<li><a href="#features" data-i18n="navFeatures">Features</a></li>
<li><a href="#table" data-i18n="navTable">Tisch</a></li>
<li><a href="#media" data-i18n="navMedia">Trailer & Gameplay</a></li>
<li><a href="#resources" data-i18n="navDownload">Download</a></li>
<li><a href="#team" data-i18n="navTeam">Team</a></li>
</ul>
<button id="language-toggle" class="language-toggle" type="button" aria-label="Switch language">EN</button>
<button class="burger-menu" id="burger-menu" aria-label="Toggle navigation menu">
<span></span>
<span></span>
@@ -40,58 +42,89 @@
<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
<p class="tagline" data-i18n="heroTagline" 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
<p class="description" data-i18n="heroDescription" 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>
<a href="#features" class="cta-button" data-i18n="heroCta" 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
<h2 data-i18n="aboutTitle" data-aos="fade-up">Über Casono</h2>
<p data-i18n="aboutText" 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.
<span data-i18n="videoFallback">Ihr Browser unterstützt das Video-Tag nicht.</span>
</video>
</div>
</section>
<section id="features" class="features-section">
<h2 data-aos="fade-up">Key Features</h2>
<h2 data-i18n="featuresTitle" 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>
<h3 data-i18n="feature1Title">Sitzungen & Matchmaking</h3>
<p data-i18n="feature1Text">Realistisches Poker-Erlebnis mit spannenden Matches.</p>
</div>
<div class="feature-card" data-accent="2" data-aos="fade-up" data-aos-delay="300">
<h3>Stilvolle UI</h3>
<p>Elegante und intuitive Benutzeroberfläche für ein immersives Erlebnis.</p>
<h3 data-i18n="feature2Title">Stilvolle UI</h3>
<p data-i18n="feature2Text">Elegante und 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>
<h3 data-i18n="feature3Title">Einfache Installation</h3>
<p data-i18n="feature3Text">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">
<section id="table" class="content-section table-section">
<h2 data-i18n="tableTitle" data-aos="fade-up">Der Tisch</h2>
<p data-i18n="tableText" data-aos="fade-up" data-aos-delay="100"> Spielen und chatten in einer gemeinsamen
eleganten Ansicht.</p>
<div class="table-preview-container" data-aos="zoom-in" data-aos-delay="200">
<img src="images/table_preview.png" alt="Casino Tisch Vorschau" class="table-preview-image"
loading="lazy">
</div>
</section>
<section id="media" class="media-section">
<h2 data-i18n="mediaTitle" data-aos="fade-up">Trailer & Gameplay</h2>
<p data-i18n="mediaText" data-aos="fade-up" data-aos-delay="100">Erhalte einen schnellen Eindruck vom Stil
und vom Spielablauf.
</p>
<div class="media-grid" data-aos="fade-up" data-aos-delay="200">
<article class="media-card">
<h3 data-i18n="mediaTrailer">Trailer</h3>
<video controls playsinline preload="metadata" loading="lazy">
<source src="video.mp4" type="video/mp4">
<span data-i18n="videoFallback">Ihr Browser unterstützt das Video-Tag nicht.</span>
</video>
</article>
<article class="media-card">
<h3 data-i18n="mediaGameplay">Gameplay</h3>
<video controls playsinline preload="metadata" loading="lazy">
<source src="video.mp4" type="video/mp4">
<span data-i18n="videoFallback">Ihr Browser unterstützt das Video-Tag nicht.</span>
</video>
</article>
</div>
</section>
<section id="resources" class="resources-section">
<h2 data-aos="zoom-in-up">Download & Ressourcen</h2>
<h2 data-i18n="resourcesTitle" 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
<a href="downloads/casono-latest.zip" class="download-button" data-i18n="downloadButton"
download="casono-latest.zip">Download Game
(ZIP)</a>
</div>
@@ -113,7 +146,7 @@ java -jar casono.jar client &lt;serverip&gt;:&lt;serverport&gt; [username]
</section>
<section id="team" class="team-section">
<h2 data-aos="fade-up">Das Team</h2>
<h2 data-i18n="teamTitle" 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">
@@ -139,14 +172,14 @@ java -jar casono.jar client &lt;serverip&gt;:&lt;serverport&gt; [username]
<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
<span data-i18n="repoLink">Projekt-Repo</span>
</a>
</div>
</section>
</main>
<footer>
<p>2026 Casono — Gruppe 13</p>
<p data-i18n="footerText">2026 Casono — Gruppe 13</p>
</footer>
<div id="trailer-modal" class="modal">
@@ -171,6 +204,101 @@ java -jar casono.jar client &lt;serverip&gt;:&lt;serverport&gt; [username]
<script>
AOS.init({ duration: 800, once: true });
const translations = {
de: {
navHome: 'Home',
navAbout: 'Über',
navFeatures: 'Features',
navTable: 'Tisch',
navMedia: 'Trailer & Gameplay',
navDownload: 'Download',
navTeam: 'Team',
heroTagline: "Erlebe den Nervenkitzel von Texas Hold'em Poker",
heroDescription: "Casono ist ein stilvolles Texas Hold'em Poker-Erlebnis mit spannenden Matches und eleganter Optik.",
heroCta: 'Mehr erfahren',
aboutTitle: 'Über Casono',
aboutText: 'Casono kombiniert echtes Casino-Feeling mit leicht zugänglichem Gameplay. Spiele online gegen Freunde.',
featuresTitle: 'Key Features',
feature1Title: 'Sitzungen & Matchmaking',
feature1Text: 'Realistisches Poker-Erlebnis mit spannenden Matches.',
feature2Title: 'Stilvolle UI',
feature2Text: 'Elegante und intuitive Benutzeroberfläche für ein immersives Erlebnis.',
feature3Title: 'Einfache Installation',
feature3Text: 'Download, entpacken, starten, fertig!',
tableTitle: 'Der Tisch',
tableText: 'Spielen und chatten in einer gemeinsamen eleganten Ansicht.',
mediaTitle: 'Trailer & Gameplay',
mediaText: 'Erhalte einen schnellen Eindruck vom Stil und vom Spielablauf.',
mediaTrailer: 'Trailer',
mediaGameplay: 'Gameplay',
resourcesTitle: 'Download & Ressourcen',
downloadButton: 'Download Game (ZIP)',
teamTitle: 'Das Team',
repoLink: 'Projekt-Repo',
footerText: '2026 Casono — Gruppe 13',
videoFallback: 'Ihr Browser unterstützt das Video-Tag nicht.'
},
en: {
navHome: 'Home',
navAbout: 'About',
navFeatures: 'Features',
navTable: 'Table',
navMedia: 'Trailer & Gameplay',
navDownload: 'Download',
navTeam: 'Team',
heroTagline: "Feel the thrill of Texas Hold'em Poker",
heroDescription: "Casono is a stylish Texas Hold'em poker experience with exciting matches and elegant visuals.",
heroCta: 'Learn more',
aboutTitle: 'About Casono',
aboutText: 'Casono combines real casino flair with approachable gameplay. Play online with friends.',
featuresTitle: 'Key Features',
feature1Title: 'Sessions & Matchmaking',
feature1Text: 'Realistic poker experience with thrilling matches.',
feature2Title: 'Stylish UI',
feature2Text: 'Elegant and intuitive interface for an immersive experience.',
feature3Title: 'Easy Setup',
feature3Text: 'Download, unpack, launch, done!',
tableTitle: 'The Table',
tableText: 'Play and chat in one shared elegant view.',
mediaTitle: 'Trailer & Gameplay',
mediaText: 'Get a quick look at the style and core gameplay loop.',
mediaTrailer: 'Trailer',
mediaGameplay: 'Gameplay',
resourcesTitle: 'Download & Resources',
downloadButton: 'Download Game (ZIP)',
teamTitle: 'The Team',
repoLink: 'Project Repo',
footerText: '2026 Casono — Group 13',
videoFallback: 'Your browser does not support the video tag.'
}
};
const languageToggle = document.getElementById('language-toggle');
const i18nNodes = document.querySelectorAll('[data-i18n]');
function applyLanguage(language) {
const dictionary = translations[language] ?? translations.de;
i18nNodes.forEach((node) => {
const key = node.getAttribute('data-i18n');
if (!key || !dictionary[key]) {
return;
}
node.textContent = dictionary[key];
});
document.documentElement.lang = language;
languageToggle.textContent = language === 'de' ? 'EN' : 'DE';
localStorage.setItem('casono-language', language);
}
const preferredLanguage = localStorage.getItem('casono-language') === 'en' ? 'en' : 'de';
applyLanguage(preferredLanguage);
languageToggle?.addEventListener('click', () => {
const nextLanguage = document.documentElement.lang === 'de' ? 'en' : 'de';
applyLanguage(nextLanguage);
});
document.getElementById('burger-menu')?.addEventListener('click', function () {
const nav = document.querySelector('nav ul');
nav.classList.toggle('nav-active');
@@ -185,7 +313,6 @@ java -jar casono.jar client &lt;serverip&gt;:&lt;serverport&gt; [username]
document.getElementById('demo-modal').classList.remove('show');
});
</script>
</script>
</body>
</html>
outreach/style.css
+71 -8
View File
@@ -111,6 +111,7 @@ nav {
justify-content: flex-start;
align-items: center;
width: 100%;
position: relative;
}
.logo {
@@ -176,6 +177,30 @@ nav ul li a {
color: var(--team-button-bg);
}
.language-toggle {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
background-color: var(--team-button-bg);
color: var(--header-bg);
border: none;
border-radius: 999px;
padding: 0.35rem 0.85rem;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.08em;
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
box-shadow: var(--shadow-light);
}
.language-toggle:hover {
background-color: var(--accent-color);
color: #fff;
transform: translateY(-50%) translateY(-1px);
}
/* Burger Menu Button (Hidden on Desktop) */
.burger-menu {
display: none;
@@ -356,22 +381,54 @@ video,
/* Decorative Divider */
.features-section::before,
.world-section::before,
.table-section::before,
.resources-section::before {
content: '';
display: block;
width: 100px;
height: 2px;
width: 150px;
height: 3px;
background: linear-gradient(to right, transparent, var(--secondary-color), transparent);
margin: 1rem auto;
opacity: 0.6;
}
/* Tighten spacing between world image and download */
.world-section {
.table-section {
padding-bottom: 1rem;
}
.media-section {
padding: var(--section-padding);
background-color: var(--card-bg-color);
text-align: center;
}
.media-grid {
max-width: 1200px;
margin: 2rem auto 0;
display: grid;
grid-template-columns: repeat(2, minmax(280px, 1fr));
gap: var(--grid-gap);
}
.media-card {
background-color: var(--background-color);
border: 1px solid var(--secondary-color);
border-radius: var(--border-radius);
padding: var(--card-padding);
box-shadow: var(--shadow-light);
}
.media-card h3 {
margin-bottom: 1rem;
}
.media-card video {
width: 100%;
border-radius: 10px;
display: block;
}
.resources-section {
padding-top: 1rem;
}
@@ -543,13 +600,13 @@ video,
color: var(--button-color);
}
/* World/table preview sizing + padding so it never touches edges */
.world-map-container {
/* Table preview sizing + padding so it never touches edges */
.table-preview-container {
padding: 8px;
box-sizing: border-box;
}
.world-map-image {
.table-preview-image {
max-width: 100%;
width: calc(100% - 32px);
height: auto;
@@ -557,6 +614,12 @@ video,
border-radius: 10px;
}
@media (max-width: 900px) {
.media-grid {
grid-template-columns: 1fr;
}
}
/* Modal and video: ensure padding and responsive scaling without distortion */
.modal {
padding: 24px;