Untitled
unknown
plain_text
10 months ago
37 kB
16
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>You're Eligible for iCAT Exam</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #f5f5f5;
min-height: 100vh;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 800px;
width: 100%;
animation: slideUp 0.6s ease-out;
display: flex;
flex-direction: column;
gap: 20px;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.main-card {
background: white;
border-radius: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.header {
background: #6366f1;
padding: 30px 30px 25px 30px;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.success-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.success-icon {
width: 20px;
height: 20px;
background: #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.header h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 0;
position: relative;
z-index: 1;
white-space: nowrap;
}
.companies-section {
padding: 35px 30px 40px 30px;
text-align: center;
overflow: hidden;
}
.companies-text {
font-size: 18px;
color: #4b5563;
margin-bottom: 25px;
font-weight: 600;
}
.companies-wrapper {
width: 100%;
overflow: hidden;
position: relative;
margin-bottom: 30px;
}
.companies-wrapper::before,
.companies-wrapper::after {
content: '';
position: absolute;
top: 0;
width: 100px;
height: 100%;
z-index: 2;
pointer-events: none;
}
.companies-wrapper::before {
left: 0;
background: linear-gradient(to right, #ffffff, transparent);
}
.companies-wrapper::after {
right: 0;
background: linear-gradient(to left, #ffffff, transparent);
}
.companies-grid {
display: flex;
align-items: center;
gap: 20px;
animation: scroll 20s linear infinite;
width: fit-content;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.companies-grid:hover {
animation-play-state: paused;
}
.company-logo {
width: 70px;
height: 70px;
background: white;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 11px;
color: #1f2937;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 12px;
flex-shrink: 0;
}
.company-logo:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.company-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.logo-genpact { color: #EC297B; }
.logo-ola { color: #000; }
.logo-google {
background: linear-gradient(to right, #4285F4, #EA4335, #FBBC05, #34A853);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logo-amazon { color: #FF9900; }
.logo-myntra { color: #FF3E6C; }
.logo-flipkart { color: #2874F0; }
.logo-airtel { color: #E60000; }
.logo-lp { color: #0066CC; }
.logo-jp { color: #4E7BA1; }
.logo-deloitte { color: #000; }
.start-exam-btn {
background: #10b981;
color: white;
border: none;
padding: 18px 50px;
font-size: 18px;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.start-exam-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
background: #059669;
}
.timer-container {
margin-top: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 13px;
color: #6b7280;
}
.timer-text {
font-weight: 500;
}
.countdown-time {
color: #ef4444;
font-weight: 700;
font-size: 14px;
}
.timer-icon {
color: #ef4444;
animation: tick 1s linear infinite;
}
@keyframes tick {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0.5;
}
}
.journey-section {
padding: 40px 30px;
background: white;
border-radius: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.journey-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 10px;
}
.journey-title::before {
content: '🚀';
font-size: 28px;
}
.journey-step {
display: flex;
gap: 20px;
margin-bottom: 30px;
position: relative;
}
.journey-step:not(:last-child)::after {
content: '';
position: absolute;
left: 20px;
top: 50px;
width: 2px;
height: calc(100% - 30px);
background: #e5e7eb;
}
.step-number {
min-width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
position: relative;
z-index: 1;
}
.step-completed .step-number {
background: #10b981;
color: white;
}
.step-completed .step-number::before {
content: '✓';
}
.step-active .step-number {
background: #6366f1;
color: white;
animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(0.95);
}
}
.step-pending .step-number {
background: #e5e7eb;
color: #e5e7eb;
}
.step-content {
flex: 1;
padding-top: 8px;
}
.step-title {
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin-bottom: 8px;
}
.step-description {
font-size: 14px;
color: #6b7280;
margin-bottom: 15px;
}
.step-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.btn {
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: #6366f1;
color: white;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
background: #4f46e5;
}
.btn-secondary {
background: white;
color: #6b7280;
border: 2px solid #e5e7eb;
}
.btn-secondary:hover {
border-color: #d1d5db;
background: #f9fafb;
}
.result-date {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fef3c7;
color: #92400e;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
margin-top: 10px;
}
/* Reminder Modal Styles - REDUCED SIZE */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
padding: 20px;
}
.modal-overlay.active {
visibility: visible;
opacity: 1;
}
.reminder-modal {
background: white;
border-radius: 16px;
width: 100%;
max-width: 420px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
transform: scale(0.7) translateY(20px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden;
}
.modal-overlay.active .reminder-modal {
transform: scale(1) translateY(0);
opacity: 1;
}
.modal-header {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
padding: 20px 24px;
color: white;
position: relative;
overflow: hidden;
}
.modal-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
}
.modal-header-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
}
.modal-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.modal-header-text h2 {
font-size: 18px;
font-weight: 700;
margin-bottom: 2px;
}
.modal-subtitle {
font-size: 13px;
opacity: 0.9;
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 2;
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}
.modal-body {
padding: 20px 24px;
}
.date-selector-label {
font-size: 13px;
font-weight: 600;
color: #374151;
margin-bottom: 10px;
display: block;
}
.date-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
}
.date-tab {
flex: 1;
padding: 10px 16px;
border: 2px solid #e5e7eb;
border-radius: 10px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.date-tab:hover {
border-color: #c7d2fe;
background: #f9fafb;
}
.date-tab.active {
border-color: #6366f1;
background: #eef2ff;
}
.date-tab-day {
font-size: 14px;
font-weight: 700;
color: #1f2937;
margin-bottom: 2px;
}
.date-tab.active .date-tab-day {
color: #6366f1;
}
.date-tab-date {
font-size: 11px;
color: #6b7280;
}
.time-slots-label {
font-size: 13px;
font-weight: 600;
color: #374151;
margin-bottom: 10px;
display: block;
}
.time-slots-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.time-slot {
padding: 12px 10px;
border: 2px solid #e5e7eb;
border-radius: 10px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}
.time-slot:hover {
border-color: #c7d2fe;
background: #f9fafb;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.time-slot.selected {
border-color: #6366f1;
background: #eef2ff;
color: #6366f1;
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}
.time-slot.disabled {
opacity: 0.4;
cursor: not-allowed;
background: #f9fafb;
}
.time-slot.disabled:hover {
border-color: #e5e7eb;
transform: none;
box-shadow: none;
}
.time-slot-main {
font-size: 13px;
font-weight: 700;
color: #1f2937;
margin-bottom: 4px;
}
.time-slot.selected .time-slot-main {
color: #6366f1;
}
.time-slot-icon {
font-size: 16px;
margin-bottom: 4px;
}
.time-slot-sub {
font-size: 10px;
color: #6b7280;
}
.selected-reminder-summary {
background: #f0fdf4;
border: 2px solid #86efac;
border-radius: 10px;
padding: 12px;
margin-bottom: 16px;
display: none;
}
.selected-reminder-summary.show {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.summary-label {
font-size: 11px;
color: #166534;
font-weight: 600;
margin-bottom: 4px;
}
.summary-text {
font-size: 13px;
color: #15803d;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
}
.modal-footer {
padding: 0 24px 20px 24px;
display: flex;
gap: 10px;
}
.modal-btn {
flex: 1;
padding: 11px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.modal-btn-cancel {
background: #f3f4f6;
color: #6b7280;
}
.modal-btn-cancel:hover {
background: #e5e7eb;
}
.modal-btn-confirm {
background: #6366f1;
color: white;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.modal-btn-confirm:hover {
background: #4f46e5;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}
.modal-btn-confirm:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.success-message {
position: fixed;
top: 20px;
right: 20px;
background: #10b981;
color: white;
padding: 16px 24px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
display: flex;
align-items: center;
gap: 12px;
z-index: 2000;
transform: translateX(400px);
transition: transform 0.4s ease;
}
.success-message.show {
transform: translateX(0);
}
.success-message-icon {
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
@media (max-width: 640px) {
.header h1 {
font-size: 18px;
white-space: normal;
}
.companies-text {
font-size: 16px;
}
.companies-grid {
gap: 15px;
}
.company-logo {
width: 70px;
height: 70px;
font-size: 10px;
padding: 12px;
}
.journey-section {
padding: 30px 20px;
}
.reminder-modal {
max-width: 380px;
}
.modal-body {
padding: 18px 20px;
}
.modal-footer {
padding: 0 20px 18px 20px;
}
.time-slots-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="main-card">
<div class="header">
<div class="success-badge">
<div class="success-icon">✓</div>
Registration Successful
</div>
<h1>You're Eligible for the Internship Common Aptitude Test (iCAT)</h1>
</div>
<div class="companies-section">
<p class="companies-text">Get hired by 450+ companies through your iCAT score this week</p>
<div class="companies-wrapper">
<div class="companies-grid">
<div class="company-logo logo-genpact">Genpact</div>
<div class="company-logo logo-ola">OLA</div>
<div class="company-logo logo-google">Google</div>
<div class="company-logo logo-amazon">Amazon</div>
<div class="company-logo logo-myntra">Myntra</div>
<div class="company-logo logo-flipkart">Flipkart</div>
<div class="company-logo logo-airtel">Airtel</div>
<div class="company-logo logo-lp">L&P</div>
<div class="company-logo logo-jp">JP Morgan</div>
<div class="company-logo logo-deloitte">Deloitte</div>
<!-- Duplicate logos for seamless loop -->
<div class="company-logo logo-genpact">Genpact</div>
<div class="company-logo logo-ola">OLA</div>
<div class="company-logo logo-google">Google</div>
<div class="company-logo logo-amazon">Amazon</div>
<div class="company-logo logo-myntra">Myntra</div>
<div class="company-logo logo-flipkart">Flipkart</div>
<div class="company-logo logo-airtel">Airtel</div>
<div class="company-logo logo-lp">L&P</div>
<div class="company-logo logo-jp">JP Morgan</div>
<div class="company-logo logo-deloitte">Deloitte</div>
</div>
</div>
<button class="start-exam-btn" onclick="startExam()">Start Exam Now</button>
<div class="timer-container">
<span class="timer-icon">⏰</span>
<span class="timer-text">Exam ends in</span>
<span class="countdown-time" id="countdown">14:00:00</span>
</div>
</div>
</div>
<div class="journey-section">
<h2 class="journey-title">Your iCAT Journey</h2>
<div class="journey-step step-completed">
<div class="step-number"></div>
<div class="step-content">
<div class="step-title">Registration Successful</div>
<div class="step-description">Your profile has been created successfully</div>
</div>
</div>
<div class="journey-step step-active">
<div class="step-number"></div>
<div class="step-content">
<div class="step-title">iCAT Exam</div>
<div class="step-description">Take the exam to showcase your skills and unlock opportunities</div>
<div class="step-actions">
<button class="btn btn-primary" onclick="startExam()">
▶ Start Exam
</button>
<button class="btn btn-secondary" onclick="openReminderModal()">
🔔 Set Reminder
</button>
</div>
</div>
</div>
<div class="journey-step step-pending">
<div class="step-number"></div>
<div class="step-content">
<div class="step-title">Upload Resume</div>
<div class="step-description">Share your resume to get matched with the best opportunities</div>
<div class="step-actions">
<button class="btn btn-primary" onclick="uploadResume()">
📄 Upload Resume
</button>
</div>
</div>
</div>
<div class="journey-step step-pending">
<div class="step-number"></div>
<div class="step-content">
<div class="step-title">Result & Internship Allocation</div>
<div class="step-description">Get your results and discover your internship matches</div>
<div class="result-date">
📅 Check results on 2nd June
</div>
</div>
</div>
</div>
</div>
<!-- Reminder Modal - COMPACT SIZE -->
<div class="modal-overlay" id="reminderModal">
<div class="reminder-modal">
<div class="modal-header">
<button class="modal-close" onclick="closeReminderModal()">×</button>
<div class="modal-header-content">
<div class="modal-icon">🔔</div>
<div class="modal-header-text">
<h2>Set Exam Reminder</h2>
<p class="modal-subtitle">Choose when to be reminded</p>
</div>
</div>
</div>
<div class="modal-body">
<label class="date-selector-label">Select Date</label>
<div class="date-tabs">
<div class="date-tab active" data-date="today" onclick="selectDate('today')">
<div class="date-tab-day">Today</div>
<div class="date-tab-date" id="todayDate"></div>
</div>
<div class="date-tab" data-date="tomorrow" onclick="selectDate('tomorrow')">
<div class="date-tab-day">Tomorrow</div>
<div class="date-tab-date" id="tomorrowDate"></div>
</div>
</div>
<label class="time-slots-label">Select Time Slot</label>
<div class="time-slots-grid" id="timeSlots">
<!-- Time slots will be generated by JavaScript -->
</div>
<div class="selected-reminder-summary" id="reminderSummary">
<div class="summary-label">Your reminder is set for:</div>
<div class="summary-text">
<span>🔔</span>
<span id="summaryText"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button class="modal-btn modal-btn-cancel" onclick="closeReminderModal()">Cancel</button>
<button class="modal-btn modal-btn-confirm" id="confirmBtn" onclick="confirmReminder()" disabled>Set Reminder</button>
</div>
</div>
</div>
<!-- Success Message -->
<div class="success-message" id="successMessage">
<div class="success-message-icon">✓</div>
<div>
<div style="font-weight: 600; margin-bottom: 2px;">Reminder Set!</div>
<div style="font-size: 13px; opacity: 0.9;">We'll notify you at the scheduled time</div>
</div>
</div>
<script>
// Countdown timer - 14 hours
let timeLeft = 14 * 60 * 60;
function updateTimer() {
const hours = Math.floor(timeLeft / 3600);
const minutes = Math.floor((timeLeft % 3600) / 60);
const seconds = timeLeft % 60;
const display = `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
document.getElementById('countdown').textContent = display;
if (timeLeft > 0) {
timeLeft--;
} else {
timeLeft = 14 * 60 * 60;
}
}
setInterval(updateTimer, 1000);
function startExam() {
alert('Starting iCAT Exam...');
}
function uploadResume() {
alert('Opening resume upload...');
}
// Reminder Modal Variables
let selectedDate = 'today';
let selectedTime = null;
// Initialize dates
function initializeDates() {
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
const options = { month: 'short', day: 'numeric' };
document.getElementById('todayDate').textContent = today.toLocaleDateString('en-US', options);
document.getElementById('tomorrowDate').textContent = tomorrow.toLocaleDateString('en-US', options);
}
// Generate time slots (4 ranges covering 24 hours)
function generateTimeSlots() {
const timeSlotsContainer = document.getElementById('timeSlots');
timeSlotsContainer.innerHTML = '';
const now = new Date();
const currentHour = now.getHours();
// 4 time slot ranges covering the full day
const timeSlots = [
{ range: '12:00 AM – 6:00 AM', icon: '🌙', label: 'Night', startHour: 0, endHour: 6 },
{ range: '6:00 AM – 12:00 PM', icon: '🌅', label: 'Morning', startHour: 6, endHour: 12 },
{ range: '12:00 PM – 6:00 PM', icon: '☀️', label: 'Afternoon', startHour: 12, endHour: 18 },
{ range: '6:00 PM – 12:00 AM', icon: '🌆', label: 'Evening', startHour: 18, endHour: 24 }
];
timeSlots.forEach(slot => {
const slotElement = document.createElement('div');
slotElement.className = 'time-slot';
// Check if slot should be disabled (for today, if the end time has passed)
const isDisabled = selectedDate === 'today' && currentHour >= slot.endHour;
if (isDisabled) {
slotElement.classList.add('disabled');
} else {
slotElement.onclick = () => selectTimeSlot(slot.range, slotElement);
}
slotElement.innerHTML = `
<div class="time-slot-icon">${slot.icon}</div>
<div class="time-slot-main">${slot.range}</div>
<div class="time-slot-sub">${slot.label}</div>
`;
timeSlotsContainer.appendChild(slotElement);
});
}
// Select date tab
function selectDate(date) {
selectedDate = date;
selectedTime = null;
// Update tab UI
document.querySelectorAll('.date-tab').forEach(tab => {
tab.classList.remove('active');
});
document.querySelector(`[data-date="${date}"]`).classList.add('active');
// Regenerate time slots
generateTimeSlots();
// Hide summary and disable confirm button
document.getElementById('reminderSummary').classList.remove('show');
document.getElementById('confirmBtn').disabled = true;
}
// Select time slot
function selectTimeSlot(time, element) {
if (element.classList.contains('disabled')) return;
selectedTime = time;
// Update slot UI
document.querySelectorAll('.time-slot').forEach(slot => {
slot.classList.remove('selected');
});
element.classList.add('selected');
// Update summary
updateSummary();
// Enable confirm button
document.getElementById('confirmBtn').disabled = false;
}
// Update reminder summary
function updateSummary() {
const summary = document.getElementById('reminderSummary');
const summaryText = document.getElementById('summaryText');
const dateText = selectedDate === 'today' ? 'Today' : 'Tomorrow';
const dateElement = document.getElementById(selectedDate === 'today' ? 'todayDate' : 'tomorrowDate');
const fullDate = dateElement.textContent;
summaryText.textContent = `${dateText}, ${fullDate} at ${selectedTime}`;
summary.classList.add('show');
}
// Open modal
function openReminderModal() {
const modal = document.getElementById('reminderModal');
modal.classList.add('active');
document.body.style.overflow = 'hidden';
// Initialize
initializeDates();
generateTimeSlots();
}
// Close modal
function closeReminderModal() {
const modal = document.getElementById('reminderModal');
modal.classList.remove('active');
document.body.style.overflow = 'auto';
// Reset selections
selectedDate = 'today';
selectedTime = null;
document.querySelectorAll('.date-tab').forEach(tab => {
tab.classList.remove('active');
});
document.querySelector('[data-date="today"]').classList.add('active');
document.getElementById('reminderSummary').classList.remove('show');
document.getElementById('confirmBtn').disabled = true;
}
// Confirm reminder
function confirmReminder() {
if (!selectedTime) {
alert('Please select a time slot');
return;
}
// Close modal
closeReminderModal();
// Show success message
const successMsg = document.getElementById('successMessage');
successMsg.classList.add('show');
setTimeout(() => {
successMsg.classList.remove('show');
}, 4000);
console.log('Reminder set for:', selectedDate, 'at', selectedTime);
}
// Close modal when clicking outside
document.getElementById('reminderModal').addEventListener('click', function(e) {
if (e.target === this) {
closeReminderModal();
}
});
// Keyboard support
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
const modal = document.getElementById('reminderModal');
if (modal.classList.contains('active')) {
closeReminderModal();
}
}
});
</script>
</body>
</html>
Editor is loading...
Leave a Comment