Hugging Face's logo

Spaces:
dlovejoy84
/
sf-146
Running

App Files Community
dlovejoy84 commited on
Commit
404b47d
•
1 Parent(s): 65cba70

Add 4 files

Browse files
Files changed (4) hide show
  1. app.js +10 -0
  2. index.html +19 -18
  3. main.js +58 -0
  4. style.css +36 -17
app.js ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ /* global threejs */
2
+
3
+ const $ = alpinejs.transform();
4
+ const $alpine = alpinejs.transform();
5
+
6
+ $.axios.get('https://my-json-server.typicode.com/raphaelqe/starfleet-api/career-paths?q=an').then((response) => {
7
+ $alpine.result = response.data;
8
+ }).catch((error) => {
9
+ console.log(error);
10
+ });
index.html CHANGED
@@ -1,19 +1,20 @@
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/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/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><script defer src="app.js"></script>
2
+ </head>
3
+ <body>
4
+ <div class="p-10 mb-10">
5
+ <div class="flow-root">
6
+ <div class="float-left">
7
+ <a href="index.html">Back to Home</a>
8
+ </div>
9
+ <div class="float-right">
10
+ <a href="career.html">Career Paths >></a>
11
+ </div>
 
 
 
 
 
12
  </div>
13
+ </div>
14
+ <div class="flex flex-col items-center p-20 bg-gradient-to-br from-yellow-300 via-yellow-200 to-yellow-50 h-screen">
15
+ <h1 class="text-5xl font-bold mb-5 text-yellow-900 mb-10">Welcome to Starfleet!</h1>
16
+ <p class="text-xl font-semibold text-yellow-700 mb-10">Explore our interactive guide to start your career in Starfleet.</p>
17
+ <button class="btn btn-lg btn-success mb-10">Get Started</button>
18
+ </div>
19
+ </body>
20
+ </html>
main.js ADDED
@@ -0,0 +1,58 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { effects } from 'alpinejs';
2
+ import { fadeIn, fadeOut } from 'daisyui/src/utils/animation.js';
3
+ import { conditionalCSS } from 'tailwindcss/types/styles.js';
4
+
5
+ effects.fadeIn = function(el, config) {
6
+ return fadeIn(el, config.speed, config.delay, config.easing);
7
+ };
8
+
9
+ effects.fadeOut = function(el, config) {
10
+ return fadeOut(el, config.speed, config.delay, config.easing);
11
+ };
12
+
13
+ conditionalCSS({
14
+ selector: '.fade-in',
15
+ condition: function(el) {
16
+ return el.animate === 'fade-in';
17
+ },
18
+ rul: function(el, config) {
19
+ return {
20
+ 'transition-delay': `${config.delay}ms`,
21
+ 'transition-duration': `${config.speed}ms`,
22
+ 'transition-timing-function': config.easing,
23
+ 'animation-duration': `${config.speed}ms`
24
+ };
25
+ }
26
+ });
27
+
28
+ conditionalCSS({
29
+ selector: '.fade-out',
30
+ condition: function(el) {
31
+ return el.animate === 'fade-out';
32
+ },
33
+ rul: function(el, config) {
34
+ return {
35
+ 'transition-delay': `${config.delay}ms`,
36
+ 'transition-duration': `${config.speed}ms`,
37
+ 'transition-timing-function': config.easing,
38
+ 'animation-duration': `${config.speed}ms`
39
+ };
40
+ }
41
+ });
42
+
43
+ export default function () {
44
+ if (this.dialog) {
45
+ // Close dialog
46
+ if (this.dialog.querySelector('button[type="reset"]')) {
47
+ this.dialog.querySelector('button[type="reset"]').addEventListener('click', () => {
48
+ this.close();
49
+ });
50
+ }
51
+ // Submit form
52
+ if (this.dialog.querySelector('button[type="submit"]')) {
53
+ this.dialog.querySelector('button[type="submit"]').addEventListener('click', () => {
54
+ this.close();
55
+ });
56
+ }
57
+ }
58
+ }
style.css CHANGED
@@ -1,28 +1,47 @@
 
 
 
 
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
+ * {
2
+ box-sizing: border-box;
3
+ }
4
+
5
  body {
6
+ font-family: 'Inter', sans-serif;
7
+ margin: 0;
8
+ color: #333;
9
+ background-color: #f0f5f7;
10
+ }
11
+
12
+ .button {
13
+ background-color: #4CAF50;
14
+ color: white;
15
+ padding: 10px 20px;
16
+ border: none;
17
+ border-radius: 5px;
18
+ cursor: pointer;
19
  }
20
 
21
+ .button:hover {
22
+ background-color: #3e8e41;
 
23
  }
24
 
25
+ .button:active {
26
+ background-color: #3e8e41;
27
+ transform: scale(0.95);
 
 
28
  }
29
 
30
  .card {
31
+ background-color: #f8f9fa;
32
+ border-radius: 8px;
33
+ box-shadow: 5px 5px 15px 0px rgb(0 0 0 / 20%);
 
 
34
  }
35
 
36
+ .slide-up-enter-active {
37
+ transition: all 0.3s ease-in-out;
38
  }
39
+
40
+ .slide-up-leave-active {
41
+ transition: all 0.3s ease-in-out;
42
+ }
43
+
44
+ .slide-up-enter, .slide-leave-to {
45
+ transform: translateY(20px);
46
+ opacity: 0;
47
+ }