111 lines
2.4 KiB
HTML
111 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>My Number</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
min-height: 100svh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0f172a;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
color: #f8fafc;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card {
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
border-radius: 1.25rem;
|
|
padding: 2rem 2rem 1.75rem;
|
|
text-align: center;
|
|
width: 100%;
|
|
max-width: 360px;
|
|
box-shadow: 0 25px 50px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.icon { font-size: 2rem; margin-bottom: 1rem; }
|
|
|
|
.label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
/* wrapper clips the iframe to just the phone number */
|
|
.iframe-clip {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 40px;
|
|
width: 95px;
|
|
margin: 0 auto 1.5rem;
|
|
border-radius: 0.5rem;
|
|
background: white;
|
|
}
|
|
|
|
iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -120px; /* skip past "Your MSISDN : " label */
|
|
width: 280px;
|
|
height: 300px;
|
|
border: none;
|
|
background: white;
|
|
color-scheme: light;
|
|
}
|
|
|
|
.note {
|
|
font-size: 0.75rem;
|
|
color: #475569;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
margin-top: 1.5rem;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: #e11d48;
|
|
background: rgba(225,29,72,0.1);
|
|
border: 1px solid rgba(225,29,72,0.2);
|
|
border-radius: 999px;
|
|
padding: 0.25rem 0.75rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="card">
|
|
<div class="icon">📱</div>
|
|
<p class="label">Your Ooredoo Number</p>
|
|
|
|
<div class="iframe-clip">
|
|
<iframe
|
|
src="http://mdv.fyndrapp.com/"
|
|
scrolling="no"
|
|
loading="eager"
|
|
title="msisdn"
|
|
></iframe>
|
|
</div>
|
|
|
|
<p class="note">
|
|
Your mobile number is detected automatically<br>when browsing on Ooredoo data.
|
|
</p>
|
|
|
|
<span class="badge">Ooredoo MV</span>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|