Hugging Face's logo

Spaces:
madstuntman11
/
helloworldapp
Running

App Files Community
madstuntman11 commited on
Commit
60d2d3a
·
verified ·
1 Parent(s): 4bb0686

make simple heelo world

Browse files
Files changed (5) hide show
  1. README.md +8 -5
  2. components/footer.js +59 -0
  3. components/navbar.js +61 -0
  4. index.html +2 -19
  5. script.js +26 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Helloworldapp
3
- emoji: 🏆
4
- colorFrom: red
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: HelloWorldApp 🌍
3
+ colorFrom: pink
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,59 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background: rgba(255, 255, 255, 0.9);
8
+ backdrop-filter: blur(10px);
9
+ padding: 2rem;
10
+ text-align: center;
11
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
12
+ margin-top: auto;
13
+ }
14
+ .footer-content {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ }
18
+ .footer-links {
19
+ display: flex;
20
+ justify-content: center;
21
+ gap: 2rem;
22
+ margin-bottom: 1rem;
23
+ flex-wrap: wrap;
24
+ }
25
+ .footer-links a {
26
+ text-decoration: none;
27
+ color: #333;
28
+ font-weight: 500;
29
+ transition: color 0.3s ease;
30
+ }
31
+ .footer-links a:hover {
32
+ color: #667eea;
33
+ }
34
+ .copyright {
35
+ color: #666;
36
+ font-size: 0.9rem;
37
+ }
38
+ @media (max-width: 768px) {
39
+ .footer-links {
40
+ flex-direction: column;
41
+ gap: 1rem;
42
+ }
43
+ }
44
+ </style>
45
+ <footer>
46
+ <div class="footer-content">
47
+ <div class="footer-links">
48
+ <a href="#">Privacy Policy</a>
49
+ <a href="#">Terms of Service</a>
50
+ <a href="#">Contact Us</a>
51
+ <a href="#">About</a>
52
+ </div>
53
+ <p class="copyright">&copy; 2023 HelloWorldApp. All rights reserved. Made with ❤️</p>
54
+ </div>
55
+ </footer>
56
+ `;
57
+ }
58
+ }
59
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,61 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: rgba(255, 255, 255, 0.9);
8
+ backdrop-filter: blur(10px);
9
+ padding: 1rem 2rem;
10
+ display: flex;
11
+ justify-content: space-between;
12
+ align-items: center;
13
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
14
+ position: sticky;
15
+ top: 0;
16
+ z-index: 100;
17
+ }
18
+ .logo {
19
+ font-size: 1.5rem;
20
+ font-weight: bold;
21
+ background: linear-gradient(45deg, #667eea, #764ba2);
22
+ -webkit-background-clip: text;
23
+ -webkit-text-fill-color: transparent;
24
+ text-decoration: none;
25
+ }
26
+ .nav-links {
27
+ display: flex;
28
+ gap: 2rem;
29
+ }
30
+ .nav-links a {
31
+ text-decoration: none;
32
+ color: #333;
33
+ font-weight: 500;
34
+ transition: color 0.3s ease;
35
+ }
36
+ .nav-links a:hover {
37
+ color: #667eea;
38
+ }
39
+ @media (max-width: 768px) {
40
+ nav {
41
+ flex-direction: column;
42
+ gap: 1rem;
43
+ }
44
+ .nav-links {
45
+ flex-wrap: wrap;
46
+ justify-content: center;
47
+ }
48
+ }
49
+ </style>
50
+ <nav>
51
+ <a href="/" class="logo">HelloWorldApp 🌍</a>
52
+ <div class="nav-links">
53
+ <a href="/">Home</a>
54
+ <a href="#">About</a>
55
+ <a href="#">Contact</a>
56
+ </div>
57
+ </nav>
58
+ `;
59
+ }
60
+ }
61
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,2 @@
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
+
2
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
script.js ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main application script
2
+ console.log('HelloWorldApp loaded successfully! 🚀');
3
+
4
+ // Simple animation for the main container
5
+ document.addEventListener('DOMContentLoaded', () => {
6
+ const mainContainer = document.querySelector('main');
7
+ if (mainContainer) {
8
+ mainContainer.style.opacity = '0';
9
+ mainContainer.style.transform = 'translateY(20px)';
10
+
11
+ setTimeout(() => {
12
+ mainContainer.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
13
+ mainContainer.style.opacity = '1';
14
+ mainContainer.style.transform = 'translateY(0)';
15
+ }, 100);
16
+ }
17
+ });
18
+
19
+ // Service worker registration for PWA support
20
+ if ('serviceWorker' in navigator) {
21
+ window.addEventListener('load', () => {
22
+ navigator.serviceWorker.register('/sw.js')
23
+ .then(registration => console.log('ServiceWorker registered successfully'))
24
+ .catch(error => console.log('ServiceWorker registration failed:', error));
25
+ });
26
+ }