Hugging Face's logo

Spaces:
divid29
/
securetamperpos
Running

App Files Community
divid29 commited on
Commit
b69974d
·
verified ·
1 Parent(s): 0246626

<!doctype html>

Browse files

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Maestro POS — Prototype</title>

<!-- Tailwind CDN (Play CDN) -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- TweetNaCl for Ed25519 signing -->
<script src="https://unpkg.com/tweetnacl@1.0.3/nacl-fast.js"></script>
<script src="https://unpkg.com/tweetnacl-util@0.15.1/nacl-util.min.js"></script>

<style>
/* Small custom styles for nicer shadows & gradient accents */
:root{
--accent-start: #6EE7B7;
--accent-end: #60A5FA;
--muted: #6B7280;
}
.glass {
background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.6));
backdrop-filter: blur(6px) saturate(120%);
}
.card {
border-radius: 14px;
box-shadow: 0 8px 30px rgba(2,6,23,0.12);
}
.gradient-border {
background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(110,231,183,0.16));
border-radius: 16px;
padding: 1px;
}
.accent-btn {
background-image: linear-gradient(90deg,var(--accent-start),var(--accent-end));
color: white;
box-shadow: 0 6px 18px rgba(59,130,246,0.18);
}
.small-dot {
width:10px;height:10px;border-radius:999px;display:inline-block;
box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
/* animated pulse for sensor ok */


@keyframes
 pulse {
0% { transform: scale(1); opacity: 1; }
70% { transform: scale(1.4); opacity: 0.4; }
100% { transform: scale(1); opacity: 1; }
}
.pulse {
animation: pulse 1.6s infinite ease-in-out;
}
/* receipts grid responsiveness */
.receipts-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
</style>
</head>
<body class="min-h-screen bg-gradient-to-b from-white via-slate-50 to-slate-100 text-slate-800">

<!-- Header -->
<header class="py-6 px-6 md:px-12">
<div class="max-w-6xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl gradient-border p-1">
<div class="w-full h-full rounded-lg flex items-center justify-center bg-white">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M12 2L3 7v6c0 5 3.813 9.5 9 11 5.188-1.5 9-6 9-11V7l-9-5z" fill="url(#g)"/><defs><linearGradient id="g" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stop-color="#60A5FA"/><stop offset="1" stop-color="#6EE7B7"/></linearGradient></defs></svg>
</div>
</div>
<div>
<h1 class="text-2xl font-semibold" style="background:linear-gradient(90deg,#60A5FA,#6EE7B7); -webkit-background-clip:text; color:transparent;">Maestro POS</h1>
<p class="text-sm text-gray-500">Offline-capable • QR verification • Tamper-aware receipts</p>
</div>
</div>

<nav class="flex items-center gap-3">
<button id="nav-pos" class="px-4 py-2 rounded-md text-sm card glass hover:scale-105 transition">POS Terminal</button>
<button id="nav-receipts" class="px-4 py-2 rounded-md text-sm card glass hover:scale-105 transition">Receipts</button>
</nav>
</div>
</header>

<main class="max-w-6xl mx-auto px-6 md:px-12 pb-12">

<!-- POS Terminal -->
<section id="page-pos" class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<!-- Left: QR and receipt preview -->
<div class="card p-6 rounded-xl glass">
<h2 class="text-lg font-semibold mb-3">Scan / Paste QR (simulation)</h2>
<p class="text-sm text-gray-500 mb-4">Paste the COSE/CBOR QR content here. For demo, text containing the word <span class="font-semibold">signed</span> will be treated as valid.</p>
<textarea id="qr-input" rows="4" class="w-full p-3 rounded-md border border-slate-200 focus:ring-2 focus:ring-slate-200" placeholder="Paste/simulate QR payload..."></textarea>

<div class="flex gap-3 mt-4">
<button id="btn-verify" class="px-4 py-2 rounded-md accent-btn">Verify QR</button>
<button id="btn-generate" class="px-4 py-2 rounded-md border card glass" disabled>Generate Receipt</button>
<button id="btn-store" class="px-4 py-2 rounded-md card glass" disabled>Store Receipt</button>
</div>

<div id="verify-result" class="mt-4"></div>

<hr class="my-4 border-slate-200"/>

<h3 class="text-md font-medium mb-2">Receipt Preview</h3>
<div id="receipt-preview" class="rounded-lg p-4 card glass">
<pre id="receipt-json" class="text-sm text-slate-700 max-h-56 overflow-auto"></pre>
</div>
</div>

<!-- Right: Tamper sensor and metadata -->
<div class="card p-6 rounded-xl glass">
<div class="flex items-start justify-between">
<div>
<h2 class="text-lg font-semibold">Tamper Sensors</h2>
<p class="text-sm text-gray-500">Live mock sensors — will update every 3 seconds</p>
</div>
<div class="text-sm text-gray-500">Status</div>
</div>

<div class="mt-4 grid grid-cols-1 gap-3">
<div class="p-3 rounded-lg flex items-center justify-between bg-white card">
<div>
<div class="text-sm font-medium">Reed Switch</div>
<div class="text-xs text-gray-500">Magnetic door sensor</div>
</div>
<div class="flex items-center gap-3">
<span id="dot-reed" class="small-dot bg-emerald-400"></span>
<div id="val-reed" class="text-sm text-gray-600">0</div>
</div>
</div>

<div class="p-3 rounded-lg flex items-center justify-between bg-white card">
<div>
<div class="text-sm font-medium">Hall Sensor</div>
<div class="text-xs text-gray-500">Tamper magnet detect</div>
</div>
<div class="flex items-center gap-3">
<span id="dot-hall" class="small-dot bg-emerald-400"></span>
<div id="val-hall" class="text-sm text-gray-600">0</div>
</div>
</div>

<div class="p-3 rounded-lg flex items-center justify-between bg-white card">
<div>
<div class="text-sm font-medium">Tilt Switch</div>
<div class="text-xs text-gray-500">Orientation / drop</div>
</div>
<div class="flex items-center gap-3">
<span id="dot-tilt" class="small-dot bg-emerald-400"></span>
<div id="val-tilt" class="text-sm text-gray-600">0</div>
</div>
</div>

<div class="p-3 rounded-lg bg-white card">
<div class="flex items-center justify-between">
<div>
<div class="text-sm font-medium">Geo (mock)</div>
<div class="text-xs text-gray-500">Uses static demo coords</div>
</div>
<div class="text-sm">12.95, 80.20</div>
</div>
</div>

<div class="p-3 rounded-lg bg-white card">
<div class="flex items-center justify-between">
<div>
<div class="text-sm font-medium">Device Signature Key</div>
<div class="text-xs text-gray-500">Generates one keypair per browser session</div>
</div>
<div>
<button id="btn-showpk" class="px-3 py-1 rounded-md card glass text-sm">Show pubkey</button>
</div>
</div>
<div id="pubkey-area" class="mt-2 text-xs text-gray-600 break-all hidden"></div>
</div>
</div>
</div>
</div>
</section>

<!-- Receipts Page -->
<section id="page-receipts" class="hidden mt-8">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold">Stored Receipts</h2>
<div class="flex items-center gap-3">
<input id="search-receipts" type="text" placeholder="Search by id/beneficiary" class="px-3 py-2 rounded-md border" />
<button id="btn-clear" class="px-3 py-2 rounded-md card glass">Clear All</button>
</div>
</div>

<div id="receipts-grid" class="receipts-grid"></div>

<div class="mt-6 flex items-center justify-center gap-3">
<button id="prev-page" class="px-3 py-2 rounded-md card glass">Prev</button>
<div id="page-info" class="text-sm text-gray-600"></div>
<button id="next-page" class="px-3 py-2 rounded-md card glass">Next</button>
</div>
</section>
</main>

<!-- Footer -->
<footer class="py-6 text-center text-sm text-gray-500">
Demo POS • Offline prototype • Ed25519-signed receipts • For demo use only
</footer>

<!-- Script -->
<script>
// -----------------------------
// Helpers: encoding / base64
// -----------------------------
const encoder = new TextEncoder();
const decoder = new TextDecoder();

function toBase64(u8) {
// btoa expects binary string
let s = '';
for (let i = 0; i < u8.length; i++) s += String.fromCharCode(u8[i]);
return btoa(s);
}
function fromBase64(base64) {
const bin = atob(base64);
const u8 = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) u8[i] = bin.charCodeAt(i);
return u8;
}

// -----------------------------
// Keypair (device) using tweetnacl
// -----------------------------
let keypair = null;
function generateKeypair() {
keypair = nacl.sign.keyPair(); // ed25519
// store publickey in readable base64 for show
return {
pub: toBase64(keypair.publicKey),
sec: toBase64(keypair.secretKey) // secretKey shouldn't be shown in prod
};
}

// -----------------------------
// Mocked QR verification
// -----------------------------
function verifyQR(payload) {
// Demo rule: if payload contains "signed" -> valid
if (!payload || payload.trim().length === 0)

Files changed (1) hide show
  1. index.html +103 -44
index.html CHANGED
@@ -14,99 +14,158 @@
14
  </style>
15
  </head>
16
  <body class="bg-gray-50">
17
- <header class="hero-gradient text-white">
18
- <div class="container mx-auto px-6 py-24">
 
19
  <div class="max-w-3xl">
20
- <h1 class="text-4xl font-bold mb-4">SecureTamperPOS 🔐🛒</h1>
 
 
 
 
 
21
  <p class="text-xl mb-8">Tamper-proof Point of Sale with cryptographic receipts and sensor security</p>
22
- <a href="#features" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">Explore Features</a>
 
 
 
23
  </div>
24
  </div>
 
25
  </header>
26
-
27
  <section id="features" class="py-20">
28
  <div class="container mx-auto px-6">
29
- <h2 class="text-3xl font-bold text-center mb-12">Featured Capabilities</h2>
 
30
  <div class="grid md:grid-cols-3 gap-8">
31
- <div class="bg-white p-8 rounded-xl shadow-md">
32
  <div class="text-indigo-600 mb-4">
33
- <i data-feather="shield"></i>
 
 
34
  </div>
35
  <h3 class="text-xl font-bold mb-3">Cryptographic Receipts</h3>
36
- <p>Digitally signed receipts using ECDSA/EdDSA with device-bound keys stored in hardware-backed keystore.</p>
 
37
  </div>
38
- <div class="bg-white p-8 rounded-xl shadow-md">
39
  <div class="text-indigo-600 mb-4">
40
- <i data-feather="cpu"></i>
 
 
41
  </div>
42
  <h3 class="text-xl font-bold mb-3">Tamper Detection</h3>
43
- <p>Monitor reed switches, hall effect sensors, and accelerometers to detect physical tampering events.</p>
 
44
  </div>
45
- <div class="bg-white p-8 rounded-xl shadow-md">
46
  <div class="text-indigo-600 mb-4">
47
- <i data-feather="database"></i>
 
 
48
  </div>
49
  <h3 class="text-xl font-bold mb-3">Encrypted Storage</h3>
50
- <p>Local encrypted database stores receipts securely with SQLCipher or EncryptedSharedPreferences.</p>
 
51
  </div>
52
  </div>
53
  </div>
54
  </section>
55
-
56
- <section class="bg-gray-100 py-20">
57
- <div class="container mx-auto px-6">
58
  <div class="flex flex-col md:flex-row items-center">
59
  <div class="md:w-1/2 mb-8 md:mb-0">
60
- <img src="http://static.photos/technology/640x360/42" alt="POS Device" class="rounded-lg shadow-xl">
 
 
 
 
 
61
  </div>
62
  <div class="md:w-1/2 md:pl-12">
63
  <h2 class="text-3xl font-bold mb-6">Offline-First Architecture</h2>
64
- <p class="mb-6">Designed for environments with intermittent connectivity, with secure sync capabilities when online.</p>
65
  <ul class="space-y-4">
66
  <li class="flex items-start">
67
- <i data-feather="check-circle" class="text-green-500 mr-3"></i>
68
- <span>Offline QR code verification with bundled issuer keys</span>
 
 
69
  </li>
70
  <li class="flex items-start">
71
- <i data-feather="check-circle" class="text-green-500 mr-3"></i>
72
- <span>Local encrypted receipt storage</span>
 
 
73
  </li>
74
  <li class="flex items-start">
75
- <i data-feather="check-circle" class="text-green-500 mr-3"></i>
76
- <span>Secure sync when connectivity available</span>
 
 
77
  </li>
78
  </ul>
 
 
 
79
  </div>
80
  </div>
81
  </div>
82
  </section>
83
-
84
  <footer class="bg-gray-900 text-white py-12">
85
  <div class="container mx-auto px-6">
86
- <div class="flex flex-col md:flex-row justify-between items-center">
87
- <div class="mb-6 md:mb-0">
88
- <h3 class="text-2xl font-bold">SecureTamperPOS</h3>
89
- <p class="text-gray-400">Tamper-proof receipts for critical transactions</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </div>
91
- <div class="flex space-x-6">
92
- <a href="#" class="hover:text-indigo-400 transition">
93
- <i data-feather="github"></i>
94
- </a>
95
- <a href="#" class="hover:text-indigo-400 transition">
96
- <i data-feather="twitter"></i>
97
- </a>
98
- <a href="#" class="hover:text-indigo-400 transition">
99
- <i data-feather="mail"></i>
100
- </a>
 
 
 
 
 
 
 
101
  </div>
102
  </div>
103
- <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
104
  <p>© 2023 SecureTamperPOS. All rights reserved.</p>
105
  </div>
106
  </div>
107
  </footer>
108
-
109
- <script>
110
  feather.replace();
111
  </script>
112
  </body>
 
14
  </style>
15
  </head>
16
  <body class="bg-gray-50">
17
+ <header class="hero-gradient text-white relative overflow-hidden">
18
+ <div class="absolute inset-0 bg-black/30"></div>
19
+ <div class="container mx-auto px-6 py-24 relative z-10">
20
  <div class="max-w-3xl">
21
+ <div class="flex items-center gap-4 mb-6">
22
+ <div class="w-14 h-14 rounded-xl bg-white/20 backdrop-blur-sm p-2">
23
+ <img src="http://static.photos/technology/200x200/5" alt="POS Icon" class="w-full h-full object-contain">
24
+ </div>
25
+ <h1 class="text-4xl font-bold">SecureTamperPOS 🔐🛒</h1>
26
+ </div>
27
  <p class="text-xl mb-8">Tamper-proof Point of Sale with cryptographic receipts and sensor security</p>
28
+ <div class="flex gap-4">
29
+ <a href="#features" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">Explore Features</a>
30
+ <a href="#" class="border border-white px-6 py-3 rounded-lg font-medium hover:bg-white/10 transition">Live Demo</a>
31
+ </div>
32
  </div>
33
  </div>
34
+ <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-50 to-transparent"></div>
35
  </header>
 
36
  <section id="features" class="py-20">
37
  <div class="container mx-auto px-6">
38
+ <h2 class="text-3xl font-bold text-center mb-6">Featured Capabilities</h2>
39
+ <p class="text-xl text-center text-gray-600 mb-12">Secure transactions with end-to-end cryptographic protection</p>
40
  <div class="grid md:grid-cols-3 gap-8">
41
+ <div class="bg-white p-8 rounded-xl shadow-xl hover:shadow-2xl transition">
42
  <div class="text-indigo-600 mb-4">
43
+ <div class="w-16 h-16 rounded-full bg-indigo-50 flex items-center justify-center">
44
+ <i data-feather="shield" class="w-8 h-8"></i>
45
+ </div>
46
  </div>
47
  <h3 class="text-xl font-bold mb-3">Cryptographic Receipts</h3>
48
+ <p class="text-gray-600">Digitally signed receipts using ECDSA/EdDSA with device-bound keys stored in hardware-backed keystore.</p>
49
+ <img src="http://static.photos/technology/640x360/12" alt="Digital Signature" class="mt-6 rounded-lg">
50
  </div>
51
+ <div class="bg-white p-8 rounded-xl shadow-xl hover:shadow-2xl transition">
52
  <div class="text-indigo-600 mb-4">
53
+ <div class="w-16 h-16 rounded-full bg-indigo-50 flex items-center justify-center">
54
+ <i data-feather="cpu" class="w-8 h-8"></i>
55
+ </div>
56
  </div>
57
  <h3 class="text-xl font-bold mb-3">Tamper Detection</h3>
58
+ <p class="text-gray-600">Monitor reed switches, hall effect sensors, and accelerometers to detect physical tampering events.</p>
59
+ <img src="http://static.photos/technology/640x360/23" alt="Tamper Detection" class="mt-6 rounded-lg">
60
  </div>
61
+ <div class="bg-white p-8 rounded-xl shadow-xl hover:shadow-2xl transition">
62
  <div class="text-indigo-600 mb-4">
63
+ <div class="w-16 h-16 rounded-full bg-indigo-50 flex items-center justify-center">
64
+ <i data-feather="database" class="w-8 h-8"></i>
65
+ </div>
66
  </div>
67
  <h3 class="text-xl font-bold mb-3">Encrypted Storage</h3>
68
+ <p class="text-gray-600">Local encrypted database stores receipts securely with SQLCipher or EncryptedSharedPreferences.</p>
69
+ <img src="http://static.photos/technology/640x360/34" alt="Encrypted Storage" class="mt-6 rounded-lg">
70
  </div>
71
  </div>
72
  </div>
73
  </section>
74
+ <section class="bg-gray-100 py-20 relative overflow-hidden">
75
+ <div class="absolute inset-0 bg-gradient-to-r from-indigo-100/20 to-purple-100/20"></div>
76
+ <div class="container mx-auto px-6 relative z-10">
77
  <div class="flex flex-col md:flex-row items-center">
78
  <div class="md:w-1/2 mb-8 md:mb-0">
79
+ <div class="relative">
80
+ <img src="http://static.photos/technology/640x360/42" alt="POS Device" class="rounded-xl shadow-2xl">
81
+ <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-white shadow-xl flex items-center justify-center">
82
+ <img src="http://static.photos/technology/200x200/7" alt="QR Code" class="w-24 h-24">
83
+ </div>
84
+ </div>
85
  </div>
86
  <div class="md:w-1/2 md:pl-12">
87
  <h2 class="text-3xl font-bold mb-6">Offline-First Architecture</h2>
88
+ <p class="mb-6 text-gray-700">Designed for environments with intermittent connectivity, with secure sync capabilities when online.</p>
89
  <ul class="space-y-4">
90
  <li class="flex items-start">
91
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
92
+ <i data-feather="check-circle" class="text-green-500"></i>
93
+ </div>
94
+ <span class="text-gray-700">Offline QR code verification with bundled issuer keys</span>
95
  </li>
96
  <li class="flex items-start">
97
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
98
+ <i data-feather="check-circle" class="text-green-500"></i>
99
+ </div>
100
+ <span class="text-gray-700">Local encrypted receipt storage</span>
101
  </li>
102
  <li class="flex items-start">
103
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
104
+ <i data-feather="check-circle" class="text-green-500"></i>
105
+ </div>
106
+ <span class="text-gray-700">Secure sync when connectivity available</span>
107
  </li>
108
  </ul>
109
+ <div class="mt-8">
110
+ <img src="http://static.photos/technology/640x360/56" alt="Sync Diagram" class="rounded-lg">
111
+ </div>
112
  </div>
113
  </div>
114
  </div>
115
  </section>
 
116
  <footer class="bg-gray-900 text-white py-12">
117
  <div class="container mx-auto px-6">
118
+ <div class="grid md:grid-cols-4 gap-12">
119
+ <div>
120
+ <h3 class="text-xl font-bold mb-4">SecureTamperPOS</h3>
121
+ <p class="text-gray-400 mb-4">Tamper-proof receipts for critical transactions</p>
122
+ <img src="http://static.photos/technology/320x240/8" alt="POS Device" class="rounded-lg mb-4">
123
+ <div class="flex space-x-4">
124
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600 transition">
125
+ <i data-feather="github" class="w-5 h-5"></i>
126
+ </a>
127
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600 transition">
128
+ <i data-feather="twitter" class="w-5 h-5"></i>
129
+ </a>
130
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600 transition">
131
+ <i data-feather="mail" class="w-5 h-5"></i>
132
+ </a>
133
+ </div>
134
+ </div>
135
+ <div>
136
+ <h4 class="font-bold mb-4">Product</h4>
137
+ <ul class="space-y-2">
138
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
139
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
140
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Demo</a></li>
141
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Roadmap</a></li>
142
+ </ul>
143
  </div>
144
+ <div>
145
+ <h4 class="font-bold mb-4">Resources</h4>
146
+ <ul class="space-y-2">
147
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
148
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API Reference</a></li>
149
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Guides</a></li>
150
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
151
+ </ul>
152
+ </div>
153
+ <div>
154
+ <h4 class="font-bold mb-4">Company</h4>
155
+ <ul class="space-y-2">
156
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li>
157
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
158
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
159
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Legal</a></li>
160
+ </ul>
161
  </div>
162
  </div>
163
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
164
  <p>© 2023 SecureTamperPOS. All rights reserved.</p>
165
  </div>
166
  </div>
167
  </footer>
168
+ <script>
 
169
  feather.replace();
170
  </script>
171
  </body>