Hugging Face's logo

Spaces:
elon-trump
/
sf-d8b
Running

App Files Community
elon-trump commited on
Commit
c58ca2a
·
verified ·
1 Parent(s): ca3c773

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +34 -19
  2. main.js +64 -0
index.html CHANGED
@@ -1,19 +1,34 @@
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>My NGO's Website | Child Education</title>
2
+ </head>
3
+ <body>
4
+ <header class="container flex flex-wrap justify-between items-center mx-auto px-6 py-3 mb-6 lg:px-0 lg:py-3">
5
+ <div class="logo flex items-center">
6
+ <h1 class="text-3xl font-bold text-gray-800 text-2xl"><a href="#">My NGO</a></h1>
7
+ <button id="burger" aria-label="Open menu">
8
+ <svg viewBox="0 0 100 80" width="28" height="28">
9
+ <rect width="70" height="8" x="15" y="35" fill="#FFF" />
10
+ <rect width="70" height="8" x="15" y="46" fill="#FFF" />
11
+ <rect width="70" height="8" x="15" y="57" fill="#FFF" />
12
+ </svg>
13
+ </button>
14
+ </div>
15
+ <nav>
16
+ <a href="#" class="btn btn-link capsule mr-2 border-r-5 border-black opacity-0 sm:opacity-100" :class="{ 'border-opacity-0': !active }">Home</a>
17
+ <a href="#" class="btn btn-link capsule mr-2 border-r-5 border-black opacity-0 sm:opacity-100" :class="{ 'border-opacity-0': !active }">About</a>
18
+ <a href="#" class="btn btn-link capsule mr-2 border-r-5 border-black opacity-0 sm:opacity-100" :class="{ 'border-opacity-0': !active }">Contact</a>
19
+ </nav>
20
+ </header>
21
+ <main role="main">
22
+ <section class="main container mx-auto max-w-2xl pt-24 pb-12 mt-8 lg:pt-32">
23
+ <h1 class="text-4xl font-bold text-center">Welcome to My NGO's Website</h1>
24
+ <p class="text-xl text-center">We are a non-profit organization dedicated to improving child education.</p>
25
+ </section>
26
+ </main>
27
+ <footer class="container mx-auto py-12 px-6 text-center lg:px-0">
28
+ <nav class="flex justify-between">
29
+ <a href="/" class="btn btn-link text-sm capitalize">Home</a>
30
+ <a href="#" class="btn btn-link text-sm capitalize">About</a>
31
+ <a href="#" class="btn btn-link text-sm capitalize">Contact</a>
32
+ </nav>
33
+ </footer>
34
+ </body></html>
main.js ADDED
@@ -0,0 +1,64 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import Alpine from 'alpinejs';
2
+ import DaisyUI from 'daisyui';
3
+ import Tailwind from 'tailwindcss/dist/forms';
4
+ import * as Three from 'three';
5
+
6
+ DaisyUI.use(Alpine);
7
+ Tailwind.use('typography');
8
+
9
+ Alpine.data({
10
+ open: false,
11
+ toggle() {
12
+ this.open = !this.open;
13
+ }
14
+ });
15
+
16
+ // Welcome animation
17
+ const camera = new Three.PerspectiveCamera(75, showcase.width / showcase.height, 0.1, 1000);
18
+ camera.position.set(0, 20, 7);
19
+ const scene = new Three.Scene();
20
+ const background = new Three.TextureLoader.load('https://source.unsplash.com/random');
21
+ scene.background = background;
22
+ background.minFilter = Three.LinearFilter;
23
+ const light = new Three.DirectionalLight(0xffffff, 1);
24
+ light.position.set(0, 0, 10);
25
+ scene.add(light);
26
+
27
+ const renderer = new Three.WebGLRenderer({ canvas: showcase });
28
+ renderer.setSize(showcase.getBoundingClientRect().width, showcase.getBoundingClientRect().height);
29
+ renderer.setClearColor(0xdddddd, 1.0);
30
+
31
+ const geometry = new Three.IcosahedronGeometry(1.5);
32
+ const material = new Three.MeshPhongMaterial({ color: 0x1E90FF, flatShading: true });
33
+ const mesh = new Three.Mesh(geometry, material);
34
+
35
+ function animate() {
36
+ requestAnimationFrame(animate);
37
+ renderer.render(scene, camera);
38
+ mesh.rotation.x += 0.01;
39
+ mesh.rotation.y += 0.02;
40
+ mesh.rotation.z += 0.03;
41
+ }
42
+ animate();
43
+
44
+ // Add animation
45
+ const showcase = document.getElementById('showcase');
46
+ const renderer = new Three.WebGLRenderer({ canvas: showcase });
47
+ const camera = new Three.PerspectiveCamera(75, showcase.width / showcase.height, 0.1, 1000);
48
+ camera.position.set(0, 20, 7);
49
+ const scene = new Three.Scene();
50
+
51
+ const geometry = new Three.BoxGeometry(3, 3, 3);
52
+ const material = new Three.MeshPhongMaterial({ color: 0x1E90FF, flatShading: true });
53
+ const cube = new Three.Mesh(geometry, material);
54
+ cube.position.set(0, 1.5, 0);
55
+ scene.add(cube);
56
+
57
+ const animate = () => {
58
+ requestAnimationFrame(animate);
59
+ renderer.render(scene, camera);
60
+ cube.rotation.x += 0.01;
61
+ cube.rotation.y += 0.02;
62
+ cube.rotation.z += 0.03;
63
+ };
64
+ animate();