mirror of
https://github.com/blackboxprogramming/blackroad-apps.git
synced 2026-03-17 09:37:52 -05:00
207 lines
8.6 KiB
HTML
207 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BlackRoad OS - 50 Amazing Apps</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 40px 20px;
|
|
}
|
|
.container { max-width: 1400px; margin: 0 auto; }
|
|
.header {
|
|
text-align: center;
|
|
color: white;
|
|
margin-bottom: 60px;
|
|
animation: fadeInDown 0.8s ease;
|
|
}
|
|
.header h1 {
|
|
font-size: 4em;
|
|
margin-bottom: 15px;
|
|
text-shadow: 2px 2px 20px rgba(0,0,0,0.3);
|
|
}
|
|
.header .subtitle {
|
|
font-size: 1.5em;
|
|
opacity: 0.95;
|
|
margin-bottom: 10px;
|
|
}
|
|
.header .stats {
|
|
font-size: 1.2em;
|
|
opacity: 0.9;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
margin-top: 20px;
|
|
}
|
|
.stat { display: flex; align-items: center; gap: 10px; }
|
|
.apps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 25px;
|
|
animation: fadeInUp 1s ease;
|
|
}
|
|
.app-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(15px);
|
|
border-radius: 16px;
|
|
padding: 30px;
|
|
text-decoration: none;
|
|
color: white;
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
|
cursor: pointer;
|
|
}
|
|
.app-card:hover {
|
|
transform: translateY(-10px) scale(1.02);
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
|
}
|
|
.app-icon {
|
|
font-size: 3em;
|
|
margin-bottom: 15px;
|
|
display: block;
|
|
}
|
|
.app-name {
|
|
font-size: 1.4em;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
text-transform: capitalize;
|
|
}
|
|
.app-desc {
|
|
opacity: 0.85;
|
|
font-size: 0.95em;
|
|
line-height: 1.5;
|
|
}
|
|
.cta {
|
|
text-align: center;
|
|
margin-top: 60px;
|
|
animation: pulse 2s ease infinite;
|
|
}
|
|
.cta-button {
|
|
display: inline-block;
|
|
background: white;
|
|
color: #667eea;
|
|
padding: 20px 50px;
|
|
border-radius: 50px;
|
|
text-decoration: none;
|
|
font-size: 1.3em;
|
|
font-weight: 700;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
}
|
|
.cta-button:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.4);
|
|
}
|
|
@keyframes fadeInDown {
|
|
from { opacity: 0; transform: translateY(-30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🚀 BlackRoad OS Apps</h1>
|
|
<div class="subtitle">50 Production-Ready Progressive Web Apps</div>
|
|
<div class="stats">
|
|
<div class="stat">📱 <strong>50</strong> Apps</div>
|
|
<div class="stat">💰 <strong>0%</strong> Fees</div>
|
|
<div class="stat">⚡ <strong>Instant</strong> Install</div>
|
|
<div class="stat">🔓 <strong>100%</strong> Open</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="apps-grid" id="apps"></div>
|
|
|
|
<div class="cta">
|
|
<a href="https://github.com/BlackRoad-OS/blackroad-app-store" class="cta-button">
|
|
⭐ Star on GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const apps = [
|
|
{ name: 'first-app', icon: '🎉', desc: 'Your first PWA - start here!' },
|
|
{ name: 'dashboard', icon: '📊', desc: 'Beautiful analytics dashboard' },
|
|
{ name: 'metrics', icon: '📈', desc: 'Real-time metrics tracking' },
|
|
{ name: 'vault', icon: '🔐', desc: 'Secure password manager' },
|
|
{ name: 'agent-hub', icon: '🤖', desc: 'AI agent control center' },
|
|
{ name: 'commander', icon: '⚡', desc: 'Command palette interface' },
|
|
{ name: 'analytics', icon: '📉', desc: 'Business analytics suite' },
|
|
{ name: 'monitor', icon: '👁️', desc: 'System monitoring tool' },
|
|
{ name: 'deployer', icon: '🚀', desc: 'One-click deployments' },
|
|
{ name: 'studio', icon: '🎨', desc: 'Creative design studio' },
|
|
{ name: 'sync', icon: '🔄', desc: 'Cloud sync service' },
|
|
{ name: 'chat', icon: '💬', desc: 'Team collaboration chat' },
|
|
{ name: 'calendar', icon: '📅', desc: 'Smart calendar app' },
|
|
{ name: 'files', icon: '📁', desc: 'Cloud file manager' },
|
|
{ name: 'notes', icon: '📝', desc: 'Note-taking app' },
|
|
{ name: 'tasks', icon: '✅', desc: 'Task management system' },
|
|
{ name: 'mail', icon: '📧', desc: 'Email client' },
|
|
{ name: 'video', icon: '🎥', desc: 'Video editing studio' },
|
|
{ name: 'music', icon: '🎵', desc: 'Music player & streaming' },
|
|
{ name: 'photos', icon: '📸', desc: 'Photo gallery manager' },
|
|
{ name: 'code', icon: '💻', desc: 'Code editor IDE' },
|
|
{ name: 'weather', icon: '🌤️', desc: 'Weather forecasts' },
|
|
{ name: 'fitness', icon: '💪', desc: 'Workout tracker' },
|
|
{ name: 'recipes', icon: '👨🍳', desc: 'Recipe collection' },
|
|
{ name: 'travel', icon: '✈️', desc: 'Travel planner' },
|
|
{ name: 'news', icon: '📰', desc: 'News aggregator' },
|
|
{ name: 'podcast', icon: '🎙️', desc: 'Podcast player' },
|
|
{ name: 'budget', icon: '💵', desc: 'Budget manager' },
|
|
{ name: 'crypto', icon: '₿', desc: 'Crypto wallet' },
|
|
{ name: 'social', icon: '👥', desc: 'Social network' },
|
|
{ name: 'stream', icon: '📺', desc: 'Video streaming' },
|
|
{ name: 'games', icon: '🎮', desc: 'Game library' },
|
|
{ name: 'learn', icon: '📚', desc: 'Learning platform' },
|
|
{ name: 'health', icon: '🏥', desc: 'Health records' },
|
|
{ name: 'pets', icon: '🐕', desc: 'Pet care tracker' },
|
|
{ name: 'garden', icon: '🌱', desc: 'Garden planner' },
|
|
{ name: 'books', icon: '📖', desc: 'Book library' },
|
|
{ name: 'art', icon: '🎨', desc: 'Digital art studio' },
|
|
{ name: 'voice', icon: '🎤', desc: 'Voice recorder' },
|
|
{ name: 'scan', icon: '📱', desc: 'Document scanner' },
|
|
{ name: 'translate', icon: '🌍', desc: 'Language translator' },
|
|
{ name: 'maps', icon: '🗺️', desc: 'Maps & navigation' },
|
|
{ name: 'password', icon: '🔑', desc: 'Password manager' },
|
|
{ name: 'vpn', icon: '🛡️', desc: 'VPN shield' },
|
|
{ name: 'backup', icon: '💾', desc: 'Backup solution' },
|
|
{ name: 'timer', icon: '⏱️', desc: 'Time tracker' },
|
|
{ name: 'habits', icon: '✨', desc: 'Habit builder' },
|
|
{ name: 'meditation', icon: '🧘', desc: 'Meditation guide' },
|
|
{ name: 'ai', icon: '🤖', desc: 'AI assistant' },
|
|
{ name: 'blockchain', icon: '⛓️', desc: 'Blockchain explorer' }
|
|
];
|
|
|
|
const appsContainer = document.getElementById('apps');
|
|
apps.forEach((app, index) => {
|
|
const card = document.createElement('a');
|
|
card.className = 'app-card';
|
|
card.href = `./blackroad-${app.name}/`;
|
|
card.style.animationDelay = `${index * 0.02}s`;
|
|
card.innerHTML = `
|
|
<span class="app-icon">${app.icon}</span>
|
|
<div class="app-name">${app.name.replace(/-/g, ' ')}</div>
|
|
<div class="app-desc">${app.desc}</div>
|
|
`;
|
|
appsContainer.appendChild(card);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|