<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>CSD ID Portal</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
/* Flip card styles */
.flip-card {
perspective: 1000px;
width: 344px;
height: 216px; /* Approx 86x54 mm scaling */
margin: auto;
position: relative;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
overflow: hidden;
}
.flip-card-front img, .flip-card-back img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.flip-card-back {
transform: rotateY(180deg);
}
/* Preloader styles */
#preloader {
position: fixed;
inset: 0;
background: white;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Loader animation */
.loader {
border-top-color: #3498db;
animation: spin 1s linear infinite;
border: 4px solid #ccc;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 48px;
height: 48px;
margin-bottom: 12px;
}
/* Text below loader */
#preloader-text {
font-weight: bold;
font-size: 1.25rem;
color: #2c3e50;
letter-spacing: 1px;
}
@keyframes spin {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
<!-- Preloader -->
<div id="preloader">
<div class="loader"></div>
<div id="preloader-text">CARD CHIP READING…</div>
</div>
<img src="https://csdindia.gov.in/images/logo.png" alt="Girl in a jacket" width="500" height="600"><br>
<!-- Flip Card Container (initially hidden and shown after preloader) -->
<div id="mainContent" class="hidden w-full max-w-md">
<div class="flip-card">
<div id="flipCardInner" class="flip-card-inner">
<!-- Front Image (First Image) -->
<div class="flip-card-front">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAVH_PBkkNGf5WPJ-m76cuw9Ww-skMaO-ubHGH1Ub-ACgp8HSL-2d_8SJtlwYgp-uQl078kdVtVX95Wb1jMEuGfKzn2C2E3RbtSbXXrOWW9OgiVLP8qQto1lfIRwgq3Pen7BDyqeL8kdrZ9o7GTzTJZrjp_Je9v6Chh0NM4vMTuW8BoLv5MnJEtEBW4RlH/s16000/%E0%A4%95%E0%A5%88%E0%A4%A8%E0%A5%8D%E0%A4%9F%E0%A5%80%E0%A4%A8%20%E0%A4%B8%E0%A5%8D%E0%A4%AE%E0%A4%BE%E0%A4%B0%E0%A5%8D%E0%A4%9F%20%E0%A4%95%E0%A4%BE%E0%A4%B0%E0%A5%8D%E0%A4%A1.jpeg" alt="Liquor Card Front" />
</div>
<!-- Back Image (Second Image) -->
<div class="flip-card-back">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lsiN1HOXb97ZhI-49vA2z8NYYYhJN_jWZGodHuFRziKNTO-uuciSKDdnqxjJC6lD0PCWNwCir5K3l206DaH5C4D5vccs-XyjP4VKSlKTpPup_8GuOz7z-dGGkKXQhjWPITT_ffvaehQnVAGb7ZZJX3cUDi93_JFGuwLUhA_hSCo6HYDeVNz2AB0Le00k/s16000/%E0%A4%95%E0%A5%88%E0%A4%A8%E0%A5%8D%E0%A4%9F%E0%A5%80%E0%A4%A8%20%E0%A4%B8%E0%A5%8D%E0%A4%AE%E0%A4%BE%E0%A4%B0%E0%A5%8D%E0%A4%9F%20%E0%A4%95%E0%A4%BE%E0%A4%B0%E0%A5%8D%E0%A4%A1%20-%204.jpeg" alt="Liquor Card Back" />
</div>
</div>
</div>
<!-- Below the Flip Card - Purchase CSD and image details -->
<div class="mt-6 max-w-md w-full bg-white rounded-lg shadow p-6">
<h3 class="text-center text-2xl font-bold mb-6">Purchase CSD</h3>
<div class="flex gap-4 justify-center">
<!-- Image Box 1 -->
<div class="w-40 bg-gray-50 rounded-lg shadow p-3 text-center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6aJCGN_v17Imb8GgyzaOpwJxj1OlxgcP0G5TRB3EqjLFRm2sypZP57TYYncsU51BrUitCNjJEVoUGbSp0smGDOgmwQFwf0rdUFkQE2Yw-o9TLWagmyZfL2MA4_HFZwkW5Vihs7h-1tqjaXgIqg-TIc0uEpD5ybgzCFW1_PNIGnDheC_ZPi6JZx80VB8Tf/s16000/IMG_8525.png" alt="Liquor Card Front" class="mx-auto rounded mb-2" />
<h4 class="font-semibold">Honda Activa 125 DLX</h4>
<p class="text-sm text-gray-600">Purchase Date: 01 Oct 2025</p>
<p class="font-bold mt-1">₹88,3770</p>
</div>
<!-- Image Box 2 -->
<div class="w-40 bg-gray-50 rounded-lg shadow p-3 text-center">
<img src="https://imgd.aeplcdn.com/370x208/n/8zk4f0b_1627093.jpg?q=80" alt="Liquor Card Back" class="mx-auto rounded mb-2" />
<h4 class="font-semibold">Mahindra XUV300 W4 Diesel BSIV</h4>
<p class="text-sm text-gray-600">Purchase Date: 11 Oct 2022</p>
<p class="font-bold mt-1">₹7.50 Lakh*</p>
</div>
</div>
</div>
<!-- Buttons -->
<div class="mt-6 flex gap-4 justify-center">
<button id="flipBtn" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Flip Card</button>
<button id="profileBtn" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">CSD Profile</button>
</div>
</div>
<!-- Loading Screen -->
<div id="loadingScreen" class="hidden fixed inset-0 bg-white bg-opacity-90 z-40 flex flex-col items-center justify-center">
<div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"></div>
<p class="text-gray-700">Loading your profile...</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
// Show preloader for 6 seconds, then show main content
setTimeout(() => {
document.getElementById('preloader').style.display = 'none';
document.getElementById('mainContent').classList.remove('hidden');
}, 6000);
const flipInner = document.getElementById('flipCardInner');
const flipBtn = document.getElementById('flipBtn');
const loadingScreen = document.getElementById('loadingScreen');
let flipped = false;
flipBtn.addEventListener('click', function() {
if(flipped) {
flipInner.style.transform = 'rotateY(0deg)';
} else {
flipInner.style.transform = 'rotateY(180deg)';
}
flipped = !flipped;
});
document.getElementById('profileBtn').addEventListener('click', function() {
loadingScreen.classList.remove('hidden');
setTimeout(() => {
window.location.href = 'https://sidsmathura.github.io/csdprofile/';
}, 3000);
});
});
</script>
</body>
</html>