<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nanny - PIN Required</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
max-width: 400px;
width: 100%;
text-align: center;
border: 1px solid rgba(255,255,255,0.2);
container-type: inline-size;
container-name: nanny-pin-shell;
}
.icon {
font-size: 80px;
color: #667eea;
margin-bottom: 20px;
animation: pulse 2s infinite;
}
h1 {
color: #333;
margin-bottom: 10px;
font-size: 28px;
}
.subtitle {
color: #666;
margin-bottom: 30px;
font-size: 16px;
}
/* 8 digits: one row when wide; 4+4 when narrow (same idea as options PIN modal) */
.pin-display {
display: grid;
gap: 8px;
margin: 30px 0;
min-height: 50px;
font-family: monospace;
color: #333;
font-size: 28px;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: end;
justify-items: stretch;
}
@container nanny-pin-shell (min-width: 360px) {
.pin-display {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
}
/* Older engines without container queries */
@supports not (container-type: inline-size) {
@media (min-width: 400px) {
.pin-display {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
}
}
.pin-digit {
min-width: 0;
text-align: center;
border-bottom: 3px solid #667eea;
padding-bottom: 4px;
font-size: 28px;
}
.pin-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin: 30px 0;
}
.pin-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 20px;
border-radius: 10px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.pin-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}
.pin-btn:active {
transform: translateY(-1px);
}
.action-btns {
display: flex;
gap: 10px;
margin-top: 20px;
}
.action-btn {
flex: 1;
padding: 15px;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-submit {
background: linear-gradient(135deg, #2ed573 0%, #1abc9c 100%);
color: white;
}
.btn-clear {
background: linear-gradient(135deg, #ffa502 0%, #ff7e5f 100%);
color: white;
}
.error-message {
color: #ff4757;
margin-top: 15px;
font-size: 14px;
min-height: 20px;
animation: shake 0.5s;
}
.security-info {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
font-size: 12px;
color: #666;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
}
.ti {
font-size: 1.2em;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="icon">
<i class="ti ti-shield-lock"></i>
</div>
<h1>Enter PIN to Continue</h1>
<div class="subtitle">8-digit PIN required to access Nanny</div>
<div class="pin-display" id="pinDisplay">
<!-- PIN digits will be added here -->
</div>
<div class="error-message" id="errorMessage"></div>
<div class="pin-grid">
<button class="pin-btn" data-digit="1">1</button>
<button class="pin-btn" data-digit="2">2</button>
<button class="pin-btn" data-digit="3">3</button>
<button class="pin-btn" data-digit="4">4</button>
<button class="pin-btn" data-digit="5">5</button>
<button class="pin-btn" data-digit="6">6</button>
<button class="pin-btn" data-digit="7">7</button>
<button class="pin-btn" data-digit="8">8</button>
<button class="pin-btn" data-digit="9">9</button>
<button class="pin-btn" data-digit="0">0</button>
<button class="pin-btn" id="btnBackspace">
<i class="ti ti-backspace"></i>
</button>
</div>
<div class="action-btns">
<button class="action-btn btn-clear" id="btnClear">
<i class="ti ti-eraser"></i> Clear
</button>
<button class="action-btn btn-submit" id="btnSubmit">
<i class="ti ti-check"></i> Submit
</button>
</div>
<div class="security-info">
<i class="ti ti-shield-check"></i> Your PIN is encrypted and stored securely
</div>
</div>
<script type="module" src="pin.js"></script>
</body>
</html>