653ac50e55
Adds brand-assets/ (SVGs, brand guide) and REBRAND-IMPLEMENTATION-GUIDE.md as reference docs. Removes .claude/settings.local.json from tracking (contains local permissions and tokens). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
730 lines
27 KiB
HTML
730 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ResolutionFlow - App Mockups</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: #09090b;
|
|
color: #fff;
|
|
min-height: 100vh;
|
|
padding: 60px 40px;
|
|
}
|
|
|
|
.page-header {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.page-header p {
|
|
color: #52525b;
|
|
}
|
|
|
|
.mockups-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 80px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mockup-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.mockup-label {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
color: #818cf8;
|
|
}
|
|
|
|
/* Browser Bar */
|
|
.browser-bar {
|
|
background: #18181b;
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
|
|
.browser-dots {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.browser-dots span {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #3f3f46;
|
|
}
|
|
|
|
.browser-url {
|
|
flex: 1;
|
|
background: #27272a;
|
|
border-radius: 6px;
|
|
padding: 6px 12px;
|
|
font-size: 0.75rem;
|
|
color: #71717a;
|
|
}
|
|
|
|
/* Login Screen Mockup */
|
|
.login-mockup {
|
|
background: linear-gradient(145deg, #0f0f18 0%, #12121c 100%);
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
border: 1px solid #27272a;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.login-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
min-height: 600px;
|
|
}
|
|
|
|
.login-left {
|
|
background: linear-gradient(135deg, rgba(129, 140, 248, 0.1) 0%, rgba(167, 139, 250, 0.05) 100%);
|
|
padding: 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
border-right: 1px solid #27272a;
|
|
}
|
|
|
|
.login-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.login-logo svg {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
.login-logo h1 {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.login-logo .resolution {
|
|
color: #fff;
|
|
}
|
|
|
|
.login-logo .flow {
|
|
background: linear-gradient(90deg, #818cf8, #a78bfa);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.login-tagline {
|
|
font-size: 1.1rem;
|
|
background: linear-gradient(90deg, #818cf8, #a78bfa);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-weight: 500;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.login-features {
|
|
text-align: left;
|
|
color: #a1a1aa;
|
|
font-size: 0.9rem;
|
|
line-height: 2;
|
|
list-style: none;
|
|
}
|
|
|
|
.login-features li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.login-features svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.login-right {
|
|
padding: 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.login-form-header {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.login-form-header h2 {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.login-form-header p {
|
|
color: #71717a;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: #a1a1aa;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
background: #18181b;
|
|
border: 1px solid #27272a;
|
|
border-radius: 10px;
|
|
padding: 14px 16px;
|
|
font-size: 0.95rem;
|
|
color: #fff;
|
|
outline: none;
|
|
}
|
|
|
|
.form-group input::placeholder {
|
|
color: #52525b;
|
|
}
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #818cf8, #a78bfa);
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 14px 24px;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.login-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin: 24px 0;
|
|
color: #52525b;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.login-divider::before,
|
|
.login-divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: #27272a;
|
|
}
|
|
|
|
.social-login {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.social-btn {
|
|
flex: 1;
|
|
background: #18181b;
|
|
border: 1px solid #27272a;
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
font-size: 0.85rem;
|
|
color: #a1a1aa;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Dashboard Mockup */
|
|
.dashboard-mockup {
|
|
background: #09090b;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
border: 1px solid #27272a;
|
|
}
|
|
|
|
.dashboard-header {
|
|
background: #12121c;
|
|
padding: 16px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
|
|
.dashboard-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.dashboard-logo svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.dashboard-logo h1 {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.dashboard-logo .resolution {
|
|
color: #fff;
|
|
}
|
|
|
|
.dashboard-logo .flow {
|
|
background: linear-gradient(90deg, #818cf8, #a78bfa);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.dashboard-nav {
|
|
display: flex;
|
|
gap: 32px;
|
|
}
|
|
|
|
.dashboard-nav a {
|
|
color: #71717a;
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dashboard-nav a.active {
|
|
color: #818cf8;
|
|
}
|
|
|
|
.dashboard-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.dashboard-user-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #818cf8, #a78bfa);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.dashboard-user-name {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 32px;
|
|
min-height: 500px;
|
|
}
|
|
|
|
.dashboard-title {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.dashboard-subtitle {
|
|
color: #71717a;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: #18181b;
|
|
border: 1px solid #27272a;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
}
|
|
|
|
.stat-card-label {
|
|
font-size: 0.8rem;
|
|
color: #71717a;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-card-value {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.stat-card-change {
|
|
font-size: 0.8rem;
|
|
color: #22c55e;
|
|
}
|
|
|
|
.trees-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.tree-card {
|
|
background: #18181b;
|
|
border: 1px solid #27272a;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tree-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: linear-gradient(135deg, rgba(129, 140, 248, 0.2), rgba(167, 139, 250, 0.1));
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tree-icon svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.tree-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.tree-name {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.tree-meta {
|
|
font-size: 0.8rem;
|
|
color: #71717a;
|
|
}
|
|
|
|
.tree-arrow {
|
|
color: #52525b;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.login-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.login-left {
|
|
display: none;
|
|
}
|
|
.dashboard-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.trees-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.dashboard-nav {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-header">
|
|
<h1>ResolutionFlow App Mockups</h1>
|
|
<p>How the brand looks in the actual application</p>
|
|
</div>
|
|
|
|
<div class="mockups-container">
|
|
<!-- Login Screen -->
|
|
<div class="mockup-section">
|
|
<span class="mockup-label">Login Screen</span>
|
|
<div class="login-mockup">
|
|
<div class="browser-bar">
|
|
<div class="browser-dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="browser-url">resolutionflow.com/login</div>
|
|
</div>
|
|
<div class="login-content">
|
|
<div class="login-left">
|
|
<div class="login-logo">
|
|
<svg viewBox="0 0 64 64" fill="none">
|
|
<defs>
|
|
<linearGradient id="login-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#818cf8"/>
|
|
<stop offset="100%" stop-color="#a78bfa"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="8" cy="11" r="4" fill="url(#login-grad)" opacity="0.25"/>
|
|
<circle cx="8" cy="24" r="4.5" fill="url(#login-grad)" opacity="0.4"/>
|
|
<circle cx="8" cy="40" r="4.5" fill="url(#login-grad)" opacity="0.4"/>
|
|
<circle cx="8" cy="53" r="4" fill="url(#login-grad)" opacity="0.25"/>
|
|
<path d="M12 11L22 26" stroke="url(#login-grad)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.35"/>
|
|
<path d="M12.5 24L22 30" stroke="url(#login-grad)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M12.5 40L22 34" stroke="url(#login-grad)" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M12 53L22 38" stroke="url(#login-grad)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 2.5" opacity="0.35"/>
|
|
<circle cx="28" cy="32" r="7" fill="url(#login-grad)" opacity="0.12"/>
|
|
<circle cx="28" cy="32" r="5" fill="url(#login-grad)" opacity="0.9"/>
|
|
<path d="M33 32H54M54 32L46 24M54 32L46 40" stroke="url(#login-grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<h1><span class="resolution">Resolution</span><span class="flow">Flow</span></h1>
|
|
</div>
|
|
<p class="login-tagline">From issue to resolution, documented.</p>
|
|
<ul class="login-features">
|
|
<li>
|
|
<svg viewBox="0 0 20 20" fill="none">
|
|
<path d="M10 18a8 8 0 100-16 8 8 0 000 16z" stroke="#818cf8" stroke-width="1.5"/>
|
|
<path d="M7 10l2 2 4-4" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Guided troubleshooting workflows
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 20 20" fill="none">
|
|
<path d="M10 18a8 8 0 100-16 8 8 0 000 16z" stroke="#818cf8" stroke-width="1.5"/>
|
|
<path d="M7 10l2 2 4-4" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Automatic documentation generation
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 20 20" fill="none">
|
|
<path d="M10 18a8 8 0 100-16 8 8 0 000 16z" stroke="#818cf8" stroke-width="1.5"/>
|
|
<path d="M7 10l2 2 4-4" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Reduce context switching overhead
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 20 20" fill="none">
|
|
<path d="M10 18a8 8 0 100-16 8 8 0 000 16z" stroke="#818cf8" stroke-width="1.5"/>
|
|
<path d="M7 10l2 2 4-4" stroke="#818cf8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Built for MSP engineers
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="login-right">
|
|
<div class="login-form-header">
|
|
<h2>Welcome back</h2>
|
|
<p>Sign in to continue to ResolutionFlow</p>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Email</label>
|
|
<input type="email" placeholder="you@company.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
<input type="password" placeholder="••••••••">
|
|
</div>
|
|
<button class="login-btn">Sign in</button>
|
|
<div class="login-divider">or continue with</div>
|
|
<div class="social-login">
|
|
<button class="social-btn">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
|
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
|
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
|
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
|
</svg>
|
|
Google
|
|
</button>
|
|
<button class="social-btn">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
GitHub
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard -->
|
|
<div class="mockup-section">
|
|
<span class="mockup-label">Dashboard</span>
|
|
<div class="dashboard-mockup">
|
|
<div class="browser-bar">
|
|
<div class="browser-dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="browser-url">resolutionflow.com/dashboard</div>
|
|
</div>
|
|
<div class="dashboard-header">
|
|
<div class="dashboard-logo">
|
|
<svg viewBox="0 0 40 40" fill="none">
|
|
<defs>
|
|
<linearGradient id="dash-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#818cf8"/>
|
|
<stop offset="100%" stop-color="#a78bfa"/>
|
|
</linearGradient>
|
|
</defs>
|
|
<circle cx="5" cy="7" r="2.5" fill="url(#dash-grad)" opacity="0.25"/>
|
|
<circle cx="5" cy="15" r="3" fill="url(#dash-grad)" opacity="0.4"/>
|
|
<circle cx="5" cy="25" r="3" fill="url(#dash-grad)" opacity="0.4"/>
|
|
<circle cx="5" cy="33" r="2.5" fill="url(#dash-grad)" opacity="0.25"/>
|
|
<path d="M7.5 7L14 17" stroke="url(#dash-grad)" stroke-width="1" stroke-linecap="round" stroke-dasharray="1.5 2" opacity="0.35"/>
|
|
<path d="M8 15L14 19" stroke="url(#dash-grad)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M8 25L14 21" stroke="url(#dash-grad)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
|
|
<path d="M7.5 33L14 23" stroke="url(#dash-grad)" stroke-width="1" stroke-linecap="round" stroke-dasharray="1.5 2" opacity="0.35"/>
|
|
<circle cx="18" cy="20" r="5" fill="url(#dash-grad)" opacity="0.12"/>
|
|
<circle cx="18" cy="20" r="3.5" fill="url(#dash-grad)" opacity="0.9"/>
|
|
<path d="M22 20H36M36 20L30 14M36 20L30 26" stroke="url(#dash-grad)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<h1><span class="resolution">Resolution</span><span class="flow">Flow</span></h1>
|
|
</div>
|
|
<nav class="dashboard-nav">
|
|
<a href="#" class="active">Dashboard</a>
|
|
<a href="#">Trees</a>
|
|
<a href="#">Sessions</a>
|
|
<a href="#">Reports</a>
|
|
</nav>
|
|
<div class="dashboard-user">
|
|
<span class="dashboard-user-name">Michael</span>
|
|
<div class="dashboard-user-avatar">M</div>
|
|
</div>
|
|
</div>
|
|
<div class="dashboard-content">
|
|
<h2 class="dashboard-title">Welcome back, Michael</h2>
|
|
<p class="dashboard-subtitle">Here's what's happening with your troubleshooting workflows</p>
|
|
|
|
<div class="dashboard-grid">
|
|
<div class="stat-card">
|
|
<p class="stat-card-label">Sessions This Week</p>
|
|
<p class="stat-card-value">47</p>
|
|
<p class="stat-card-change">↑ 12% from last week</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<p class="stat-card-label">Docs Generated</p>
|
|
<p class="stat-card-value">43</p>
|
|
<p class="stat-card-change">↑ 8% from last week</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<p class="stat-card-label">Avg. Resolution Time</p>
|
|
<p class="stat-card-value">4.2m</p>
|
|
<p class="stat-card-change">↓ 15% faster</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="section-title">Recent Trees</h3>
|
|
<div class="trees-grid">
|
|
<div class="tree-card">
|
|
<div class="tree-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<path d="M3 9h18"/>
|
|
<path d="M9 21V9"/>
|
|
</svg>
|
|
</div>
|
|
<div class="tree-info">
|
|
<p class="tree-name">Citrix VDI Troubleshooting</p>
|
|
<p class="tree-meta">24 nodes • Last used 2h ago</p>
|
|
</div>
|
|
<span class="tree-arrow">→</span>
|
|
</div>
|
|
<div class="tree-card">
|
|
<div class="tree-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path d="M12 6v6l4 2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="tree-info">
|
|
<p class="tree-name">Office 365 Email Issues</p>
|
|
<p class="tree-meta">18 nodes • Last used yesterday</p>
|
|
</div>
|
|
<span class="tree-arrow">→</span>
|
|
</div>
|
|
<div class="tree-card">
|
|
<div class="tree-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
|
<path d="M2 17l10 5 10-5"/>
|
|
<path d="M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="tree-info">
|
|
<p class="tree-name">Network Connectivity</p>
|
|
<p class="tree-meta">31 nodes • Last used 3 days ago</p>
|
|
</div>
|
|
<span class="tree-arrow">→</span>
|
|
</div>
|
|
<div class="tree-card">
|
|
<div class="tree-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2">
|
|
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
|
<path d="M8 21h8"/>
|
|
<path d="M12 17v4"/>
|
|
</svg>
|
|
</div>
|
|
<div class="tree-info">
|
|
<p class="tree-name">Active Directory Issues</p>
|
|
<p class="tree-meta">22 nodes • Last used 5 days ago</p>
|
|
</div>
|
|
<span class="tree-arrow">→</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|