TDvorak/Trackeep
1
0
Fork 0
mirror of https://github.com/Dvorinka/Trackeep.git synced 2026-06-04 04:22:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
4c812e376dfad348483ea361dc9bdba492b7575c
Trackeep/Others/browser-extension/popup.html
T
Tomas Dvorak d27cf14110 first test
2026-02-08 14:14:55 +01:00

315 lines
8.9 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en" data-kb-theme="dark">
<head>
<meta charset="UTF-8" />
<title>Trackeep Saver</title>
<style>
/* Complete Inter Font Faces - Exact Papra */
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff) format("woff");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff) format("woff");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.bunny.net/inter/files/inter-latin-600-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-600-normal.woff) format("woff");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff) format("woff");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
/* Exact Papra CSS variables and dark theme (hex fallbacks for clarity) */
:root {
--background: 26 26 26;
--foreground: 250 250 250;
--card: 32 32 32;
--card-foreground: 250 250 250;
--popover: 32 32 32;
--popover-foreground: 250 250 250;
--primary: 217 70.2% 91.2%;
--primary-foreground: 250 250 250;
--secondary: 39 39 42;
--secondary-foreground: 250 250 250;
--muted: 39 39 42;
--muted-foreground: 163 163 163;
--accent: 39 39 42;
--accent-foreground: 250 250 250;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 250 250 250;
--border: 39 39 42;
--input: 39 39 42;
--ring: 217 70.2% 91.2%;
--radius: 0.5rem;
/* Hex fallbacks for readability */
--bg-hex: #1a1a1a;
--card-hex: #202020;
--input-hex: #27272a;
--border-hex: #27272a;
--muted-hex: #27272a;
--text-hex: #fafafa;
--muted-text-hex: #a3a3a3;
--primary-hex: #60a5fa;
}
body {
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin: 0;
padding: 16px;
min-width: 380px;
max-width: 420px;
background: var(--bg-hex);
color: var(--text-hex);
line-height: 1.6;
color-scheme: dark;
}
h1 {
font-size: 18px;
font-weight: 600;
margin: 0 0 12px 0;
display: flex;
align-items: center;
gap: 8px;
}
.logo {
width: 24px;
height: 24px;
border-radius: calc(var(--radius) * 0.5);
background: var(--primary-hex);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-hex);
font-weight: bold;
font-size: 14px;
}
.hint {
font-size: 12px;
color: var(--muted-text-hex);
margin-bottom: 12px;
padding: 6px 10px;
background: var(--muted-hex);
border-radius: calc(var(--radius) * 0.5);
border: 1px solid var(--border-hex);
}
.section-title {
font-size: 13px;
font-weight: 600;
margin: 16px 0 6px;
color: var(--muted-text-hex);
text-transform: uppercase;
letter-spacing: 0.05em;
}
label {
display: block;
font-size: 13px;
font-weight: 500;
margin-bottom: 4px;
color: var(--muted-text-hex);
}
input[type="text"],
input[type="url"],
input[type="file"],
textarea {
width: 100%;
box-sizing: border-box;
padding: 8px 12px;
border-radius: var(--radius);
border: 1px solid var(--border-hex);
background: var(--input-hex);
color: var(--text-hex);
font-size: 13px;
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-weight: 400;
transition: border-color 0.15s, background 0.15s;
}
input:focus,
textarea:focus {
outline: none;
border-color: var(--primary-hex);
background: var(--card-hex);
}
textarea {
resize: vertical;
min-height: 56px;
}
button {
cursor: pointer;
border-radius: var(--radius);
border: none;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--primary-hex);
color: var(--text-hex);
transition: all 0.2s;
}
button:hover {
opacity: 0.9;
transform: translateY(-1px);
}
button.secondary {
background: var(--muted-hex);
color: var(--text-hex);
}
button.secondary:hover {
background: var(--border-hex);
color: var(--text-hex);
opacity: 1;
}
button:disabled {
opacity: 0.5;
cursor: default;
transform: none;
}
.row {
display: flex;
gap: 10px;
align-items: center;
}
.row > * {
flex: 1;
}
.checkbox-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--muted-text-hex);
}
.checkbox-row input[type="checkbox"] {
width: auto;
margin: 0;
}
.status {
font-size: 12px;
margin-top: 12px;
min-height: 18px;
padding: 6px 10px;
border-radius: calc(var(--radius) * 0.5);
background: var(--muted-hex);
border: 1px solid var(--border-hex);
}
.status.error {
color: #ef4444;
border-color: #ef4444;
background: color-mix(in srgb, #ef4444 10%, transparent);
}
.status.success {
color: var(--primary-hex);
border-color: var(--primary-hex);
background: color-mix(in srgb, var(--primary-hex) 10%, transparent);
}
hr {
border: none;
border-top: 1px solid var(--border-hex);
margin: 16px 0;
}
.form-section {
background: var(--card-hex);
border-radius: var(--radius);
padding: 14px;
border: 1px solid var(--border-hex);
margin-bottom: 12px;
}
</style>
</head>
<body>
<h1>
<div class="logo">T</div>
Trackeep Saver
</h1>
<div class="hint" id="configHint"></div>
<button id="openOptions" class="secondary" style="width:100%; margin-bottom:12px;">⚙️ Open Options</button>
<div class="form-section">
<div class="section-title">Save current page / video</div>
<label for="bookmarkTitle">Title</label>
<input id="bookmarkTitle" type="text" />
<label for="bookmarkUrl">URL</label>
<input id="bookmarkUrl" type="url" required />
<label for="bookmarkDescription">Description (optional)</label>
<textarea id="bookmarkDescription" placeholder="Why is this page or video important?"></textarea>
<label for="bookmarkTags">Tags (comma-separated, optional)</label>
<input id="bookmarkTags" type="text" placeholder="reading, video, dev" />
<div class="row" style="margin-top:12px; justify-content: space-between;">
<div class="checkbox-row">
<input id="bookmarkPublic" type="checkbox" />
<label for="bookmarkPublic" style="margin:0; font-weight:400;">Public</label>
</div>
<button type="submit" id="saveBookmarkBtn">💾 Save bookmark</button>
</div>
</div>
<hr />
<div class="form-section">
<div class="section-title">Upload file to Trackeep</div>
<label for="fileInput">File</label>
<input id="fileInput" type="file" />
<label for="fileDescription">Description (optional)</label>
<textarea id="fileDescription" placeholder="Short description for this file"></textarea>
<div style="margin-top:12px; text-align:right;">
<button type="submit" id="uploadFileBtn">📤 Upload file</button>
</div>
</div>
<div id="status" class="status"></div>
<script src="popup.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink