|
|
<!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> |
|
|
|
|
|
.toc-link.visited { |
|
|
color: #9ca3af; |
|
|
text-decoration: line-through; |
|
|
} |
|
|
|
|
|
|
|
|
html { |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 4px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
.current-section { |
|
|
border-left: 3px solid #3b82f6; |
|
|
background-color: #eff6ff; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans flex h-screen overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<main id="content" class="flex-1 overflow-y-auto p-8 bg-white"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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": "[email protected]", |
|
|
"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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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() { |
|
|
|
|
|
const tocLinks = document.querySelectorAll('.toc-link'); |
|
|
const contentSections = document.querySelectorAll('section[id], article[id]'); |
|
|
|
|
|
|
|
|
const visitedSections = JSON.parse(localStorage.getItem('visitedSections')) || []; |
|
|
|
|
|
|
|
|
visitedSections.forEach(sectionId => { |
|
|
const link = document.querySelector(`.toc-link[href="#${sectionId}"]`); |
|
|
if (link) { |
|
|
link.classList.add('visited'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
const sectionId = entry.target.id; |
|
|
|
|
|
|
|
|
if (!visitedSections.includes(sectionId)) { |
|
|
visitedSections.push(sectionId); |
|
|
localStorage.setItem('visitedSections', JSON.stringify(visitedSections)); |
|
|
|
|
|
|
|
|
const link = document.querySelector(`.toc-link[href="#${sectionId}"]`); |
|
|
if (link) { |
|
|
link.classList.add('visited'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
tocLinks.forEach(link => { |
|
|
link.parentElement.classList.remove('current-section'); |
|
|
if (link.getAttribute('href') === `#${sectionId}`) { |
|
|
link.parentElement.classList.add('current-section'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.5 }); |
|
|
|
|
|
|
|
|
contentSections.forEach(section => { |
|
|
observer.observe(section); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
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'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const faqButtons = document.querySelectorAll('#faq button'); |
|
|
faqButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const answer = button.nextElementSibling; |
|
|
answer.classList.toggle('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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' }); |
|
|
|
|
|
|
|
|
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> |
