Hugging Face's logo

Spaces:
Lordoflingus
/
deepsite-project
Running

App Files Community
Lordoflingus commited on
Commit
176a3a7
·
verified ·
1 Parent(s): 1f8c5c1

Options button, settings button, everything working correctly

Browse files
Files changed (1) hide show
  1. index.html +143 -11
index.html CHANGED
@@ -6,22 +6,154 @@
6
  <meta name="viewport" content="width=device-width" />
7
  <title>My static Space</title>
8
  <link rel="stylesheet" href="style.css" />
 
 
9
  </head>
10
- <body>
11
- <div class="card">
12
- <h1>Welcome to your static Space!</h1>
13
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
14
- <p>
15
- Also don't forget to check the
16
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
17
- </p>
18
- <button onclick="runCode()">Run Code</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </div>
20
-
21
  <script>
22
  function runCode() {
23
  alert("Code is running!");
24
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  </script>
26
- </body>
27
  </html>
 
6
  <meta name="viewport" content="width=device-width" />
7
  <title>My static Space</title>
8
  <link rel="stylesheet" href="style.css" />
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
  </head>
12
+ <body class="bg-gray-100 min-h-screen">
13
+ <header class="bg-white shadow-sm">
14
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
15
+ <div class="flex justify-between items-center py-4">
16
+ <h1 class="text-xl font-bold text-gray-900">My static Space</h1>
17
+ <div class="flex space-x-2">
18
+ <button id="options-btn" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
19
+ <i data-feather="sliders"></i>
20
+ </button>
21
+ <button id="settings-btn" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
22
+ <i data-feather="settings"></i>
23
+ </button>
24
+ </div>
25
+ </div>
26
+ </div>
27
+ </header>
28
+
29
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
30
+ <div class="bg-white rounded-lg shadow-sm p-6">
31
+ <h2 class="text-2xl font-bold text-gray-900 mb-4">Welcome to your static Space!</h2>
32
+ <p class="text-gray-600 mb-4">You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
33
+ <p class="text-gray-600 mb-6">
34
+ Also don't forget to check the
35
+ <a href="https://huggingface.co/docs/hub/spaces" target="_blank" class="text-blue-600 hover:text-blue-800">Spaces documentation</a>.
36
+ </p>
37
+ <button onclick="runCode()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
38
+ Run Code
39
+ </button>
40
+ </div>
41
+ </main>
42
+
43
+ <!-- Options Modal -->
44
+ <div id="options-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
45
+ <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
46
+ <div class="flex justify-between items-center mb-4">
47
+ <h3 class="text-lg font-semibold">Options</h3>
48
+ <button id="close-options" class="p-1 rounded-full hover:bg-gray-100">
49
+ <i data-feather="x"></i>
50
+ </button>
51
+ </div>
52
+ <div class="space-y-4">
53
+ <div>
54
+ <label class="block text-sm font-medium text-gray-700 mb-2">Theme</label>
55
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2">
56
+ <option>Light</option>
57
+ <option>Dark</option>
58
+ <option>Auto</option>
59
+ </select>
60
+ </div>
61
+ <div>
62
+ <label class="block text-sm font-medium text-gray-700 mb-2">Language</label>
63
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2">
64
+ <option>English</option>
65
+ <option>Spanish</option>
66
+ <option>French</option>
67
+ </select>
68
+ </div>
69
+ <button class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors">
70
+ Save Options
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Settings Modal -->
77
+ <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
78
+ <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
79
+ <div class="flex justify-between items-center mb-4">
80
+ <h3 class="text-lg font-semibold">Settings</h3>
81
+ <button id="close-settings" class="p-1 rounded-full hover:bg-gray-100">
82
+ <i data-feather="x"></i>
83
+ </button>
84
+ </div>
85
+ <div class="space-y-4">
86
+ <div>
87
+ <label class="flex items-center">
88
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
89
+ <span class="ml-2 text-sm text-gray-700">Enable notifications</span>
90
+ </label>
91
+ </div>
92
+ <div>
93
+ <label class="flex items-center">
94
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500" checked>
95
+ <span class="ml-2 text-sm text-gray-700">Auto-save changes</span>
96
+ </label>
97
+ </div>
98
+ <div>
99
+ <label class="block text-sm font-medium text-gray-700 mb-2">Refresh interval</label>
100
+ <input type="range" min="1" max="60" value="5" class="w-full">
101
+ </div>
102
+ <button class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors">
103
+ Save Settings
104
+ </button>
105
+ </div>
106
+ </div>
107
  </div>
 
108
  <script>
109
  function runCode() {
110
  alert("Code is running!");
111
  }
112
+
113
+ // Initialize feather icons
114
+ document.addEventListener('DOMContentLoaded', function() {
115
+ feather.replace();
116
+
117
+ // Options modal functionality
118
+ const optionsBtn = document.getElementById('options-btn');
119
+ const optionsModal = document.getElementById('options-modal');
120
+ const closeOptions = document.getElementById('close-options');
121
+
122
+ optionsBtn.addEventListener('click', function() {
123
+ optionsModal.classList.remove('hidden');
124
+ optionsModal.classList.add('flex');
125
+ });
126
+
127
+ closeOptions.addEventListener('click', function() {
128
+ optionsModal.classList.remove('flex');
129
+ optionsModal.classList.add('hidden');
130
+ });
131
+
132
+ // Settings modal functionality
133
+ const settingsBtn = document.getElementById('settings-btn');
134
+ const settingsModal = document.getElementById('settings-modal');
135
+ const closeSettings = document.getElementById('close-settings');
136
+
137
+ settingsBtn.addEventListener('click', function() {
138
+ settingsModal.classList.remove('hidden');
139
+ settingsModal.classList.add('flex');
140
+ });
141
+
142
+ closeSettings.addEventListener('click', function() {
143
+ settingsModal.classList.remove('flex');
144
+ settingsModal.classList.add('hidden');
145
+ });
146
+
147
+ // Close modals when clicking outside
148
+ [optionsModal, settingsModal].forEach(modal => {
149
+ modal.addEventListener('click', function(e) {
150
+ if (e.target === modal) {
151
+ modal.classList.remove('flex');
152
+ modal.classList.add('hidden');
153
+ }
154
+ });
155
+ });
156
+ });
157
  </script>
158
+ </body>
159
  </html>