blackroad-os/blackroad-apps
9
0
Fork 0
mirror of https://github.com/blackboxprogramming/blackroad-apps.git synced 2026-03-17 06:57:10 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
edd3aa128ecec4bff97be38613a076d6f5cd2db7
blackroad-apps/index.html

218 lines
9.8 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Offline-first PWAs for BlackRoad OS. Calculator, notes, weather, music, and more. Service workers, responsive design, installable.">
<meta name="keywords" content="progressive web app, pwa, service worker, offline first, mobile, responsive, javascript, html, css, open source">
<meta property="og:title" content="BlackRoad Apps — 50 Production-Ready Progressive Web Apps">
<meta property="og:description" content="Offline-first PWAs for BlackRoad OS. Calculator, notes, weather, music, and more. Service workers, responsive design, installable.">
<meta property="og:url" content="https://apps.blackroad.io">
<meta property="og:type" content="website">
<meta property="og:site_name" content="BlackRoad OS">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="BlackRoad Apps — 50 Production-Ready Progressive Web Apps">
<meta name="twitter:description" content="Offline-first PWAs for BlackRoad OS. Calculator, notes, weather, music, and more. Service workers, responsive design, installable.">
<link rel="canonical" href="https://apps.blackroad.io">
<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>
Reference in New Issue View Git Blame Copy Permalink