Hugging Face's logo

Spaces:
ipepe
/
moderndocswithvisitindicator
Running

App Files Community
moderndocswithvisitindicator / index.html
ipepe's picture
ipepe
Add 2 files
2de75c7 verified
raw
history blame contribute delete
19.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Documentation Portal</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 /* Custom CSS for visited links */
 .toc-link.visited {
 color: #9ca3af;
 text-decoration: line-through;
 }
/* Smooth scrolling */
 html {
 scroll-behavior: smooth;
 }
/* Custom scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 }
 ::-webkit-scrollbar-track {
 background: #f1f1f1;
 }
 ::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
 background: #555;
 }
/* Highlight current section */
 .current-section {
 border-left: 3px solid #3b82f6;
 background-color: #eff6ff;
 }
 </style>
</head>
<body class="bg-gray-50 font-sans flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div class="w-64 bg-white border-r border-gray-200 flex flex-col h-full">
 <div class="p-4 border-b border-gray-200">
 <h1 class="text-xl font-bold text-gray-800 flex items-center">
 <i class="fas fa-book mr-2 text-blue-500"></i>
 Docs Portal
 </h1>
 </div>
<!-- Search -->
 <div class="p-4 border-b border-gray-200">
 <div class="relative">
 <input type="text" id="searchInput" placeholder="Search documentation..."
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">
 <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 </div>
 </div>
<!-- Table of Contents -->
 <div class="flex-1 overflow-y-auto">
 <nav class="p-4">
 <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Table of Contents</h2>
 <ul id="tocList" class="space-y-1">
 <li><a href="#introduction" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">Introduction</a></li>
 <li>
 <a href="#getting-started" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">Getting Started</a>
 <ul class="ml-4 mt-1 space-y-1">
 <li><a href="#installation" class="toc-link block py-1 px-3 rounded hover:bg-gray-100 text-gray-700">Installation</a></li>
 <li><a href="#configuration" class="toc-link block py-1 px-3 rounded hover:bg-gray-100 text-gray-700">Configuration</a></li>
 </ul>
 </li>
 <li><a href="#authentication" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">Authentication</a></li>
 <li>
 <a href="#api-reference" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">API Reference</a>
 <ul class="ml-4 mt-1 space-y-1">
 <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>
 <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>
 <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>
 </ul>
 </li>
 <li><a href="#troubleshooting" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">Troubleshooting</a></li>
 <li><a href="#faq" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">FAQ</a></li>
 <li><a href="#contact" class="toc-link block py-2 px-3 rounded hover:bg-gray-100 text-gray-700">Contact Support</a></li>
 </ul>
 </nav>
 </div>
<div class="p-4 border-t border-gray-200 text-sm text-gray-500">
 <p>© 2023 Docs Portal</p>
 </div>
 </div>
<!-- Main Content -->
 <div class="flex-1 flex flex-col overflow-hidden">
 <!-- Top Bar -->
 <header class="bg-white border-b border-gray-200 p-4 flex justify-between items-center">
 <div class="flex items-center">
 <button id="sidebarToggle" class="md:hidden mr-4 text-gray-500 hover:text-gray-700">
 <i class="fas fa-bars text-xl"></i>
 </button>
 <h2 class="text-lg font-semibold text-gray-800">Documentation</h2>
 </div>
 <div class="flex items-center space-x-4">
 <div class="relative hidden md:block">
 <input type="text" placeholder="Search..."
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">
 <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 </div>
 <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200">
 <i class="fas fa-user mr-2"></i>Sign In
 </button>
 </div>
 </header>
<!-- Content Area -->
 <main id="content" class="flex-1 overflow-y-auto p-8 bg-white">
 <div class="max-w-4xl mx-auto">
 <!-- Introduction -->
 <section id="introduction" class="mb-12">
 <h1 class="text-3xl font-bold text-gray-800 mb-6">Introduction</h1>
 <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>
 <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>
 <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
 <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>
 </div>
 </section>
<!-- Getting Started -->
 <section id="getting-started" class="mb-12">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Getting Started</h2>
 <p class="text-gray-700 mb-4">This section will help you set up your environment and make your first API call.</p>
<article id="installation" class="mb-8">
 <h3 class="text-xl font-semibold text-gray-800 mb-4">Installation</h3>
 <p class="text-gray-700 mb-4">To install our SDK, run the following command in your terminal:</p>
 <div class="bg-gray-800 text-gray-100 p-4 rounded-lg mb-4">
 <code class="font-mono">npm install our-sdk</code>
 </div>
 <p class="text-gray-700 mb-4">Or if you're using Yarn:</p>
 <div class="bg-gray-800 text-gray-100 p-4 rounded-lg mb-4">
 <code class="font-mono">yarn add our-sdk</code>
 </div>
 </article>
<article id="configuration" class="mb-8">
 <h3 class="text-xl font-semibold text-gray-800 mb-4">Configuration</h3>
 <p class="text-gray-700 mb-4">After installation, you'll need to configure the SDK with your API key:</p>
 <div class="bg-gray-800 text-gray-100 p-4 rounded-lg mb-4">
 <pre class="font-mono"><code>import SDK from 'our-sdk';
const client = new SDK({
 apiKey: 'your-api-key-here',
 environment: 'production'
});</code></pre>
 </div>
 </article>
 </section>
<!-- Authentication -->
 <section id="authentication" class="mb-12">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Authentication</h2>
 <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>
 <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-4">
 <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>
 </div>
 </section>
<!-- API Reference -->
 <section id="api-reference" class="mb-12">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">API Reference</h2>
 <p class="text-gray-700 mb-4">Detailed documentation for all available API endpoints.</p>
<article id="users-api" class="mb-8">
 <h3 class="text-xl font-semibold text-gray-800 mb-4">Users API</h3>
 <p class="text-gray-700 mb-4">Endpoints for managing user accounts.</p>
 <div class="border border-gray-200 rounded-lg overflow-hidden mb-4">
 <div class="bg-gray-100 px-4 py-2 border-b border-gray-200">
 <span class="font-mono font-semibold">GET</span> <span class="font-mono">/api/v1/users</span>
 </div>
 <div class="p-4">
 <p class="text-gray-700 mb-2">Returns a list of all users in your organization.</p>
 <div class="bg-gray-800 text-gray-100 p-4 rounded-lg mb-2">
 <pre class="font-mono"><code>{
 "users": [
 {
 "id": "usr_123",
 "name": "John Doe",
 "email": "john@example.com",
 "created_at": "2023-01-01T00:00:00Z"
 }
 ]
}</code></pre>
 </div>
 </div>
 </div>
 </article>
<article id="products-api" class="mb-8">
 <h3 class="text-xl font-semibold text-gray-800 mb-4">Products API</h3>
 <p class="text-gray-700 mb-4">Endpoints for managing products in your catalog.</p>
 </article>
<article id="orders-api" class="mb-8">
 <h3 class="text-xl font-semibold text-gray-800 mb-4">Orders API</h3>
 <p class="text-gray-700 mb-4">Endpoints for managing customer orders.</p>
 </article>
 </section>
<!-- Troubleshooting -->
 <section id="troubleshooting" class="mb-12">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Troubleshooting</h2>
 <p class="text-gray-700 mb-4">Common issues and how to resolve them.</p>
 </section>
<!-- FAQ -->
 <section id="faq" class="mb-12">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Frequently Asked Questions</h2>
 <div class="space-y-4">
 <div class="border border-gray-200 rounded-lg overflow-hidden">
 <button class="w-full text-left px-4 py-3 bg-gray-50 hover:bg-gray-100 font-medium">
 How do I reset my API key?
 </button>
 <div class="p-4 border-t border-gray-200 hidden">
 <p class="text-gray-700">You can reset your API key from the dashboard under Settings > API Keys.</p>
 </div>
 </div>
 <div class="border border-gray-200 rounded-lg overflow-hidden">
 <button class="w-full text-left px-4 py-3 bg-gray-50 hover:bg-gray-100 font-medium">
 What are the rate limits?
 </button>
 <div class="p-4 border-t border-gray-200 hidden">
 <p class="text-gray-700">Our API has a rate limit of 100 requests per minute per API key.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Contact -->
 <section id="contact" class="mb-12">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Contact Support</h2>
 <p class="text-gray-700 mb-4">Need help? Contact our support team.</p>
 </section>
 </div>
 </main>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // Track visited sections
 const tocLinks = document.querySelectorAll('.toc-link');
 const contentSections = document.querySelectorAll('section[id], article[id]');
// Initialize visited sections from localStorage
 const visitedSections = JSON.parse(localStorage.getItem('visitedSections')) || [];
// Mark visited sections
 visitedSections.forEach(sectionId => {
 const link = document.querySelector(`.toc-link[href="#${sectionId}"]`);
 if (link) {
 link.classList.add('visited');
 }
 });
// Intersection Observer to track visible sections
 const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 const sectionId = entry.target.id;
// Add to visited sections if not already there
 if (!visitedSections.includes(sectionId)) {
 visitedSections.push(sectionId);
 localStorage.setItem('visitedSections', JSON.stringify(visitedSections));
// Update the TOC link
 const link = document.querySelector(`.toc-link[href="#${sectionId}"]`);
 if (link) {
 link.classList.add('visited');
 }
 }
// Highlight current section in TOC
 tocLinks.forEach(link => {
 link.parentElement.classList.remove('current-section');
 if (link.getAttribute('href') === `#${sectionId}`) {
 link.parentElement.classList.add('current-section');
 }
 });
 }
 });
 }, { threshold: 0.5 });
// Observe all content sections
 contentSections.forEach(section => {
 observer.observe(section);
 });
// Toggle sidebar on mobile
 const sidebarToggle = document.getElementById('sidebarToggle');
 const sidebar = document.querySelector('div.w-64');
sidebarToggle.addEventListener('click', () => {
 sidebar.classList.toggle('hidden');
 sidebar.classList.toggle('absolute');
 sidebar.classList.toggle('z-50');
 sidebar.classList.toggle('md:relative');
 });
// Search functionality
 const searchInput = document.getElementById('searchInput');
 searchInput.addEventListener('input', (e) => {
 const searchTerm = e.target.value.toLowerCase();
tocLinks.forEach(link => {
 const text = link.textContent.toLowerCase();
 const parentLi = link.closest('li');
if (text.includes(searchTerm)) {
 parentLi.style.display = 'block';
 } else {
 parentLi.style.display = 'none';
 }
 });
 });
// FAQ accordion
 const faqButtons = document.querySelectorAll('#faq button');
 faqButtons.forEach(button => {
 button.addEventListener('click', () => {
 const answer = button.nextElementSibling;
 answer.classList.toggle('hidden');
 });
 });
// Smooth scroll for TOC links
 tocLinks.forEach(link => {
 link.addEventListener('click', (e) => {
 e.preventDefault();
 const targetId = link.getAttribute('href');
 const targetElement = document.querySelector(targetId);
if (targetElement) {
 targetElement.scrollIntoView({ behavior: 'smooth' });
// Update URL without page reload
 history.pushState(null, null, targetId);
 }
 });
 });
 });
 </script>
<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>
</html>