Files

522 lines
19 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#0c0b14" />
<title>Apple — AAPL</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-deep: #0c0b14;
--bg-surface: #131220;
--bg-raised: #1a1930;
--bg-hover: #222140;
--border-subtle: rgba(255,255,255,0.06);
--border-default: rgba(255,255,255,0.10);
--text-primary: #f1f0f7;
--text-secondary: #8b87a3;
--text-tertiary: #5c5878;
--accent-start: #6366f1;
--accent-end: #a855f7;
--positive: #34d399;
--positive-dim: rgba(52,211,153,0.10);
--negative: #f87171;
--negative-dim: rgba(248,113,113,0.10);
--warning: #fbbf24;
--warning-dim: rgba(251,191,36,0.10);
--gradient-accent: linear-gradient(135deg, #6366f1, #a855f7);
--gradient-positive: linear-gradient(135deg, #34d399, #22d3ee);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 9999px;
}
html { font-size: 16px; }
body {
font-family: 'Inter', -apple-system, sans-serif;
background: var(--bg-deep);
color: var(--text-primary);
line-height: 1.5;
min-height: 100vh;
min-height: 100dvh;
padding-bottom: 76px;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.mono { font-family: 'JetBrains Mono', monospace; }
/* Header */
.header {
padding: 12px 20px;
display: flex; align-items: center; justify-content: space-between;
}
.header__left { display: flex; align-items: center; gap: 12px; }
.header__back {
width: 40px; height: 40px;
border-radius: var(--radius-sm);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
display: flex; align-items: center; justify-content: center;
color: var(--text-secondary);
}
.header__back svg { width: 18px; height: 18px; }
.header__right { display: flex; gap: 8px; }
.header__btn {
width: 40px; height: 40px;
border-radius: var(--radius-sm);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
display: flex; align-items: center; justify-content: center;
color: var(--text-secondary);
}
.header__btn svg { width: 18px; height: 18px; }
/* Stock Info */
.stock-info {
padding: 0 20px 20px;
}
.stock-info__ticker {
display: flex; align-items: center; gap: 10px;
}
.stock-info__logo {
width: 44px; height: 44px;
border-radius: var(--radius-md);
background: var(--positive-dim);
display: flex; align-items: center; justify-content: center;
font-size: 1.125rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--positive);
}
.stock-info__names { }
.stock-info__name { font-size: 1.25rem; font-weight: 700; }
.stock-info__sub { font-size: 0.75rem; color: var(--text-tertiary); }
.stock-info__price-block {
margin-top: 16px;
}
.stock-info__price {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
}
.stock-info__change {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px;
border-radius: var(--radius-full);
font-size: 0.8125rem;
font-weight: 600;
font-family: 'JetBrains Mono', monospace;
background: var(--positive-dim);
color: var(--positive);
margin-top: 8px;
}
.stock-info__change svg { width: 13px; height: 13px; }
/* Period Tabs */
.period-tabs {
padding: 0 20px 16px;
display: flex; gap: 6px;
}
.period-tab {
padding: 6px 14px;
border-radius: var(--radius-full);
font-size: 0.6875rem;
font-weight: 600;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
transition: all 150ms;
}
.period-tab--active {
background: var(--gradient-accent);
color: white;
border-color: transparent;
}
.period-tab:active { transform: scale(0.95); }
/* Chart */
.chart-section {
padding: 0 20px 20px;
}
.chart-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 16px;
}
.chart-card__svg { width: 100%; height: 160px; }
.chart-card__svg line.grid { stroke: var(--border-subtle); stroke-width: 0.5; stroke-dasharray: 4 4; }
.chart-card__svg text { fill: var(--text-tertiary); font-size: 9px; font-family: 'JetBrains Mono', monospace; }
.chart-card__svg .area-fill { fill: url(#dChartGrad); opacity: 0.3; }
.chart-card__svg .chart-line { fill: none; stroke: url(#dLineGrad); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Stats Grid */
.stats-section {
padding: 0 20px 20px;
}
.section-title { font-size: 0.9375rem; font-weight: 600; margin-bottom: 12px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-cell {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 14px;
}
.stat-cell__label { font-size: 0.625rem; color: var(--text-tertiary); font-weight: 500; margin-bottom: 4px; }
.stat-cell__value { font-size: 0.9375rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
/* Tabs */
.tabs {
padding: 0 20px;
display: flex; gap: 0;
border-bottom: 1px solid var(--border-subtle);
}
.tab {
flex: 1;
padding: 12px;
text-align: center;
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-tertiary);
border-bottom: 2px solid transparent;
transition: all 150ms;
}
.tab--active { color: var(--accent-start); border-bottom-color: var(--accent-start); }
/* Institutional Ownership */
.inst-section {
padding: 20px;
}
.inst-bar {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.inst-bar__label { font-size: 0.75rem; font-weight: 500; width: 80px; flex-shrink: 0; }
.inst-bar__track {
flex: 1; height: 8px; background: var(--bg-raised);
border-radius: var(--radius-full); overflow: hidden;
}
.inst-bar__fill {
height: 100%; border-radius: var(--radius-full);
background: var(--gradient-accent);
}
.inst-bar__value { font-size: 0.75rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; width: 44px; text-align: right; flex-shrink: 0; }
/* SEC Filings */
.filing-section { padding: 0 20px 20px; }
.filing-list { display: flex; flex-direction: column; gap: 8px; }
.filing-item {
display: flex; align-items: center; gap: 12px;
padding: 14px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
transition: background 150ms;
}
.filing-item:active { background: var(--bg-raised); }
.filing-item__icon {
width: 36px; height: 36px;
border-radius: var(--radius-sm);
background: rgba(99,102,241,0.12);
display: flex; align-items: center; justify-content: center;
color: var(--accent-start);
}
.filing-item__icon svg { width: 16px; height: 16px; }
.filing-item__info { flex: 1; }
.filing-item__name { font-size: 0.8125rem; font-weight: 600; }
.filing-item__date { font-size: 0.625rem; color: var(--text-tertiary); }
.filing-item__tag {
font-size: 0.5625rem;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--radius-full);
background: var(--positive-dim);
color: var(--positive);
}
/* Action Buttons */
.action-bar {
padding: 0 20px 12px;
display: flex; gap: 10px;
}
.action-btn {
flex: 1;
padding: 14px;
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 600;
font-family: 'Inter', sans-serif;
text-align: center;
border: none;
cursor: pointer;
}
.action-btn--buy {
background: var(--gradient-positive);
color: #000;
}
.action-btn--watch {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
}
/* Bottom Nav */
.bottom-nav {
position: fixed; bottom: 0; left: 0; right: 0;
background: rgba(19,18,32,0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--border-subtle);
padding: 8px 0;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
z-index: 100;
}
.bottom-nav__items { display: flex; justify-content: space-around; }
.bottom-nav__item {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 6px 16px;
color: var(--text-tertiary);
font-size: 0.5625rem; font-weight: 500;
}
.bottom-nav__item svg { width: 22px; height: 22px; }
.bottom-nav__item--active { color: var(--accent-start); }
/* Scroll */
.content-scroll {
padding-bottom: 20px;
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="header__left">
<button class="header__back" aria-label="Back">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
</button>
</div>
<div class="header__right">
<button class="header__btn" aria-label="Share">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
</svg>
</button>
<button class="header__btn" aria-label="More">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>
</svg>
</button>
</div>
</header>
<!-- Stock Info -->
<div class="stock-info">
<div class="stock-info__ticker">
<div class="stock-info__logo">A</div>
<div class="stock-info__names">
<div class="stock-info__name">Apple Inc.</div>
<div class="stock-info__sub">AAPL · NASDAQ · Tech · Consumer Electronics</div>
</div>
</div>
<div class="stock-info__price-block">
<div class="stock-info__price">$189.43</div>
<div class="stock-info__change">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>
+$4.42 (+2.39%)
</div>
</div>
</div>
<!-- Period Tabs -->
<div class="period-tabs">
<div class="period-tab">1D</div>
<div class="period-tab">1W</div>
<div class="period-tab">1M</div>
<div class="period-tab period-tab--active">3M</div>
<div class="period-tab">1Y</div>
<div class="period-tab">5Y</div>
</div>
<!-- Chart -->
<div class="chart-section">
<div class="chart-card">
<svg class="chart-card__svg" viewBox="0 0 320 160" preserveAspectRatio="none">
<defs>
<linearGradient id="dLineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#6366f1"/>
<stop offset="100%" style="stop-color:#a855f7"/>
</linearGradient>
<linearGradient id="dChartGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#6366f1;stop-opacity:0.3"/>
<stop offset="100%" style="stop-color:#6366f1;stop-opacity:0"/>
</linearGradient>
</defs>
<line class="grid" x1="0" y1="32" x2="320" y2="32"/>
<line class="grid" x1="0" y1="64" x2="320" y2="64"/>
<line class="grid" x1="0" y1="96" x2="320" y2="96"/>
<line class="grid" x1="0" y1="128" x2="320" y2="128"/>
<text x="8" y="28">195</text>
<text x="8" y="60">185</text>
<text x="8" y="92">175</text>
<text x="8" y="124">165</text>
<text x="40" y="156">Sep</text>
<text x="130" y="156">Oct</text>
<text x="230" y="156">Nov</text>
<text x="290" y="156">Dec</text>
<path class="area-fill" d="M0,96 L53,88 106,76 160,84 213,60 266,44 320,36 L320,160 L0,160 Z"/>
<path class="chart-line" d="M0,96 L53,88 106,76 160,84 213,60 266,44 320,36"/>
<circle cx="320" cy="36" r="3" fill="#6366f1" stroke="#131220" stroke-width="2"/>
</svg>
</div>
</div>
<!-- Key Stats -->
<div class="stats-section">
<div class="section-title">Key Statistics</div>
<div class="stats-grid">
<div class="stat-cell">
<div class="stat-cell__label">Market Cap</div>
<div class="stat-cell__value">$2.95T</div>
</div>
<div class="stat-cell">
<div class="stat-cell__label">P/E Ratio</div>
<div class="stat-cell__value">31.2</div>
</div>
<div class="stat-cell">
<div class="stat-cell__label">52W High</div>
<div class="stat-cell__value">$199.62</div>
</div>
<div class="stat-cell">
<div class="stat-cell__label">52W Low</div>
<div class="stat-cell__value">$142.45</div>
</div>
<div class="stat-cell">
<div class="stat-cell__label">Avg Volume</div>
<div class="stat-cell__value">54.2M</div>
</div>
<div class="stat-cell">
<div class="stat-cell__label">EPS</div>
<div class="stat-cell__value">$6.07</div>
</div>
<div class="stat-cell">
<div class="stat-cell__label">Div Yield</div>
<div class="stat-cell__value">0.51%</div>
</div>
<div class="stat-cell">
<div class="stat-cell__label">Beta</div>
<div class="stat-cell__value">1.29</div>
</div>
</div>
</div>
<!-- Tabs -->
<div class="tabs" style="position:sticky; top:0; z-index:10; background:var(--bg-deep);">
<div class="tab tab--active">Overview</div>
<div class="tab">Ownership</div>
<div class="tab">SEC</div>
<div class="tab">Peers</div>
</div>
<div class="content-scroll">
<!-- Institutional Ownership -->
<div class="inst-section">
<div class="section-title">Institutional Ownership</div>
<div class="inst-bar">
<span class="inst-bar__label">Vanguard</span>
<div class="inst-bar__track"><div class="inst-bar__fill" style="width:8.2%"></div></div>
<span class="inst-bar__value">8.2%</span>
</div>
<div class="inst-bar">
<span class="inst-bar__label">BlackRock</span>
<div class="inst-bar__track"><div class="inst-bar__fill" style="width:6.5%"></div></div>
<span class="inst-bar__value">6.5%</span>
</div>
<div class="inst-bar">
<span class="inst-bar__label">Berkshire</span>
<div class="inst-bar__track"><div class="inst-bar__fill" style="width:5.8%"></div></div>
<span class="inst-bar__value">5.8%</span>
</div>
<div class="inst-bar">
<span class="inst-bar__label">State Street</span>
<div class="inst-bar__track"><div class="inst-bar__fill" style="width:4.1%"></div></div>
<span class="inst-bar__value">4.1%</span>
</div>
<div class="inst-bar">
<span class="inst-bar__label">Fidelity</span>
<div class="inst-bar__track"><div class="inst-bar__fill" style="width:2.9%"></div></div>
<span class="inst-bar__value">2.9%</span>
</div>
</div>
<!-- SEC Filings -->
<div class="filing-section">
<div class="section-title">Recent SEC Filings</div>
<div class="filing-list">
<div class="filing-item">
<div class="filing-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<div class="filing-item__info">
<div class="filing-item__name">Form 10-K — Annual Report</div>
<div class="filing-item__date">Filed: Sep 28, 2024</div>
</div>
<span class="filing-item__tag">Annual</span>
</div>
<div class="filing-item">
<div class="filing-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
</div>
<div class="filing-item__info">
<div class="filing-item__name">Form 10-Q — Q4 Report</div>
<div class="filing-item__date">Filed: Oct 31, 2024</div>
</div>
<span class="filing-item__tag" style="background:var(--warning-dim);color:var(--warning)">Recent</span>
</div>
<div class="filing-item">
<div class="filing-item__icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div class="filing-item__info">
<div class="filing-item__name">Form 4 — Insider Trading</div>
<div class="filing-item__date">Filed: Nov 15, 2024</div>
</div>
<span class="filing-item__tag" style="background:rgba(99,102,241,0.12);color:var(--accent-start)">Insider</span>
</div>
</div>
</div>
</div>
<!-- Action Bar -->
<div class="action-bar">
<button class="action-btn action-btn--watch">Add to Watchlist</button>
<button class="action-btn action-btn--buy">Buy Stock</button>
</div>
<!-- Bottom Nav -->
<nav class="bottom-nav">
<div class="bottom-nav__items">
<a href="#" class="bottom-nav__item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
Home
</a>
<a href="#" class="bottom-nav__item bottom-nav__item--active">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
Search
</a>
<a href="#" class="bottom-nav__item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Watchlist
</a>
<a href="#" class="bottom-nav__item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
Alerts
</a>
</div>
</nav>
</body>
</html>