Upload folder using huggingface_hub

assets/css/styles.css

@@ -0,0 +1,496 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Work Sans', sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f8f4f0;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Header Styles */
+header {
+    background-color: #fff;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+}
+
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 0;
+}
+
+.logo h1 {
+    font-family: 'Space Mono', monospace;
+    font-size: 1.8rem;
+    color: #2c2c2c;
+}
+
+.logo span {
+    color: #8b5a2b;
+}
+
+.nav-links {
+    display: flex;
+    list-style: none;
+}
+
+.nav-links li {
+    margin-left: 30px;
+}
+
+.nav-links a {
+    text-decoration: none;
+    color: #555;
+    font-weight: 600;
+    transition: color 0.3s;
+}
+
+.nav-links a:hover {
+    color: #8b5a2b;
+}
+
+.hamburger {
+    display: none;
+    cursor: pointer;
+    font-size: 1.5rem;
+}
+
+/* Hero Section */
+.hero {
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
+                url('assets/images/hero-bg.jpg');
+    background-size: cover;
+    background-position: center;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: #fff;
+    margin-top: 80px;
+}
+
+.hero-content h2 {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    font-family: 'Space Mono', monospace;
+}
+
+.hero-content p {
+    font-size: 1.2rem;
+    max-width: 600px;
+    margin: 0 auto 30px;
+}
+
+/* Buttons */
+.btn-primary {
+    display: inline-block;
+    background-color: #8b5a2b;
+    color: #fff;
+    padding: 15px 30px;
+    border-radius: 30px;
+    text-decoration: none;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all 0.3s ease;
+    border: none;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+.btn-primary:hover {
+    background-color: #6b4423;
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Section Titles */
+.section-title {
+    text-align: center;
+    font-family: 'Space Mono', monospace;
+    font-size: 2.2rem;
+    margin: 50px 0 30px;
+    color: #2c2c2c;
+    position: relative;
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background-color: #8b5a2b;
+}
+
+/* Menu Section */
+.menu-section {
+    padding: 80px 0;
+}
+
+.menu-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 30px;
+    margin-top: 40px;
+}
+
+.menu-item {
+    background: #fff;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+    text-align: center;
+}
+
+.menu-item:hover {
+    transform: translateY(-10px);
+}
+
+.menu-item img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+}
+
+.menu-item h3 {
+    font-family: 'Space Mono', monospace;
+    padding: 20px 15px 10px;
+    color: #2c2c2c;
+}
+
+.menu-item p {
+    padding: 0 15px 20px;
+    color: #666;
+}
+
+.price {
+    display: block;
+    font-weight: 700;
+    font-size: 1.3rem;
+    color: #8b5a2b;
+    padding: 0 15px 20px;
+}
+
+/* About Section */
+.about-section {
+    padding: 80px 0;
+    background-color: #fff;
+}
+
+.about-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 50px;
+    align-items: center;
+}
+
+.about-text h2 {
+    text-align: left;
+    margin: 0 0 30px;
+}
+
+.about-text p {
+    margin-bottom: 20px;
+    font-size: 1.1rem;
+}
+
+.features {
+    list-style: none;
+    margin-top: 30px;
+}
+
+.features li {
+    padding: 10px 0;
+    font-size: 1.1rem;
+}
+
+.features i {
+    color: #8b5a2b;
+    margin-right: 10px;
+    width: 20px;
+    text-align: center;
+}
+
+.about-image img {
+    width: 100%;
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+/* Contact Section */
+.contact-section {
+    padding: 80px 0;
+}
+
+.contact-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 50px;
+    margin-top: 40px;
+}
+
+.contact-info h3 {
+    font-family: 'Space Mono', monospace;
+    margin-bottom: 20px;
+    color: #2c2c2c;
+}
+
+.contact-info p {
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+}
+
+.contact-info i {
+    color: #8b5a2b;
+    margin-right: 10px;
+    width: 20px;
+}
+
+.contact-form h3 {
+    font-family: 'Space Mono', monospace;
+    margin-bottom: 20px;
+    color: #2c2c2c;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-family: 'Work Sans', sans-serif;
+    font-size: 1rem;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #8b5a2b;
+}
+
+/* Footer */
+footer {
+    background-color: #2c2c2c;
+    color: #fff;
+    padding: 50px 0 20px;
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 30px;
+    margin-bottom: 40px;
+}
+
+.footer-logo h2 {
+    font-family: 'Space Mono', monospace;
+    font-size: 1.8rem;
+    margin-bottom: 10px;
+    color: #fff;
+}
+
+.footer-logo span {
+    color: #d4a76a;
+}
+
+.footer-logo p {
+    color: #aaa;
+}
+
+.footer-links {
+    display: flex;
+    flex-direction: column;
+}
+
+.footer-links a {
+    color: #ddd;
+    text-decoration: none;
+    margin-bottom: 15px;
+    transition: color 0.3s;
+}
+
+.footer-links a:hover {
+    color: #d4a76a;
+}
+
+.social-links {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.social-links a {
+    color: #fff;
+    margin-left: 20px;
+    font-size: 1.5rem;
+    transition: color 0.3s;
+}
+
+.social-links a:hover {
+    color: #d4a76a;
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: 20px;
+    border-top: 1px solid #444;
+    color: #aaa;
+}
+
+.footer-bottom i {
+    color: #e74c3c;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .navbar {
+        flex-wrap: wrap;
+    }
+    
+    .hamburger {
+        display: block;
+    }
+    
+    .nav-links {
+        position: fixed;
+        top: 80px;
+        left: -100%;
+        width: 100%;
+        height: calc(100vh - 80px);
+        background-color: #fff;
+        flex-direction: column;
+        align-items: center;
+        transition: 0.3s;
+        padding-top: 50px;
+    }
+    
+    .nav-links.active {
+        left: 0;
+    }
+    
+    .nav-links li {
+        margin: 15px 0;
+    }
+    
+    .hero-content h2 {
+        font-size: 2rem;
+    }
+    
+    .hero-content p {
+        font-size: 1rem;
+    }
+    
+    .about-content,
+    .contact-content {
+        grid-template-columns: 1fr;
+    }
+    
+    .footer-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+    
+    .social-links {
+        justify-content: center;
+    }
+    
+    .social-links a {
+        margin: 0 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero-content h2 {
+        font-size: 1.8rem;
+    }
+    
+    .section-title {
+        font-size: 1.8rem;
+    }
+    
+    .menu-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Additional styles for better visuals */
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+h1, h2, h3, h4 {
+    font-family: 'Space Mono', monospace;
+    color: #2c2c2c;
+}
+
+p {
+    color: #555;
+}
+
+/* Animation for form submission */
+.form-success {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    text-align: center;
+    margin-bottom: 20px;
+    display: none;
+}
+
+.form-error {
+    background-color: #f44336;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    text-align: center;
+    margin-bottom: 20px;
+    display: none;
+}
+
+/* Scroll behavior */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Button focus style */
+.btn-primary:focus {
+    outline: 2px solid #d4a76a;
+    outline-offset: 2px;
+}
+
+/* Form validation styles */
+.form-group input:invalid,
+.form-group select:invalid {
+    border-color: #f44336;
+}
+
+.form-group input:valid,
+.form-group select:valid {
+    border-color: #4CAF50;
+}

assets/js/script.js

@@ -0,0 +1,121 @@
+// Mobile Navigation Toggle
+const hamburger = document.querySelector('.hamburger');
+const navLinks = document.querySelector('.nav-links');
+
+hamburger.addEventListener('click', () => {
+    navLinks.classList.toggle('active');
+});
+
+// Close mobile menu when clicking a link
+document.querySelectorAll('.nav-links a').forEach(link => {
+    link.addEventListener('click', () => {
+        navLinks.classList.remove('active');
+    });
+});
+
+// Form Submission Handling
+const coffeeForm = document.getElementById('coffeeForm');
+
+coffeeForm.addEventListener('submit', function(e) {
+    e.preventDefault();
+    
+    // Get form values
+    const name = document.getElementById('name').value;
+    const email = document.getElementById('email').value;
+    const coffee = document.getElementById('coffee').value;
+    
+    // Simple validation
+    if(name && email && coffee) {
+        // Create success message
+        const successMsg = document.createElement('div');
+        successMsg.className = 'form-success';
+        successMsg.textContent = `Thanks ${name}! Your order for ${coffee} has been placed. We'll send confirmation to ${email}.`;
+        
+        // Insert before form
+        this.parentNode.insertBefore(successMsg, this);
+        successMsg.style.display = 'block';
+        
+        // Reset form
+        this.reset();
+        
+        // Remove message after 5 seconds
+        setTimeout(() => {
+            successMsg.remove();
+        }, 5000);
+    } else {
+        // Create error message
+        const errorMsg = document.createElement('div');
+        errorMsg.className = 'form-error';
+        errorMsg.textContent = 'Please fill in all required fields.';
+        
+        // Insert before form
+        this.parentNode.insertBefore(errorMsg, this);
+        errorMsg.style.display = 'block';
+        
+        // Remove message after 3 seconds
+        setTimeout(() => {
+            errorMsg.remove();
+        }, 3000);
+    }
+});
+
+// Scroll animation for sections
+const sections = document.querySelectorAll('section');
+
+const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1
+};
+
+const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+        if(entry.isIntersecting) {
+            entry.target.classList.add('visible');
+            observer.unobserve(entry.target);
+        }
+    });
+}, observerOptions);
+
+sections.forEach(section => {
+    observer.observe(section);
+});
+
+// Add visible class for initial load
+document.getElementById('home').classList.add('visible');
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        
+        const targetId = this.getAttribute('href');
+        if(targetId === '#') return;
+        
+        const targetElement = document.querySelector(targetId);
+        if(targetElement) {
+            window.scrollTo({
+                top: targetElement.offsetTop - 80,
+                behavior: 'smooth'
+            });
+        }
+    });
+});
+
+// Add animation classes to sections
+document.addEventListener('DOMContentLoaded', function() {
+    const style = document.createElement('style');
+    style.textContent = `
+        section {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.6s ease, transform 0.6s ease;
+        }
+        
+        section.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    `;
+    document.head.appendChild(style);
+});

index.html

@@ -1,19 +1,168 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Anycoder Coffee - Premium specialty coffee for developers and coding enthusiasts">
+    <meta name="keywords" content="coffee, specialty coffee, developer coffee, coding fuel, caffeine">
+    <title>Anycoder Coffee | Premium Coding Fuel</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+    <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=Space+Mono:wght@400;700&family=Work+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <header>
+        <div class="container">
+            <nav class="navbar">
+                <div class="logo">
+                    <h1>Anycoder<span>Coffee</span></h1>
+                </div>
+                <ul class="nav-links">
+                    <li><a href="#home">Home</a></li>
+                    <li><a href="#menu">Menu</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                </ul>
+                <div class="hamburger">
+                    <i class="fas fa-bars"></i>
+                </div>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <section id="home" class="hero">
+            <div class="container">
+                <div class="hero-content">
+                    <h2>Fuel Your Code With The Perfect Blend</h2>
+                    <p>Premium specialty coffee crafted for developers who demand excellence in every line they write.</p>
+                    <div class="hero-video-container">
+                        <video controls autoplay muted loop playsinline style="max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; display: block;" onloadstart="this.style.backgroundColor='#f0f0f0'" onerror="this.style.display='none'; console.error('Video failed to load')"><source src="https://huggingface.co/datasets/akhaliq/anycoder-media/resolve/main/video/20250825_191454_448cf5e9_text_to_video_result.mp4" type="video/mp4" /><p style="text-align: center; color: #666;">Your browser does not support the video tag.</p></video>
+                    </div>
+                    <a href="#menu" class="btn-primary">Explore Our Menu</a>
+                </div>
+            </div>
+        </section>
+
+        <section id="menu" class="menu-section">
+            <div class="container">
+                <h2 class="section-title">Our Coffee Menu</h2>
+                <div class="menu-grid">
+                    <div class="menu-item">
+                        <img src="assets/images/espresso.jpg" alt="Espresso">
+                        <h3>Binary Espresso</h3>
+                        <p>Strong and bold - just like your code. A single shot to jumpstart your development day.</p>
+                        <span class="price">$3.50</span>
+                    </div>
+                    <div class="menu-item">
+                        <img src="assets/images/cappuccino.jpg" alt="Cappuccino">
+                        <h3>Code Cappuccino</h3>
+                        <p>Perfectly balanced with layers as clean as your CSS. Frothy goodness for your front-end projects.</p>
+                        <span class="price">$4.75</span>
+                    </div>
+                    <div class="menu-item">
+                        <img src="assets/images/latte.jpg" alt="Latte">
+                        <h3>Logic Latte</h3>
+                        <p>Smooth and creamy with a caffeine kick to power through complex algorithms.</p>
+                        <span class="price">$5.25</span>
+                    </div>
+                    <div class="menu-item">
+                        <img src="assets/images/cold-brew.jpg" alt="Cold Brew">
+                        <h3>Debug Cold Brew</h3>
+                        <p>Slow brewed to perfection. Cool, calm, and collected for those late-night debugging sessions.</p>
+                        <span class="price">$4.95</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="about" class="about-section">
+            <div class="container">
+                <div class="about-content">
+                    <div class="about-text">
+                        <h2 class="section-title">Why Anycoder Coffee?</h2>
+                        <p>We understand that great code requires great coffee. Our beans are ethically sourced from coding-friendly farms where developers grow the best beans while perfecting their algorithms.</p>
+                        <p>Each blend is specifically crafted to enhance focus, boost creativity, and provide the sustained energy needed for long coding sessions without the jitters.</p>
+                        <ul class="features">
+                            <li><i class="fas fa-code"></i> Developer-approved roasts</li>
+                            <li><i class="fas fa-mug-hot"></i> Sustainably sourced beans</li>
+                            <li><i class="fas fa-brain"></i> Enhanced cognitive focus</li>
+                            <li><i class="fas fa-moon"></i> Perfect for night owls</li>
+                        </ul>
+                    </div>
+                    <div class="about-image">
+                        <img src="assets/images/coffee-shop.jpg" alt="Anycoder Coffee Shop">
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="contact" class="contact-section">
+            <div class="container">
+                <h2 class="section-title">Contact Us</h2>
+                <div class="contact-content">
+                    <div class="contact-info">
+                        <h3>Visit Our Shop</h3>
+                        <p><i class="fas fa-map-marker-alt"></i> 1010 Binary Lane, Codeville</p>
+                        <p><i class="fas fa-clock"></i> Open 24/7 for developers</p>
+                        <p><i class="fas fa-phone"></i> (101) 010-1010</p>
+                        <p><i class="fas fa-envelope"></i> code@anycoder.coffee</p>
+                    </div>
+                    <form class="contact-form" id="coffeeForm">
+                        <h3>Order Your Blend</h3>
+                        <div class="form-group">
+                            <input type="text" id="name" name="name" placeholder="Your Name" required>
+                        </div>
+                        <div class="form-group">
+                            <input type="email" id="email" name="email" placeholder="Your Email" required>
+                        </div>
+                        <div class="form-group">
+                            <select id="coffee" name="coffee" required>
+                                <option value="" disabled selected>Select Your Coffee</option>
+                                <option value="espresso">Binary Espresso</option>
+                                <option value="cappuccino">Code Cappuccino</option>
+                                <option value="latte">Logic Latte</option>
+                                <option value="coldbrew">Debug Cold Brew</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <textarea id="message" name="message" placeholder="Special requests or coding jokes..." rows="4"></textarea>
+                        </div>
+                        <button type="submit" class="btn-primary">Place Order</button>
+                    </form>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <h2>Anycoder<span>Coffee</span></h2>
+                    <p>Fueling developers since 2023</p>
+                </div>
+                <div class="footer-links">
+                    <a href="#home">Home</a>
+                    <a href="#menu">Menu</a>
+                    <a href="#about">About</a>
+                    <a href="#contact">Contact</a>
+                </div>
+                <div class="social-links">
+                    <a href="#"><i class="fab fa-github"></i></a>
+                    <a href="#"><i class="fab fa-twitter"></i></a>
+                    <a href="#"><i class="fab fa-instagram"></i></a>
+                    <a href="#"><i class="fab fa-linkedin"></i></a>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2023 Anycoder Coffee. All rights reserved. Crafted with <i class="fas fa-heart"></i> for developers.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="assets/js/script.js"></script>
+</body>
+</html>