79 lines
3.7 KiB
HTML
79 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Clio</title>
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,300&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" />
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg: oklch(0.12 0.01 60);
|
|
--bg2: oklch(0.15 0.01 60);
|
|
--bg3: oklch(0.18 0.012 60);
|
|
--bg4: oklch(0.22 0.012 60);
|
|
--border: oklch(0.28 0.01 60);
|
|
--text: oklch(0.88 0.01 65);
|
|
--text2: oklch(0.65 0.01 65);
|
|
--text3: oklch(0.45 0.01 65);
|
|
--amber: oklch(0.75 0.15 65);
|
|
--amber-dim: oklch(0.55 0.10 65);
|
|
--amber-glow: oklch(0.75 0.15 65 / 0.15);
|
|
--teal: oklch(0.65 0.10 195);
|
|
--teal-dim: oklch(0.45 0.08 195);
|
|
--red: oklch(0.60 0.18 25);
|
|
--red-dim: oklch(0.40 0.12 25);
|
|
--green: oklch(0.62 0.14 155);
|
|
--green-dim: oklch(0.42 0.09 155);
|
|
--sidebar-w: 220px;
|
|
--font-sans: 'IBM Plex Sans', sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
}
|
|
|
|
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; overflow: hidden; }
|
|
|
|
#root { height: 100vh; display: flex; flex-direction: column; }
|
|
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--text3); }
|
|
|
|
button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; color: inherit; }
|
|
input, textarea { font-family: var(--font-sans); }
|
|
|
|
.mono { font-family: var(--font-mono); }
|
|
|
|
/* Source pill */
|
|
.source-pill {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
|
|
padding: 2px 7px; border-radius: 3px;
|
|
background: var(--bg4); color: var(--text2); border: 1px solid var(--border);
|
|
}
|
|
.source-portable { border-color: var(--amber-dim); color: var(--amber); }
|
|
.source-stationary { border-color: var(--teal-dim); color: var(--teal); }
|
|
.source-phone { border-color: var(--green-dim); color: var(--green); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel" src="components/Sidebar.jsx"></script>
|
|
<script type="text/babel" src="components/Dashboard.jsx"></script>
|
|
<script type="text/babel" src="components/DayView.jsx"></script>
|
|
<script type="text/babel" src="components/RecordingDetail.jsx"></script>
|
|
<script type="text/babel" src="components/SearchView.jsx"></script>
|
|
<script type="text/babel" src="components/HighlightsView.jsx"></script>
|
|
<script type="text/babel" src="components/App.jsx"></script>
|
|
<script type="text/babel" src="tweaks-panel.jsx"></script>
|
|
<script type="text/babel" src="components/Tweaks.jsx"></script>
|
|
</body>
|
|
</html>
|