Hugging Face's logo

Spaces:
ipepe
/
moderndocswithvisitindicator
Running

App Files Community
ipepe commited on
Commit
2de75c7
·
verified ·
1 Parent(s): 71dfbca

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +356 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Moderndocswithvisitindicator
3
- emoji: 🚀
4
- colorFrom: pink
5
- colorTo: purple
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: moderndocswithvisitindicator
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,356 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Documentation Portal</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for visited links */
11
+ .toc-link.visited {
12
+ color: #9ca3af;
13
+ text-decoration: line-through;
14
+ }
15
+
16
+ /* Smooth scrolling */
17
+ html {
18
+ scroll-behavior: smooth;
19
+ }
20
+
21
+ /* Custom scrollbar */
22
+ ::-webkit-scrollbar {
23
+ width: 8px;
24
+ }
25
+ ::-webkit-scrollbar-track {
26
+ background: #f1f1f1;
27
+ }
28
+ ::-webkit-scrollbar-thumb {
29
+ background: #888;
30
+ border-radius: 4px;
31
+ }
32
+ ::-webkit-scrollbar-thumb:hover {
33
+ background: #555;
34
+ }
35
+
36
+ /* Highlight current section */
37
+ .current-section {
38
+ border-left: 3px solid #3b82f6;
39
+ background-color: #eff6ff;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50 font-sans flex h-screen overflow-hidden">
44
+ <!-- Sidebar -->
45
+ <div class="w-64 bg-white border-r border-gray-200 flex flex-col h-full">
46
+ <div class="p-4 border-b border-gray-200">
47
+ <h1 class="text-xl font-bold text-gray-800 flex items-center">
48
+ <i class="fas fa-book mr-2 text-blue-500"></i>
49
+ Docs Portal
50
+ </h1>
51
+ </div>
52
+
53
+ <!-- Search -->
54
+ <div class="p-4 border-b border-gray-200">
55
+ <div class="relative">
56
+ <input type="text" id="searchInput" placeholder="Search documentation..."
57
+ class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
58
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Table of Contents -->
63
+ <div class="flex-1 overflow-y-auto">
64
+ <nav class="p-4">
65
+ <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Table of Contents</h2>
66
+ <ul id="tocList" class="space-y-1">
67
+ <li><a href="#introduction" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">Introduction</a></li>
68
+ <li>
69
+ <a href="#getting-started" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">Getting Started</a>
70
+ <ul class="ml-4 mt-1 space-y-1">
71
+ <li><a href="#installation" class="toc-link block py-1 px-3 rounded hover:bg-gray-100 text-gray-700">Installation</a></li>
72
+ <li><a href="#configuration" class="toc-link block py-1 px-3 rounded hover:bg-gray-100 text-gray-700">Configuration</a></li>
73
+ </ul>
74
+ </li>
75
+ <li><a href="#authentication" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">Authentication</a></li>
76
+ <li>
77
+ <a href="#api-reference" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">API Reference</a>
78
+ <ul class="ml-4 mt-1 space-y-1">
79
+ <li><a href="#users-api" class="toc-link block py-1 px-3 rounded hover:bg-gray-100 text-gray-700">Users API</a></li>
80
+ <li><a href="#products-api" class="toc-link block py-1 px-3 rounded hover:bg-gray-100 text-gray-700">Products API</a></li>
81
+ <li><a href="#orders-api" class="toc-link block py-1 px-3 rounded hover:bg-gray-100 text-gray-700">Orders API</a></li>
82
+ </ul>
83
+ </li>
84
+ <li><a href="#troubleshooting" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">Troubleshooting</a></li>
85
+ <li><a href="#faq" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">FAQ</a></li>
86
+ <li><a href="#contact" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">Contact Support</a></li>
87
+ </ul>
88
+ </nav>
89
+ </div>
90
+
91
+ <div class="p-4 border-t border-gray-200 text-sm text-gray-500">
92
+ <p>© 2023 Docs Portal</p>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Main Content -->
97
+ <div class="flex-1 flex flex-col overflow-hidden">
98
+ <!-- Top Bar -->
99
+ <header class="bg-white border-b border-gray-200 p-4 flex justify-between items-center">
100
+ <div class="flex items-center">
101
+ <button id="sidebarToggle" class="md:hidden mr-4 text-gray-500 hover:text-gray-700">
102
+ <i class="fas fa-bars text-xl"></i>
103
+ </button>
104
+ <h2 class="text-lg font-semibold text-gray-800">Documentation</h2>
105
+ </div>
106
+ <div class="flex items-center space-x-4">
107
+ <div class="relative hidden md:block">
108
+ <input type="text" placeholder="Search..."
109
+ class="w-64 pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
110
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
111
+ </div>
112
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200">
113
+ <i class="fas fa-user mr-2"></i>Sign In
114
+ </button>
115
+ </div>
116
+ </header>
117
+
118
+ <!-- Content Area -->
119
+ <main id="content" class="flex-1 overflow-y-auto p-8 bg-white">
120
+ <div class="max-w-4xl mx-auto">
121
+ <!-- Introduction -->
122
+ <section id="introduction" class="mb-12">
123
+ <h1 class="text-3xl font-bold text-gray-800 mb-6">Introduction</h1>
124
+ <p class="text-gray-700 mb-4">Welcome to our comprehensive documentation portal. Here you'll find everything you need to integrate with our platform and make the most of our services.</p>
125
+ <p class="text-gray-700 mb-4">This documentation is designed to guide you through all aspects of our product, from initial setup to advanced features.</p>
126
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
127
+ <p class="text-blue-700"><i class="fas fa-info-circle mr-2"></i> <strong>Pro Tip:</strong> Use the search bar to quickly find what you're looking for.</p>
128
+ </div>
129
+ </section>
130
+
131
+ <!-- Getting Started -->
132
+ <section id="getting-started" class="mb-12">
133
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Getting Started</h2>
134
+ <p class="text-gray-700 mb-4">This section will help you set up your environment and make your first API call.</p>
135
+
136
+ <article id="installation" class="mb-8">
137
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Installation</h3>
138
+ <p class="text-gray-700 mb-4">To install our SDK, run the following command in your terminal:</p>
139
+ <div class="bg-gray-800 text-gray-100 p-4 rounded-lg mb-4">
140
+ <code class="font-mono">npm install our-sdk</code>
141
+ </div>
142
+ <p class="text-gray-700 mb-4">Or if you're using Yarn:</p>
143
+ <div class="bg-gray-800 text-gray-100 p-4 rounded-lg mb-4">
144
+ <code class="font-mono">yarn add our-sdk</code>
145
+ </div>
146
+ </article>
147
+
148
+ <article id="configuration" class="mb-8">
149
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Configuration</h3>
150
+ <p class="text-gray-700 mb-4">After installation, you'll need to configure the SDK with your API key:</p>
151
+ <div class="bg-gray-800 text-gray-100 p-4 rounded-lg mb-4">
152
+ <pre class="font-mono"><code>import SDK from 'our-sdk';
153
+
154
+ const client = new SDK({
155
+ apiKey: 'your-api-key-here',
156
+ environment: 'production'
157
+ });</code></pre>
158
+ </div>
159
+ </article>
160
+ </section>
161
+
162
+ <!-- Authentication -->
163
+ <section id="authentication" class="mb-12">
164
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Authentication</h2>
165
+ <p class="text-gray-700 mb-4">Our API uses OAuth 2.0 for authentication. You'll need to obtain an access token before making requests.</p>
166
+ <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-4">
167
+ <p class="text-yellow-700"><i class="fas fa-exclamation-triangle mr-2"></i> <strong>Important:</strong> Keep your API keys secure and never expose them in client-side code.</p>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- API Reference -->
172
+ <section id="api-reference" class="mb-12">
173
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">API Reference</h2>
174
+ <p class="text-gray-700 mb-4">Detailed documentation for all available API endpoints.</p>
175
+
176
+ <article id="users-api" class="mb-8">
177
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Users API</h3>
178
+ <p class="text-gray-700 mb-4">Endpoints for managing user accounts.</p>
179
+ <div class="border border-gray-200 rounded-lg overflow-hidden mb-4">
180
+ <div class="bg-gray-100 px-4 py-2 border-b border-gray-200">
181
+ <span class="font-mono font-semibold">GET</span> <span class="font-mono">/api/v1/users</span>
182
+ </div>
183
+ <div class="p-4">
184
+ <p class="text-gray-700 mb-2">Returns a list of all users in your organization.</p>
185
+ <div class="bg-gray-800 text-gray-100 p-4 rounded-lg mb-2">
186
+ <pre class="font-mono"><code>{
187
+ "users": [
188
+ {
189
+ "id": "usr_123",
190
+ "name": "John Doe",
191
+ "email": "john@example.com",
192
+ "created_at": "2023-01-01T00:00:00Z"
193
+ }
194
+ ]
195
+ }</code></pre>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </article>
200
+
201
+ <article id="products-api" class="mb-8">
202
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Products API</h3>
203
+ <p class="text-gray-700 mb-4">Endpoints for managing products in your catalog.</p>
204
+ </article>
205
+
206
+ <article id="orders-api" class="mb-8">
207
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Orders API</h3>
208
+ <p class="text-gray-700 mb-4">Endpoints for managing customer orders.</p>
209
+ </article>
210
+ </section>
211
+
212
+ <!-- Troubleshooting -->
213
+ <section id="troubleshooting" class="mb-12">
214
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Troubleshooting</h2>
215
+ <p class="text-gray-700 mb-4">Common issues and how to resolve them.</p>
216
+ </section>
217
+
218
+ <!-- FAQ -->
219
+ <section id="faq" class="mb-12">
220
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Frequently Asked Questions</h2>
221
+ <div class="space-y-4">
222
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
223
+ <button class="w-full text-left px-4 py-3 bg-gray-50 hover:bg-gray-100 font-medium">
224
+ How do I reset my API key?
225
+ </button>
226
+ <div class="p-4 border-t border-gray-200 hidden">
227
+ <p class="text-gray-700">You can reset your API key from the dashboard under Settings > API Keys.</p>
228
+ </div>
229
+ </div>
230
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
231
+ <button class="w-full text-left px-4 py-3 bg-gray-50 hover:bg-gray-100 font-medium">
232
+ What are the rate limits?
233
+ </button>
234
+ <div class="p-4 border-t border-gray-200 hidden">
235
+ <p class="text-gray-700">Our API has a rate limit of 100 requests per minute per API key.</p>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Contact -->
242
+ <section id="contact" class="mb-12">
243
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Contact Support</h2>
244
+ <p class="text-gray-700 mb-4">Need help? Contact our support team.</p>
245
+ </section>
246
+ </div>
247
+ </main>
248
+ </div>
249
+
250
+ <script>
251
+ document.addEventListener('DOMContentLoaded', function() {
252
+ // Track visited sections
253
+ const tocLinks = document.querySelectorAll('.toc-link');
254
+ const contentSections = document.querySelectorAll('section[id], article[id]');
255
+
256
+ // Initialize visited sections from localStorage
257
+ const visitedSections = JSON.parse(localStorage.getItem('visitedSections')) || [];
258
+
259
+ // Mark visited sections
260
+ visitedSections.forEach(sectionId => {
261
+ const link = document.querySelector(`.toc-link[href="#${sectionId}"]`);
262
+ if (link) {
263
+ link.classList.add('visited');
264
+ }
265
+ });
266
+
267
+ // Intersection Observer to track visible sections
268
+ const observer = new IntersectionObserver((entries) => {
269
+ entries.forEach(entry => {
270
+ if (entry.isIntersecting) {
271
+ const sectionId = entry.target.id;
272
+
273
+ // Add to visited sections if not already there
274
+ if (!visitedSections.includes(sectionId)) {
275
+ visitedSections.push(sectionId);
276
+ localStorage.setItem('visitedSections', JSON.stringify(visitedSections));
277
+
278
+ // Update the TOC link
279
+ const link = document.querySelector(`.toc-link[href="#${sectionId}"]`);
280
+ if (link) {
281
+ link.classList.add('visited');
282
+ }
283
+ }
284
+
285
+ // Highlight current section in TOC
286
+ tocLinks.forEach(link => {
287
+ link.parentElement.classList.remove('current-section');
288
+ if (link.getAttribute('href') === `#${sectionId}`) {
289
+ link.parentElement.classList.add('current-section');
290
+ }
291
+ });
292
+ }
293
+ });
294
+ }, { threshold: 0.5 });
295
+
296
+ // Observe all content sections
297
+ contentSections.forEach(section => {
298
+ observer.observe(section);
299
+ });
300
+
301
+ // Toggle sidebar on mobile
302
+ const sidebarToggle = document.getElementById('sidebarToggle');
303
+ const sidebar = document.querySelector('div.w-64');
304
+
305
+ sidebarToggle.addEventListener('click', () => {
306
+ sidebar.classList.toggle('hidden');
307
+ sidebar.classList.toggle('absolute');
308
+ sidebar.classList.toggle('z-50');
309
+ sidebar.classList.toggle('md:relative');
310
+ });
311
+
312
+ // Search functionality
313
+ const searchInput = document.getElementById('searchInput');
314
+ searchInput.addEventListener('input', (e) => {
315
+ const searchTerm = e.target.value.toLowerCase();
316
+
317
+ tocLinks.forEach(link => {
318
+ const text = link.textContent.toLowerCase();
319
+ const parentLi = link.closest('li');
320
+
321
+ if (text.includes(searchTerm)) {
322
+ parentLi.style.display = 'block';
323
+ } else {
324
+ parentLi.style.display = 'none';
325
+ }
326
+ });
327
+ });
328
+
329
+ // FAQ accordion
330
+ const faqButtons = document.querySelectorAll('#faq button');
331
+ faqButtons.forEach(button => {
332
+ button.addEventListener('click', () => {
333
+ const answer = button.nextElementSibling;
334
+ answer.classList.toggle('hidden');
335
+ });
336
+ });
337
+
338
+ // Smooth scroll for TOC links
339
+ tocLinks.forEach(link => {
340
+ link.addEventListener('click', (e) => {
341
+ e.preventDefault();
342
+ const targetId = link.getAttribute('href');
343
+ const targetElement = document.querySelector(targetId);
344
+
345
+ if (targetElement) {
346
+ targetElement.scrollIntoView({ behavior: 'smooth' });
347
+
348
+ // Update URL without page reload
349
+ history.pushState(null, null, targetId);
350
+ }
351
+ });
352
+ });
353
+ });
354
+ </script>
355
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ipepe/moderndocswithvisitindicator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
356
+ </html>