<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Approve sign-in</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="card">
<span class="status">Requested just now</span>
<div class="badge"></div>
<h1 class="title">Approve sign-in?</h1>
<div class="panel">
<div class="row">
<span class="label">Device</span>
<span class="value">Chrome - macOS</span>
</div>
<div class="row">
<span class="label">Location</span>
<span class="value">Prague, Czechia</span>
</div>
</div>
<div class="actions">
<button class="btn approve">Yes, approve</button>
<button class="btn deny">It wasn't me</button>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: "Plus Jakarta Sans", sans-serif;
background: radial-gradient(120% 80% at 50% -10%, rgba(245, 158, 11, 0.18), transparent 55%), #08080c;
}
.card {
width: 360px;
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 26px;
border-radius: 26px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #0f1016;
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
}
.status {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 22px;
padding: 7px 14px;
border-radius: 999px;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.3);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.03em;
color: #fcd34d;
}
.badge {
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
background: linear-gradient(145deg, #fbbf24, #d97706);
box-shadow: 0 14px 34px rgba(245, 158, 11, 0.45);
}
.badge::after {
content: "";
width: 16px;
height: 28px;
margin-bottom: 6px;
border: solid #1a1206;
border-width: 0 5px 5px 0;
transform: rotate(45deg);
}
.title {
margin-top: 20px;
font-size: 25px;
font-weight: 700;
color: #f5f6fa;
}
.panel {
width: 100%;
margin-top: 22px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
}
.row {
display: flex;
justify-content: space-between;
padding: 14px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.label {
font-size: 13px;
color: rgba(222, 226, 242, 0.45);
}
.value {
font-size: 13px;
font-weight: 600;
color: #e8eaf2;
}
.actions {
width: 100%;
margin-top: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.btn {
padding: 15px 0;
border: none;
border-radius: 14px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.approve {
color: #1a1206;
background: linear-gradient(135deg, #fbbf24, #d97706);
}
.deny {
color: rgba(230, 232, 245, 0.6);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
}
// Repo demo: resolve the push prompt when a button is tapped.
// (Repo only. The card in the video is static, so this file is NOT
// referenced by index.html and never appears in the typed code.)
const title = document.querySelector(".title");
const actions = document.querySelector(".actions");
function resolve(text) {
title.textContent = text;
actions.style.opacity = "0.4";
actions.style.pointerEvents = "none";
}
document.querySelector(".approve").addEventListener("click", () => resolve("Sign-in approved"));
document.querySelector(".deny").addEventListener("click", () => resolve("Sign-in denied"));
