408ad1b750
- Implement marketplace frontend and admin dashboard - Add FastAPI backend with environment-based configuration - Use .env file for secrets management - Include data generation scripts - Add proper CORS configuration - Remove hardcoded password from admin login - Update gitignore for security
234 lines
9.7 KiB
HTML
234 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>App Details - Crawl4AI Marketplace</title>
|
|
<link rel="stylesheet" href="marketplace.css">
|
|
<link rel="stylesheet" href="app-detail.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-detail-container">
|
|
<!-- Header -->
|
|
<header class="marketplace-header">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<div class="logo-title">
|
|
<img src="../../assets/images/logo.png" alt="Crawl4AI" class="header-logo">
|
|
<h1>
|
|
<span class="ascii-border">[</span>
|
|
Marketplace
|
|
<span class="ascii-border">]</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="header-nav">
|
|
<a href="index.html" class="back-btn">← Back to Marketplace</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- App Hero Section -->
|
|
<section class="app-hero">
|
|
<div class="app-hero-content">
|
|
<div class="app-hero-image" id="app-image">
|
|
<!-- Dynamic image -->
|
|
</div>
|
|
<div class="app-hero-info">
|
|
<div class="app-badges">
|
|
<span class="app-badge" id="app-type">Open Source</span>
|
|
<span class="app-badge featured" id="app-featured" style="display:none">FEATURED</span>
|
|
<span class="app-badge sponsored" id="app-sponsored" style="display:none">SPONSORED</span>
|
|
</div>
|
|
<h1 id="app-name">App Name</h1>
|
|
<p id="app-description" class="app-tagline">App description goes here</p>
|
|
|
|
<div class="app-stats">
|
|
<div class="stat">
|
|
<span class="stat-value" id="app-rating">★★★★★</span>
|
|
<span class="stat-label">Rating</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-value" id="app-downloads">0</span>
|
|
<span class="stat-label">Downloads</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-value" id="app-category">Category</span>
|
|
<span class="stat-label">Category</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="app-actions">
|
|
<a href="#" id="app-website" class="action-btn primary" target="_blank">
|
|
<span>→</span> Visit Website
|
|
</a>
|
|
<a href="#" id="app-github" class="action-btn secondary" target="_blank">
|
|
<span>⚡</span> View on GitHub
|
|
</a>
|
|
<button id="copy-integration" class="action-btn ghost">
|
|
<span>📋</span> Copy Integration
|
|
</button>
|
|
</div>
|
|
|
|
<div class="pricing-info">
|
|
<span class="pricing-label">Pricing:</span>
|
|
<span id="app-pricing" class="pricing-value">Free</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Navigation Tabs -->
|
|
<nav class="app-nav">
|
|
<button class="nav-tab active" data-tab="integration">Integration Guide</button>
|
|
<button class="nav-tab" data-tab="docs">Documentation</button>
|
|
<button class="nav-tab" data-tab="examples">Examples</button>
|
|
<button class="nav-tab" data-tab="support">Support</button>
|
|
</nav>
|
|
|
|
<!-- Content Sections -->
|
|
<main class="app-content">
|
|
<!-- Integration Guide Tab -->
|
|
<section id="integration-tab" class="tab-content active">
|
|
<div class="docs-content">
|
|
<h2>Quick Start</h2>
|
|
<p>Get started with this integration in just a few steps.</p>
|
|
|
|
<h3>Installation</h3>
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span class="code-lang">bash</span>
|
|
<button class="copy-btn">Copy</button>
|
|
</div>
|
|
<pre><code id="install-code">pip install crawl4ai</code></pre>
|
|
</div>
|
|
|
|
<h3>Basic Usage</h3>
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span class="code-lang">python</span>
|
|
<button class="copy-btn">Copy</button>
|
|
</div>
|
|
<pre><code id="usage-code">from crawl4ai import AsyncWebCrawler
|
|
|
|
async def main():
|
|
async with AsyncWebCrawler() as crawler:
|
|
result = await crawler.arun(
|
|
url="https://example.com",
|
|
# Your configuration here
|
|
)
|
|
print(result.markdown)
|
|
|
|
if __name__ == "__main__":
|
|
import asyncio
|
|
asyncio.run(main())</code></pre>
|
|
</div>
|
|
|
|
<h3>Advanced Configuration</h3>
|
|
<p>Customize the crawler with these advanced options:</p>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h4>🚀 Performance</h4>
|
|
<p>Optimize crawling speed with parallel processing and caching strategies.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>🔒 Authentication</h4>
|
|
<p>Handle login forms, cookies, and session management automatically.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>🎯 Extraction</h4>
|
|
<p>Use CSS selectors, XPath, or AI-powered content extraction.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>🔄 Proxy Support</h4>
|
|
<p>Rotate proxies and bypass rate limiting with built-in proxy management.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Integration Example</h3>
|
|
<div class="code-block">
|
|
<div class="code-header">
|
|
<span class="code-lang">python</span>
|
|
<button class="copy-btn">Copy</button>
|
|
</div>
|
|
<pre><code id="integration-code">from crawl4ai import AsyncWebCrawler
|
|
from crawl4ai.extraction_strategy import LLMExtractionStrategy
|
|
|
|
async def extract_with_llm():
|
|
async with AsyncWebCrawler() as crawler:
|
|
result = await crawler.arun(
|
|
url="https://example.com",
|
|
extraction_strategy=LLMExtractionStrategy(
|
|
provider="openai",
|
|
api_key="your-api-key",
|
|
instruction="Extract product information"
|
|
),
|
|
bypass_cache=True
|
|
)
|
|
return result.extracted_content
|
|
|
|
# Run the extraction
|
|
data = await extract_with_llm()
|
|
print(data)</code></pre>
|
|
</div>
|
|
|
|
<div class="info-box">
|
|
<h4>💡 Pro Tip</h4>
|
|
<p>Use the <code>bypass_cache=True</code> parameter when you need fresh data, or set <code>cache_mode="write"</code> to update the cache with new content.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Documentation Tab -->
|
|
<section id="docs-tab" class="tab-content">
|
|
<div class="docs-content">
|
|
<h2>Documentation</h2>
|
|
<p>Complete documentation and API reference.</p>
|
|
<!-- Dynamic content loaded here -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Examples Tab -->
|
|
<section id="examples-tab" class="tab-content">
|
|
<div class="docs-content">
|
|
<h2>Examples</h2>
|
|
<p>Real-world examples and use cases.</p>
|
|
<!-- Dynamic content loaded here -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Support Tab -->
|
|
<section id="support-tab" class="tab-content">
|
|
<div class="docs-content">
|
|
<h2>Support</h2>
|
|
<div class="support-grid">
|
|
<div class="support-card">
|
|
<h3>📧 Contact</h3>
|
|
<p id="app-contact">contact@example.com</p>
|
|
</div>
|
|
<div class="support-card">
|
|
<h3>🐛 Report Issues</h3>
|
|
<p>Found a bug? Report it on GitHub Issues.</p>
|
|
</div>
|
|
<div class="support-card">
|
|
<h3>💬 Community</h3>
|
|
<p>Join our Discord for help and discussions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Related Apps -->
|
|
<section class="related-apps">
|
|
<h2>Related Apps</h2>
|
|
<div id="related-apps-grid" class="related-grid">
|
|
<!-- Dynamic related apps -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="app-detail.js"></script>
|
|
</body>
|
|
</html> |