Hugging Face's logo

Spaces:
dlovejoy84
/
sf-c11
Running

App Files Community
dlovejoy84 commited on
Commit
3ec3f8e
·
1 Parent(s): 10d9616

Add 3 files

Browse files
Files changed (3) hide show
  1. index.html +1 -19
  2. main.js +93 -0
  3. style.css +11 -25
index.html CHANGED
@@ -1,19 +1 @@
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><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Starfleet Interactive Guide</title></head><body><header><h1>Starfleet Interactive Guide</h1></header><div x-data="get started with Alpine.js"></div></body></html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
main.js ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const app = {
2
+ buttonclick() {
3
+ document.querySelector('div.prose').innerHTML = `
4
+ <article class="prose">
5
+ <header>
6
+ <h1>Welcome to Starfleet</h1>
7
+ <p>This interactive guide will help you become a Starfleet officer.</p>
8
+ </header>
9
+ <section>
10
+ <h2>Mission</h2>
11
+ <p>Our mission is to explore strange new worlds, seek out new life and new civilizations, and boldly go where no one has gone before.</p>
12
+ <button class="btn bg-green-300" @click="nextStep">Continue</button>
13
+ </section>
14
+ </article>
15
+ `
16
+ },
17
+ nextStep(event) {
18
+ document.querySelector('div.prose').innerHTML = `
19
+ <article class="prose">
20
+ <header>
21
+ <h1>Introduction</h1>
22
+ <p>Congratulations! You have successfully launched an interactive guide to Starfleet.</p>
23
+ </header>
24
+ <section>
25
+ <h2>Getting Started</h2>
26
+ <p>As a new officer, you will have a series of training exercises to complete. For each exercise, you will receive a task description and a set of tools to complete the assignment. The training exercises will help you develop the skills you need to be a successful Starfleet officer.</p>
27
+ <button class="btn bg-green-300" @click="nextStep2">Continue</button>
28
+ </section>
29
+ </article>
30
+ `
31
+ },
32
+ nextStep2() {
33
+ document.querySelector('div.prose').innerHTML = `
34
+ <article class="prose">
35
+ <header>
36
+ <h1>Exercise 1</h1>
37
+ <p>Your first exercise is to complete a simple math formula. Good luck!</p>
38
+ </header>
39
+ <section>
40
+ <h2>Task</h2>
41
+ <p>Complete the following math equation: 10x + 5 = y</p>
42
+ <input type="text" id="answer" placeholder="Enter your answer here" />
43
+ <button class="btn bg-green-300" @click="nextStep3">Continue</button>
44
+ </section>
45
+ </article>
46
+ `
47
+ },
48
+ nextStep3() {
49
+ document.querySelector('div.prose').innerHTML = `
50
+ <article class="prose">
51
+ <header>
52
+ <h1>Congratulations!</h1>
53
+ <p>You have completed your first exercise. Keep up the good work!</p>
54
+ </header>
55
+ <section>
56
+ <h2>Next Steps</h2>
57
+ <p>You will now move on to your next assignment. Good luck!</p>
58
+ <button class="btn bg-green-300" @click="nextStep4">Continue</button>
59
+ </section>
60
+ </article>
61
+ `
62
+ },
63
+ nextStep4() {
64
+ document.querySelector('div.prose').innerHTML = `
65
+ <article class="prose">
66
+ <header>
67
+ <h1>The Next Steps</h1>
68
+ <p>You will now move on to your next assignment. Good luck!</p>
69
+ </header>
70
+ <section>
71
+ <h2>Task</h2>
72
+ <p>Your next exercise is to find the missing variable in the following equation: 10x + 5 = (10 * y) + 5</p>
73
+ <input type="text" id="answer" placeholder="Enter your answer here" />
74
+ <button class="btn bg-green-300" @click="nextStep5">Continue</button>
75
+ </section>
76
+ </article>
77
+ `
78
+ },
79
+ nextStep5() {
80
+ document.querySelector('div.prose').innerHTML = `
81
+ <article class="prose">
82
+ <header>
83
+ <h1>Congratulations!</h1>
84
+ <p>You have completed your next exercise. Keep up the good work!</p>
85
+ </header>
86
+ <section>
87
+ <h2>The End</h2>
88
+ <p>You have completed all of the training exercises. Keep up the good work and never stop learning!</p>
89
+ </section>
90
+ </article>
91
+ `
92
+ },
93
+ }
style.css CHANGED
@@ -1,28 +1,14 @@
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
+ @import url("@import url('https://fonts.googleapis.com/css?family=Roboto');
 
 
 
 
 
 
 
 
2
 
3
+ button {
4
+ background-color: #4CAF50;
5
+ color: white;
6
+ padding: 10px 20px;
7
+ border: none;
8
+ border-radius: 5px;
9
+ cursor: pointer;
10
  }
11
 
12
+ button:hover {
13
+ background-color: #45a049;
14
+ }