721 lines
20 KiB
HTML
721 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>inou — Genetics</title>
|
||
<style>
|
||
@font-face { font-family: 'Sora'; src: url('/assets/fonts/Sora-Regular.ttf'); font-weight: 400; }
|
||
@font-face { font-family: 'Sora'; src: url('/assets/fonts/Sora-Light.ttf'); font-weight: 300; }
|
||
@font-face { font-family: 'Sora'; src: url('/assets/fonts/Sora-SemiBold.ttf'); font-weight: 600; }
|
||
@font-face { font-family: 'Sora'; src: url('/assets/fonts/Sora-Bold.ttf'); font-weight: 700; }
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--amber: #B45309;
|
||
--amber-light: #FEF3C7;
|
||
--amber-mid: #F59E0B;
|
||
--bg: #F8F7F6;
|
||
--surface: #FFFFFF;
|
||
--border: #E5E3E0;
|
||
--text: #1A1A1A;
|
||
--text-muted: #6B6968;
|
||
--text-faint: #A8A5A2;
|
||
--green: #15803D;
|
||
--green-light: #DCFCE7;
|
||
--nav-bg: #1C1917;
|
||
--nav-text: #D6D3D1;
|
||
--nav-active: #FFFFFF;
|
||
--sidebar-w: 220px;
|
||
--topbar-h: 52px;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Sora', system-ui, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* TOP NAV */
|
||
.topbar {
|
||
height: var(--topbar-h);
|
||
background: var(--nav-bg);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
gap: 16px;
|
||
flex-shrink: 0;
|
||
border-bottom: 1px solid #2C2A28;
|
||
}
|
||
.topbar-logo {
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
letter-spacing: -0.3px;
|
||
}
|
||
.topbar-logo span { color: var(--amber); }
|
||
.topbar-patient {
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.topbar-patient-name {
|
||
font-size: 13px;
|
||
color: var(--nav-text);
|
||
font-weight: 600;
|
||
}
|
||
.topbar-patient-dob {
|
||
font-size: 12px;
|
||
color: #78716C;
|
||
}
|
||
.avatar {
|
||
width: 30px; height: 30px;
|
||
border-radius: 50%;
|
||
background: var(--amber);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 12px; font-weight: 700; color: white;
|
||
}
|
||
|
||
/* LAYOUT */
|
||
.layout {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* SIDEBAR */
|
||
.sidebar {
|
||
width: var(--sidebar-w);
|
||
background: var(--nav-bg);
|
||
flex-shrink: 0;
|
||
overflow-y: auto;
|
||
padding: 12px 0;
|
||
border-right: 1px solid #2C2A28;
|
||
}
|
||
.nav-section-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: #57534E;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.8px;
|
||
padding: 12px 16px 4px;
|
||
}
|
||
.nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 7px 16px;
|
||
font-size: 13px;
|
||
color: var(--nav-text);
|
||
cursor: pointer;
|
||
border-radius: 0;
|
||
text-decoration: none;
|
||
}
|
||
.nav-item:hover { background: #292524; }
|
||
.nav-item.active {
|
||
color: var(--nav-active);
|
||
background: #292524;
|
||
font-weight: 600;
|
||
}
|
||
.nav-item.active::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
width: 3px;
|
||
height: 28px;
|
||
background: var(--amber);
|
||
border-radius: 0 2px 2px 0;
|
||
}
|
||
.nav-item { position: relative; }
|
||
.nav-dot {
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
background: #57534E;
|
||
flex-shrink: 0;
|
||
}
|
||
.nav-dot.active { background: var(--amber); }
|
||
.nav-sub {
|
||
padding-left: 12px;
|
||
}
|
||
|
||
/* MAIN */
|
||
.main {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 24px 32px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
/* BREADCRUMB + SEARCH ROW */
|
||
.top-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
}
|
||
.breadcrumb {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.breadcrumb span { color: var(--text); font-weight: 600; }
|
||
.breadcrumb-sep { color: var(--text-faint); }
|
||
|
||
.search-box {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 7px 12px;
|
||
width: 260px;
|
||
}
|
||
.search-box input {
|
||
border: none;
|
||
outline: none;
|
||
font-family: 'Sora', sans-serif;
|
||
font-size: 13px;
|
||
color: var(--text);
|
||
background: transparent;
|
||
width: 100%;
|
||
}
|
||
.search-box input::placeholder { color: var(--text-faint); }
|
||
.search-icon { color: var(--text-faint); font-size: 15px; }
|
||
|
||
/* STATS ROW */
|
||
.stats-row {
|
||
display: flex;
|
||
gap: 24px;
|
||
align-items: center;
|
||
}
|
||
.stat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1px;
|
||
}
|
||
.stat-value {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
line-height: 1;
|
||
}
|
||
.stat-label {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
.stat-divider {
|
||
width: 1px;
|
||
height: 32px;
|
||
background: var(--border);
|
||
}
|
||
.hidden-note {
|
||
font-size: 12px;
|
||
color: var(--text-faint);
|
||
padding: 4px 10px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 20px;
|
||
margin-left: auto;
|
||
cursor: pointer;
|
||
}
|
||
.hidden-note:hover { border-color: var(--amber); color: var(--amber); }
|
||
|
||
/* TIER GRID */
|
||
.tier-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 10px;
|
||
}
|
||
.tier-tile {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 14px 16px;
|
||
cursor: pointer;
|
||
transition: border-color 0.15s, box-shadow 0.15s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
.tier-tile:hover {
|
||
border-color: #D1C5BA;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
}
|
||
.tier-tile.active {
|
||
border-color: var(--amber);
|
||
box-shadow: 0 0 0 1px var(--amber);
|
||
}
|
||
.tier-name {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
.tier-count {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
line-height: 1.1;
|
||
}
|
||
.tier-hidden {
|
||
font-size: 11px;
|
||
color: var(--text-faint);
|
||
}
|
||
.tier-tile.large .tier-count { color: var(--amber); }
|
||
|
||
/* EXPANDED TIER */
|
||
.expanded-section {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
.expanded-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 20px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: #FAFAF9;
|
||
}
|
||
.expanded-title {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
}
|
||
.expanded-subtitle {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
font-weight: 400;
|
||
}
|
||
.toggle-hidden {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
}
|
||
.toggle-pill {
|
||
width: 28px; height: 16px;
|
||
background: var(--border);
|
||
border-radius: 8px;
|
||
position: relative;
|
||
}
|
||
.toggle-pill::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 2px; left: 2px;
|
||
width: 12px; height: 12px;
|
||
border-radius: 50%;
|
||
background: white;
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
/* VARIANTS TABLE */
|
||
.variants-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
.variants-table th {
|
||
text-align: left;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--text-faint);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
padding: 10px 20px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: #FAFAF9;
|
||
}
|
||
.variants-table td {
|
||
padding: 11px 20px;
|
||
border-bottom: 1px solid #F0EDEA;
|
||
vertical-align: middle;
|
||
}
|
||
.variants-table tr:last-child td { border-bottom: none; }
|
||
.variants-table tr:hover td { background: #FAFAF9; }
|
||
|
||
.gene-name {
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
color: var(--text);
|
||
font-family: 'Sora', monospace;
|
||
}
|
||
.rsid {
|
||
font-size: 11px;
|
||
color: var(--text-faint);
|
||
margin-top: 1px;
|
||
}
|
||
.finding-text {
|
||
font-size: 13px;
|
||
color: var(--text);
|
||
}
|
||
.genotype {
|
||
font-family: 'Sora', monospace;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
background: #F4F1EE;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
display: inline-block;
|
||
}
|
||
.sig-dot {
|
||
width: 8px; height: 8px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
}
|
||
.sig-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
.sig-dot.moderate { background: var(--amber); }
|
||
.sig-dot.protective { background: var(--green); }
|
||
.sig-dot.low { background: var(--text-faint); }
|
||
.sig-dot.clear { background: #D4D0CB; }
|
||
|
||
.sig-label.moderate { color: var(--amber); }
|
||
.sig-label.protective { color: var(--green); }
|
||
.sig-label.low { color: var(--text-faint); }
|
||
.sig-label.clear { color: var(--text-faint); }
|
||
|
||
/* EXPANDED FOOTER */
|
||
.expanded-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 20px;
|
||
border-top: 1px solid var(--border);
|
||
background: #FAFAF9;
|
||
}
|
||
.footer-count {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
.load-more {
|
||
font-size: 12px;
|
||
color: var(--amber);
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
}
|
||
.load-more:hover { text-decoration: underline; }
|
||
|
||
/* AI CTA */
|
||
.ai-cta {
|
||
background: var(--nav-bg);
|
||
border-radius: 12px;
|
||
padding: 16px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
.ai-cta-text {
|
||
flex: 1;
|
||
font-size: 13px;
|
||
color: #A8A5A2;
|
||
line-height: 1.5;
|
||
}
|
||
.ai-cta-text strong { color: #FFFFFF; font-weight: 600; }
|
||
.ai-cta-btn {
|
||
background: var(--amber);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 9px 18px;
|
||
font-family: 'Sora', sans-serif;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
.ai-cta-btn:hover { background: #9A4507; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- TOP NAV -->
|
||
<div class="topbar">
|
||
<div class="topbar-logo">inou<span>.</span></div>
|
||
<div class="topbar-patient">
|
||
<div>
|
||
<div class="topbar-patient-name">Jane Doe</div>
|
||
<div class="topbar-patient-dob">DOB Jan 1 2017 · Female</div>
|
||
</div>
|
||
<div class="avatar">JD</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layout">
|
||
|
||
<!-- SIDEBAR -->
|
||
<nav class="sidebar">
|
||
<div class="nav-section-label">Overview</div>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Dashboard</a>
|
||
|
||
<div class="nav-section-label">Tests</div>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Labs</a>
|
||
<a class="nav-item active" href="#"><span class="nav-dot active"></span>Genetics</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Imaging</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Assessments</a>
|
||
|
||
<div class="nav-section-label">Body</div>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Vitals</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Exercise</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Nutrition</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Sleep</a>
|
||
|
||
<div class="nav-section-label">Treatment</div>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Medications</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Supplements</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Therapy</a>
|
||
|
||
<div class="nav-section-label">History</div>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Diagnoses</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Symptoms</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Family History</a>
|
||
|
||
<div class="nav-section-label">Care Team</div>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Consultations</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Providers</a>
|
||
|
||
<div class="nav-section-label">Files</div>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Documents</a>
|
||
<a class="nav-item" href="#"><span class="nav-dot"></span>Uploads</a>
|
||
</nav>
|
||
|
||
<!-- MAIN CONTENT -->
|
||
<main class="main">
|
||
|
||
<!-- BREADCRUMB + SEARCH -->
|
||
<div class="top-row">
|
||
<div class="breadcrumb">
|
||
Jane Doe <span class="breadcrumb-sep">›</span> Tests <span class="breadcrumb-sep">›</span> <span>Genetics</span>
|
||
</div>
|
||
<div class="search-box">
|
||
<span class="search-icon">⌕</span>
|
||
<input type="text" placeholder="Search gene or rsID…">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STATS ROW -->
|
||
<div class="stats-row">
|
||
<div class="stat">
|
||
<div class="stat-value">3,866</div>
|
||
<div class="stat-label">Total variants</div>
|
||
</div>
|
||
<div class="stat-divider"></div>
|
||
<div class="stat">
|
||
<div class="stat-value">12</div>
|
||
<div class="stat-label">Categories</div>
|
||
</div>
|
||
<div class="stat-divider"></div>
|
||
<div class="stat">
|
||
<div class="stat-value">597</div>
|
||
<div class="stat-label">Hidden (no risk)</div>
|
||
</div>
|
||
<div class="hidden-note">Show hidden variants</div>
|
||
</div>
|
||
|
||
<!-- TIER GRID -->
|
||
<div class="tier-grid">
|
||
<div class="tier-tile">
|
||
<div class="tier-name">Traits</div>
|
||
<div class="tier-count">132</div>
|
||
<div class="tier-hidden">49 hidden</div>
|
||
</div>
|
||
<div class="tier-tile">
|
||
<div class="tier-name">Longevity</div>
|
||
<div class="tier-count">12</div>
|
||
<div class="tier-hidden">1 hidden</div>
|
||
</div>
|
||
<div class="tier-tile active">
|
||
<div class="tier-name">Metabolism</div>
|
||
<div class="tier-count">97</div>
|
||
<div class="tier-hidden">51 hidden</div>
|
||
</div>
|
||
<div class="tier-tile">
|
||
<div class="tier-name">Medications</div>
|
||
<div class="tier-count">101</div>
|
||
<div class="tier-hidden">26 hidden</div>
|
||
</div>
|
||
<div class="tier-tile">
|
||
<div class="tier-name">Mental Health</div>
|
||
<div class="tier-count">63</div>
|
||
<div class="tier-hidden">31 hidden</div>
|
||
</div>
|
||
<div class="tier-tile">
|
||
<div class="tier-name">Neurological</div>
|
||
<div class="tier-count">91</div>
|
||
<div class="tier-hidden">46 hidden</div>
|
||
</div>
|
||
<div class="tier-tile">
|
||
<div class="tier-name">Fertility</div>
|
||
<div class="tier-count">12</div>
|
||
<div class="tier-hidden">7 hidden</div>
|
||
</div>
|
||
<div class="tier-tile">
|
||
<div class="tier-name">Blood</div>
|
||
<div class="tier-count">100</div>
|
||
<div class="tier-hidden">12 hidden</div>
|
||
</div>
|
||
<div class="tier-tile">
|
||
<div class="tier-name">Cardiovascular</div>
|
||
<div class="tier-count">104</div>
|
||
<div class="tier-hidden">31 hidden</div>
|
||
</div>
|
||
<div class="tier-tile">
|
||
<div class="tier-name">Autoimmune</div>
|
||
<div class="tier-count">80</div>
|
||
<div class="tier-hidden">43 hidden</div>
|
||
</div>
|
||
<div class="tier-tile large">
|
||
<div class="tier-name">Disease</div>
|
||
<div class="tier-count">2,272</div>
|
||
<div class="tier-hidden">233 hidden</div>
|
||
</div>
|
||
<div class="tier-tile large">
|
||
<div class="tier-name">Cancer</div>
|
||
<div class="tier-count">998</div>
|
||
<div class="tier-hidden">67 hidden</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EXPANDED: METABOLISM -->
|
||
<div class="expanded-section">
|
||
<div class="expanded-header">
|
||
<div>
|
||
<div class="expanded-title">Metabolism <span style="font-weight:400; color: var(--text-muted)">· 97 variants</span></div>
|
||
<div class="expanded-subtitle">Sorted by significance</div>
|
||
</div>
|
||
<div class="toggle-hidden">
|
||
<span>Show hidden</span>
|
||
<div class="toggle-pill"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="variants-table">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:130px">Gene</th>
|
||
<th>Finding</th>
|
||
<th style="width:90px">Genotype</th>
|
||
<th style="width:120px">Significance</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div class="gene-name">MTHFR</div><div class="rsid">rs1801133</div></td>
|
||
<td><div class="finding-text">10–20% folate processing efficiency</div></td>
|
||
<td><span class="genotype">AA</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot moderate"></span><span class="sig-label moderate">Moderate</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">CYP2C19</div><div class="rsid">rs4244285</div></td>
|
||
<td><div class="finding-text">Poorer metabolizer of several medicines</div></td>
|
||
<td><span class="genotype">AG</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot moderate"></span><span class="sig-label moderate">Moderate</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">PPARG</div><div class="rsid">rs1801282</div></td>
|
||
<td><div class="finding-text">Higher cardiovascular risk with high fat diet</div></td>
|
||
<td><span class="genotype">CG</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot moderate"></span><span class="sig-label moderate">Moderate</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">TCF7L2</div><div class="rsid">rs7903146</div></td>
|
||
<td><div class="finding-text">Increased type 2 diabetes risk</div></td>
|
||
<td><span class="genotype">CT</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot moderate"></span><span class="sig-label moderate">Moderate</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">FTO</div><div class="rsid">rs9939609</div></td>
|
||
<td><div class="finding-text">1.67× increased obesity risk</div></td>
|
||
<td><span class="genotype">AT</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot moderate"></span><span class="sig-label moderate">Moderate</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">SLCO1B1</div><div class="rsid">rs4149056</div></td>
|
||
<td><div class="finding-text">Increased statin-induced myopathy risk</div></td>
|
||
<td><span class="genotype">CT</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot moderate"></span><span class="sig-label moderate">Moderate</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">APOA2</div><div class="rsid">rs5082</div></td>
|
||
<td><div class="finding-text">Associated with higher HDL cholesterol</div></td>
|
||
<td><span class="genotype">CC</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot protective"></span><span class="sig-label protective">Protective</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">CYP1A2</div><div class="rsid">rs762551</div></td>
|
||
<td><div class="finding-text">Slow caffeine metabolizer</div></td>
|
||
<td><span class="genotype">AC</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot low"></span><span class="sig-label low">Low</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">CYP3A5</div><div class="rsid">rs776746</div></td>
|
||
<td><div class="finding-text">Non-expressor — affects drug dosing</div></td>
|
||
<td><span class="genotype">CC</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot low"></span><span class="sig-label low">Low</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">MCM6</div><div class="rsid">rs4988235</div></td>
|
||
<td><div class="finding-text">Partial lactase persistence</div></td>
|
||
<td><span class="genotype">AG</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot low"></span><span class="sig-label low">Low</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">APOE</div><div class="rsid">rs7412</div></td>
|
||
<td><div class="finding-text">Normal lipid metabolism</div></td>
|
||
<td><span class="genotype">CC</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot clear"></span><span class="sig-label clear">Clear</span></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="gene-name">GCK</div><div class="rsid">rs1799884</div></td>
|
||
<td><div class="finding-text">Slightly reduced glucose sensing</div></td>
|
||
<td><span class="genotype">AG</span></td>
|
||
<td><div class="sig-cell"><span class="sig-dot low"></span><span class="sig-label low">Low</span></div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="expanded-footer">
|
||
<div class="footer-count">Showing 12 of 97 variants</div>
|
||
<a class="load-more" href="#">Load more</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI CTA -->
|
||
<div class="ai-cta">
|
||
<div class="ai-cta-text">
|
||
<strong>Your AI has access to all 3,866 variants</strong>, including hidden ones. Ask it to reason across your metabolism, medication sensitivities, and disease risk together.
|
||
</div>
|
||
<button class="ai-cta-btn">Ask Claude about your genetics →</button>
|
||
</div>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|