body.html
Changed around line 1
+
+
+ 
+ MCQuiz
+
+
+
+
+
+
+
+
+
+
+
+
Test Your Minecraft Knowledge
+
Challenge yourself with fun Minecraft quizzes!
+
+
+
+
Quiz Categories
+
+
+ 
+
Blocks & Items
+
+
+ 
+
Mobs & Creatures
+
+
+ 
+
Crafting Recipes
+
+
+ 
+
Biomes & Structures
+
+
+
+
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://mcquiz.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Minecraft Quiz Adventure
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # 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.
script.js
Changed around line 1
+ 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();
style.css
Changed around line 1
+ :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;
+ }
+ }