<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Keep</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Google Sans', 'DM Sans', 'Roboto', 'Arial', 'sans-serif'],
},
colors: {
keep: {
bg: 'var(--bg-color)',
card: 'var(--card-color)',
sidebar: 'var(--bg-color)',
active: 'var(--active-color)',
text: 'var(--text-color)',
textSecondary: 'var(--text-secondary)',
border: 'var(--border-color)',
hover: 'var(--hover-color)',
dock: 'var(--dock-color)',
}
},
transitionTimingFunction: {
'standard': 'cubic-bezier(0.4, 0.0, 0.2, 1)',
},
animation: {
'fade-in': 'fadeIn 0.2s ease-out forwards',
'pop-in': 'popIn 0.2s cubic-bezier(0.2, 0, 0, 1) forwards',
'spin-slow': 'material-rotate 1.4s linear infinite',
'dash': 'material-dash 1.4s ease-in-out infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
popIn: {
'0%': { opacity: '0', transform: 'scale(0.95)' },
'100%': { opacity: '1', transform: 'scale(1)' },
},
'material-rotate': {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
'material-dash': {
'0%': { 'stroke-dasharray': '1, 200', 'stroke-dashoffset': '0' },
'50%': { 'stroke-dasharray': '89, 200', 'stroke-dashoffset': '-35px' },
'100%': { 'stroke-dasharray': '89, 200', 'stroke-dashoffset': '-124px' },
}
}
}
}
}
</script>
<style>
:root {
/* Light Mode Defaults */
--bg-color: #ffffff;
--card-color: #ffffff;
--active-color: #d2e3fc;
--text-color: #202124;
--text-secondary: #5f6368;
--border-color: #e0e0e0;
--hover-color: rgba(60, 64, 67, 0.08);
--dock-color: #f1f3f4;
}
.dark {
/* Dark Mode Overrides */
--bg-color: #202124;
--card-color: #202124;
--active-color: #173352;
--text-color: #e8eaed;
--text-secondary: #9aa0a6;
--border-color: #5f6368;
--hover-color: rgba(232, 234, 237, 0.08);
--dock-color: #2d2e30;
}
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 400;
src: local('Google Sans'), local('GoogleSans-Regular'), url(https://fonts.gstatic.com/s/googlesans/v29/4UaGrENHsxJlGDuGo1OIlL3Owp5MKg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 500;
src: local('Google Sans Medium'), local('GoogleSans-Medium'), url(https://fonts.gstatic.com/s/googlesans/v29/4UabrENHsxJlGDuGo1OIlLU94YtzCw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Google Sans';
font-style: normal;
font-weight: 700;
src: local('Google Sans Bold'), local('GoogleSans-Bold'), url(https://fonts.gstatic.com/s/googlesans/v29/4UabrENHsxJlGDuGo1OIlDs94YtzCw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: 'Google Sans', 'DM Sans', 'Roboto', 'Arial', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
caret-color: #88b2f7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Match Tailwind default transition timing */
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
::selection {
background-color: #88b2f7;
color: #202124;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #5f6368;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #9aa0a6;
}
.markdown-preview { font-size: 1rem; line-height: 1.5; }
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3, .markdown-preview h4 { font-weight: 600; margin-top: 0.5rem; margin-bottom: 0.25rem; line-height: 1.25; }
.markdown-preview h1 { font-size: 1.5em; }
.markdown-preview h2 { font-size: 1.25em; }
.markdown-preview h3 { font-size: 1.1em; }
.markdown-preview p { margin-bottom: 0.5rem; white-space: pre-wrap; }
.markdown-preview ul { list-style-type: disc; padding-left: 1.2rem; margin-bottom: 0.5rem; }
.markdown-preview ol { list-style-type: decimal; padding-left: 1.2rem; margin-bottom: 0.5rem; }
.markdown-preview blockquote { border-left: 3px solid var(--border-color); padding-left: 0.8rem; color: var(--text-secondary); margin-bottom: 0.5rem; font-style: italic; }
.markdown-preview pre { background: rgba(0,0,0,0.1); padding: 0.5rem; border-radius: 0.375rem; overflow-x: auto; margin-bottom: 0.5rem; }
.dark .markdown-preview pre { background: rgba(255,255,255,0.1); }
.markdown-preview code { font-family: 'Roboto Mono', monospace; background: rgba(0,0,0,0.1); padding: 0.1em 0.3em; border-radius: 0.25em; font-size: 0.9em; }
.dark .markdown-preview code { background: rgba(255,255,255,0.1); }
.markdown-preview a { color: #88b2f7; text-decoration: underline; }
.dark .markdown-preview a { color: #88b2f7; }
.markdown-preview hr { border-color: var(--border-color); margin: 0.5rem 0; }
</style>
<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=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
<script type="importmap">
{
"imports": {
"react": "https://aistudiocdn.com/react@^19.2.1",
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/",
"@supabase/supabase-js": "https://aistudiocdn.com/@supabase/supabase-js@^2.87.0",
"vite": "https://aistudiocdn.com/vite@^7.2.7",
"@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.2",
"react/": "https://aistudiocdn.com/react@^19.2.1/",
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.556.0",
"react-dom": "https://esm.sh/react-dom@^19.2.4"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.tsx"></script>
</body>
</html>