scaffold festival drink tracker (pnpm workspace, Fastify + SQLite, Preact tablet UI, admin)
This commit is contained in:
müde
parent
cf33e6ea04
commit
e0898bea22
34 changed files with 5446 additions and 0 deletions
157
client/src/styles.css
Normal file
157
client/src/styles.css
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
||||
|
||||
html, body, #app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #111;
|
||||
color: #eee;
|
||||
overscroll-behavior: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #444;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:active { background: #3a3a3a; }
|
||||
button:disabled { opacity: 0.4; }
|
||||
|
||||
/* ---------- Tablet UI (portrait) ---------- */
|
||||
|
||||
.tablet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.bar-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
}
|
||||
.bar-picker h1 { margin: 0 0 16px; }
|
||||
.bar-picker button {
|
||||
width: 280px;
|
||||
height: 96px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 16px;
|
||||
background: #1a1a1a;
|
||||
border-bottom: 1px solid #333;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.topbar .bar-name { font-size: 20px; font-weight: bold; }
|
||||
.topbar .change { font-size: 14px; padding: 8px 12px; }
|
||||
|
||||
/* Square-ish drink buttons, sized to fit a portrait tablet width.
|
||||
3 columns on a typical portrait iPad (~768px) gives ~240px-wide tiles. */
|
||||
.grid {
|
||||
flex: 1 1 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
align-content: start;
|
||||
}
|
||||
.grid > .drink { aspect-ratio: 1 / 1; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
.drink {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.drink .name { font-weight: bold; line-height: 1.2; }
|
||||
.drink .price { font-size: 14px; opacity: 0.7; margin-top: 6px; }
|
||||
|
||||
.drink.pfand-return {
|
||||
background: #5a2a2a;
|
||||
border-color: #7a3a3a;
|
||||
}
|
||||
|
||||
.cart {
|
||||
flex: 0 0 auto;
|
||||
background: #1a1a1a;
|
||||
border-top: 1px solid #333;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 38vh;
|
||||
}
|
||||
.cart-items {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 6px;
|
||||
min-height: 60px;
|
||||
}
|
||||
.cart-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 3px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.cart-line.return { color: #ff8a8a; }
|
||||
.cart-line.muted { opacity: 0.5; }
|
||||
.cart-total {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
padding: 4px 0 8px;
|
||||
}
|
||||
.cart-total.negative { color: #ff8a8a; }
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.actions button {
|
||||
flex: 1;
|
||||
height: 64px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.actions .cancel { background: #5a2a2a; border-color: #7a3a3a; }
|
||||
.actions .confirm { background: #2a5a2a; border-color: #3a7a3a; }
|
||||
.actions .crew { background: #2a3a5a; border-color: #3a4a7a; }
|
||||
|
||||
/* ---------- Admin ---------- */
|
||||
|
||||
.admin {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
}
|
||||
.admin h1, .admin h2 { margin-top: 24px; }
|
||||
.admin table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
|
||||
.admin th, .admin td { padding: 6px 8px; border-bottom: 1px solid #333; text-align: left; }
|
||||
.admin input, .admin select {
|
||||
background: #1a1a1a; color: #eee; border: 1px solid #444; border-radius: 4px; padding: 6px;
|
||||
}
|
||||
.admin .row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
|
||||
.admin .muted { opacity: 0.6; }
|
||||
.admin .login { max-width: 320px; margin: 80px auto; display: flex; flex-direction: column; gap: 12px; }
|
||||
Loading…
Reference in a new issue