x/safebin
1
0
Fork 0
mirror of https://github.com/skidoodle/safebin.git synced 2026-04-28 03:07:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: embed web files

Browse Source 
Signed-off-by: skidoodle <contact@albert.lol>
This commit is contained in:
albert
2026-01-18 20:53:56 +01:00
parent 954aec6d8e
commit 73ee7a9a14
14 changed files with 47 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/style.css
+247
View File
@@ -0,0 +1,247 @@
:root {
--bg: #0d1117;
--fg: #adbac7;
--accent: #4493f8;
--border: #30363d;
--success: #3fb950;
--header-white: #f0f6fc;
}
body {
background: var(--bg);
color: var(--fg);
font-family: -apple-system, system-ui, sans-serif;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 800px;
padding: 20px;
}
.header {
margin-bottom: 30px;
border-left: 3px solid var(--accent);
padding-left: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-title {
margin: 0;
color: var(--header-white);
}
.upload-area {
border: 2px dashed var(--border);
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
background: #161b22;
transition:
border-color 0.2s,
background 0.2s;
height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
overflow: hidden;
}
.upload-area:hover,
.upload-area.dragover {
border-color: var(--accent);
background: #1c2128;
}
.upload-icon {
font-size: 32px;
color: var(--accent);
margin-bottom: 8px;
}
.upload-text {
font-weight: 500;
color: var(--header-white);
}
.progress-bar {
height: 6px;
background: var(--border);
border-radius: 10px;
margin: 25px 0;
overflow: hidden;
display: none;
width: 95%;
}
.progress-bar.visible {
display: block;
}
.progress-fill {
height: 100%;
background: var(--accent);
width: 0%;
transition: width 0.3s;
}
#busy-state {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#result-state {
width: 100%;
display: flex;
justify-content: center;
}
.result-container {
width: 100%;
max-width: 700px;
display: flex;
flex-direction: column;
padding: 0 20px;
box-sizing: border-box;
}
.result-label {
text-align: left;
margin-bottom: 8px;
}
.copy-box {
display: flex;
gap: 8px;
width: 100%;
}
input[type="text"] {
flex: 1;
background: #0d1117;
border: 1px solid var(--border);
color: var(--success);
padding: 12px;
border-radius: 6px;
font-family: monospace;
font-size: 14px;
outline: none;
min-width: 0;
width: 100%;
}
button {
background: var(--accent);
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
white-space: nowrap;
}
.reset-wrapper {
margin-top: 20px;
display: flex;
justify-content: center;
}
.reset-btn {
background: transparent;
color: var(--fg);
text-decoration: underline;
border: none;
cursor: pointer;
opacity: 0.7;
font-size: 14px;
}
.reset-btn:hover {
opacity: 1;
}
.dim {
color: #768390;
font-size: 13px;
}
.error-text {
color: #f85149;
margin-bottom: 10px;
}
.github-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: #21262d;
border: 1px solid var(--border);
border-radius: 6px;
color: var(--header-white);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: 0.2s;
}
.github-btn:hover {
background: #30363d;
border-color: #8b949e;
}
.github-btn svg {
opacity: 0.9;
}
.cli-section {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
.cli-label {
text-transform: uppercase;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
}
.cli-pre {
background: #161b22;
padding: 16px;
border-radius: 8px;
font-size: 13px;
overflow-x: auto;
border: 1px solid var(--border);
}
.status-text {
font-weight: 500;
}
.hidden {
display: none !important;
}
@media (max-width: 400px) {
.github-btn span {
display: none;
}
.github-btn {
padding: 6px;
}
}