anycoder-coffee-live / index.html
akhaliq's picture
akhaliq HF Staff
Upload folder using huggingface_hub
59f9cc6 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anycoder Coffee Shop</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
color: #333;
background-color: #f5f5f5;
line-height: 1.6;
}
header {
background-color: #5d4037;
color: white;
padding: 1rem;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.hero {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1554118811-1e0d582dbf1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}
.hero p {
font-size: 1.5rem;
max-width: 600px;
}
.menu-section {
padding: 3rem 1rem;
max-width: 1200px;
margin: 0 auto;
}
.menu-section h2 {
text-align: center;
margin-bottom: 2rem;
font-size: 2.5rem;
color: #5d4037;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.menu-item {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.menu-item:hover {
transform: translateY(-5px);
}
.menu-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.menu-content {
padding: 1.5rem;
}
.menu-content h3 {
margin-bottom: 0.5rem;
color: #5d4037;
}
.price {
color: #8d6e63;
font-weight: bold;
font-size: 1.2rem;
margin: 0.5rem 0;
}
.menu-content p {
color: #666;
font-size: 0.9rem;
}
footer {
background-color: #5d4037;
color: white;
text-align: center;
padding: 1.5rem;
margin-top: 2rem;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<header>
<h1>Anycoder Coffee Shop</h1>
</header>
<section class="hero">
<h1>Welcome to Anycoder Coffee Shop</h1>
<p>Where code meets caffeine. Perfect brew for programmers.</p>
<div style="max-width: 800px; width: 100%; margin-top: 20px;">
<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/20250824_213358_68abd385_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>
</section>
<section class="menu-section">
<h2>Our Menu</h2>
<div class="menu-grid">
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Espresso">
<div class="menu-content">
<h3>Espresso</h3>
<p>A strong shot of coffee to kickstart your coding session.</p>
<div class="price">$3.50</div>
</div>
</div>
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1533134486753-c833f0ed4866?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Latte">
<div class="menu-content">
<h3>Latte</h3>
<p>Smooth espresso with steamed milk for a gentle caffeine boost.</p>
<div class="price">$4.50</div>
</div>
</div>
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1562037372-9de9a79d0c57?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Cappuccino">
<div class="menu-content">
<h3>Cappuccino</h3>
<p>Equal parts espresso, steamed milk, and frothy foam.</p>
<div class="price">$4.00</div>
</div>
</div>
<div class="menu-item">
<img src="https://images.unsplash.com/photo-1525634873151-36d36ac3b9e3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Cold Brew">
<div class="menu-content">
<h3>Cold Brew</h3>
<p>Smooth, refreshing coffee steeped for hours, perfect for afternoon debugging.</p>
<div class="price">$5.00</div>
</div>
</div>
</div>
</section>
<footer>
<p>&copy; 2023 Anycoder Coffee Shop. All rights reserved.</p>
<p>123 Developer Street, Code City CC 10101 | (123) 456-7890</p>
</footer>
</body>
</html>