Hugging Face's logo

Spaces:
Neomyst
/
sf-7ba
Running

App Files Community
Neomyst commited on
Commit
ccd75ba
·
1 Parent(s): c82fd2c

Add 4 files

Browse files
Files changed (3) hide show
  1. index.html +40 -18
  2. main.js +10 -0
  3. style.css +78 -17
index.html CHANGED
@@ -1,19 +1,41 @@
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
  <html>
2
+ <head>
3
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
4
+ <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
5
+ <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
6
+ <script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script>
7
+ <script type="module" src="main.js"></script>
8
+ <title>Cookie Recipe</title>
9
+ </head>
10
+ <body>
11
+ <!-- Declare a new Alpine component and its data -->
12
+ <div x-data="cookieRecipe">
13
+ <!-- Display ingredients and instructions -->
14
+ <div class="container">
15
+ <h1>Cookie Recipe</h1>
16
+ <ul>
17
+ <li x-text="ingredients[0]"></li>
18
+ <li x-text="ingredients[1]"></li>
19
+ <li x-text="ingredients[2]"></li>
20
+ <li x-text="ingredients[3]"></li>
21
+ <li x-text="ingredients[4]"></li>
22
+ </ul>
23
+ <ol>
24
+ <li x-text="methodology[0]"></li>
25
+ <li x-text="methodology[1]"></li>
26
+ <li x-text="methodology[2]"></li>
27
+ <li x-text="methodology[3]"></li>
28
+ <li x-text="methodology[4]"></li>
29
+ <li x-text="methodology[5]"></li>
30
+ </ol>
31
+ </div>
32
+ <!-- Calculate progress and display progress bar -->
33
+ <div class="progressBox">
34
+ <progress class="progressbar" x-transition="progress.track" x-text="progress.value"></progress>
35
+ <div class="progress-value" x-text="progress.value"></div>
36
+ </div>
37
+ <!-- Completion message -->
38
+ <div class="completed-message" x-text="completed ? 'Congratulations, you have completed the cookie recipe!' : ''"></div>
39
+ </div>
40
+ </body>
41
+ </html>
main.js ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ document.once('DOMContentLoaded', () => {
2
+ // Declare a new Alpine component and its data
3
+ Alpine.data('cookieRecipe', {
4
+ ingredients: ['flour', 'butter', 'sugar', 'eggs', 'vanilla'],
5
+ methodology: ['Preheat oven to 350°F.', 'Mix dry ingredients in a bowl.', 'Add water and mix until dough forms.', 'Roll out dough on a floured surface.', 'Cut into desired shapes.', 'Bake for 10-15 minutes.'],
6
+ instructionimages: ['path/to/image1', 'path/to/image2', 'path/to/image3', 'path/to/image4', 'path/to/image5', 'path/to/image6'],
7
+ progress: 0,
8
+ completed: false,
9
+ });
10
+ })
style.css CHANGED
@@ -1,28 +1,89 @@
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
+ font-family: sans-serif;
3
+ background-color: #f0f0f0;
4
  }
5
 
6
  h1 {
7
+ font-size: 36px;
 
8
  }
9
 
10
+ ul, ol {
11
+ padding: 0;
12
+ margin: 0;
13
+ list-style: none;
 
14
  }
15
 
16
+ li {
17
+ padding: 10px;
18
+ margin: 10px;
19
+ background-color: #fff;
20
+ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
21
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
22
  }
23
 
24
+ .container {
25
+ background-color: #f0f0f0;
26
+ padding: 20px;
27
+ margin: 20px;
28
  }
29
+
30
+ .progressbox {
31
+ background-color: #fff;
32
+ margin: 20px;
33
+ padding: 20px;
34
+ }
35
+
36
+ .progressBar {
37
+ height: 100%;
38
+ background-color: #f0f0f0;
39
+ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
40
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
41
+ }
42
+
43
+ .progressBox {
44
+ position: absolute;
45
+ top: 50%;
46
+ left: 50%;
47
+ transform: translate(-50%, -50%);
48
+ width: 200px;
49
+ height: 200px;
50
+ background-color: #fff;
51
+ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
52
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
53
+ }
54
+
55
+ .progressbar {
56
+ position: relative;
57
+ width: 200px;
58
+ height: 20px;
59
+ background-color: #fff;
60
+ border-radius: 5px;
61
+ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
62
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
63
+ }
64
+
65
+ .progress-value {
66
+ position: absolute;
67
+ top: 50%;
68
+ left: 50%;
69
+ transform: translate(-50%, -50%);
70
+ font-size: 16px;
71
+ font-weight: bold;
72
+ color: #fff;
73
+ background-color: #f0f0f0;
74
+ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
75
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
76
+ }
77
+
78
+ .completed-message {
79
+ position: absolute;
80
+ top: 50%;
81
+ left: 50%;
82
+ transform: translate(-50%, -50%);
83
+ font-size: 32px;
84
+ font-weight: bold;
85
+ color: #fff;
86
+ background-color: #009900;
87
+ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
88
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
89
+ }