Add Profile, Changelog, and Onboarding templates (12-14)
This commit is contained in:
Your Name
774
12-profile.html
Normal file
774
12-profile.html
Normal file
@@ -0,0 +1,774 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Profile - BlackRoad</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--gray-950: #000000;
|
||||||
|
--gray-900: #0a0a0a;
|
||||||
|
--gray-800: #1a1a1a;
|
||||||
|
--gray-700: #404040;
|
||||||
|
--gray-600: #525252;
|
||||||
|
--gray-500: #737373;
|
||||||
|
--gray-400: #a3a3a3;
|
||||||
|
--gray-300: #d4d4d4;
|
||||||
|
--gray-100: #f5f5f5;
|
||||||
|
--accent-1: #ff8700;
|
||||||
|
--accent-2: #ff5f00;
|
||||||
|
--accent-3: #ff0087;
|
||||||
|
--accent-4: #af5fd7;
|
||||||
|
--accent-5: #ff00ff;
|
||||||
|
--accent-6: #1e90ff;
|
||||||
|
--success: #22c55e;
|
||||||
|
--warning: #f59e0b;
|
||||||
|
--error: #ef4444;
|
||||||
|
--radius-sm: 4px;
|
||||||
|
--radius-md: 6px;
|
||||||
|
--radius-lg: 8px;
|
||||||
|
--radius-xl: 12px;
|
||||||
|
--radius-2xl: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background: var(--gray-950);
|
||||||
|
color: var(--gray-100);
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.profile-header {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
background: linear-gradient(135deg, var(--accent-1), var(--accent-3), var(--accent-6));
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover-image::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-top: -4rem;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4px solid var(--gray-950);
|
||||||
|
background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: white;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-badge {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
right: 8px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: var(--success);
|
||||||
|
border: 3px solid var(--gray-950);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-info {
|
||||||
|
flex: 1;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-name {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-handle {
|
||||||
|
color: var(--gray-400);
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-bio {
|
||||||
|
color: var(--gray-300);
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 20px rgba(255, 135, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: var(--gray-800);
|
||||||
|
color: var(--gray-100);
|
||||||
|
border: 1px solid var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats */
|
||||||
|
.stats-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
border-bottom: 1px solid var(--gray-800);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
color: var(--gray-400);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid Layout */
|
||||||
|
.profile-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.profile-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
.card {
|
||||||
|
background: var(--gray-900);
|
||||||
|
border: 1px solid var(--gray-800);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-link {
|
||||||
|
color: var(--accent-1);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Info List */
|
||||||
|
.info-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
color: var(--gray-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-link {
|
||||||
|
color: var(--accent-6);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skills */
|
||||||
|
.skills-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-tag {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background: var(--gray-800);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-300);
|
||||||
|
border: 1px solid var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-tag.featured {
|
||||||
|
background: linear-gradient(135deg, rgba(255, 135, 0, 0.1), rgba(255, 0, 135, 0.1));
|
||||||
|
border-color: var(--accent-1);
|
||||||
|
color: var(--accent-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Activity Feed */
|
||||||
|
.activity-feed {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--gray-800);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-item:hover {
|
||||||
|
background: var(--gray-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon.commit {
|
||||||
|
background: rgba(34, 197, 94, 0.1);
|
||||||
|
color: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon.pr {
|
||||||
|
background: rgba(30, 144, 255, 0.1);
|
||||||
|
color: var(--accent-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon.issue {
|
||||||
|
background: rgba(255, 135, 0, 0.1);
|
||||||
|
color: var(--accent-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-icon.deploy {
|
||||||
|
background: rgba(175, 95, 215, 0.1);
|
||||||
|
color: var(--accent-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-title {
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-title a {
|
||||||
|
color: var(--gray-100);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-title a:hover {
|
||||||
|
color: var(--accent-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-repo {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
color: var(--gray-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Projects */
|
||||||
|
.projects-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
background: var(--gray-800);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
border: 1px solid var(--gray-700);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:hover {
|
||||||
|
border-color: var(--accent-1);
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info h4 {
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-info p {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-stats span {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contribution Graph */
|
||||||
|
.contribution-graph {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 3px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-cell {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: var(--gray-800);
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-cell.level-1 { background: rgba(255, 135, 0, 0.2); }
|
||||||
|
.graph-cell.level-2 { background: rgba(255, 135, 0, 0.4); }
|
||||||
|
.graph-cell.level-3 { background: rgba(255, 135, 0, 0.6); }
|
||||||
|
.graph-cell.level-4 { background: var(--accent-1); }
|
||||||
|
|
||||||
|
/* Badges */
|
||||||
|
.badges-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.gold {
|
||||||
|
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||||
|
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.silver {
|
||||||
|
background: linear-gradient(135deg, #c0c0c0, #808080);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.bronze {
|
||||||
|
background: linear-gradient(135deg, #cd7f32, #8b4513);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.special {
|
||||||
|
background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabs */
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--gray-800);
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--gray-400);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
color: var(--gray-100);
|
||||||
|
background: var(--gray-800);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
color: var(--accent-1);
|
||||||
|
background: rgba(255, 135, 0, 0.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<!-- Profile Header -->
|
||||||
|
<div class="profile-header">
|
||||||
|
<div class="cover-image"></div>
|
||||||
|
<div class="avatar-section">
|
||||||
|
<div class="avatar">
|
||||||
|
AM
|
||||||
|
<div class="avatar-badge"></div>
|
||||||
|
</div>
|
||||||
|
<div class="profile-info">
|
||||||
|
<h1 class="profile-name">Alexa Mundson</h1>
|
||||||
|
<p class="profile-handle">@alexa</p>
|
||||||
|
<p class="profile-bio">Building the future of distributed systems. Founder at BlackRoad. Open source enthusiast.</p>
|
||||||
|
</div>
|
||||||
|
<div class="profile-actions">
|
||||||
|
<button class="btn btn-primary">Edit Profile</button>
|
||||||
|
<button class="btn btn-secondary">Share</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats -->
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-value">2,847</div>
|
||||||
|
<div class="stat-label">Contributions</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-value">156</div>
|
||||||
|
<div class="stat-label">Repositories</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-value">1.2k</div>
|
||||||
|
<div class="stat-label">Followers</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-value">89</div>
|
||||||
|
<div class="stat-label">Following</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Grid -->
|
||||||
|
<div class="profile-grid">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<div class="sidebar">
|
||||||
|
<!-- Info Card -->
|
||||||
|
<div class="card" style="margin-bottom: 1.5rem;">
|
||||||
|
<h3 class="card-title" style="margin-bottom: 1rem;">Info</h3>
|
||||||
|
<div class="info-list">
|
||||||
|
<div class="info-item">
|
||||||
|
<svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||||
|
</svg>
|
||||||
|
San Francisco, CA
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||||
|
</svg>
|
||||||
|
Founder at BlackRoad
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
|
||||||
|
</svg>
|
||||||
|
<a href="#" class="info-link">blackroad.io</a>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<svg class="info-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||||
|
</svg>
|
||||||
|
Joined March 2020
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Skills Card -->
|
||||||
|
<div class="card" style="margin-bottom: 1.5rem;">
|
||||||
|
<h3 class="card-title" style="margin-bottom: 1rem;">Skills</h3>
|
||||||
|
<div class="skills-grid">
|
||||||
|
<span class="skill-tag featured">TypeScript</span>
|
||||||
|
<span class="skill-tag featured">Rust</span>
|
||||||
|
<span class="skill-tag">Python</span>
|
||||||
|
<span class="skill-tag">Go</span>
|
||||||
|
<span class="skill-tag">React</span>
|
||||||
|
<span class="skill-tag">Node.js</span>
|
||||||
|
<span class="skill-tag">PostgreSQL</span>
|
||||||
|
<span class="skill-tag">Kubernetes</span>
|
||||||
|
<span class="skill-tag">AWS</span>
|
||||||
|
<span class="skill-tag">Cloudflare</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Badges Card -->
|
||||||
|
<div class="card">
|
||||||
|
<h3 class="card-title" style="margin-bottom: 1rem;">Achievements</h3>
|
||||||
|
<div class="badges-grid">
|
||||||
|
<div class="badge gold" title="Top Contributor">★</div>
|
||||||
|
<div class="badge special" title="Early Adopter">⚡</div>
|
||||||
|
<div class="badge silver" title="Code Reviewer">🔎</div>
|
||||||
|
<div class="badge bronze" title="Bug Hunter">🐛</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="main-content">
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="tabs">
|
||||||
|
<button class="tab active">Activity</button>
|
||||||
|
<button class="tab">Repositories</button>
|
||||||
|
<button class="tab">Projects</button>
|
||||||
|
<button class="tab">Contributions</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Activity Feed -->
|
||||||
|
<div class="card" style="margin-bottom: 1.5rem;">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">Recent Activity</h3>
|
||||||
|
<a href="#" class="card-link">View all</a>
|
||||||
|
</div>
|
||||||
|
<div class="activity-feed">
|
||||||
|
<div class="activity-item">
|
||||||
|
<div class="activity-icon deploy">
|
||||||
|
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="activity-content">
|
||||||
|
<div class="activity-title"><a href="#">Deployed v2.4.0 to production</a></div>
|
||||||
|
<div class="activity-meta">
|
||||||
|
<span class="activity-repo">blackroad-os</span>
|
||||||
|
<span>2 hours ago</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="activity-item">
|
||||||
|
<div class="activity-icon pr">
|
||||||
|
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="activity-content">
|
||||||
|
<div class="activity-title"><a href="#">Merged PR #847: Add WebSocket support</a></div>
|
||||||
|
<div class="activity-meta">
|
||||||
|
<span class="activity-repo">blackroad-api</span>
|
||||||
|
<span>5 hours ago</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="activity-item">
|
||||||
|
<div class="activity-icon commit">
|
||||||
|
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="activity-content">
|
||||||
|
<div class="activity-title"><a href="#">Pushed 12 commits to main</a></div>
|
||||||
|
<div class="activity-meta">
|
||||||
|
<span class="activity-repo">blackroad-templates</span>
|
||||||
|
<span>1 day ago</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="activity-item">
|
||||||
|
<div class="activity-icon issue">
|
||||||
|
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="activity-content">
|
||||||
|
<div class="activity-title"><a href="#">Closed issue #234: Memory leak in worker</a></div>
|
||||||
|
<div class="activity-meta">
|
||||||
|
<span class="activity-repo">blackroad-workers</span>
|
||||||
|
<span>2 days ago</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pinned Projects -->
|
||||||
|
<div class="card" style="margin-bottom: 1.5rem;">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">Pinned Repositories</h3>
|
||||||
|
<a href="#" class="card-link">Customize</a>
|
||||||
|
</div>
|
||||||
|
<div class="projects-grid">
|
||||||
|
<div class="project-card">
|
||||||
|
<div class="project-info">
|
||||||
|
<h4>blackroad-os</h4>
|
||||||
|
<p>Distributed operating system for AI agents</p>
|
||||||
|
</div>
|
||||||
|
<div class="project-stats">
|
||||||
|
<span>★ 1.2k</span>
|
||||||
|
<span>🕐 234</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-card">
|
||||||
|
<div class="project-info">
|
||||||
|
<h4>blackroad-templates</h4>
|
||||||
|
<p>Design system templates collection</p>
|
||||||
|
</div>
|
||||||
|
<div class="project-stats">
|
||||||
|
<span>★ 89</span>
|
||||||
|
<span>🕐 12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="project-card">
|
||||||
|
<div class="project-info">
|
||||||
|
<h4>codex-infinity</h4>
|
||||||
|
<p>Infinite code generation engine</p>
|
||||||
|
</div>
|
||||||
|
<div class="project-stats">
|
||||||
|
<span>★ 456</span>
|
||||||
|
<span>🕐 78</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contribution Graph -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h3 class="card-title">Contribution Graph</h3>
|
||||||
|
<span style="color: var(--gray-500); font-size: 0.875rem;">2,847 contributions this year</span>
|
||||||
|
</div>
|
||||||
|
<div class="contribution-graph" id="graph"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Generate contribution graph
|
||||||
|
const graph = document.getElementById('graph');
|
||||||
|
const levels = ['', 'level-1', 'level-2', 'level-3', 'level-4'];
|
||||||
|
|
||||||
|
for (let row = 0; row < 7; row++) {
|
||||||
|
const rowDiv = document.createElement('div');
|
||||||
|
rowDiv.className = 'graph-row';
|
||||||
|
|
||||||
|
for (let col = 0; col < 52; col++) {
|
||||||
|
const cell = document.createElement('div');
|
||||||
|
cell.className = 'graph-cell';
|
||||||
|
const level = Math.floor(Math.random() * 5);
|
||||||
|
if (level > 0) cell.classList.add(levels[level]);
|
||||||
|
rowDiv.appendChild(cell);
|
||||||
|
}
|
||||||
|
|
||||||
|
graph.appendChild(rowDiv);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tab switching
|
||||||
|
document.querySelectorAll('.tab').forEach(tab => {
|
||||||
|
tab.addEventListener('click', () => {
|
||||||
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||||
|
tab.classList.add('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
776
13-changelog.html
Normal file
776
13-changelog.html
Normal file
@@ -0,0 +1,776 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Changelog - BlackRoad</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--gray-950: #000000;
|
||||||
|
--gray-900: #0a0a0a;
|
||||||
|
--gray-800: #1a1a1a;
|
||||||
|
--gray-700: #404040;
|
||||||
|
--gray-600: #525252;
|
||||||
|
--gray-500: #737373;
|
||||||
|
--gray-400: #a3a3a3;
|
||||||
|
--gray-300: #d4d4d4;
|
||||||
|
--gray-100: #f5f5f5;
|
||||||
|
--accent-1: #ff8700;
|
||||||
|
--accent-2: #ff5f00;
|
||||||
|
--accent-3: #ff0087;
|
||||||
|
--accent-4: #af5fd7;
|
||||||
|
--accent-5: #ff00ff;
|
||||||
|
--accent-6: #1e90ff;
|
||||||
|
--success: #22c55e;
|
||||||
|
--warning: #f59e0b;
|
||||||
|
--error: #ef4444;
|
||||||
|
--radius-sm: 4px;
|
||||||
|
--radius-md: 6px;
|
||||||
|
--radius-lg: 8px;
|
||||||
|
--radius-xl: 12px;
|
||||||
|
--radius-2xl: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background: var(--gray-950);
|
||||||
|
color: var(--gray-100);
|
||||||
|
min-height: 100vh;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.header {
|
||||||
|
border-bottom: 1px solid var(--gray-800);
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.9);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-nav a {
|
||||||
|
color: var(--gray-400);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-nav a:hover {
|
||||||
|
color: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
color: var(--gray-400);
|
||||||
|
font-size: 1.125rem;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe-form {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe-form input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
background: var(--gray-900);
|
||||||
|
border: 1px solid var(--gray-700);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--gray-100);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe-form input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--accent-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe-form button {
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: white;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe-form button:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 20px rgba(255, 135, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filter Tabs */
|
||||||
|
.filters {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background: var(--gray-900);
|
||||||
|
border: 1px solid var(--gray-800);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--gray-400);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn:hover {
|
||||||
|
background: var(--gray-800);
|
||||||
|
color: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn.active {
|
||||||
|
background: var(--accent-1);
|
||||||
|
border-color: var(--accent-1);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Timeline */
|
||||||
|
.timeline {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-group {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-number {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-date {
|
||||||
|
color: var(--gray-500);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-badge {
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-badge.latest {
|
||||||
|
background: var(--success);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-badge.beta {
|
||||||
|
background: var(--accent-6);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change Cards */
|
||||||
|
.changes-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-card {
|
||||||
|
background: var(--gray-900);
|
||||||
|
border: 1px solid var(--gray-800);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: 1.5rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-card:hover {
|
||||||
|
border-color: var(--gray-700);
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-type {
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-type.feature {
|
||||||
|
background: rgba(34, 197, 94, 0.1);
|
||||||
|
color: var(--success);
|
||||||
|
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-type.fix {
|
||||||
|
background: rgba(30, 144, 255, 0.1);
|
||||||
|
color: var(--accent-6);
|
||||||
|
border: 1px solid rgba(30, 144, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-type.improvement {
|
||||||
|
background: rgba(255, 135, 0, 0.1);
|
||||||
|
color: var(--accent-1);
|
||||||
|
border: 1px solid rgba(255, 135, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-type.breaking {
|
||||||
|
background: rgba(239, 68, 68, 0.1);
|
||||||
|
color: var(--error);
|
||||||
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-type.security {
|
||||||
|
background: rgba(175, 95, 215, 0.1);
|
||||||
|
color: var(--accent-4);
|
||||||
|
border: 1px solid rgba(175, 95, 215, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-type.deprecated {
|
||||||
|
background: rgba(245, 158, 11, 0.1);
|
||||||
|
color: var(--warning);
|
||||||
|
border: 1px solid rgba(245, 158, 11, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-title {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: 600;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-description {
|
||||||
|
color: var(--gray-400);
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-meta-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-meta-item a {
|
||||||
|
color: var(--accent-6);
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-meta-item a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code block in changes */
|
||||||
|
.change-code {
|
||||||
|
background: var(--gray-800);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-code .comment {
|
||||||
|
color: var(--gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-code .keyword {
|
||||||
|
color: var(--accent-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-code .string {
|
||||||
|
color: var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.change-code .function {
|
||||||
|
color: var(--accent-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contributors */
|
||||||
|
.contributors {
|
||||||
|
display: flex;
|
||||||
|
gap: -0.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid var(--gray-800);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contributor {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
|
||||||
|
border: 2px solid var(--gray-900);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contributor:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contributor-count {
|
||||||
|
color: var(--gray-500);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-left: 0.75rem;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pagination */
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: var(--gray-900);
|
||||||
|
border: 1px solid var(--gray-800);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
color: var(--gray-400);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn:hover {
|
||||||
|
background: var(--gray-800);
|
||||||
|
color: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn.active {
|
||||||
|
background: var(--accent-1);
|
||||||
|
border-color: var(--accent-1);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Version Sidebar (sticky) */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.main-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 200px 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 100px;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-nav-title {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--gray-500);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-nav-list {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-nav-list li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-nav-list a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
color: var(--gray-400);
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-nav-list a:hover {
|
||||||
|
background: var(--gray-900);
|
||||||
|
color: var(--gray-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-nav-list a.active {
|
||||||
|
background: rgba(255, 135, 0, 0.1);
|
||||||
|
color: var(--accent-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
.version-nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.version-nav {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="header">
|
||||||
|
<div class="header-content">
|
||||||
|
<a href="#" class="logo">BlackRoad</a>
|
||||||
|
<nav class="header-nav">
|
||||||
|
<a href="#">Docs</a>
|
||||||
|
<a href="#">API</a>
|
||||||
|
<a href="#">Blog</a>
|
||||||
|
<a href="#">GitHub</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="hero">
|
||||||
|
<h1>Changelog</h1>
|
||||||
|
<p>Stay up to date with the latest features, improvements, and fixes. Subscribe to get notified about new releases.</p>
|
||||||
|
<form class="subscribe-form">
|
||||||
|
<input type="email" placeholder="your@email.com">
|
||||||
|
<button type="submit">Subscribe</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="main-content">
|
||||||
|
<!-- Version Navigation (Desktop) -->
|
||||||
|
<aside class="version-nav">
|
||||||
|
<h4 class="version-nav-title">Versions</h4>
|
||||||
|
<ul class="version-nav-list">
|
||||||
|
<li><a href="#v2.4.0" class="active">v2.4.0</a></li>
|
||||||
|
<li><a href="#v2.3.0">v2.3.0</a></li>
|
||||||
|
<li><a href="#v2.2.0">v2.2.0</a></li>
|
||||||
|
<li><a href="#v2.1.0">v2.1.0</a></li>
|
||||||
|
<li><a href="#v2.0.0">v2.0.0</a></li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<!-- Filters -->
|
||||||
|
<div class="filters">
|
||||||
|
<button class="filter-btn active">All</button>
|
||||||
|
<button class="filter-btn">Features</button>
|
||||||
|
<button class="filter-btn">Fixes</button>
|
||||||
|
<button class="filter-btn">Improvements</button>
|
||||||
|
<button class="filter-btn">Breaking</button>
|
||||||
|
<button class="filter-btn">Security</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Timeline -->
|
||||||
|
<div class="timeline">
|
||||||
|
<!-- Version 2.4.0 -->
|
||||||
|
<div class="version-group" id="v2.4.0">
|
||||||
|
<div class="version-header">
|
||||||
|
<span class="version-number">v2.4.0</span>
|
||||||
|
<span class="version-date">February 5, 2026</span>
|
||||||
|
<span class="version-badge latest">Latest</span>
|
||||||
|
</div>
|
||||||
|
<div class="changes-grid">
|
||||||
|
<div class="change-card">
|
||||||
|
<div class="change-header">
|
||||||
|
<span class="change-type feature">Feature</span>
|
||||||
|
<h3 class="change-title">WebSocket Real-time Sync</h3>
|
||||||
|
</div>
|
||||||
|
<p class="change-description">
|
||||||
|
Added real-time synchronization support via WebSockets. Data now syncs instantly across all connected clients without polling.
|
||||||
|
</p>
|
||||||
|
<div class="change-code">
|
||||||
|
<span class="keyword">const</span> ws = <span class="keyword">new</span> <span class="function">BlackRoadSocket</span>(<span class="string">'wss://api.blackroad.io'</span>);<br>
|
||||||
|
ws.<span class="function">subscribe</span>(<span class="string">'changes'</span>, (data) => {<br>
|
||||||
|
<span class="comment">// Handle real-time updates</span><br>
|
||||||
|
});
|
||||||
|
</div>
|
||||||
|
<div class="change-meta">
|
||||||
|
<span class="change-meta-item">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
|
||||||
|
<a href="#">#PR-847</a>
|
||||||
|
</span>
|
||||||
|
<span class="change-meta-item">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
|
||||||
|
@alexa
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="change-card">
|
||||||
|
<div class="change-header">
|
||||||
|
<span class="change-type improvement">Improvement</span>
|
||||||
|
<h3 class="change-title">50% Faster Cold Starts</h3>
|
||||||
|
</div>
|
||||||
|
<p class="change-description">
|
||||||
|
Optimized the initialization process to reduce cold start times by 50%. Workers now boot in under 5ms on average.
|
||||||
|
</p>
|
||||||
|
<div class="change-meta">
|
||||||
|
<span class="change-meta-item">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
|
||||||
|
<a href="#">#PR-852</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="change-card">
|
||||||
|
<div class="change-header">
|
||||||
|
<span class="change-type security">Security</span>
|
||||||
|
<h3 class="change-title">Enhanced API Key Rotation</h3>
|
||||||
|
</div>
|
||||||
|
<p class="change-description">
|
||||||
|
API keys can now be rotated without downtime. New keys are immediately active while old keys remain valid for a configurable grace period.
|
||||||
|
</p>
|
||||||
|
<div class="change-meta">
|
||||||
|
<span class="change-meta-item">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
|
||||||
|
<a href="#">#PR-849</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Version 2.3.0 -->
|
||||||
|
<div class="version-group" id="v2.3.0">
|
||||||
|
<div class="version-header">
|
||||||
|
<span class="version-number">v2.3.0</span>
|
||||||
|
<span class="version-date">January 15, 2026</span>
|
||||||
|
</div>
|
||||||
|
<div class="changes-grid">
|
||||||
|
<div class="change-card">
|
||||||
|
<div class="change-header">
|
||||||
|
<span class="change-type feature">Feature</span>
|
||||||
|
<h3 class="change-title">Multi-Region Deployment</h3>
|
||||||
|
</div>
|
||||||
|
<p class="change-description">
|
||||||
|
Deploy your applications to multiple regions simultaneously. Traffic is automatically routed to the nearest healthy region.
|
||||||
|
</p>
|
||||||
|
<div class="change-meta">
|
||||||
|
<span class="change-meta-item">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
|
||||||
|
<a href="#">#PR-798</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="change-card">
|
||||||
|
<div class="change-header">
|
||||||
|
<span class="change-type fix">Fix</span>
|
||||||
|
<h3 class="change-title">Memory Leak in Long-Running Workers</h3>
|
||||||
|
</div>
|
||||||
|
<p class="change-description">
|
||||||
|
Fixed a memory leak that occurred in workers running for more than 24 hours. Memory usage now remains stable indefinitely.
|
||||||
|
</p>
|
||||||
|
<div class="change-meta">
|
||||||
|
<span class="change-meta-item">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
|
||||||
|
<a href="#">#PR-801</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="change-card">
|
||||||
|
<div class="change-header">
|
||||||
|
<span class="change-type breaking">Breaking</span>
|
||||||
|
<h3 class="change-title">Deprecated v1 API Endpoints Removed</h3>
|
||||||
|
</div>
|
||||||
|
<p class="change-description">
|
||||||
|
The deprecated v1 API endpoints have been removed. Please migrate to v2 endpoints. See migration guide for details.
|
||||||
|
</p>
|
||||||
|
<div class="change-meta">
|
||||||
|
<span class="change-meta-item">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
||||||
|
<a href="#">Migration Guide</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Version 2.2.0 -->
|
||||||
|
<div class="version-group" id="v2.2.0">
|
||||||
|
<div class="version-header">
|
||||||
|
<span class="version-number">v2.2.0</span>
|
||||||
|
<span class="version-date">December 20, 2025</span>
|
||||||
|
</div>
|
||||||
|
<div class="changes-grid">
|
||||||
|
<div class="change-card">
|
||||||
|
<div class="change-header">
|
||||||
|
<span class="change-type feature">Feature</span>
|
||||||
|
<h3 class="change-title">Custom Domain SSL</h3>
|
||||||
|
</div>
|
||||||
|
<p class="change-description">
|
||||||
|
Automatic SSL certificate provisioning for custom domains. Certificates are renewed automatically 30 days before expiration.
|
||||||
|
</p>
|
||||||
|
<div class="change-meta">
|
||||||
|
<span class="change-meta-item">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
|
||||||
|
<a href="#">#PR-756</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="change-card">
|
||||||
|
<div class="change-header">
|
||||||
|
<span class="change-type deprecated">Deprecated</span>
|
||||||
|
<h3 class="change-title">Legacy Auth Tokens</h3>
|
||||||
|
</div>
|
||||||
|
<p class="change-description">
|
||||||
|
Legacy authentication tokens are now deprecated. Please migrate to the new JWT-based authentication by March 2026.
|
||||||
|
</p>
|
||||||
|
<div class="change-meta">
|
||||||
|
<span class="change-meta-item">
|
||||||
|
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||||
|
Sunset: March 2026
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="pagination">
|
||||||
|
<button class="page-btn">←</button>
|
||||||
|
<button class="page-btn active">1</button>
|
||||||
|
<button class="page-btn">2</button>
|
||||||
|
<button class="page-btn">3</button>
|
||||||
|
<button class="page-btn">4</button>
|
||||||
|
<button class="page-btn">→</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Filter functionality
|
||||||
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||||
|
btn.classList.add('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Version nav active state
|
||||||
|
const versionLinks = document.querySelectorAll('.version-nav-list a');
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
versionLinks.forEach(link => link.classList.remove('active'));
|
||||||
|
const activeLink = document.querySelector(`.version-nav-list a[href="#${entry.target.id}"]`);
|
||||||
|
if (activeLink) activeLink.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, { threshold: 0.5 });
|
||||||
|
|
||||||
|
document.querySelectorAll('.version-group').forEach(group => {
|
||||||
|
observer.observe(group);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1050
14-onboarding.html
Normal file
1050
14-onboarding.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -17,6 +17,9 @@ A collection of HTML templates built with the BlackRoad Design System.
|
|||||||
| 09 | `09-blog.html` | Blog listing with featured post, grid |
|
| 09 | `09-blog.html` | Blog listing with featured post, grid |
|
||||||
| 10 | `10-settings.html` | Settings page with forms, toggles |
|
| 10 | `10-settings.html` | Settings page with forms, toggles |
|
||||||
| 11 | `11-status.html` | System status page with uptime chart |
|
| 11 | `11-status.html` | System status page with uptime chart |
|
||||||
|
| 12 | `12-profile.html` | User profile with avatar, activity feed, contributions |
|
||||||
|
| 13 | `13-changelog.html` | Release notes with version timeline |
|
||||||
|
| 14 | `14-onboarding.html` | Multi-step wizard with progress bar |
|
||||||
|
|
||||||
## Design System
|
## Design System
|
||||||
|
|
||||||
|
|||||||
74
index.html
74
index.html
@@ -403,7 +403,7 @@ body {
|
|||||||
</p>
|
</p>
|
||||||
<div class="hero-stats">
|
<div class="hero-stats">
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
<div class="stat-value">11</div>
|
<div class="stat-value">14</div>
|
||||||
<div class="stat-label">Templates</div>
|
<div class="stat-label">Templates</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat">
|
<div class="stat">
|
||||||
@@ -702,6 +702,78 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Profile -->
|
||||||
|
<div class="template-card">
|
||||||
|
<div class="template-preview">
|
||||||
|
<iframe src="12-profile.html" loading="lazy"></iframe>
|
||||||
|
<div class="template-preview-overlay"></div>
|
||||||
|
<div class="template-actions">
|
||||||
|
<a href="12-profile.html" class="action-btn primary" target="_blank">Preview</a>
|
||||||
|
<a href="https://github.com/blackboxprogramming/blackroad-templates" class="action-btn secondary" target="_blank">Source</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="template-info">
|
||||||
|
<div class="template-header">
|
||||||
|
<h3 class="template-name">Profile</h3>
|
||||||
|
<span class="template-number">12</span>
|
||||||
|
</div>
|
||||||
|
<p class="template-description">User profile with avatar, stats, activity feed, and contribution graph.</p>
|
||||||
|
<div class="template-tags">
|
||||||
|
<span class="tag">App</span>
|
||||||
|
<span class="tag">Profile</span>
|
||||||
|
<span class="tag">Activity</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Changelog -->
|
||||||
|
<div class="template-card">
|
||||||
|
<div class="template-preview">
|
||||||
|
<iframe src="13-changelog.html" loading="lazy"></iframe>
|
||||||
|
<div class="template-preview-overlay"></div>
|
||||||
|
<div class="template-actions">
|
||||||
|
<a href="13-changelog.html" class="action-btn primary" target="_blank">Preview</a>
|
||||||
|
<a href="https://github.com/blackboxprogramming/blackroad-templates" class="action-btn secondary" target="_blank">Source</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="template-info">
|
||||||
|
<div class="template-header">
|
||||||
|
<h3 class="template-name">Changelog</h3>
|
||||||
|
<span class="template-number">13</span>
|
||||||
|
</div>
|
||||||
|
<p class="template-description">Release notes timeline with version badges and change types.</p>
|
||||||
|
<div class="template-tags">
|
||||||
|
<span class="tag">Pages</span>
|
||||||
|
<span class="tag">Changelog</span>
|
||||||
|
<span class="tag">Releases</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Onboarding -->
|
||||||
|
<div class="template-card">
|
||||||
|
<div class="template-preview">
|
||||||
|
<iframe src="14-onboarding.html" loading="lazy"></iframe>
|
||||||
|
<div class="template-preview-overlay"></div>
|
||||||
|
<div class="template-actions">
|
||||||
|
<a href="14-onboarding.html" class="action-btn primary" target="_blank">Preview</a>
|
||||||
|
<a href="https://github.com/blackboxprogramming/blackroad-templates" class="action-btn secondary" target="_blank">Source</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="template-info">
|
||||||
|
<div class="template-header">
|
||||||
|
<h3 class="template-name">Onboarding</h3>
|
||||||
|
<span class="template-number">14</span>
|
||||||
|
</div>
|
||||||
|
<p class="template-description">Multi-step wizard with progress bar, forms, and confetti celebration.</p>
|
||||||
|
<div class="template-tags">
|
||||||
|
<span class="tag featured">Featured</span>
|
||||||
|
<span class="tag">App</span>
|
||||||
|
<span class="tag">Wizard</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user