abe8a92561
- Fixed JavaScript errors from missing HTML elements (install-code, usage-code, integration-code) - Added missing CSS classes for tabs, overview layout, sidebar, and integration content - Fixed tab navigation to display horizontally in single line - Added proper padding to tab content sections (removed from container, added to content) - Fixed tab selector from .nav-tab to .tab-btn to match HTML structure - Added sidebar styling with stats grid and metadata display - Improved responsive design with mobile-friendly tab scrolling - Fixed code block positioning for copy buttons - Removed margin from first headings to prevent extra spacing - Added null checks for DOM elements in JavaScript to prevent errors These changes resolve the routing issue where clicking on apps caused page redirects, and fix the broken layout where CSS was not properly applied to the app detail page.
210 lines
9.3 KiB
HTML
210 lines
9.3 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">
|
|
<h2>Overview</h2>
|
|
<div id="app-overview">Overview content goes here.</div>
|
|
|
|
<h3>Key Features</h3>
|
|
<ul id="app-features" class="features-list">
|
|
<li>Feature 1</li>
|
|
<li>Feature 2</li>
|
|
<li>Feature 3</li>
|
|
</ul>
|
|
|
|
<h3>Use Cases</h3>
|
|
<div id="app-use-cases" class="use-cases">
|
|
<p>Describe how this app can help your workflow.</p>
|
|
</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">
|
|
<h2>Integration Guide</h2>
|
|
|
|
<h3>Installation</h3>
|
|
<div class="code-block">
|
|
<pre><code id="install-code"># Installation instructions will appear here</code></pre>
|
|
</div>
|
|
|
|
<h3>Basic Usage</h3>
|
|
<div class="code-block">
|
|
<pre><code id="usage-code"># Usage example will appear here</code></pre>
|
|
</div>
|
|
|
|
<h3>Complete Integration Example</h3>
|
|
<div class="code-block">
|
|
<button class="copy-btn" id="copy-integration">Copy</button>
|
|
<pre><code id="integration-code"># Complete integration guide will appear here</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="docs-tab" class="tab-content">
|
|
<div class="docs-content">
|
|
<h2>Documentation</h2>
|
|
<div id="app-docs" class="doc-sections">
|
|
<p>Documentation coming soon.</p>
|
|
</div>
|
|
</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>
|