file organization of htmls css

templates/index.html

@@ -6,182 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SekiPOS - Inventory Management</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
-    <style>
-        :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; }
-        }
-    </style>
+    <link rel="shortcut icon" href="./static/favicon.png" type="image/x-icon">
+    <link rel="stylesheet" href="./static/styleIndex.css">
 </head>
 
 <body>