Spaces:
Running
Running
| ```html | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Documentation - Qur.li URL Shortener</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#06B6D4', | |
| dark: '#1E293B', | |
| light: '#F8FAFC', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F8FAFC; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #4F46E5, #06B6D4); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4F46E5, #06B6D4); | |
| } | |
| .sidebar-link { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-link:hover { | |
| color: #4F46E5; | |
| background-color: #F1F5F9; | |
| } | |
| .sidebar-link.active { | |
| color: #4F46E5; | |
| background-color: #E0E7FF; | |
| font-weight: 500; | |
| } | |
| .code-block { | |
| background-color: #1E293B; | |
| color: #E2E8F0; | |
| border-radius: 8px; | |
| padding: 16px; | |
| font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| pre { | |
| margin: 0; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| .copy-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .copy-btn:hover { | |
| background-color: #374151; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm py-4"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <a href="index.html" class="gradient-text text-2xl font-bold">Qur.li</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html" class="text-gray-600 hover:text-primary font-medium">Home</a> | |
| <a href="index.html#features" class="text-gray-600 hover:text-primary font-medium">Features</a> | |
| <a href="index.html#pricing" class="text-gray-600 hover:text-primary font-medium">Pricing</a> | |
| <a href="blog.html" class="text-gray-600 hover:text-primary font-medium">Blog</a> | |
| <a href="documentation.html" class="text-primary font-medium">Docs</a> | |
| <a href="support.html" class="text-gray-600 hover:text-primary font-medium">Support</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden px-4 py-2"> | |
| <div class="flex flex-col space-y-2"> | |
| <a href="index.html" class="text-gray-600 hover:text-primary font-medium">Home</a> | |
| <a href="index.html#features" class="text-gray-600 hover:text-primary font-medium">Features</a> | |
| <a href="index.html#pricing" class="text-gray-600 hover:text-primary font-medium">Pricing</a> | |
| <a href="blog.html" class="text-gray-600 hover:text-primary font-medium">Blog</a> | |
| <a href="documentation.html" class="text-primary font-medium">Docs</a> | |
| <a href="support.html" class="text-gray-600 hover:text-primary font-medium">Support</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Documentation Header --> | |
| <section class="py-12 bg-white"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Qur.li Documentation</h1> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Comprehensive guides and references for the Qur.li API, integrations, and advanced features.</p> | |
| <!-- Search Bar --> | |
| <div class="max-w-md mx-auto mt-8"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search documentation..." class="w-full px-4 py-3 pl-10 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Documentation Layout --> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="lg:flex gap-8"> | |
| <!-- Sidebar --> | |
| <div class="lg:w-1/4 mb-8 lg:mb-0"> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-8"> | |
| <h3 class="font-bold text-gray-900 mb-4">API Documentation</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#getting-started" class="sidebar-link active block py-2 px-3 rounded-lg">Getting Started</a></li> | |
| <li><a href="#authentication" class="sidebar-link block py-2 px-3 rounded-lg">Authentication</a></li> | |
| <li><a href="#endpoints" class="sidebar-link block py-2 px-3 rounded-lg">API Endpoints</a></li> | |
| <li><a href="#rate-limiting" class="sidebar-link block py-2 px-3 rounded-lg">Rate Limiting</a></li> | |
| <li><a href="#error-handling" class="sidebar-link block py-2 px-3 rounded-lg">Error Handling</a></li> | |
| </ul> | |
| <h3 class="font-bold text-gray-900 mt-6 mb-4">SDKs & Libraries</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#javascript" class="sidebar-link block py-2 px-3 rounded-lg">JavaScript</a></li> | |
| <li><a href="#python" class="sidebar-link block py-2 px-3 rounded-lg">Python</a></li> | |
| <li><a href="#php" class="sidebar-link block py-2 px-3 rounded-lg">PHP</a></li> | |
| <li><a href="#ruby" class="sidebar-link block py-2 px-3 rounded-lg">Ruby</a></li> | |
| </ul> | |
| <h3 class="font-bold text-gray-900 mt-6 mb-4">Integrations</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#wordpress" class="sidebar-link block py-2 px-3 rounded-lg">WordPress</a></li> | |
| <li><a href="#shopify" class="sidebar-link block py-2 px-3 rounded-lg">Shopify</a></li> | |
| <li><a href="#zapier" class="sidebar-link block py-2 px-3 rounded-lg">Zapier</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:w-3/4"> | |
| <!-- Getting Started --> | |
| <section id="getting-started" class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Getting Started with Qur.li API</h2> | |
| <p class="text-gray-600 mb-6">The Qur.li API allows you to programmatically create, manage, and track shortened URLs. This guide will help you get started with making your first API request.</p> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Prerequisites</h3> | |
| <ul class="list-disc pl-5 space-y-2 text-gray-600 mb-6"> | |
| <li>A Qur.li account (any plan)</li> | |
| <li>API access enabled (available on Pro and Business plans)</li> | |
| <li>Your API key from the dashboard</li> | |
| </ul> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Making Your First Request</h3> | |
| <p class="text-gray-600 mb-4">Here's an example of how to shorten a URL using cURL:</p> | |
| <div class="code-block relative mb-6"> | |
| <button class="copy-btn absolute top-2 right-2 px-3 py-1 bg-gray-700 text-white text-sm rounded-md"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| <pre>curl -X POST \ | |
| https://api.qur.li/v1/links \ | |
| -H 'Authorization: Bearer YOUR_API_KEY' \ | |
| -H 'Content-Type: application/json' \ | |
| -d '{ | |
| "long_url": "https://example.com/very-long-url", | |
| "custom_alias": "my-custom-link" | |
| }'</pre> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Response</h3> | |
| <div class="code-block mb-6"> | |
| <pre>{ | |
| "success": true, | |
| "data": { | |
| "short_url": "https://qur.li/my-custom-link", | |
| "long_url": "https://example.com/very-long-url", | |
| "alias": "my-custom-link", | |
| "clicks": 0, | |
| "created_at": "2023-10-15T10:30:00Z" | |
| } | |
| }</pre> | |
| </div> | |
| </section> | |
| <!-- Authentication --> | |
| <section id="authentication" class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">Authentication</h2> | |
| <p class="text-gray-600 mb-6">All API requests must include your API key in the Authorization header. You can find your API key in your account settings.</p> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Bearer Token Authentication</h3> | |
| <div class="code-block mb-6"> | |
| <pre>Authorization: Bearer YOUR_API_KEY</pre> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Getting Your API Key</h3> | |
| <ol class="list-decimal pl-5 space-y-2 text-gray-600 mb-6"> | |
| <li>Log in to your Qur.li account</li> | |
| <li>Go to Settings → API</li> | |
| <li>Click "Generate API Key"</li> | |
| <li>Copy your key and store it securely</li> | |
| </ol> | |
| <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-triangle text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-sm font-medium text-yellow-800">Important</h3> | |
| <div class="mt-2 text-sm text-yellow-700"> | |
| <p>Keep your API key secret. Do not share it in client-side code or public repositories.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- API Endpoints --> | |
| <section id="endpoints" class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-6">API Endpoints</h2> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Create Short Link</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">POST</span> | |
| <span class="ml-2 font-mono text-sm">/v1/links</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Create a new shortened URL</p> | |
| </div> | |
| <h4 class="font-bold text-gray-900 mb-2">Parameters</h4> | |
| <div class="overflow-x-auto mb-4"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parameter</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">long_url</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yes</td> | |
| <td class="px-6 py-4 text-sm text-gray-500">The URL to shorten</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">custom_alias</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">string</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">No</td> | |
| <td class="px-6 py-4 text-sm text-gray-500">Custom alias for the short URL</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Get Link Analytics</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">GET</span> | |
| <span class="ml-2 font-mono text-sm">/v1/links/{alias}/analytics</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Retrieve analytics data for a specific short link</p> | |
| </div> | |
| </section> | |
| <!-- Quick Start Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-primary/5 border border-primary/20 rounded-xl p-6"> | |
| <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center text-white mb-4"> | |
| <i class="fas fa-book text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-900 mb-2">API Reference</h3> | |
| <p class="text-gray-600 mb-4">Complete reference for all API endpoints, parameters, and responses.</p> | |
| <a href="#" class="text-primary font-medium hover:underline">View Full Reference →</a> | |
| </div> | |
| <div class="bg-secondary/5 border border-secondary/20 rounded-xl p-6"> | |
| <div class="w-12 h-12 bg-secondary rounded-lg flex items-center justify-center text-white mb-4"> | |
| <i class="fas fa-download text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-900 mb-2">SDK Downloads</h3> | |
| <p class="text-gray-600 mb-4">Download official SDKs for popular programming languages and frameworks.</p> | |
| <a href="#" class="text-secondary font-medium hover:underline">Download SDKs →</a> | |
| </div> | |
| </div> | |
| <!-- Support Section --> | |
| <div class="bg-gray-50 rounded-xl p-6 text-center"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Need Help?</h3> | |
| <p class="text-gray-600 mb-6">Our support team is here to help you with any questions about the API or integrations.</p> | |
| <a href="support.html" class="px-6 py-3 rounded-lg gradient-bg text-white font-medium hover:opacity-90 transition">Contact Support</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="gradient-text text-2xl font-bold mb-4">Qur.li</div> | |
| <p class="text-gray-400 mb-4">The simplest way to shorten URLs. Powerful analytics, custom domains, and API access.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html#features" class="text-gray-400 hover:text-white">Features</a></li> | |
| <li><a href="index.html#pricing" class="text-gray-400 hover:text-white">Pricing</a></li> | |
| <li><a href="documentation.html" class="text-gray-400 hover:text-white">API</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="documentation.html" class="text-gray-400 hover:text-white">Documentation</a></li> | |
| <li><a href="guides.html" class="text-gray-400 hover:text-white">Guides</a></li> | |
| <li><a href="blog.html" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="support.html" class="text-gray-400 hover:text-white">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold uppercase tracking-wider mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm">© 2023 Qur.li. All rights reserved.</p> | |
| <div class="mt-4 md:mt-0 flex space-x-6"> | |
| <a href="#" class="text-gray-400 text-sm hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 text-sm hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-gray-400 text-sm hover:text-white">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |