mirror of
https://github.com/thecyberlearn/quantumtaskai-caprover.git
synced 2026-08-18 10:12:57 +00:00
b0e8c917ef
Complete Django AI agent marketplace with security optimizations and clean deployment documentation without any API keys or secrets. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
498 lines
15 KiB
HTML
498 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ brand_name }} - Digital Presence Analysis</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.dashboard {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
|
|
color: white;
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.brand-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.subtitle {
|
|
opacity: 0.9;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.score-container {
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
display: inline-block;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.score-grade {
|
|
font-size: 4rem;
|
|
font-weight: 900;
|
|
margin-bottom: 10px;
|
|
background: linear-gradient(45deg, #48BB78, #38A169);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.score-number {
|
|
font-size: 1.5rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.content {
|
|
padding: 40px;
|
|
}
|
|
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.metric-card {
|
|
background: #F7FAFC;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
border: 2px solid transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.metric-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: #667eea;
|
|
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.metric-number {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #2D3748;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.metric-label {
|
|
color: #718096;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
color: #2D3748;
|
|
margin-bottom: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.platforms-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.platform-card {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
border: 2px solid #E2E8F0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.platform-card.found {
|
|
border-color: #48BB78;
|
|
background: linear-gradient(135deg, #F0FFF4 0%, #C6F6D5 100%);
|
|
}
|
|
|
|
.platform-card.missing {
|
|
border-color: #F56565;
|
|
background: linear-gradient(135deg, #FFF5F5 0%, #FED7D7 100%);
|
|
}
|
|
|
|
.platform-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.platform-header {
|
|
display: flex;
|
|
justify-content: between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.platform-name {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: #2D3748;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.platform-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 6px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.status-found {
|
|
background: #48BB78;
|
|
color: white;
|
|
}
|
|
|
|
.status-missing {
|
|
background: #F56565;
|
|
color: white;
|
|
}
|
|
|
|
.status-verified {
|
|
background: #3182CE;
|
|
color: white;
|
|
}
|
|
|
|
.platform-metrics {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.platform-metric {
|
|
text-align: center;
|
|
}
|
|
|
|
.platform-metric-number {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: #2D3748;
|
|
}
|
|
|
|
.platform-metric-label {
|
|
font-size: 0.8rem;
|
|
color: #718096;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.platform-url {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.platform-url a {
|
|
display: inline-block;
|
|
background: #667eea;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border-radius: 25px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.platform-url a:hover {
|
|
background: #5A67D8;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.recommendations {
|
|
background: linear-gradient(135deg, #EBF8FF 0%, #BEE3F8 100%);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.recommendation {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 15px;
|
|
border-left: 5px solid #3182CE;
|
|
}
|
|
|
|
.recommendation:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.recommendation-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
color: #2D3748;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.recommendation-text {
|
|
color: #4A5568;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.priority-high {
|
|
border-left-color: #F56565;
|
|
}
|
|
|
|
.priority-medium {
|
|
border-left-color: #ED8936;
|
|
}
|
|
|
|
.footer {
|
|
background: #F7FAFC;
|
|
padding: 30px 40px;
|
|
text-align: center;
|
|
border-top: 1px solid #E2E8F0;
|
|
}
|
|
|
|
.footer-text {
|
|
color: #718096;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.powered-by {
|
|
margin-top: 15px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #E2E8F0;
|
|
}
|
|
|
|
.powered-by strong {
|
|
color: #667eea;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard {
|
|
margin: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.brand-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.score-grade {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.platforms-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Progress Bars */
|
|
.progress-bar {
|
|
background: #E2E8F0;
|
|
border-radius: 10px;
|
|
height: 8px;
|
|
overflow: hidden;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #48BB78 0%, #38A169 100%);
|
|
border-radius: 10px;
|
|
transition: width 0.8s ease;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.platform-card {
|
|
animation: slideInUp 0.6s ease forwards;
|
|
}
|
|
|
|
.platform-card:nth-child(1) { animation-delay: 0.1s; }
|
|
.platform-card:nth-child(2) { animation-delay: 0.2s; }
|
|
.platform-card:nth-child(3) { animation-delay: 0.3s; }
|
|
.platform-card:nth-child(4) { animation-delay: 0.4s; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="dashboard">
|
|
<!-- Header with Brand Info and Score -->
|
|
<div class="header">
|
|
<h1 class="brand-title">{{ brand_name }}</h1>
|
|
<p class="subtitle">Digital Presence Analysis • {{ analysis_date }}</p>
|
|
|
|
<div class="score-container">
|
|
<div class="score-grade">{{ digital_presence_score }}</div>
|
|
<div class="score-number">{{ final_score }}/100</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- Key Metrics Grid -->
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<div class="metric-number">{{ platforms_found }}/{{ total_platforms }}</div>
|
|
<div class="metric-label">Platforms Found</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: {{ completion_percentage }}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-number">{{ total_followers_formatted }}</div>
|
|
<div class="metric-label">Total Followers</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-number">{{ average_engagement|title }}</div>
|
|
<div class="metric-label">Avg Engagement</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-number">{{ verified_accounts }}</div>
|
|
<div class="metric-label">Verified Accounts</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Platform Analysis -->
|
|
<h2 class="section-title">
|
|
🌐 Platform Analysis
|
|
</h2>
|
|
|
|
<div class="platforms-grid">
|
|
{% for platform in platforms %}
|
|
<div class="platform-card {% if platform.found %}found{% else %}missing{% endif %}">
|
|
<div class="platform-header">
|
|
<div class="platform-name">
|
|
<img src="data:image/svg+xml,{{ platform.icon }}" alt="{{ platform.name }}" class="platform-icon">
|
|
{{ platform.name }}
|
|
</div>
|
|
<span class="status-badge {% if platform.found %}status-found{% if platform.verified %}status-verified{% endif %}{% else %}status-missing{% endif %}">
|
|
{% if platform.found %}
|
|
{% if platform.verified %}Verified{% else %}Found{% endif %}
|
|
{% else %}Missing{% endif %}
|
|
</span>
|
|
</div>
|
|
|
|
{% if platform.found %}
|
|
<div class="platform-metrics">
|
|
<div class="platform-metric">
|
|
<div class="platform-metric-number">{{ platform.followers_formatted|default:"N/A" }}</div>
|
|
<div class="platform-metric-label">Followers</div>
|
|
</div>
|
|
<div class="platform-metric">
|
|
<div class="platform-metric-number">{{ platform.engagement_level|title|default:"N/A" }}</div>
|
|
<div class="platform-metric-label">Engagement</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if platform.profile_url %}
|
|
<div class="platform-url">
|
|
<a href="{{ platform.profile_url }}" target="_blank" rel="noopener">Visit Profile</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<p style="margin-top: 15px; color: #4A5568; font-size: 0.9rem;">{{ platform.notes }}</p>
|
|
{% else %}
|
|
<p style="color: #4A5568; font-size: 0.9rem; margin-bottom: 15px;">{{ platform.notes }}</p>
|
|
<p style="color: #718096; font-size: 0.8rem; font-style: italic;">Opportunity to establish presence and reach new audiences.</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Recommendations -->
|
|
{% if recommendations %}
|
|
<h2 class="section-title">
|
|
💡 Recommendations
|
|
</h2>
|
|
|
|
<div class="recommendations">
|
|
{% for rec in recommendations %}
|
|
<div class="recommendation priority-{{ rec.priority }}">
|
|
<div class="recommendation-title">{{ rec.platform }}</div>
|
|
<div class="recommendation-text">{{ rec.reason }}</div>
|
|
<div style="margin-top: 10px; font-size: 0.8rem; color: #718096;">
|
|
<strong>Setup Time:</strong> {{ rec.estimated_setup_time }} •
|
|
<strong>Potential:</strong> {{ rec.potential_reach }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<div class="footer-text">
|
|
Analysis completed in {{ processing_time }} using {{ analysis_method }}
|
|
</div>
|
|
<div class="powered-by">
|
|
<strong>Powered by Quantum Tasks AI</strong> • Brand Digital Presence Finder Pro v{{ analyzer_version }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Add smooth animations on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Animate progress bars
|
|
const progressBars = document.querySelectorAll('.progress-fill');
|
|
progressBars.forEach(bar => {
|
|
const width = bar.style.width;
|
|
bar.style.width = '0%';
|
|
setTimeout(() => {
|
|
bar.style.width = width;
|
|
}, 500);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |