82 lines
2.6 KiB
HTML
82 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Table Cards — SimplePOS</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
/* Neutrals */
|
|
--bg: #f4f4f2;
|
|
--surface: #ffffff;
|
|
--ink-900: #111315;
|
|
--ink-700: #2b2f33;
|
|
--ink-500: #5a6169;
|
|
--ink-400: #8a9099;
|
|
--ink-300: #b8bdc4;
|
|
--ink-200: #dfe2e6;
|
|
--ink-100: #edeff1;
|
|
|
|
/* Status palette — muted, POS-appropriate */
|
|
--open-50: #eef7f0;
|
|
--open-100: #d7ecdc;
|
|
--open-500: #2f9e5e;
|
|
--open-700: #1f7042;
|
|
|
|
--occ-50: #eef2fb;
|
|
--occ-100: #d7dff4;
|
|
--occ-500: #3758c9;
|
|
--occ-700: #25409a;
|
|
|
|
--res-50: #f4eefb;
|
|
--res-100: #e3d4f3;
|
|
--res-500: #7a44c9;
|
|
--res-700: #57309a;
|
|
|
|
--alert-50: #fdeeea;
|
|
--alert-100: #f8d2c8;
|
|
--alert-500: #d94b26;
|
|
--alert-700: #a5361b;
|
|
|
|
--dirty-50: #f6f1e8;
|
|
--dirty-100: #e8dcc3;
|
|
--dirty-500: #8a6d2b;
|
|
--dirty-700: #604a1d;
|
|
|
|
--radius: 14px;
|
|
--radius-sm: 8px;
|
|
--shadow-1: 0 1px 2px rgba(16,20,24,0.04), 0 1px 1px rgba(16,20,24,0.03);
|
|
--shadow-2: 0 6px 18px rgba(16,20,24,0.08), 0 2px 4px rgba(16,20,24,0.04);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg);
|
|
color: var(--ink-900);
|
|
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-feature-settings: 'ss01', 'cv11';
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
#root { width: 100vw; height: 100vh; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
|
|
<script type="text/babel" src="design-canvas.jsx"></script>
|
|
<script type="text/babel" src="table-card.jsx"></script>
|
|
<script type="text/babel" src="app.jsx"></script>
|
|
</body>
|
|
</html>
|