Ignore homepage design scratch file
This commit is contained in:
ZacharyZhang-NY committed
1 parent
30ababdab3
commit
53607f142d
2 files changed
+3
-436
No files matched your search
@@ -30,6 +30,9 @@ oldreference/
|
||||
*.md
|
||||
!/README.md
|
||||
|
||||
# Local design scratch files
|
||||
homepagedesign.html
|
||||
|
||||
# Package manager logs
|
||||
npm-debug.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
@@ -1,436 +0,0 @@
|
||||
<html lang="en" vid="0"><head vid="1">
|
||||
<meta charset="UTF-8" vid="2">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
|
||||
<title vid="4">Dashboard</title>
|
||||
<style vid="5">
|
||||
:root {
|
||||
|
||||
--bg-base: #ffffff;
|
||||
--bg-sidebar: #ffffff;
|
||||
--bg-hover: #f4f5f5;
|
||||
--bg-element: #f4f5f5;
|
||||
--bg-card: #ffffff;
|
||||
|
||||
|
||||
--text-primary: #1a202c;
|
||||
--text-secondary: #718096;
|
||||
--text-tertiary: #a0aec0;
|
||||
|
||||
--border-faint: rgba(0, 0, 0, 0.05);
|
||||
--accent-red: #e5484d;
|
||||
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 16px;
|
||||
--space-4: 24px;
|
||||
--space-5: 32px;
|
||||
--space-6: 48px;
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-base);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-tertiary);
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0.02em;
|
||||
margin-bottom: var(--space-2);
|
||||
padding-left: var(--space-2);
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.field-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-3);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
background-color: var(--bg-sidebar);
|
||||
border-right: 1px solid var(--border-faint);
|
||||
padding: var(--space-4) var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
|
||||
.nav-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
transition: background-color 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: var(--bg-hover);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background-color: var(--bg-hover);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.nav-item.danger {
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-icon {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-item.danger .nav-icon {
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.page-header {
|
||||
margin-bottom: var(--space-6);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background-color: var(--bg-element);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.data-section {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.data-container {
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-faint);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
|
||||
.data-header {
|
||||
background-color: #fafafa;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--border-faint);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--border-faint);
|
||||
}
|
||||
|
||||
.data-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.row-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.row-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-element);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.row-avatar.brand {
|
||||
background-color: #e57339;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.row-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.row-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background-color: var(--bg-base);
|
||||
border: 1px solid var(--border-faint);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: var(--bg-hover);
|
||||
}
|
||||
|
||||
|
||||
svg {
|
||||
stroke-width: 1.5;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body vid="6">
|
||||
|
||||
<aside class="sidebar" vid="7">
|
||||
<div class="nav-group" vid="8">
|
||||
<div class="section-label" vid="9">Overview</div>
|
||||
<a href="#" class="nav-item active" vid="10">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" vid="11"><rect x="3" y="3" width="7" height="7" vid="12"></rect><rect x="14" y="3" width="7" height="7" vid="13"></rect><rect x="14" y="14" width="7" height="7" vid="14"></rect><rect x="3" y="14" width="7" height="7" vid="15"></rect></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="#" class="nav-item" vid="16">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" vid="17"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" vid="18"></polyline></svg>
|
||||
Analytics
|
||||
</a>
|
||||
<a href="#" class="nav-item" vid="19">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" vid="20"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" vid="21"></path><circle cx="9" cy="7" r="4" vid="22"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87" vid="23"></path><path d="M16 3.13a4 4 0 0 1 0 7.75" vid="24"></path></svg>
|
||||
Audience
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-group" vid="25">
|
||||
<div class="section-label" vid="26">Management</div>
|
||||
<a href="#" class="nav-item" vid="27">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" vid="28"><rect x="3" y="4" width="18" height="18" rx="2" ry="2" vid="29"></rect><line x1="16" y1="2" x2="16" y2="6" vid="30"></line><line x1="8" y1="2" x2="8" y2="6" vid="31"></line><line x1="3" y1="10" x2="21" y2="10" vid="32"></line></svg>
|
||||
Campaigns
|
||||
</a>
|
||||
<a href="#" class="nav-item" vid="33">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" vid="34"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" vid="35"></path></svg>
|
||||
Assets
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-group" style="margin-top: auto;" vid="36">
|
||||
<a href="#" class="nav-item" vid="37">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" vid="38"><circle cx="12" cy="12" r="3" vid="39"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" vid="40"></path></svg>
|
||||
Settings
|
||||
</a>
|
||||
<a href="#" class="nav-item danger" vid="41">
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" vid="42"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" vid="43"></path><polyline points="16 17 21 12 16 7" vid="44"></polyline><line x1="21" y1="12" x2="9" y2="12" vid="45"></line></svg>
|
||||
Log out
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main-content" vid="46">
|
||||
<div class="content-inner" vid="47">
|
||||
|
||||
<header class="page-header" vid="48">
|
||||
<h1 class="page-title" vid="49">Overview</h1>
|
||||
</header>
|
||||
|
||||
<section class="data-section" vid="50">
|
||||
<div class="field-label" vid="51">Current Performance</div>
|
||||
<div class="field-desc" vid="52">Metrics from the last 30 days.</div>
|
||||
|
||||
<div class="metrics-grid" vid="53">
|
||||
<div class="metric-card" vid="54">
|
||||
<span class="metric-label" vid="55">Total Views</span>
|
||||
<span class="metric-value" vid="56">124,500</span>
|
||||
</div>
|
||||
<div class="metric-card" vid="57">
|
||||
<span class="metric-label" vid="58">Engagement Rate</span>
|
||||
<span class="metric-value" vid="59">4.2%</span>
|
||||
</div>
|
||||
<div class="metric-card" vid="60">
|
||||
<span class="metric-label" vid="61">Active Users</span>
|
||||
<span class="metric-value" vid="62">8,192</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="data-section" vid="63">
|
||||
<div class="field-label" vid="64">Recent Activity</div>
|
||||
<div class="field-desc" vid="65">Latest actions across your workspace.</div>
|
||||
|
||||
<div class="data-container" vid="66">
|
||||
<div class="data-header" vid="67">
|
||||
<span vid="68">Activity Feed</span>
|
||||
<span style="color: var(--text-secondary); font-weight: normal;" vid="69">View all</span>
|
||||
</div>
|
||||
<div class="data-list" vid="70">
|
||||
|
||||
<div class="data-row" vid="71">
|
||||
<div class="row-content" vid="72">
|
||||
<div class="row-avatar brand" vid="73">J</div>
|
||||
<div class="row-text" vid="74">
|
||||
<span class="row-title" vid="75">John Smith updated Profile</span>
|
||||
<span class="row-subtitle" vid="76">2 hours ago • Settings</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="action-button" vid="77">Review</button>
|
||||
</div>
|
||||
|
||||
<div class="data-row" vid="78">
|
||||
<div class="row-content" vid="79">
|
||||
<div class="row-avatar" vid="80">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" vid="81"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" vid="82"></path><polyline points="7 10 12 15 17 10" vid="83"></polyline><line x1="12" y1="15" x2="12" y2="3" vid="84"></line></svg>
|
||||
</div>
|
||||
<div class="row-text" vid="85">
|
||||
<span class="row-title" vid="86">Q3 Report Generated</span>
|
||||
<span class="row-subtitle" vid="87">Yesterday • System</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="action-button" vid="88">Download</button>
|
||||
</div>
|
||||
|
||||
<div class="data-row" vid="89">
|
||||
<div class="row-content" vid="90">
|
||||
<div class="row-avatar" vid="91">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" vid="92"><circle cx="12" cy="12" r="10" vid="93"></circle><polyline points="12 6 12 12 16 14" vid="94"></polyline></svg>
|
||||
</div>
|
||||
<div class="row-text" vid="95">
|
||||
<span class="row-title" vid="96">New integration synced</span>
|
||||
<span class="row-subtitle" vid="97">Oct 24 • Automations</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="action-button" vid="98">Manage</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
</body></html>
|
||||
Reference in new issue
Block a user