commit 40612e1c64c5a64b5b4acd02f661cc96516ac914
Author: root <root@hub.scroll.pub> Date: 2024-12-27 02:13:09 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..d0ca4a9 --- /dev/null +++ b/body.html @@ -0,0 +1,59 @@ +<header> + <nav class="main-nav"> + <a href="/" class="logo"> + <img src="/images/logo.png" alt="Minecraft Quiz Logo" width="50" height="50"> + <span>MCQuiz</span> + </a> + <div class="nav-links"> + <a href="/quizzes">Quizzes</a> + <a href="/leaderboard">Leaderboard</a> + <a href="/login" class="login-btn">Login</a> + </div> + <button class="mobile-menu" aria-label="Menu"> + <span></span> + <span></span> + <span></span> + </button> + </nav> +</header> + +<main> + <section class="hero"> + <h1>Test Your Minecraft Knowledge</h1> + <p>Challenge yourself with fun Minecraft quizzes!</p> + <a href="/quizzes" class="cta-button">Start Playing</a> + </section> + + <section class="categories"> + <h2>Quiz Categories</h2> + <div class="category-grid"> + <div class="category-card"> + <img src="/images/blocks.png" alt="Blocks" width="100" height="100"> + <h3>Blocks & Items</h3> + </div> + <div class="category-card"> + <img src="/images/mobs.png" alt="Mobs" width="100" height="100"> + <h3>Mobs & Creatures</h3> + </div> + <div class="category-card"> + <img src="/images/crafting.png" alt="Crafting" width="100" height="100"> + <h3>Crafting Recipes</h3> + </div> + <div class="category-card"> + <img src="/images/biomes.png" alt="Biomes" width="100" height="100"> + <h3>Biomes & Structures</h3> + </div> + </div> + </section> +</main> + +<footer> + <div class="footer-content"> + <p>Made with ❤️ for Minecraft fans</p> + <nav> + <a href="/about">About</a> + <a href="/contact">Contact</a> + <a href="/privacy">Privacy</a> + </nav> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..dac34b4 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://mcquiz.scroll.pub +metaTags +editButton /edit.html +title Minecraft Quiz Adventure +style.css +body.html +script.js diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..8793f8d --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# mcquiz.scroll.pub +Website generated by Claude from prompt: A quiz application in the theme of minecraft. I want a 4 pages, login/signup, search quiz with categories, quiz page, and leaderboard. I want to use Javascript with the MERN stack. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..815525f --- /dev/null +++ b/script.js @@ -0,0 +1,39 @@ +document.addEventListener('DOMContentLoaded', () => { + // Mobile menu toggle + const mobileMenu = document.querySelector('.mobile-menu'); + const navLinks = document.querySelector('.nav-links'); + + mobileMenu?.addEventListener('click', () => { + navLinks.classList.toggle('active'); + }); + + // Category card click handler + const categoryCards = document.querySelectorAll('.category-card'); + + categoryCards.forEach(card => { + card.addEventListener('click', () => { + const category = card.querySelector('h3').textContent; + window.location.href = `/quizzes?category=${encodeURIComponent(category)}`; + }); + }); + + // Add smooth scroll behavior + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); + }); +}); + +// Handle user authentication state +const checkAuth = () => { + const token = localStorage.getItem('mcquiz_token'); + if (token) { + document.querySelector('.login-btn').textContent = 'Profile'; + } +}; + +checkAuth(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..71d2f90 --- /dev/null +++ b/style.css @@ -0,0 +1,150 @@ +:root { + --primary: #2d9b4b; + --secondary: #825432; + --dark: #222; + --light: #f5f5f5; + --font-minecraft: 'MinecraftTen', system-ui, sans-serif; +} + +@font-face { + font-family: 'MinecraftTen'; + src: url('/fonts/MinecraftTen.woff2') format('woff2'); + font-display: swap; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: var(--font-minecraft); + line-height: 1.6; + color: var(--dark); + background: url('/images/dirt-bg.png') repeat; +} + +.main-nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + background: rgba(0,0,0,0.8); +} + +.logo { + display: flex; + align-items: center; + gap: 0.5rem; + text-decoration: none; + color: var(--light); +} + +.nav-links { + display: flex; + gap: 2rem; +} + +.nav-links a { + color: var(--light); + text-decoration: none; + padding: 0.5rem 1rem; + border-radius: 4px; + transition: background 0.3s ease; +} + +.nav-links a:hover { + background: var(--primary); +} + +.login-btn { + background: var(--primary); +} + +.hero { + text-align: center; + padding: 4rem 2rem; + background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), + url('/images/hero-bg.jpg') center/cover; + color: var(--light); +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 1rem; +} + +.cta-button { + display: inline-block; + padding: 1rem 2rem; + background: var(--primary); + color: var(--light); + text-decoration: none; + border-radius: 4px; + margin-top: 2rem; + transition: transform 0.3s ease; +} + +.cta-button:hover { + transform: translateY(-2px); +} + +.categories { + padding: 4rem 2rem; +} + +.category-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.category-card { + background: rgba(255,255,255,0.9); + padding: 2rem; + border-radius: 8px; + text-align: center; + transition: transform 0.3s ease; + cursor: pointer; +} + +.category-card:hover { + transform: translateY(-5px); +} + +footer { + background: var(--dark); + color: var(--light); + padding: 2rem; + margin-top: 4rem; +} + +.footer-content { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +@media (max-width: 768px) { + .nav-links { + display: none; + } + + .mobile-menu { + display: block; + } + + .hero h1 { + font-size: 2rem; + } + + .footer-content { + flex-direction: column; + gap: 1rem; + text-align: center; + } +}