From 1a7ca18b544556616a2acdf45b5391708d054f88 Mon Sep 17 00:00:00 2001 From: fatmeat Date: Fri, 18 Apr 2025 20:17:36 +0200 Subject: [PATCH] starting website --- www/css/style.css | 146 ++++++++++++++++++++++++++++++++++++++++++++++ www/index.html | 84 ++++++++++++++++++++++++++ www/js/index.js | 18 ++++++ 3 files changed, 248 insertions(+) create mode 100644 www/css/style.css create mode 100644 www/index.html create mode 100644 www/js/index.js diff --git a/www/css/style.css b/www/css/style.css new file mode 100644 index 0000000..61674fb --- /dev/null +++ b/www/css/style.css @@ -0,0 +1,146 @@ +body { + margin: 0; + font-family: 'Orbitron', sans-serif; + color: #f0f0f0; + background: #0d0d0d; + overflow-x: hidden; +} +.grid-bg { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: repeating-linear-gradient( + to right, + rgba(0, 255, 255, 0.1) 0px, + rgba(0, 255, 255, 0.1) 1px, + transparent 1px, + transparent 40px + ), + repeating-linear-gradient( + to bottom, + rgba(0, 255, 255, 0.1) 0px, + rgba(0, 255, 255, 0.1) 1px, + transparent 1px, + transparent 40px + ); + background-color: #0d0d0d; + z-index: -2; +} + +.crt-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-image: repeating-linear-gradient( + to bottom, + rgba(255, 255, 255, 0.05) 0px, + rgba(255, 255, 255, 0.05) 1px, + transparent 1px, + transparent 3px + ); + pointer-events: none; + z-index: -1; + mix-blend-mode: overlay; + animation: flicker 0.2s infinite; + border-radius: 1.5% / 1%; + box-shadow: inset 0 0 40px rgba(0, 255, 255, 0.1); +} + +@keyframes flicker { + 0%, 100% { opacity: 0.9; } + 50% { opacity: 1; } +} + +.foreground-container { + max-width: 960px; + aspect-ratio: 4 / 3; + margin: 0 auto; + background-color: rgba(0, 0, 0, 0.85); + box-shadow: 0 0 20px rgba(255, 0, 255, 0.5); + padding: 2rem; + position: relative; + border-radius: 2% / 1.5%; + box-shadow: 0 0 40px rgba(255, 0, 255, 0.3), inset 0 0 20px rgba(0, 255, 255, 0.1); +} + +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + background: rgba(0, 0, 0, 0.8); + border-bottom: 2px solid #ff00ff; +} +header h1 { + font-size: 2rem; + color: #ff00ff; + text-shadow: 0 0 5px #ff00ff; +} +nav ul { + display: flex; + gap: 1rem; + list-style: none; +} +nav ul li a { + text-decoration: none; + color: #00ffff; + padding: 0.5rem 1rem; + border: 1px solid #00ffff; + border-radius: 4px; + text-shadow: 0 0 3px #00ffff; +} +nav ul li a:hover { + background: #00ffff; + color: #0d0d0d; +} + +.hidden { + display: none; +} + +/* Terminal-style containers */ +.terminal { + background: rgba(0, 0, 0, 0.9); + border: 2px solid #ff00ff; + padding: 2rem; + width: 300px; + margin: 2rem auto; + box-shadow: 0 0 10px #ff00ff; +} +.terminal input { + background: #1a1a1a; + border: 1px solid #00ffff; + color: #00ffff; + width: 100%; + padding: 0.5rem; + margin-bottom: 1rem; + font-family: monospace; +} +.terminal button { + background: #ff00ff; + border: none; + color: #0d0d0d; + padding: 0.5rem 1rem; + cursor: pointer; + font-family: monospace; + text-shadow: 0 0 3px #ff00ff; +} + +/* Section headings */ +main section h2 { + color: #ff00ff; + text-shadow: 0 0 5px #ff00ff; + margin-top: 2rem; + text-align: center; +} + +/* Placeholder styles for posts and news */ +#posts p, #news-ticker p { + text-align: center; + font-style: italic; + padding: 1rem; +} diff --git a/www/index.html b/www/index.html new file mode 100644 index 0000000..0cd747e --- /dev/null +++ b/www/index.html @@ -0,0 +1,84 @@ + + + + + + + Synthwave Game Studio + + + + + + +
+ + +
+ + +
+ +
+

Synthwave Game Studio

+ +
+ + +
+ +
+

Welcome to the Future Retro

+

Experience our games in neon-lit glory...

+
+ + + + + + + + + + + + +
+
+ + + + diff --git a/www/js/index.js b/www/js/index.js new file mode 100644 index 0000000..8bd83c9 --- /dev/null +++ b/www/js/index.js @@ -0,0 +1,18 @@ + +/* js/script.js */ +document.querySelectorAll('nav ul li a').forEach(link => { + link.addEventListener('click', e => { + e.preventDefault(); + const target = e.target.id.replace('nav-', '') + '-section'; + document.querySelectorAll('main section').forEach(sec => sec.classList.add('hidden')); + const section = document.getElementById(target); + if (section) section.classList.remove('hidden'); + }); +}); + +document.getElementById('login-form')?.addEventListener('submit', e => { + e.preventDefault(); + const username = document.getElementById('username').value; + alert(`Logging in as ${username}...`); + // TODO: call backend API for authentication +});