1149 lines
60 KiB
HTML
1149 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Bettersight — Market Movement</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
/* Brand blues from business card gradient */
|
||
--blue-vivid: #1B8EF8;
|
||
--blue-bright: #3B9EFF;
|
||
--blue-light: #E8F4FF;
|
||
--blue-mid: #B8D9FF;
|
||
--cyan: #00D4FF;
|
||
--cyan-light: #E0F8FF;
|
||
|
||
/* Green accent from Grok tagline card */
|
||
--green: #10D98A;
|
||
--green-light: #D4F9ED;
|
||
--green-dark: #059669;
|
||
|
||
/* Semantic */
|
||
--red: #F04438;
|
||
--red-light: #FEE4E2;
|
||
--amber: #F79009;
|
||
--amber-light: #FEF0C7;
|
||
|
||
/* Neutrals */
|
||
--page: #EEF1F6; /* cool grey page */
|
||
--surface: #FFFFFF;
|
||
--surface-2: #F8FAFD;
|
||
--border: rgba(28,56,121,.09);
|
||
--border-2: rgba(28,56,121,.14);
|
||
--dot-color: rgba(27,142,248,.25);
|
||
|
||
/* Sidebar */
|
||
--sidebar-bg: #0C1A3A;
|
||
--sidebar-w: 232px;
|
||
|
||
/* Text */
|
||
--t1: #0D1526;
|
||
--t2: #2D3A52;
|
||
--t3: #6B7A99;
|
||
--t4: #9BA8C0;
|
||
|
||
/* Card */
|
||
--card-radius: 18px;
|
||
--card-shadow: 0 2px 8px rgba(12,26,60,.06),
|
||
0 8px 28px rgba(12,26,60,.09),
|
||
0 0 0 1px rgba(28,56,121,.06);
|
||
--card-hover: 0 4px 16px rgba(12,26,60,.10),
|
||
0 16px 48px rgba(12,26,60,.13),
|
||
0 0 0 1px rgba(27,142,248,.15);
|
||
}
|
||
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
|
||
html{font-size:14px;}
|
||
body{
|
||
font-family:'Inter',sans-serif;
|
||
background:var(--page);
|
||
color:var(--t1);
|
||
min-height:100vh;
|
||
display:flex;
|
||
/* subtle grid connecting dots — translating from the dark UI */
|
||
background-image:
|
||
radial-gradient(circle, rgba(27,142,248,.07) 1px, transparent 1px);
|
||
background-size:28px 28px;
|
||
}
|
||
|
||
/* ─── SIDEBAR ─────────────────────────────────────────── */
|
||
.sb{
|
||
width:var(--sidebar-w);
|
||
background:var(--sidebar-bg);
|
||
min-height:100vh;
|
||
position:fixed;top:0;left:0;bottom:0;
|
||
display:flex;flex-direction:column;
|
||
z-index:50;
|
||
}
|
||
|
||
.sb-logo{
|
||
padding:22px 18px 20px;
|
||
border-bottom:1px solid rgba(255,255,255,.07);
|
||
display:flex;align-items:center;gap:10px;
|
||
}
|
||
.sb-logo-text{
|
||
font-size:15px;font-weight:700;letter-spacing:-.3px;color:#fff;
|
||
}
|
||
.sb-logo-text em{color:var(--cyan);font-style:normal;}
|
||
|
||
.sb-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:1px;}
|
||
.sb-label{
|
||
font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
|
||
color:rgba(255,255,255,.28);padding:14px 10px 6px;
|
||
}
|
||
.sb-item{
|
||
display:flex;align-items:center;gap:9px;
|
||
padding:8px 12px;border-radius:10px;
|
||
color:rgba(255,255,255,.5);font-size:13px;font-weight:500;
|
||
cursor:pointer;transition:all .15s;text-decoration:none;
|
||
}
|
||
.sb-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);}
|
||
.sb-item.on{background:rgba(27,142,248,.18);color:#fff;}
|
||
.sb-item.on .si{color:var(--cyan);}
|
||
.si{width:15px;height:15px;flex-shrink:0;opacity:.9;}
|
||
.sb-dot{
|
||
margin-left:auto;min-width:18px;height:18px;
|
||
background:var(--red);color:#fff;
|
||
font-size:10px;font-weight:700;border-radius:9px;
|
||
display:flex;align-items:center;justify-content:center;padding:0 5px;
|
||
}
|
||
.sb-dot.am{background:var(--amber);}
|
||
|
||
.sb-foot{
|
||
padding:14px 10px;border-top:1px solid rgba(255,255,255,.07);
|
||
}
|
||
.sb-user{
|
||
display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;cursor:pointer;
|
||
}
|
||
.sb-user:hover{background:rgba(255,255,255,.06);}
|
||
.sb-av{
|
||
width:30px;height:30px;border-radius:50%;flex-shrink:0;
|
||
background:linear-gradient(135deg,var(--blue-vivid),var(--cyan));
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-size:11px;font-weight:800;color:#fff;
|
||
}
|
||
.sb-uname{font-size:12.5px;font-weight:600;color:#fff;}
|
||
.sb-uplan{font-size:11px;color:rgba(255,255,255,.38);}
|
||
|
||
/* ─── MAIN ────────────────────────────────────────────── */
|
||
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;}
|
||
|
||
/* ─── TOPBAR ──────────────────────────────────────────── */
|
||
.topbar{
|
||
background:rgba(255,255,255,.82);
|
||
backdrop-filter:blur(12px);
|
||
-webkit-backdrop-filter:blur(12px);
|
||
border-bottom:1px solid var(--border);
|
||
padding:0 28px;height:58px;
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
position:sticky;top:0;z-index:40;
|
||
}
|
||
.topbar-title{font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--t1);}
|
||
.topbar-sub{font-size:11.5px;color:var(--t3);margin-top:1px;}
|
||
.topbar-r{display:flex;align-items:center;gap:8px;}
|
||
|
||
.tsearch{
|
||
display:flex;align-items:center;gap:7px;
|
||
background:var(--surface-2);border:1px solid var(--border-2);
|
||
border-radius:10px;padding:7px 12px;width:200px;
|
||
}
|
||
.tsearch input{
|
||
border:none;background:transparent;font-size:12.5px;
|
||
color:var(--t2);outline:none;width:100%;font-family:inherit;
|
||
}
|
||
.tsearch input::placeholder{color:var(--t4);}
|
||
|
||
.tbtn{
|
||
display:flex;align-items:center;gap:6px;
|
||
padding:7px 14px;border-radius:9px;font-size:12.5px;
|
||
font-weight:600;cursor:pointer;border:none;font-family:inherit;
|
||
transition:all .15s;
|
||
}
|
||
.tbtn-outline{background:var(--surface);color:var(--t2);border:1px solid var(--border-2);}
|
||
.tbtn-outline:hover{border-color:var(--blue-vivid);color:var(--blue-vivid);}
|
||
.tbtn-primary{
|
||
background:linear-gradient(135deg,var(--blue-vivid),#0B7AE8);
|
||
color:#fff;
|
||
box-shadow:0 2px 8px rgba(27,142,248,.35);
|
||
}
|
||
.tbtn-primary:hover{box-shadow:0 4px 14px rgba(27,142,248,.45);transform:translateY(-1px);}
|
||
|
||
.tbell{
|
||
width:34px;height:34px;border-radius:9px;
|
||
border:1px solid var(--border-2);background:var(--surface);
|
||
display:flex;align-items:center;justify-content:center;
|
||
cursor:pointer;position:relative;
|
||
}
|
||
.tbell-dot{
|
||
position:absolute;top:6px;right:6px;
|
||
width:7px;height:7px;background:var(--red);
|
||
border-radius:50%;border:1.5px solid #fff;
|
||
}
|
||
|
||
/* ─── PAGE BODY ───────────────────────────────────────── */
|
||
.pb{padding:22px 28px;flex:1;}
|
||
|
||
/* ─── DOT GRID DECORATION ─────────────────────────────── */
|
||
/* Replicates the cyan dot grid from bottom-left of dark UI cards */
|
||
.dots{
|
||
display:grid;gap:5px;flex-shrink:0;
|
||
/* rendered via JS-free inline SVG per card */
|
||
}
|
||
|
||
/* ─── STAT ROW ────────────────────────────────────────── */
|
||
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
|
||
|
||
.sc{
|
||
background:var(--surface);
|
||
border-radius:var(--card-radius);
|
||
box-shadow:var(--card-shadow);
|
||
padding:20px 20px 18px;
|
||
display:flex;flex-direction:column;gap:0;
|
||
position:relative;overflow:hidden;
|
||
transition:box-shadow .2s,transform .2s;
|
||
cursor:default;
|
||
}
|
||
.sc:hover{box-shadow:var(--card-hover);transform:translateY(-2px);}
|
||
|
||
/* top accent bar */
|
||
.sc::after{
|
||
content:'';position:absolute;top:0;left:0;right:0;height:3px;
|
||
border-radius:18px 18px 0 0;
|
||
}
|
||
.sc.blue::after{background:linear-gradient(90deg,var(--blue-vivid),var(--cyan));}
|
||
.sc.green::after{background:linear-gradient(90deg,var(--green),#00C9A7);}
|
||
.sc.red::after{background:var(--red);}
|
||
.sc.amber::after{background:var(--amber);}
|
||
|
||
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
|
||
.sc-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);}
|
||
|
||
/* Icon circle */
|
||
.sc-ico{
|
||
width:34px;height:34px;border-radius:9px;
|
||
display:flex;align-items:center;justify-content:center;flex-shrink:0;
|
||
}
|
||
.sc-ico.blue{background:var(--blue-light);color:var(--blue-vivid);}
|
||
.sc-ico.green{background:var(--green-light);color:var(--green-dark);}
|
||
.sc-ico.red{background:var(--red-light);color:var(--red);}
|
||
.sc-ico.amber{background:var(--amber-light);color:var(--amber);}
|
||
|
||
.sc-val{font-size:32px;font-weight:900;letter-spacing:-1.5px;color:var(--t1);line-height:1;margin-bottom:8px;}
|
||
.sc-val.blue-num{
|
||
background:linear-gradient(135deg,var(--blue-vivid),var(--cyan));
|
||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
|
||
}
|
||
.sc-val.green-num{
|
||
background:linear-gradient(135deg,var(--green),#00C9A7);
|
||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
|
||
}
|
||
|
||
.sc-meta{display:flex;align-items:center;gap:6px;font-size:12px;}
|
||
.sc-delta{font-weight:700;font-size:12px;}
|
||
.sc-delta.up{color:var(--green-dark);}
|
||
.sc-delta.dn{color:var(--red);}
|
||
.sc-period{color:var(--t4);}
|
||
|
||
/* dot grid inside stat card — bottom right */
|
||
.sc-dots{position:absolute;bottom:14px;right:14px;opacity:.35;}
|
||
|
||
/* ─── CONTENT GRID ────────────────────────────────────── */
|
||
.cg{display:grid;grid-template-columns:1fr 336px;gap:18px;}
|
||
.cg-left{display:flex;flex-direction:column;gap:18px;}
|
||
.cg-right{display:flex;flex-direction:column;gap:18px;}
|
||
|
||
/* ─── CARD ────────────────────────────────────────────── */
|
||
.card{
|
||
background:var(--surface);
|
||
border-radius:var(--card-radius);
|
||
box-shadow:var(--card-shadow);
|
||
overflow:hidden;
|
||
transition:box-shadow .2s;
|
||
}
|
||
.card:hover{box-shadow:var(--card-hover);}
|
||
|
||
.ch{
|
||
padding:16px 20px;
|
||
border-bottom:1px solid var(--border);
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
}
|
||
.ct{font-size:14px;font-weight:800;letter-spacing:-.3px;color:var(--t1);}
|
||
.cs{font-size:12px;color:var(--t3);margin-top:2px;}
|
||
.ca{
|
||
font-size:12.5px;font-weight:600;color:var(--blue-vivid);
|
||
background:var(--blue-light);padding:5px 12px;border-radius:8px;
|
||
cursor:pointer;border:none;font-family:inherit;transition:all .15s;
|
||
}
|
||
.ca:hover{background:var(--blue-mid);}
|
||
|
||
/* ─── TABS ────────────────────────────────────────────── */
|
||
.tab-row{
|
||
display:flex;gap:0;padding:0 20px;
|
||
background:var(--surface-2);border-bottom:1px solid var(--border);
|
||
}
|
||
.tab{
|
||
padding:10px 14px;font-size:12.5px;font-weight:500;
|
||
color:var(--t3);cursor:pointer;
|
||
border-bottom:2px solid transparent;margin-bottom:-1px;
|
||
transition:all .15s;
|
||
}
|
||
.tab.on{color:var(--blue-vivid);border-bottom-color:var(--blue-vivid);font-weight:700;}
|
||
.tab-count{
|
||
font-size:10.5px;font-weight:700;padding:1px 6px;
|
||
border-radius:9px;margin-left:5px;
|
||
}
|
||
.tab-count.blue{background:var(--blue-light);color:var(--blue-vivid);}
|
||
.tab-count.red{background:var(--red-light);color:var(--red);}
|
||
.tab-count.cyan{background:var(--cyan-light);color:#0284C7;}
|
||
|
||
/* ─── FEED ────────────────────────────────────────────── */
|
||
.fi{
|
||
display:flex;align-items:flex-start;gap:0;
|
||
padding:0;border-bottom:1px solid var(--border);
|
||
transition:background .12s;cursor:pointer;
|
||
}
|
||
.fi:last-child{border-bottom:none;}
|
||
.fi:hover{background:var(--surface-2);}
|
||
|
||
/* Left dot strip — replicating the dot grid from dark UI */
|
||
.fi-dots{
|
||
width:52px;flex-shrink:0;
|
||
display:flex;align-items:center;justify-content:center;
|
||
padding:16px 0;border-right:1px solid var(--border);
|
||
}
|
||
|
||
.fi-body{flex:1;padding:13px 16px;min-width:0;}
|
||
.fi-title{
|
||
font-size:13px;font-weight:700;color:var(--t1);
|
||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
||
margin-bottom:3px;
|
||
}
|
||
.fi-meta{font-size:11.5px;color:var(--t3);line-height:1.4;}
|
||
|
||
.fi-right{
|
||
padding:13px 16px;flex-shrink:0;
|
||
display:flex;flex-direction:column;align-items:flex-end;gap:5px;
|
||
}
|
||
.fi-time{font-size:11px;color:var(--t4);}
|
||
|
||
/* ─── BADGE ───────────────────────────────────────────── */
|
||
.badge{
|
||
display:inline-flex;align-items:center;gap:3px;
|
||
padding:2px 8px;border-radius:20px;
|
||
font-size:11px;font-weight:700;line-height:17px;
|
||
}
|
||
.bg-red{background:var(--red-light);color:#C02020;}
|
||
.bg-green{background:var(--green-light);color:var(--green-dark);}
|
||
.bg-amber{background:var(--amber-light);color:#B45309;}
|
||
.bg-blue{background:var(--blue-light);color:var(--blue-vivid);}
|
||
.bg-cyan{background:var(--cyan-light);color:#0284C7;}
|
||
.bg-gray{background:#F1F4FA;color:var(--t3);}
|
||
|
||
/* ─── TABLE ───────────────────────────────────────────── */
|
||
.tbl{width:100%;border-collapse:collapse;}
|
||
.tbl th{
|
||
text-align:left;font-size:10.5px;font-weight:700;
|
||
text-transform:uppercase;letter-spacing:.07em;color:var(--t4);
|
||
padding:10px 0 10px 20px;
|
||
background:var(--surface-2);border-bottom:1px solid var(--border);
|
||
}
|
||
.tbl th:first-child{padding-left:64px;}
|
||
.tbl td{
|
||
padding:12px 0 12px 20px;
|
||
border-bottom:1px solid var(--border);font-size:13px;
|
||
}
|
||
.tbl td:first-child{padding-left:0;}
|
||
.tbl tr:last-child td{border-bottom:none;}
|
||
.tbl tr:hover td{background:var(--surface-2);}
|
||
|
||
.tbl-cell-dots{
|
||
width:64px;padding:0;
|
||
display:flex;align-items:center;justify-content:center;
|
||
border-right:1px solid var(--border);
|
||
}
|
||
|
||
.comp-name{font-weight:700;color:var(--t1);font-size:13.5px;}
|
||
.comp-url{font-size:11.5px;color:var(--t3);margin-top:1px;}
|
||
.pdelta{font-weight:800;font-size:13px;}
|
||
.pdelta.dn{color:var(--red);}
|
||
.pdelta.up{color:var(--green-dark);}
|
||
|
||
/* ─── ALERT CARD ──────────────────────────────────────── */
|
||
.ai{
|
||
display:flex;align-items:flex-start;gap:0;
|
||
border-bottom:1px solid var(--border);
|
||
transition:background .12s;cursor:pointer;
|
||
}
|
||
.ai:last-child{border-bottom:none;}
|
||
.ai:hover{background:var(--surface-2);}
|
||
|
||
.ai-dots{
|
||
width:48px;flex-shrink:0;
|
||
display:flex;align-items:center;justify-content:center;
|
||
padding:14px 0;border-right:1px solid var(--border);
|
||
}
|
||
|
||
.ai-body{padding:13px 14px;flex:1;}
|
||
.ai-title{font-size:13px;font-weight:700;color:var(--t1);}
|
||
.ai-desc{font-size:12px;color:var(--t3);margin-top:2px;line-height:1.4;}
|
||
.ai-time{font-size:10.5px;color:var(--t4);margin-top:4px;}
|
||
|
||
/* ─── PROGRESS ────────────────────────────────────────── */
|
||
.pr{
|
||
display:flex;align-items:center;gap:0;
|
||
border-bottom:1px solid var(--border);
|
||
}
|
||
.pr:last-child{border-bottom:none;}
|
||
.pr-dots{
|
||
width:48px;flex-shrink:0;
|
||
display:flex;align-items:center;justify-content:center;
|
||
padding:13px 0;border-right:1px solid var(--border);
|
||
}
|
||
.pr-inner{flex:1;padding:13px 16px;display:flex;align-items:center;gap:12px;}
|
||
.pr-label{
|
||
width:114px;font-size:12.5px;font-weight:600;color:var(--t2);
|
||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;
|
||
}
|
||
.pr-track{flex:1;height:7px;background:var(--page);border-radius:4px;overflow:hidden;}
|
||
.pr-fill{height:100%;border-radius:4px;transition:width .3s;}
|
||
.pr-fill.blue{background:linear-gradient(90deg,var(--blue-vivid),var(--cyan));}
|
||
.pr-fill.green{background:linear-gradient(90deg,var(--green),#00C9A7);}
|
||
.pr-fill.gray{background:var(--t4);}
|
||
.pr-val{width:38px;text-align:right;font-size:12.5px;font-weight:700;color:var(--t2);}
|
||
|
||
/* ─── BATTLECARD ──────────────────────────────────────── */
|
||
.bc{padding:14px 18px;border-bottom:1px solid var(--border);}
|
||
.bc:last-child{border-bottom:none;}
|
||
.bc-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
|
||
.bc-name{font-size:13.5px;font-weight:800;color:var(--t1);}
|
||
.bc-ts{font-size:11px;color:var(--t4);}
|
||
.bc-pos{font-size:12.5px;color:var(--t2);line-height:1.5;margin-bottom:9px;}
|
||
.bc-pills{display:flex;flex-wrap:wrap;gap:5px;}
|
||
.pill{
|
||
font-size:11px;font-weight:500;padding:3px 9px;
|
||
border-radius:20px;background:var(--surface-2);
|
||
color:var(--t3);border:1px solid var(--border-2);
|
||
}
|
||
.pill.warn{background:var(--amber-light);color:#B45309;border-color:transparent;}
|
||
.pill.danger{background:var(--red-light);color:#C02020;border-color:transparent;}
|
||
.pill.info{background:var(--cyan-light);color:#0284C7;border-color:transparent;}
|
||
|
||
/* ─── SVG DOT GRID helper ─────────────────────────────── */
|
||
/* rendered inline, 4×5 grid, cyan dots fading top-right to bottom-left */
|
||
.dg svg{display:block;}
|
||
|
||
/* ─── SPARKLINE AREA ──────────────────────────────────── */
|
||
.spark-wrap{padding:16px 20px 20px;}
|
||
.spark-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--t4);margin-bottom:6px;}
|
||
.spark-svg{width:100%;height:72px;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ── SIDEBAR ──────────────────────────────────────── -->
|
||
<aside class="sb">
|
||
<div class="sb-logo">
|
||
<!-- Chevron arrow mark from Grok output -->
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||
<rect width="28" height="28" rx="7" fill="rgba(27,142,248,.15)"/>
|
||
<path d="M5 15.5L11 9L16 14L22 8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M14 14.5L18.5 10.5L22 14L18.5 17.5L14 14.5Z" fill="#00D4FF" opacity=".9"/>
|
||
<path d="M6 18L11 22L16 18" stroke="rgba(255,255,255,.4)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span class="sb-logo-text">Better<em>sight</em></span>
|
||
</div>
|
||
|
||
<nav class="sb-nav">
|
||
<div class="sb-label">Intelligence</div>
|
||
<a class="sb-item on">
|
||
<svg class="si" viewBox="0 0 16 16" fill="currentColor"><path d="M1 1h6v6H1zm8 0h6v6H9zM1 9h6v6H1zm8 0h6v6H9z"/></svg>
|
||
Market Movement
|
||
<span class="sb-dot">4</span>
|
||
</a>
|
||
<a class="sb-item">
|
||
<svg class="si" viewBox="0 0 16 16" fill="currentColor"><path d="M2 12.5L6 7.5l3 3L12 6l2 1.5-5 6-3-3-3 3.5L2 12.5z"/></svg>
|
||
Comparable Trips
|
||
</a>
|
||
<a class="sb-item">
|
||
<svg class="si" viewBox="0 0 16 16" fill="currentColor"><path d="M3 3h10v1.5H3zm0 4h10v1.5H3zm0 4h7v1.5H3z"/></svg>
|
||
Battlecards
|
||
<span class="sb-dot am">2</span>
|
||
</a>
|
||
<a class="sb-item">
|
||
<svg class="si" viewBox="0 0 16 16" fill="currentColor"><path d="M14 11H9V9h5zm-6 0H2V9h6zm6-4H9V5h5zM8 7H2V5h6zm6 8H9v-2h5zm-6 0H2v-2h6z"/></svg>
|
||
Analyse
|
||
</a>
|
||
<div class="sb-label">Reports</div>
|
||
<a class="sb-item">
|
||
<svg class="si" viewBox="0 0 16 16" fill="currentColor"><path d="M4 1h8a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V2a1 1 0 011-1zm1 2v2h6V3H5zm0 4v1.5h6V7H5zm0 3.5v1.5h4v-1.5H5z"/></svg>
|
||
Weekly Briefs
|
||
</a>
|
||
<div class="sb-label">Setup</div>
|
||
<a class="sb-item">
|
||
<svg class="si" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a5 5 0 100 10A5 5 0 008 1zm0 1.5a3.5 3.5 0 110 7 3.5 3.5 0 010-7zM1 14.5c0-2.2 3.1-3.5 7-3.5s7 1.3 7 3.5H1z"/></svg>
|
||
Competitors
|
||
</a>
|
||
<a class="sb-item">
|
||
<svg class="si" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a2 2 0 012 2v.5h2.5a.5.5 0 01.5.5v9a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5V4a.5.5 0 01.5-.5H6V3a2 2 0 012-2zm0 1.5a.5.5 0 00-.5.5v.5h1V3a.5.5 0 00-.5-.5z"/></svg>
|
||
Account
|
||
</a>
|
||
</nav>
|
||
|
||
<div class="sb-foot">
|
||
<div class="sb-user">
|
||
<div class="sb-av">JF</div>
|
||
<div style="flex:1;min-width:0;">
|
||
<div class="sb-uname">Jason Francis</div>
|
||
<div class="sb-uplan">Analyse · 3 of 5 seats</div>
|
||
</div>
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="rgba(255,255,255,.3)"><path d="M6 8L2 4h8L6 8z"/></svg>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ── MAIN ────────────────────────────────────────── -->
|
||
<main class="main">
|
||
|
||
<!-- TOPBAR -->
|
||
<header class="topbar">
|
||
<div>
|
||
<div class="topbar-title">Market Movement</div>
|
||
<div class="topbar-sub">G Adventures · Refreshed today at 6:02 am</div>
|
||
</div>
|
||
<div class="topbar-r">
|
||
<div class="tsearch">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="#9BA8C0"><path d="M11.5 7a4.5 4.5 0 10-9 0 4.5 4.5 0 009 0zm-.8 4.3l3 3-1.1 1.1-3-3a6 6 0 111.1-1.1z"/></svg>
|
||
<input type="text" placeholder="Search…">
|
||
</div>
|
||
<div class="tbell">
|
||
<svg width="15" height="15" viewBox="0 0 16 16" fill="#6B7A99"><path d="M8 1a5.5 5.5 0 00-5.5 5.5c0 2.1-.6 3.7-1.5 4.5h14c-.9-.8-1.5-2.4-1.5-4.5A5.5 5.5 0 008 1zM6.5 13a1.5 1.5 0 003 0h-3z"/></svg>
|
||
<div class="tbell-dot"></div>
|
||
</div>
|
||
<button class="tbtn tbtn-outline">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor"><path d="M3 4h10M3 8h10M3 12h6"/></svg>
|
||
Export
|
||
</button>
|
||
<button class="tbtn tbtn-primary">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="white"><path d="M8 3v10M3 8h10"/></svg>
|
||
Run Analysis
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- PAGE BODY -->
|
||
<div class="pb">
|
||
|
||
<!-- STAT CARDS -->
|
||
<div class="stat-row">
|
||
|
||
<!-- helper macro: 4×3 dot grid svg -->
|
||
<!-- stat 1 -->
|
||
<div class="sc blue">
|
||
<div class="sc-top">
|
||
<div class="sc-label">Price Changes</div>
|
||
<div class="sc-ico blue">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M2 12.5L6 7.5l3 3L12 6l4 3H2z"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sc-val blue-num">18</div>
|
||
<div class="sc-meta">
|
||
<span class="sc-delta up">↑ 6</span>
|
||
<span class="sc-period">vs last week</span>
|
||
</div>
|
||
<!-- dot grid bottom-right -->
|
||
<div class="sc-dots dg">
|
||
<svg width="46" height="34" viewBox="0 0 46 34" fill="none">
|
||
<circle cx="3" cy="3" r="1.8" fill="#1B8EF8" opacity=".15"/>
|
||
<circle cx="11" cy="3" r="1.8" fill="#1B8EF8" opacity=".22"/>
|
||
<circle cx="19" cy="3" r="1.8" fill="#1B8EF8" opacity=".30"/>
|
||
<circle cx="27" cy="3" r="1.8" fill="#1B8EF8" opacity=".42"/>
|
||
<circle cx="35" cy="3" r="1.8" fill="#00D4FF" opacity=".55"/>
|
||
<circle cx="43" cy="3" r="1.8" fill="#00D4FF" opacity=".70"/>
|
||
<circle cx="3" cy="11" r="1.8" fill="#1B8EF8" opacity=".18"/>
|
||
<circle cx="11" cy="11" r="1.8" fill="#1B8EF8" opacity=".28"/>
|
||
<circle cx="19" cy="11" r="1.8" fill="#1B8EF8" opacity=".40"/>
|
||
<circle cx="27" cy="11" r="1.8" fill="#00D4FF" opacity=".55"/>
|
||
<circle cx="35" cy="11" r="1.8" fill="#00D4FF" opacity=".70"/>
|
||
<circle cx="43" cy="11" r="1.8" fill="#00D4FF" opacity=".85"/>
|
||
<circle cx="3" cy="19" r="1.8" fill="#1B8EF8" opacity=".22"/>
|
||
<circle cx="11" cy="19" r="1.8" fill="#1B8EF8" opacity=".35"/>
|
||
<circle cx="19" cy="19" r="1.8" fill="#00D4FF" opacity=".50"/>
|
||
<circle cx="27" cy="19" r="1.8" fill="#00D4FF" opacity=".65"/>
|
||
<circle cx="35" cy="19" r="1.8" fill="#00D4FF" opacity=".80"/>
|
||
<circle cx="43" cy="19" r="1.8" fill="#00D4FF" opacity=".95"/>
|
||
<circle cx="3" cy="27" r="1.8" fill="#1B8EF8" opacity=".28"/>
|
||
<circle cx="11" cy="27" r="1.8" fill="#1B8EF8" opacity=".42"/>
|
||
<circle cx="19" cy="27" r="1.8" fill="#00D4FF" opacity=".58"/>
|
||
<circle cx="27" cy="27" r="1.8" fill="#00D4FF" opacity=".72"/>
|
||
<circle cx="35" cy="27" r="1.8" fill="#00D4FF" opacity=".88"/>
|
||
<circle cx="43" cy="27" r="1.8" fill="#00D4FF" fill-opacity="1"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- stat 2 -->
|
||
<div class="sc red">
|
||
<div class="sc-top">
|
||
<div class="sc-label">Price Drops</div>
|
||
<div class="sc-ico red">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 13L3 6h10L8 13z"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sc-val" style="color:#F04438;">12</div>
|
||
<div class="sc-meta">
|
||
<span class="sc-delta dn">↓ avg −11%</span>
|
||
<span class="sc-period">this week</span>
|
||
</div>
|
||
<div class="sc-dots dg">
|
||
<svg width="46" height="34" viewBox="0 0 46 34" fill="none">
|
||
<circle cx="3" cy="3" r="1.8" fill="#F04438" opacity=".12"/><circle cx="11" cy="3" r="1.8" fill="#F04438" opacity=".20"/><circle cx="19" cy="3" r="1.8" fill="#F04438" opacity=".30"/><circle cx="27" cy="3" r="1.8" fill="#F04438" opacity=".42"/><circle cx="35" cy="3" r="1.8" fill="#F04438" opacity=".56"/><circle cx="43" cy="3" r="1.8" fill="#F04438" opacity=".70"/>
|
||
<circle cx="3" cy="11" r="1.8" fill="#F04438" opacity=".18"/><circle cx="11" cy="11" r="1.8" fill="#F04438" opacity=".28"/><circle cx="19" cy="11" r="1.8" fill="#F04438" opacity=".40"/><circle cx="27" cy="11" r="1.8" fill="#F04438" opacity=".55"/><circle cx="35" cy="11" r="1.8" fill="#F04438" opacity=".68"/><circle cx="43" cy="11" r="1.8" fill="#F04438" opacity=".82"/>
|
||
<circle cx="3" cy="19" r="1.8" fill="#F04438" opacity=".22"/><circle cx="11" cy="19" r="1.8" fill="#F04438" opacity=".35"/><circle cx="19" cy="19" r="1.8" fill="#F04438" opacity=".50"/><circle cx="27" cy="19" r="1.8" fill="#F04438" opacity=".64"/><circle cx="35" cy="19" r="1.8" fill="#F04438" opacity=".78"/><circle cx="43" cy="19" r="1.8" fill="#F04438" opacity=".92"/>
|
||
<circle cx="3" cy="27" r="1.8" fill="#F04438" opacity=".28"/><circle cx="11" cy="27" r="1.8" fill="#F04438" opacity=".42"/><circle cx="19" cy="27" r="1.8" fill="#F04438" opacity=".58"/><circle cx="27" cy="27" r="1.8" fill="#F04438" opacity=".72"/><circle cx="35" cy="27" r="1.8" fill="#F04438" opacity=".86"/><circle cx="43" cy="27" r="1.8" fill="#F04438" opacity="1"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- stat 3 -->
|
||
<div class="sc green">
|
||
<div class="sc-top">
|
||
<div class="sc-label">New Products</div>
|
||
<div class="sc-ico green">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l1.6 4.8H15l-4 2.9 1.5 4.6L8 11.5l-4.5 2.8 1.5-4.6-4-2.9h5.4L8 2z"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sc-val green-num">7</div>
|
||
<div class="sc-meta">
|
||
<span class="sc-delta up">↑ 3</span>
|
||
<span class="sc-period">this week</span>
|
||
</div>
|
||
<div class="sc-dots dg">
|
||
<svg width="46" height="34" viewBox="0 0 46 34" fill="none">
|
||
<circle cx="3" cy="3" r="1.8" fill="#10D98A" opacity=".12"/><circle cx="11" cy="3" r="1.8" fill="#10D98A" opacity=".20"/><circle cx="19" cy="3" r="1.8" fill="#10D98A" opacity=".30"/><circle cx="27" cy="3" r="1.8" fill="#10D98A" opacity=".42"/><circle cx="35" cy="3" r="1.8" fill="#10D98A" opacity=".56"/><circle cx="43" cy="3" r="1.8" fill="#00C9A7" opacity=".70"/>
|
||
<circle cx="3" cy="11" r="1.8" fill="#10D98A" opacity=".18"/><circle cx="11" cy="11" r="1.8" fill="#10D98A" opacity=".28"/><circle cx="19" cy="11" r="1.8" fill="#10D98A" opacity=".40"/><circle cx="27" cy="11" r="1.8" fill="#10D98A" opacity=".55"/><circle cx="35" cy="11" r="1.8" fill="#00C9A7" opacity=".68"/><circle cx="43" cy="11" r="1.8" fill="#00C9A7" opacity=".82"/>
|
||
<circle cx="3" cy="19" r="1.8" fill="#10D98A" opacity=".22"/><circle cx="11" cy="19" r="1.8" fill="#10D98A" opacity=".35"/><circle cx="19" cy="19" r="1.8" fill="#10D98A" opacity=".50"/><circle cx="27" cy="19" r="1.8" fill="#00C9A7" opacity=".64"/><circle cx="35" cy="19" r="1.8" fill="#00C9A7" opacity=".78"/><circle cx="43" cy="19" r="1.8" fill="#00C9A7" opacity=".92"/>
|
||
<circle cx="3" cy="27" r="1.8" fill="#10D98A" opacity=".28"/><circle cx="11" cy="27" r="1.8" fill="#10D98A" opacity=".42"/><circle cx="19" cy="27" r="1.8" fill="#00C9A7" opacity=".58"/><circle cx="27" cy="27" r="1.8" fill="#00C9A7" opacity=".72"/><circle cx="35" cy="27" r="1.8" fill="#00C9A7" opacity=".86"/><circle cx="43" cy="27" r="1.8" fill="#00C9A7" opacity="1"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- stat 4 -->
|
||
<div class="sc amber">
|
||
<div class="sc-top">
|
||
<div class="sc-label">Competitors</div>
|
||
<div class="sc-ico amber">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a3.5 3.5 0 100 7A3.5 3.5 0 008 1zm0 1.5a2 2 0 110 4 2 2 0 010-4zM1 14.5c0-2.2 3.1-3.5 7-3.5s7 1.3 7 3.5H1z"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="sc-val" style="color:#F79009;">6</div>
|
||
<div class="sc-meta">
|
||
<span class="badge bg-green">✓ All current</span>
|
||
</div>
|
||
<div class="sc-dots dg">
|
||
<svg width="46" height="34" viewBox="0 0 46 34" fill="none">
|
||
<circle cx="3" cy="3" r="1.8" fill="#F79009" opacity=".12"/><circle cx="11" cy="3" r="1.8" fill="#F79009" opacity=".20"/><circle cx="19" cy="3" r="1.8" fill="#F79009" opacity=".30"/><circle cx="27" cy="3" r="1.8" fill="#F79009" opacity=".42"/><circle cx="35" cy="3" r="1.8" fill="#F79009" opacity=".56"/><circle cx="43" cy="3" r="1.8" fill="#F79009" opacity=".70"/>
|
||
<circle cx="3" cy="11" r="1.8" fill="#F79009" opacity=".18"/><circle cx="11" cy="11" r="1.8" fill="#F79009" opacity=".28"/><circle cx="19" cy="11" r="1.8" fill="#F79009" opacity=".40"/><circle cx="27" cy="11" r="1.8" fill="#F79009" opacity=".55"/><circle cx="35" cy="11" r="1.8" fill="#F79009" opacity=".68"/><circle cx="43" cy="11" r="1.8" fill="#F79009" opacity=".82"/>
|
||
<circle cx="3" cy="19" r="1.8" fill="#F79009" opacity=".22"/><circle cx="11" cy="19" r="1.8" fill="#F79009" opacity=".35"/><circle cx="19" cy="19" r="1.8" fill="#F79009" opacity=".50"/><circle cx="27" cy="19" r="1.8" fill="#F79009" opacity=".64"/><circle cx="35" cy="19" r="1.8" fill="#F79009" opacity=".78"/><circle cx="43" cy="19" r="1.8" fill="#F79009" opacity=".92"/>
|
||
<circle cx="3" cy="27" r="1.8" fill="#F79009" opacity=".28"/><circle cx="11" cy="27" r="1.8" fill="#F79009" opacity=".42"/><circle cx="19" cy="27" r="1.8" fill="#F79009" opacity=".58"/><circle cx="27" cy="27" r="1.8" fill="#F79009" opacity=".72"/><circle cx="35" cy="27" r="1.8" fill="#F79009" opacity=".86"/><circle cx="43" cy="27" r="1.8" fill="#F79009" opacity="1"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /stat-row -->
|
||
|
||
<!-- CONTENT GRID -->
|
||
<div class="cg">
|
||
|
||
<!-- LEFT -->
|
||
<div class="cg-left">
|
||
|
||
<!-- ACTIVITY FEED CARD -->
|
||
<div class="card">
|
||
<div class="ch">
|
||
<div>
|
||
<div class="ct">Activity Feed</div>
|
||
<div class="cs">All competitor movements this week</div>
|
||
</div>
|
||
<select style="font-size:12px;border:1px solid var(--border-2);border-radius:8px;padding:5px 10px;color:var(--t2);background:white;font-family:inherit;outline:none;cursor:pointer;">
|
||
<option>All types</option>
|
||
<option>Price changes</option>
|
||
<option>New products</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="tab-row">
|
||
<div class="tab on">All <span class="tab-count blue">18</span></div>
|
||
<div class="tab">Price changes <span class="tab-count red">12</span></div>
|
||
<div class="tab">New products <span class="tab-count cyan">7</span></div>
|
||
</div>
|
||
|
||
<!-- feed items — left column is dot SVG matching dark UI -->
|
||
<div class="fi">
|
||
<div class="fi-dots dg">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||
<circle cx="4" cy="4" r="2" fill="#F04438" opacity=".20"/><circle cx="12" cy="4" r="2" fill="#F04438" opacity=".40"/><circle cx="20" cy="4" r="2" fill="#F04438" opacity=".65"/>
|
||
<circle cx="4" cy="12" r="2" fill="#F04438" opacity=".35"/><circle cx="12" cy="12" r="2" fill="#F04438" opacity=".60"/><circle cx="20" cy="12" r="2" fill="#F04438" opacity=".85"/>
|
||
<circle cx="4" cy="20" r="2" fill="#F04438" opacity=".55"/><circle cx="12" cy="20" r="2" fill="#F04438" opacity=".80"/><circle cx="20" cy="20" r="2" fill="#F04438" opacity="1"/>
|
||
</svg>
|
||
</div>
|
||
<div class="fi-body">
|
||
<div class="fi-title">Intrepid Travel — Peru Classic 15 Days</div>
|
||
<div class="fi-meta">Price dropped USD $2,490 → $2,190 · Standard adult rack rate</div>
|
||
</div>
|
||
<div class="fi-right">
|
||
<div class="fi-time">Today 5:47am</div>
|
||
<span class="badge bg-red">↓ −12%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fi">
|
||
<div class="fi-dots dg">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||
<circle cx="4" cy="4" r="2" fill="#00D4FF" opacity=".20"/><circle cx="12" cy="4" r="2" fill="#00D4FF" opacity=".40"/><circle cx="20" cy="4" r="2" fill="#00D4FF" opacity=".65"/>
|
||
<circle cx="4" cy="12" r="2" fill="#00D4FF" opacity=".35"/><circle cx="12" cy="12" r="2" fill="#00D4FF" opacity=".60"/><circle cx="20" cy="12" r="2" fill="#00D4FF" opacity=".85"/>
|
||
<circle cx="4" cy="20" r="2" fill="#1B8EF8" opacity=".55"/><circle cx="12" cy="20" r="2" fill="#1B8EF8" opacity=".80"/><circle cx="20" cy="20" r="2" fill="#1B8EF8" opacity="1"/>
|
||
</svg>
|
||
</div>
|
||
<div class="fi-body">
|
||
<div class="fi-title">Flash Pack — Jordan Desert & Petra Explorer <span class="badge bg-cyan">NEW</span></div>
|
||
<div class="fi-meta">8 days · USD $3,200 · No comparable in your catalogue</div>
|
||
</div>
|
||
<div class="fi-right">
|
||
<div class="fi-time">Today 5:47am</div>
|
||
<span class="badge bg-amber">⚠ Review</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fi">
|
||
<div class="fi-dots dg">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||
<circle cx="4" cy="4" r="2" fill="#F04438" opacity=".20"/><circle cx="12" cy="4" r="2" fill="#F04438" opacity=".38"/><circle cx="20" cy="4" r="2" fill="#F04438" opacity=".60"/>
|
||
<circle cx="4" cy="12" r="2" fill="#F04438" opacity=".35"/><circle cx="12" cy="12" r="2" fill="#F04438" opacity=".58"/><circle cx="20" cy="12" r="2" fill="#F04438" opacity=".80"/>
|
||
<circle cx="4" cy="20" r="2" fill="#F04438" opacity=".52"/><circle cx="12" cy="20" r="2" fill="#F04438" opacity=".76"/><circle cx="20" cy="20" r="2" fill="#F04438" opacity="1"/>
|
||
</svg>
|
||
</div>
|
||
<div class="fi-body">
|
||
<div class="fi-title">Flash Pack — Patagonia Adventure 10 Days</div>
|
||
<div class="fi-meta">Price dropped USD $3,400 → $3,100 · Standard adult rack rate</div>
|
||
</div>
|
||
<div class="fi-right">
|
||
<div class="fi-time">Today 5:47am</div>
|
||
<span class="badge bg-red">↓ −9%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fi">
|
||
<div class="fi-dots dg">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||
<circle cx="4" cy="4" r="2" fill="#10D98A" opacity=".20"/><circle cx="12" cy="4" r="2" fill="#10D98A" opacity=".40"/><circle cx="20" cy="4" r="2" fill="#10D98A" opacity=".65"/>
|
||
<circle cx="4" cy="12" r="2" fill="#10D98A" opacity=".35"/><circle cx="12" cy="12" r="2" fill="#10D98A" opacity=".60"/><circle cx="20" cy="12" r="2" fill="#10D98A" opacity=".85"/>
|
||
<circle cx="4" cy="20" r="2" fill="#10D98A" opacity=".55"/><circle cx="12" cy="20" r="2" fill="#10D98A" opacity=".80"/><circle cx="20" cy="20" r="2" fill="#10D98A" opacity="1"/>
|
||
</svg>
|
||
</div>
|
||
<div class="fi-body">
|
||
<div class="fi-title">Exodus Travels — Machu Picchu Trek 8 Days</div>
|
||
<div class="fi-meta">Price increased USD $1,850 → $2,050 · You're now $51 below</div>
|
||
</div>
|
||
<div class="fi-right">
|
||
<div class="fi-time">Yesterday</div>
|
||
<span class="badge bg-green">↑ +11%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fi">
|
||
<div class="fi-dots dg">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||
<circle cx="4" cy="4" r="2" fill="#9BA8C0" opacity=".20"/><circle cx="12" cy="4" r="2" fill="#9BA8C0" opacity=".38"/><circle cx="20" cy="4" r="2" fill="#9BA8C0" opacity=".58"/>
|
||
<circle cx="4" cy="12" r="2" fill="#9BA8C0" opacity=".35"/><circle cx="12" cy="12" r="2" fill="#9BA8C0" opacity=".55"/><circle cx="20" cy="12" r="2" fill="#9BA8C0" opacity=".75"/>
|
||
<circle cx="4" cy="20" r="2" fill="#9BA8C0" opacity=".50"/><circle cx="12" cy="20" r="2" fill="#9BA8C0" opacity=".72"/><circle cx="20" cy="20" r="2" fill="#9BA8C0" opacity=".92"/>
|
||
</svg>
|
||
</div>
|
||
<div class="fi-body">
|
||
<div class="fi-title">Exodus Travels — Bolivia Salt Flats Express <span class="badge bg-gray">REMOVED</span></div>
|
||
<div class="fi-meta">Was USD $1,650 / 7 days · You have 2 comparable Bolivia products</div>
|
||
</div>
|
||
<div class="fi-right">
|
||
<div class="fi-time">Yesterday</div>
|
||
<span class="badge bg-gray">Removed</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fi">
|
||
<div class="fi-dots dg">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||
<circle cx="4" cy="4" r="2" fill="#00D4FF" opacity=".18"/><circle cx="12" cy="4" r="2" fill="#00D4FF" opacity=".36"/><circle cx="20" cy="4" r="2" fill="#00D4FF" opacity=".58"/>
|
||
<circle cx="4" cy="12" r="2" fill="#1B8EF8" opacity=".32"/><circle cx="12" cy="12" r="2" fill="#1B8EF8" opacity=".54"/><circle cx="20" cy="12" r="2" fill="#1B8EF8" opacity=".76"/>
|
||
<circle cx="4" cy="20" r="2" fill="#1B8EF8" opacity=".50"/><circle cx="12" cy="20" r="2" fill="#1B8EF8" opacity=".74"/><circle cx="20" cy="20" r="2" fill="#1B8EF8" opacity=".96"/>
|
||
</svg>
|
||
</div>
|
||
<div class="fi-body">
|
||
<div class="fi-title">Intrepid Travel — Vietnam Street Food Journey <span class="badge bg-cyan">NEW</span></div>
|
||
<div class="fi-meta">10 days · USD $1,450 · You have 3 comparable Vietnam products</div>
|
||
</div>
|
||
<div class="fi-right">
|
||
<div class="fi-time">Mon 9 Jun</div>
|
||
<span class="badge bg-blue">Monitor</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /feed card -->
|
||
|
||
<!-- COMPETITOR TABLE CARD -->
|
||
<div class="card">
|
||
<div class="ch">
|
||
<div>
|
||
<div class="ct">Competitors</div>
|
||
<div class="cs">6 tracked · All current as of 6:02am</div>
|
||
</div>
|
||
<button class="ca">+ Add competitor</button>
|
||
</div>
|
||
<table class="tbl">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:56px;padding-left:0;text-align:center;">
|
||
<!-- dot icon header -->
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="margin:0 auto;display:block;">
|
||
<circle cx="2" cy="2" r="1.5" fill="#9BA8C0" opacity=".5"/>
|
||
<circle cx="7" cy="2" r="1.5" fill="#9BA8C0" opacity=".5"/>
|
||
<circle cx="12" cy="2" r="1.5" fill="#9BA8C0" opacity=".5"/>
|
||
<circle cx="2" cy="7" r="1.5" fill="#9BA8C0" opacity=".5"/>
|
||
<circle cx="7" cy="7" r="1.5" fill="#9BA8C0" opacity=".5"/>
|
||
<circle cx="12" cy="7" r="1.5" fill="#9BA8C0" opacity=".5"/>
|
||
<circle cx="2" cy="12" r="1.5" fill="#9BA8C0" opacity=".5"/>
|
||
<circle cx="7" cy="12" r="1.5" fill="#9BA8C0" opacity=".5"/>
|
||
<circle cx="12" cy="12" r="1.5" fill="#9BA8C0" opacity=".5"/>
|
||
</svg>
|
||
</th>
|
||
<th>Competitor</th>
|
||
<th>Market</th>
|
||
<th>Status</th>
|
||
<th>Δ Price</th>
|
||
<th>Scraped</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:0;">
|
||
<div class="tbl-cell-dots" style="height:100%;min-height:54px;">
|
||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||
<circle cx="3" cy="3" r="1.6" fill="#F04438" opacity=".35"/>
|
||
<circle cx="11" cy="3" r="1.6" fill="#F04438" opacity=".65"/>
|
||
<circle cx="19" cy="3" r="1.6" fill="#F04438" opacity=".90"/>
|
||
<circle cx="3" cy="11" r="1.6" fill="#F04438" opacity=".55"/>
|
||
<circle cx="11" cy="11" r="1.6" fill="#F04438" opacity=".80"/>
|
||
<circle cx="19" cy="11" r="1.6" fill="#F04438" opacity="1"/>
|
||
<circle cx="3" cy="19" r="1.6" fill="#F04438" opacity=".25"/>
|
||
<circle cx="11" cy="19" r="1.6" fill="#F04438" opacity=".45"/>
|
||
<circle cx="19" cy="19" r="1.6" fill="#F04438" opacity=".70"/>
|
||
</svg>
|
||
</div>
|
||
</td>
|
||
<td><div class="comp-name">Intrepid Travel</div><div class="comp-url">intrepidtravel.com</div></td>
|
||
<td><span style="margin-right:5px;">🇬🇧</span>United Kingdom</td>
|
||
<td><span class="badge bg-green">✓ Current</span></td>
|
||
<td><span class="pdelta dn">↓ −12% Peru</span></td>
|
||
<td style="color:var(--t3);font-size:12px;">Today 6:02am</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:0;">
|
||
<div class="tbl-cell-dots" style="height:100%;min-height:54px;">
|
||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||
<circle cx="3" cy="3" r="1.6" fill="#10D98A" opacity=".35"/><circle cx="11" cy="3" r="1.6" fill="#10D98A" opacity=".65"/><circle cx="19" cy="3" r="1.6" fill="#10D98A" opacity=".90"/>
|
||
<circle cx="3" cy="11" r="1.6" fill="#10D98A" opacity=".55"/><circle cx="11" cy="11" r="1.6" fill="#10D98A" opacity=".80"/><circle cx="19" cy="11" r="1.6" fill="#10D98A" opacity="1"/>
|
||
<circle cx="3" cy="19" r="1.6" fill="#10D98A" opacity=".25"/><circle cx="11" cy="19" r="1.6" fill="#10D98A" opacity=".45"/><circle cx="19" cy="19" r="1.6" fill="#10D98A" opacity=".70"/>
|
||
</svg>
|
||
</div>
|
||
</td>
|
||
<td><div class="comp-name">Exodus Travels</div><div class="comp-url">exodustravels.com</div></td>
|
||
<td><span style="margin-right:5px;">🇬🇧</span>United Kingdom</td>
|
||
<td><span class="badge bg-green">✓ Current</span></td>
|
||
<td><span class="pdelta up">↑ +11% Machu Picchu</span></td>
|
||
<td style="color:var(--t3);font-size:12px;">Today 6:02am</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:0;">
|
||
<div class="tbl-cell-dots" style="height:100%;min-height:54px;">
|
||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||
<circle cx="3" cy="3" r="1.6" fill="#F79009" opacity=".35"/><circle cx="11" cy="3" r="1.6" fill="#F79009" opacity=".65"/><circle cx="19" cy="3" r="1.6" fill="#F79009" opacity=".90"/>
|
||
<circle cx="3" cy="11" r="1.6" fill="#F79009" opacity=".55"/><circle cx="11" cy="11" r="1.6" fill="#F79009" opacity=".80"/><circle cx="19" cy="11" r="1.6" fill="#F79009" opacity="1"/>
|
||
<circle cx="3" cy="19" r="1.6" fill="#F79009" opacity=".25"/><circle cx="11" cy="19" r="1.6" fill="#F79009" opacity=".45"/><circle cx="19" cy="19" r="1.6" fill="#F79009" opacity=".70"/>
|
||
</svg>
|
||
</div>
|
||
</td>
|
||
<td><div class="comp-name">Flash Pack</div><div class="comp-url">flashpack.com</div></td>
|
||
<td><span style="margin-right:5px;">🇺🇸</span>United States</td>
|
||
<td><span class="badge bg-amber">⚠ Changed</span></td>
|
||
<td><span class="pdelta dn">↓ −9% Patagonia</span></td>
|
||
<td style="color:var(--t3);font-size:12px;">Today 6:02am</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:0;">
|
||
<div class="tbl-cell-dots" style="height:100%;min-height:54px;">
|
||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||
<circle cx="3" cy="3" r="1.6" fill="#1B8EF8" opacity=".35"/><circle cx="11" cy="3" r="1.6" fill="#1B8EF8" opacity=".65"/><circle cx="19" cy="3" r="1.6" fill="#1B8EF8" opacity=".90"/>
|
||
<circle cx="3" cy="11" r="1.6" fill="#1B8EF8" opacity=".55"/><circle cx="11" cy="11" r="1.6" fill="#1B8EF8" opacity=".80"/><circle cx="19" cy="11" r="1.6" fill="#1B8EF8" opacity="1"/>
|
||
<circle cx="3" cy="19" r="1.6" fill="#1B8EF8" opacity=".25"/><circle cx="11" cy="19" r="1.6" fill="#1B8EF8" opacity=".45"/><circle cx="19" cy="19" r="1.6" fill="#1B8EF8" opacity=".70"/>
|
||
</svg>
|
||
</div>
|
||
</td>
|
||
<td><div class="comp-name">G Adventures</div><div class="comp-url">gadventures.com</div></td>
|
||
<td><span style="margin-right:5px;">🇨🇦</span>Canada</td>
|
||
<td><span class="badge bg-green">✓ Current</span></td>
|
||
<td style="color:var(--t4);">—</td>
|
||
<td style="color:var(--t3);font-size:12px;">Today 6:02am</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:0;">
|
||
<div class="tbl-cell-dots" style="height:100%;min-height:54px;">
|
||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||
<circle cx="3" cy="3" r="1.6" fill="#9BA8C0" opacity=".25"/><circle cx="11" cy="3" r="1.6" fill="#9BA8C0" opacity=".45"/><circle cx="19" cy="3" r="1.6" fill="#9BA8C0" opacity=".65"/>
|
||
<circle cx="3" cy="11" r="1.6" fill="#9BA8C0" opacity=".40"/><circle cx="11" cy="11" r="1.6" fill="#9BA8C0" opacity=".60"/><circle cx="19" cy="11" r="1.6" fill="#9BA8C0" opacity=".80"/>
|
||
<circle cx="3" cy="19" r="1.6" fill="#9BA8C0" opacity=".20"/><circle cx="11" cy="19" r="1.6" fill="#9BA8C0" opacity=".38"/><circle cx="19" cy="19" r="1.6" fill="#9BA8C0" opacity=".55"/>
|
||
</svg>
|
||
</div>
|
||
</td>
|
||
<td><div class="comp-name">Kimkim</div><div class="comp-url">kimkim.com</div></td>
|
||
<td><span style="margin-right:5px;">🇺🇸</span>United States</td>
|
||
<td><span class="badge bg-green">✓ Current</span></td>
|
||
<td style="color:var(--t4);">—</td>
|
||
<td style="color:var(--t3);font-size:12px;">Today 6:02am</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div><!-- /cg-left -->
|
||
|
||
<!-- RIGHT COLUMN -->
|
||
<div class="cg-right">
|
||
|
||
<!-- ALERTS -->
|
||
<div class="card">
|
||
<div class="ch">
|
||
<div><div class="ct">Alerts</div><div class="cs">Requires attention</div></div>
|
||
<span class="badge bg-red">4 new</span>
|
||
</div>
|
||
|
||
<div class="ai">
|
||
<div class="ai-dots dg">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="4" cy="4" r="2" fill="#F04438" opacity=".30"/><circle cx="12" cy="4" r="2" fill="#F04438" opacity=".60"/><circle cx="20" cy="4" r="2" fill="#F04438" opacity=".90"/>
|
||
<circle cx="4" cy="12" r="2" fill="#F04438" opacity=".50"/><circle cx="12" cy="12" r="2" fill="#F04438" opacity=".80"/><circle cx="20" cy="12" r="2" fill="#F04438" opacity="1"/>
|
||
<circle cx="4" cy="20" r="2" fill="#F04438" opacity=".20"/><circle cx="12" cy="20" r="2" fill="#F04438" opacity=".42"/><circle cx="20" cy="20" r="2" fill="#F04438" opacity=".68"/>
|
||
</svg>
|
||
</div>
|
||
<div class="ai-body">
|
||
<div class="ai-title">Intrepid dropped Peru −12%</div>
|
||
<div class="ai-desc">$2,490 → $2,190. You're $191 below at $1,999.</div>
|
||
<div class="ai-time">Today 5:47am</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ai">
|
||
<div class="ai-dots dg">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="4" cy="4" r="2" fill="#F79009" opacity=".30"/><circle cx="12" cy="4" r="2" fill="#F79009" opacity=".60"/><circle cx="20" cy="4" r="2" fill="#00D4FF" opacity=".85"/>
|
||
<circle cx="4" cy="12" r="2" fill="#F79009" opacity=".50"/><circle cx="12" cy="12" r="2" fill="#00D4FF" opacity=".78"/><circle cx="20" cy="12" r="2" fill="#00D4FF" opacity="1"/>
|
||
<circle cx="4" cy="20" r="2" fill="#1B8EF8" opacity=".35"/><circle cx="12" cy="20" r="2" fill="#1B8EF8" opacity=".60"/><circle cx="20" cy="20" r="2" fill="#1B8EF8" opacity=".85"/>
|
||
</svg>
|
||
</div>
|
||
<div class="ai-body">
|
||
<div class="ai-title">Flash Pack entered Jordan</div>
|
||
<div class="ai-desc">New 8-day product at $3,200. No comparable in catalogue.</div>
|
||
<div class="ai-time">Today 5:47am</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ai">
|
||
<div class="ai-dots dg">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="4" cy="4" r="2" fill="#10D98A" opacity=".30"/><circle cx="12" cy="4" r="2" fill="#10D98A" opacity=".60"/><circle cx="20" cy="4" r="2" fill="#10D98A" opacity=".90"/>
|
||
<circle cx="4" cy="12" r="2" fill="#10D98A" opacity=".50"/><circle cx="12" cy="12" r="2" fill="#10D98A" opacity=".80"/><circle cx="20" cy="12" r="2" fill="#10D98A" opacity="1"/>
|
||
<circle cx="4" cy="20" r="2" fill="#10D98A" opacity=".20"/><circle cx="12" cy="20" r="2" fill="#10D98A" opacity=".42"/><circle cx="20" cy="20" r="2" fill="#10D98A" opacity=".68"/>
|
||
</svg>
|
||
</div>
|
||
<div class="ai-body">
|
||
<div class="ai-title">Exodus raised Kenya +11%</div>
|
||
<div class="ai-desc">$1,850 → $2,050. Opportunity to capture displaced bookings.</div>
|
||
<div class="ai-time">Yesterday</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ai">
|
||
<div class="ai-dots dg">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||
<circle cx="4" cy="4" r="2" fill="#1B8EF8" opacity=".25"/><circle cx="12" cy="4" r="2" fill="#1B8EF8" opacity=".50"/><circle cx="20" cy="4" r="2" fill="#1B8EF8" opacity=".78"/>
|
||
<circle cx="4" cy="12" r="2" fill="#1B8EF8" opacity=".42"/><circle cx="12" cy="12" r="2" fill="#1B8EF8" opacity=".68"/><circle cx="20" cy="12" r="2" fill="#1B8EF8" opacity=".92"/>
|
||
<circle cx="4" cy="20" r="2" fill="#1B8EF8" opacity=".18"/><circle cx="12" cy="20" r="2" fill="#1B8EF8" opacity=".38"/><circle cx="20" cy="20" r="2" fill="#1B8EF8" opacity=".60"/>
|
||
</svg>
|
||
</div>
|
||
<div class="ai-body">
|
||
<div class="ai-title">Weekly brief ready</div>
|
||
<div class="ai-desc">Monday June 9 intelligence brief is in your inbox.</div>
|
||
<div class="ai-time">Mon 9 Jun · 6:00am</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PRICE POSITION -->
|
||
<div class="card">
|
||
<div class="ch">
|
||
<div><div class="ct">Price Position</div><div class="cs">Peru corridor · vs competitors</div></div>
|
||
</div>
|
||
|
||
<!-- sparkline -->
|
||
<div class="spark-wrap">
|
||
<div class="spark-labels">
|
||
<span>Apr</span><span>May</span><span>Jun</span>
|
||
</div>
|
||
<svg class="spark-svg" viewBox="0 0 280 72" fill="none" preserveAspectRatio="none">
|
||
<defs>
|
||
<linearGradient id="sg1" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#1B8EF8" stop-opacity=".18"/>
|
||
<stop offset="100%" stop-color="#1B8EF8" stop-opacity="0"/>
|
||
</linearGradient>
|
||
<linearGradient id="sg2" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#F04438" stop-opacity=".12"/>
|
||
<stop offset="100%" stop-color="#F04438" stop-opacity="0"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<!-- You line — blue -->
|
||
<path d="M0 48 C40 44 80 46 120 45 C160 44 200 43 280 42" stroke="#1B8EF8" stroke-width="2" fill="none"/>
|
||
<path d="M0 48 C40 44 80 46 120 45 C160 44 200 43 280 42 L280 72 L0 72 Z" fill="url(#sg1)"/>
|
||
<!-- Intrepid line — red dropping -->
|
||
<path d="M0 36 C40 36 80 37 120 38 C160 42 200 52 280 56" stroke="#F04438" stroke-width="1.5" stroke-dasharray="4 3" fill="none"/>
|
||
<!-- You dot -->
|
||
<circle cx="280" cy="42" r="4" fill="#1B8EF8"/>
|
||
<circle cx="280" cy="42" r="2" fill="white"/>
|
||
<!-- Intrepid dot -->
|
||
<circle cx="280" cy="56" r="3.5" fill="#F04438"/>
|
||
<circle cx="280" cy="56" r="1.8" fill="white"/>
|
||
</svg>
|
||
<div style="display:flex;gap:16px;margin-top:8px;">
|
||
<div style="display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t3);">
|
||
<span style="width:12px;height:2px;background:#1B8EF8;display:inline-block;border-radius:1px;"></span>You
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:5px;font-size:11px;color:var(--t3);">
|
||
<span style="width:12px;height:2px;background:#F04438;display:inline-block;border-radius:1px;border-top:2px dashed #F04438;"></span>Intrepid
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pr">
|
||
<div class="pr-dots">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<circle cx="3" cy="3" r="1.6" fill="#1B8EF8" opacity=".5"/><circle cx="10" cy="3" r="1.6" fill="#1B8EF8" opacity=".8"/><circle cx="17" cy="3" r="1.6" fill="#1B8EF8" opacity="1"/>
|
||
<circle cx="3" cy="10" r="1.6" fill="#1B8EF8" opacity=".3"/><circle cx="10" cy="10" r="1.6" fill="#1B8EF8" opacity=".55"/><circle cx="17" cy="10" r="1.6" fill="#1B8EF8" opacity=".8"/>
|
||
<circle cx="3" cy="17" r="1.6" fill="#1B8EF8" opacity=".15"/><circle cx="10" cy="17" r="1.6" fill="#1B8EF8" opacity=".35"/><circle cx="17" cy="17" r="1.6" fill="#1B8EF8" opacity=".55"/>
|
||
</svg>
|
||
</div>
|
||
<div class="pr-inner">
|
||
<div class="pr-label" style="font-weight:800;color:var(--blue-vivid);">You (G Adventures)</div>
|
||
<div class="pr-track"><div class="pr-fill blue" style="width:57%;"></div></div>
|
||
<div class="pr-val">$1,999</div>
|
||
</div>
|
||
</div>
|
||
<div class="pr">
|
||
<div class="pr-dots">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<circle cx="3" cy="3" r="1.6" fill="#F04438" opacity=".5"/><circle cx="10" cy="3" r="1.6" fill="#F04438" opacity=".8"/><circle cx="17" cy="3" r="1.6" fill="#F04438" opacity="1"/>
|
||
<circle cx="3" cy="10" r="1.6" fill="#F04438" opacity=".3"/><circle cx="10" cy="10" r="1.6" fill="#F04438" opacity=".55"/><circle cx="17" cy="10" r="1.6" fill="#F04438" opacity=".8"/>
|
||
<circle cx="3" cy="17" r="1.6" fill="#F04438" opacity=".15"/><circle cx="10" cy="17" r="1.6" fill="#F04438" opacity=".35"/><circle cx="17" cy="17" r="1.6" fill="#F04438" opacity=".55"/>
|
||
</svg>
|
||
</div>
|
||
<div class="pr-inner">
|
||
<div class="pr-label">Intrepid Travel</div>
|
||
<div class="pr-track"><div class="pr-fill" style="width:63%;background:#F04438;"></div></div>
|
||
<div class="pr-val">$2,190</div>
|
||
</div>
|
||
</div>
|
||
<div class="pr">
|
||
<div class="pr-dots">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<circle cx="3" cy="3" r="1.6" fill="#9BA8C0" opacity=".5"/><circle cx="10" cy="3" r="1.6" fill="#9BA8C0" opacity=".8"/><circle cx="17" cy="3" r="1.6" fill="#9BA8C0" opacity="1"/>
|
||
<circle cx="3" cy="10" r="1.6" fill="#9BA8C0" opacity=".3"/><circle cx="10" cy="10" r="1.6" fill="#9BA8C0" opacity=".55"/><circle cx="17" cy="10" r="1.6" fill="#9BA8C0" opacity=".8"/>
|
||
<circle cx="3" cy="17" r="1.6" fill="#9BA8C0" opacity=".15"/><circle cx="10" cy="17" r="1.6" fill="#9BA8C0" opacity=".35"/><circle cx="17" cy="17" r="1.6" fill="#9BA8C0" opacity=".55"/>
|
||
</svg>
|
||
</div>
|
||
<div class="pr-inner">
|
||
<div class="pr-label">Exodus Travels</div>
|
||
<div class="pr-track"><div class="pr-fill gray" style="width:59%;"></div></div>
|
||
<div class="pr-val">$2,050</div>
|
||
</div>
|
||
</div>
|
||
<div class="pr">
|
||
<div class="pr-dots">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<circle cx="3" cy="3" r="1.6" fill="#9BA8C0" opacity=".4"/><circle cx="10" cy="3" r="1.6" fill="#9BA8C0" opacity=".65"/><circle cx="17" cy="3" r="1.6" fill="#9BA8C0" opacity=".88"/>
|
||
<circle cx="3" cy="10" r="1.6" fill="#9BA8C0" opacity=".22"/><circle cx="10" cy="10" r="1.6" fill="#9BA8C0" opacity=".44"/><circle cx="17" cy="10" r="1.6" fill="#9BA8C0" opacity=".66"/>
|
||
<circle cx="3" cy="17" r="1.6" fill="#9BA8C0" opacity=".10"/><circle cx="10" cy="17" r="1.6" fill="#9BA8C0" opacity=".26"/><circle cx="17" cy="17" r="1.6" fill="#9BA8C0" opacity=".44"/>
|
||
</svg>
|
||
</div>
|
||
<div class="pr-inner">
|
||
<div class="pr-label">Kimkim</div>
|
||
<div class="pr-track"><div class="pr-fill gray" style="width:52%;"></div></div>
|
||
<div class="pr-val">$1,800</div>
|
||
</div>
|
||
</div>
|
||
<div class="pr">
|
||
<div class="pr-dots">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<circle cx="3" cy="3" r="1.6" fill="#10D98A" opacity=".5"/><circle cx="10" cy="3" r="1.6" fill="#10D98A" opacity=".8"/><circle cx="17" cy="3" r="1.6" fill="#10D98A" opacity="1"/>
|
||
<circle cx="3" cy="10" r="1.6" fill="#10D98A" opacity=".3"/><circle cx="10" cy="10" r="1.6" fill="#10D98A" opacity=".55"/><circle cx="17" cy="10" r="1.6" fill="#10D98A" opacity=".8"/>
|
||
<circle cx="3" cy="17" r="1.6" fill="#10D98A" opacity=".15"/><circle cx="10" cy="17" r="1.6" fill="#10D98A" opacity=".35"/><circle cx="17" cy="17" r="1.6" fill="#10D98A" opacity=".55"/>
|
||
</svg>
|
||
</div>
|
||
<div class="pr-inner">
|
||
<div class="pr-label">Flash Pack</div>
|
||
<div class="pr-track"><div class="pr-fill green" style="width:89%;"></div></div>
|
||
<div class="pr-val">$3,100</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- BATTLECARDS -->
|
||
<div class="card">
|
||
<div class="ch">
|
||
<div><div class="ct">Battlecards</div><div class="cs">Auto-updated after each scrape</div></div>
|
||
<button class="ca">View all</button>
|
||
</div>
|
||
|
||
<div class="bc">
|
||
<div class="bc-row">
|
||
<div class="bc-name">Intrepid Travel</div>
|
||
<div class="bc-ts">Updated today</div>
|
||
</div>
|
||
<div class="bc-pos">Budget-mid, group focused. Strong brand but discounting Q3 Peru aggressively. Large groups, basic accommodation.</div>
|
||
<div class="bc-pills">
|
||
<span class="pill">Peru Classic</span>
|
||
<span class="pill">Vietnam</span>
|
||
<span class="pill danger">Discounting Q3</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bc">
|
||
<div class="bc-row">
|
||
<div class="bc-name">Flash Pack</div>
|
||
<div class="bc-ts">Updated today</div>
|
||
</div>
|
||
<div class="bc-pos">Premium solo travellers. Aggressive expansion — 2 new destinations in 2 months. Pricing 40–55% above you.</div>
|
||
<div class="bc-pills">
|
||
<span class="pill info">Jordan NEW</span>
|
||
<span class="pill">Patagonia</span>
|
||
<span class="pill warn">Expanding fast</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div><!-- /cg-right -->
|
||
</div><!-- /cg -->
|
||
</div><!-- /pb -->
|
||
</main>
|
||
|
||
</body>
|
||
</html>
|