Hugging Face's logo

Spaces:
akhaliq
/
anycoder-coffee-video
Running

App Files Community
anycoder-coffee-video
File size: 9,028 Bytes 
d4ea921
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
 
<!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>