SekiDesu01/SekiPOS
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

file organization of htmls css

Browse Source
This commit is contained in:
Shiro-Nek0
2026-02-26 03:02:03 -03:00
parent 8cc5138888
commit 7a4d122976
5 changed files with 284 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

182
static/styleIndex.css Normal file
View File

@@ -0,0 +1,182 @@
:root {
/* Discord Light Mode Palette */
--bg: #ebedef;
--card-bg: #ffffff;
--text-main: #2e3338;
--text-muted: #4f5660;
--border: #e3e5e8;
--header-bg: #ffffff;
--input-bg: #e3e5e8;
--table-head: #f2f3f5;
--price-color: #2e3338;
--accent: #5865F2;
/* Discord Burple */
--accent-hover: #4752c4;
--danger: #ed4245;
--warning: #fee75c;
}
[data-theme="dark"] {
/* Discord Dark Mode Palette */
--bg: #36393f;
--card-bg: #2f3136;
--text-main: #ffffff;
--text-muted: #b9bbbe;
--border: #202225;
--header-bg: #202225;
--input-bg: #202225;
--table-head: #292b2f;
--price-color: #ffffff;
}
body {
font-family: 'gg sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
padding: 20px;
background: var(--bg);
color: var(--text-main);
margin: 0;
transition: background 0.2s, color 0.2s;
}
.header-bar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--header-bg);
padding: 10px 25px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.main-container {
display: flex;
gap: 25px;
}
.column {
flex: 1;
min-width: 400px;
}
.card {
background: var(--card-bg);
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
margin-bottom: 20px;
border: 1px solid var(--border);
}
#display-img {
max-width: 250px;
max-height: 250px;
border-radius: 4px;
margin-bottom: 15px;
object-fit: contain;
}
.price-tag {
font-size: 3em;
color: var(--price-color);
font-weight: 800;
margin: 10px 0;
}
input {
display: block;
width: 100%;
margin: 12px 0;
padding: 12px;
border: none;
border-radius: 4px;
box-sizing: border-box;
background: var(--input-bg);
color: var(--text-main);
}
button {
padding: 10px 15px;
cursor: pointer;
border-radius: 4px;
border: none;
transition: 0.2s;
font-weight: 500;
}
.btn-save {
background: var(--accent);
color: white;
width: 100%;
font-size: 1.1em;
}
.btn-save:hover {
background: var(--accent-hover);
}
.btn-edit {
background: var(--accent);
color: white;
}
.btn-del {
background: var(--danger);
color: white;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
border-radius: 8px;
overflow: hidden;
}
th,
td {
padding: 15px;
border-bottom: 1px solid var(--border);
text-align: left;
}
th {
background: var(--table-head);
color: var(--text-muted);
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 0.5px;
}
.theme-toggle-btn {
background: var(--text-main);
color: var(--bg);
font-weight: bold;
}
#new-product-prompt {
display: none;
background: var(--accent);
color: white;
padding: 12px 20px;
border-radius: 8px;
margin-bottom: 20px;
animation: slideDown 0.4s ease;
justify-content: space-between;
align-items: center;
}
@keyframes slideDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

98
static/styleLogin.css Normal file
View File

@@ -0,0 +1,98 @@
:root {
/* Discord Branding Colors */
--bg: #5865F2;
--card-bg: #ffffff;
--text: #2e3338;
--input-bg: #e3e5e8;
--input-border: transparent;
--accent: #5865F2;
--accent-hover: #4752c4;
--error: #ed4245;
}
[data-theme="dark"] {
/* Discord Dark Mode */
--bg: #36393f;
--card-bg: #2f3136;
--text: #ffffff;
--input-bg: #202225;
--input-border: transparent;
}
body {
font-family: 'gg sans', 'Segoe UI', Tahoma, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: var(--bg);
margin: 0;
transition: background 0.2s;
}
.login-box {
background: var(--card-bg);
padding: 32px;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
text-align: center;
color: var(--text);
width: 400px;
transition: background 0.2s, color 0.2s;
}
h2 {
margin-top: 0;
font-weight: 700;
font-size: 24px;
}
p.sub-text {
color: var(--text);
opacity: 0.7;
margin-bottom: 20px;
}
input {
display: block;
width: 100%;
margin: 16px 0;
padding: 12px;
border: none;
border-radius: 4px;
background: var(--input-bg);
color: var(--text);
box-sizing: border-box;
font-size: 16px;
}
input:focus {
outline: 2px solid var(--accent);
}
button {
background: var(--accent);
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
width: 100%;
margin-top: 10px;
transition: background 0.2s;
}
button:hover {
background: var(--accent-hover);
}
.error-msg {
background: var(--error);
color: white;
padding: 8px;
border-radius: 4px;
font-size: 0.9em;
margin-bottom: 15px;
}

178
templates/index.html
View File

@@ -6,182 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SekiPOS - Inventory Management</title> <title>SekiPOS - Inventory Management</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<style> <link rel="shortcut icon" href="./static/favicon.png" type="image/x-icon">
:root { <link rel="stylesheet" href="./static/styleIndex.css">
/* Discord Light Mode Palette */
--bg: #ebedef;
--card-bg: #ffffff;
--text-main: #2e3338;
--text-muted: #4f5660;
--border: #e3e5e8;
--header-bg: #ffffff;
--input-bg: #e3e5e8;
--table-head: #f2f3f5;
--price-color: #2e3338;
--accent: #5865F2; /* Discord Burple */
--accent-hover: #4752c4;
--danger: #ed4245;
--warning: #fee75c;
}
[data-theme="dark"] {
/* Discord Dark Mode Palette */
--bg: #36393f;
--card-bg: #2f3136;
--text-main: #ffffff;
--text-muted: #b9bbbe;
--border: #202225;
--header-bg: #202225;
--input-bg: #202225;
--table-head: #292b2f;
--price-color: #ffffff;
}
body {
font-family: 'gg sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
padding: 20px;
background: var(--bg);
color: var(--text-main);
margin: 0;
transition: background 0.2s, color 0.2s;
}
.header-bar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--header-bg);
padding: 10px 25px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.main-container {
display: flex;
gap: 25px;
}
.column {
flex: 1;
min-width: 400px;
}
.card {
background: var(--card-bg);
padding: 25px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
margin-bottom: 20px;
border: 1px solid var(--border);
}
#display-img {
max-width: 250px;
max-height: 250px;
border-radius: 4px;
margin-bottom: 15px;
object-fit: contain;
}
.price-tag {
font-size: 3em;
color: var(--price-color);
font-weight: 800;
margin: 10px 0;
}
input {
display: block;
width: 100%;
margin: 12px 0;
padding: 12px;
border: none;
border-radius: 4px;
box-sizing: border-box;
background: var(--input-bg);
color: var(--text-main);
}
button {
padding: 10px 15px;
cursor: pointer;
border-radius: 4px;
border: none;
transition: 0.2s;
font-weight: 500;
}
.btn-save {
background: var(--accent);
color: white;
width: 100%;
font-size: 1.1em;
}
.btn-save:hover {
background: var(--accent-hover);
}
.btn-edit {
background: var(--accent);
color: white;
}
.btn-del {
background: var(--danger);
color: white;
}
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
border-radius: 8px;
overflow: hidden;
}
th,
td {
padding: 15px;
border-bottom: 1px solid var(--border);
text-align: left;
}
th {
background: var(--table-head);
color: var(--text-muted);
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 0.5px;
}
.theme-toggle-btn {
background: var(--text-main);
color: var(--bg);
font-weight: bold;
}
#new-product-prompt {
display: none;
background: var(--accent);
color: white;
padding: 12px 20px;
border-radius: 8px;
margin-bottom: 20px;
animation: slideDown 0.4s ease;
justify-content: space-between;
align-items: center;
}
@keyframes slideDown {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
</head> </head>
<body> <body>

102
templates/login.html
View File

@@ -3,106 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>SekiPOS Login</title> <title>SekiPOS Login</title>
<style> <link rel="shortcut icon" href="./static/favicon.png" type="image/x-icon">
:root { <link rel="stylesheet" href="./static/styleLogin.css">
/* Discord Branding Colors */
--bg: #5865F2;
--card-bg: #ffffff;
--text: #2e3338;
--input-bg: #e3e5e8;
--input-border: transparent;
--accent: #5865F2;
--accent-hover: #4752c4;
--error: #ed4245;
}
[data-theme="dark"] {
/* Discord Dark Mode */
--bg: #36393f;
--card-bg: #2f3136;
--text: #ffffff;
--input-bg: #202225;
--input-border: transparent;
}
body {
font-family: 'gg sans', 'Segoe UI', Tahoma, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: var(--bg);
margin: 0;
transition: background 0.2s;
}
.login-box {
background: var(--card-bg);
padding: 32px;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
text-align: center;
color: var(--text);
width: 400px;
transition: background 0.2s, color 0.2s;
}
h2 {
margin-top: 0;
font-weight: 700;
font-size: 24px;
}
p.sub-text {
color: var(--text);
opacity: 0.7;
margin-bottom: 20px;
}
input {
display: block;
width: 100%;
margin: 16px 0;
padding: 12px;
border: none;
border-radius: 4px;
background: var(--input-bg);
color: var(--text);
box-sizing: border-box;
font-size: 16px;
}
input:focus {
outline: 2px solid var(--accent);
}
button {
background: var(--accent);
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
width: 100%;
margin-top: 10px;
transition: background 0.2s;
}
button:hover {
background: var(--accent-hover);
}
.error-msg {
background: var(--error);
color: white;
padding: 8px;
border-radius: 4px;
font-size: 0.9em;
margin-bottom: 15px;
}
</style>
</head> </head>
<body> <body>
<div class="login-box"> <div class="login-box">