Hugging Face's logo

Spaces:
akhaliq
/
coffee-animate-example
Running

App Files Community
akhaliq HF Staff commited on
Commit
e73702a
·
verified ·
1 Parent(s): 89c781c

Upload folder using huggingface_hub

Browse files
Files changed (3) hide show
  1. assets/css/styles.css +141 -0
  2. assets/js/script.js +11 -0
  3. index.html +82 -19
assets/css/styles.css ADDED
@@ -0,0 +1,141 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: Arial, sans-serif;
9
+ line-height: 1.6;
10
+ color: #333;
11
+ background: #f4f4f4;
12
+ }
13
+
14
+ .container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 0 1rem;
18
+ }
19
+
20
+ header {
21
+ background: #8B4513;
22
+ color: #fff;
23
+ padding: 1rem 0;
24
+ position: sticky;
25
+ top: 0;
26
+ z-index: 100;
27
+ }
28
+
29
+ header .container {
30
+ display: flex;
31
+ flex-direction: column;
32
+ align-items: center;
33
+ gap: 1rem;
34
+ }
35
+
36
+ .logo {
37
+ font-size: 2rem;
38
+ color: #D2B48C;
39
+ }
40
+
41
+ nav ul {
42
+ display: flex;
43
+ list-style: none;
44
+ gap: 2rem;
45
+ }
46
+
47
+ nav a {
48
+ color: #fff;
49
+ text-decoration: none;
50
+ font-weight: bold;
51
+ }
52
+
53
+ nav a:hover {
54
+ color: #D2B48C;
55
+ }
56
+
57
+ .built-with {
58
+ font-size: 0.8rem;
59
+ }
60
+
61
+ .built-with a {
62
+ color: #D2B48C;
63
+ text-decoration: none;
64
+ }
65
+
66
+ .hero {
67
+ background: #D2B48C;
68
+ padding: 4rem 0;
69
+ text-align: center;
70
+ }
71
+
72
+ .hero h2 {
73
+ font-size: 2.5rem;
74
+ margin-bottom: 1rem;
75
+ }
76
+
77
+ .menu {
78
+ padding: 3rem 0;
79
+ }
80
+
81
+ .menu h2 {
82
+ text-align: center;
83
+ margin-bottom: 2rem;
84
+ color: #8B4513;
85
+ }
86
+
87
+ .menu-grid {
88
+ display: grid;
89
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
90
+ gap: 1rem;
91
+ }
92
+
93
+ .item {
94
+ background: #fff;
95
+ padding: 1rem;
96
+ text-align: center;
97
+ border-radius: 8px;
98
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
99
+ }
100
+
101
+ .item h3 {
102
+ color: #8B4513;
103
+ }
104
+
105
+ .about, .contact {
106
+ padding: 3rem 0;
107
+ background: #fff;
108
+ }
109
+
110
+ .about h2, .contact h2 {
111
+ text-align: center;
112
+ margin-bottom: 1rem;
113
+ color: #8B4513;
114
+ }
115
+
116
+ footer {
117
+ background: #8B4513;
118
+ color: #fff;
119
+ text-align: center;
120
+ padding: 1rem 0;
121
+ }
122
+
123
+ @media (min-width: 768px) {
124
+ header .container {
125
+ flex-direction: row;
126
+ justify-content: space-between;
127
+ }
128
+
129
+ nav ul {
130
+ gap: 3rem;
131
+ }
132
+
133
+ .hero h2 {
134
+ font-size: 3rem;
135
+ }
136
+
137
+ .menu-grid {
138
+ grid-template-columns: repeat(4, 1fr);
139
+ gap: 2rem;
140
+ }
141
+ }
assets/js/script.js ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ const navLinks = document.querySelectorAll('nav a');
3
+ navLinks.forEach(link => {
4
+ link.addEventListener('click', function(e) {
5
+ e.preventDefault();
6
+ const targetId = this.getAttribute('href').substring(1);
7
+ const targetSection = document.getElementById(targetId);
8
+ targetSection.scrollIntoView({ behavior: 'smooth' });
9
+ });
10
+ });
11
+ });
index.html CHANGED
@@ -1,19 +1,82 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Welcome to our cozy coffee shop. Enjoy premium brews and pastries in a relaxing atmosphere.">
7
+ <title>Cozy Coffee Shop</title>
8
+ <link rel="stylesheet" href="assets/css/styles.css">
9
+ </head>
10
+ <body>
11
+ <header>
12
+ <div class="container">
13
+ <h1 class="logo">Cozy Coffee</h1>
14
+ <nav>
15
+ <ul>
16
+ <li><a href="#home">Home</a></li>
17
+ <li><a href="#menu">Menu</a></li>
18
+ <li><a href="#about">About</a></li>
19
+ <li><a href="#contact">Contact</a></li>
20
+ </ul>
21
+ </nav>
22
+ <p class="built-with">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
23
+ </div>
24
+ </header>
25
+
26
+ <main>
27
+ <section id="home" class="hero">
28
+ <div class="container">
29
+ <h2>Welcome to Cozy Coffee</h2>
30
+ <video controls autoplay muted loop playsinline style="max-width:100%; height:auto; border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,0.1)" onerror="this.style.display='none'; console.error('Animation video failed to load')"><source src="https://huggingface.co/datasets/akhaliq/anycoder-media/resolve/main/video/20250921_201704_4ede355b_wan_animate_result.mp4" type="video/mp4" /><p style="text-align: center; color: #666;">Your browser does not support the video tag.</p></video>
31
+ <p>Indulge in our expertly crafted coffees and fresh pastries. A perfect spot to unwind.</p>
32
+ </div>
33
+ </section>
34
+
35
+ <section id="menu" class="menu">
36
+ <div class="container">
37
+ <h2>Our Menu</h2>
38
+ <div class="menu-grid">
39
+ <div class="item">
40
+ <h3>Espresso</h3>
41
+ <p>$3.50</p>
42
+ </div>
43
+ <div class="item">
44
+ <h3>Latte</h3>
45
+ <p>$4.50</p>
46
+ </div>
47
+ <div class="item">
48
+ <h3>Cappuccino</h3>
49
+ <p>$4.00</p>
50
+ </div>
51
+ <div class="item">
52
+ <h3>Croissant</h3>
53
+ <p>$2.50</p>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </section>
58
+
59
+ <section id="about" class="about">
60
+ <div class="container">
61
+ <h2>About Us</h2>
62
+ <p>Established in 2020, Cozy Coffee is your neighborhood haven for quality coffee and friendly vibes. We source beans from local roasters.</p>
63
+ </div>
64
+ </section>
65
+
66
+ <section id="contact" class="contact">
67
+ <div class="container">
68
+ <h2>Contact</h2>
69
+ <p>123 Brew St, Cityville | (555) 123-4567 | info@cozycoffee.com</p>
70
+ </div>
71
+ </section>
72
+ </main>
73
+
74
+ <footer>
75
+ <div class="container">
76
+ <p>&copy; 2023 Cozy Coffee. All rights reserved.</p>
77
+ </div>
78
+ </footer>
79
+
80
+ <script src="assets/js/script.js"></script>
81
+ </body>
82
+ </html>