178 lines
7.9 KiB
HTML
178 lines
7.9 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">Visit Website</a>
|
|
<a href="#" id="app-github" class="action-btn" target="_blank">View GitHub</a>
|
|
<a href="#" id="app-demo" class="action-btn" target="_blank" style="display:none">Live Demo</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- App Details Section -->
|
|
<main class="app-main">
|
|
<div class="app-content">
|
|
<div class="tabs">
|
|
<button class="tab-btn active" data-tab="overview">Overview</button>
|
|
<button class="tab-btn" data-tab="integration">Integration</button>
|
|
<button class="tab-btn" data-tab="docs">Documentation</button>
|
|
<button class="tab-btn" data-tab="support">Support</button>
|
|
</div>
|
|
|
|
<section id="overview-tab" class="tab-content active">
|
|
<div class="overview-columns">
|
|
<div class="overview-main">
|
|
<div id="app-overview">Overview content goes here.</div>
|
|
</div>
|
|
|
|
<aside class="sidebar">
|
|
<div class="sidebar-card">
|
|
<h3>Download Stats</h3>
|
|
<div class="stats-grid">
|
|
<div>
|
|
<span class="stat-value" id="sidebar-downloads">0</span>
|
|
<span class="stat-label">Downloads</span>
|
|
</div>
|
|
<div>
|
|
<span class="stat-value" id="sidebar-rating">0.0</span>
|
|
<span class="stat-label">Rating</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-card">
|
|
<h3>App Metadata</h3>
|
|
<dl class="metadata">
|
|
<div>
|
|
<dt>Category</dt>
|
|
<dd id="sidebar-category">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Type</dt>
|
|
<dd id="sidebar-type">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Status</dt>
|
|
<dd id="sidebar-status">Active</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Pricing</dt>
|
|
<dd id="sidebar-pricing">-</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="sidebar-card">
|
|
<h3>Contact</h3>
|
|
<p id="sidebar-contact">contact@example.com</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="integration-tab" class="tab-content">
|
|
<div class="integration-content" id="app-integration">
|
|
<!-- Integration guide markdown content will be rendered here -->
|
|
</div>
|
|
</section>
|
|
|
|
<section id="docs-tab" class="tab-content">
|
|
<div class="docs-content" id="app-docs">
|
|
<!-- Documentation markdown content will be rendered here -->
|
|
</div>
|
|
</section>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
</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>
|