/* ======================================== PAGE-SPECIFIC STYLES FOR THE AGE CALCULATOR ======================================== */ /* Import Page-Specific Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --bg-color: #f0f2f5; --card-bg: #ffffff; --text-color: #1c1e21; --primary-color: #6f42c1; --label-color: #495057; --input-border-color: #ced4da; --result-bg: #f3e5f5; } /* This applies a background color and font to the page, but does NOT center everything */ body { font-family: 'Poppins', sans-serif; background-color: var(--bg-color); margin: 0; padding: 0; } /* ======================================== AGE CALCULATOR CONTAINER STYLES ======================================== */ #app-container { background: var(--card-bg); padding: 2.5rem; border-radius: 24px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12); width: 100%; max-width: 600px; /* THIS IS THE FIX: 'margin: 40px auto' centers the calculator horizontally */ /* It does not affect the header, which will correctly stay at the top. */ margin: 40px auto; box-sizing: border-box; } #app-container h1 { color: var(--text-color); margin-top: 0; margin-bottom: 2rem; font-size: 28px; font-weight: 600; text-align: center; } .input-group { margin-bottom: 1.5rem; } .input-group label { display: block; color: var(--label-color); margin-bottom: 0.5rem; font-weight: 500; } .input-group input[type="date"] { width: 100%; padding: 12px; border: 1px solid var(--input-border-color); border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .calculate-btn { width: 100%; padding: 15px; font-size: 1.2rem; font-weight: 600; background-color: var(--primary-color); color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } .calculate-btn:hover { background-color: #5a32a3; } #results-container { display: none; margin-top: 2rem; } .primary-result { background-color: var(--result-bg); border-radius: 12px; padding: 1.5rem; text-align: center; margin-bottom: 1.5rem; } .primary-result h3 { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--primary-color); font-weight: 500; } .primary-result .age-display { display: flex; justify-content: center; gap: 1rem; } .age-part p { margin: 0; font-size: 2.5rem; font-weight: 700; color: var(--text-color); } .age-part span { font-size: 1rem; color: var(--label-color); } .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .summary-box { background-color: #f8f9fa; padding: 1rem; border-radius: 8px; text-align: center; } .summary-box h4 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--label-color); font-weight: 500; } .summary-box p { margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--text-color); } /* ======================================== CHATBOT STYLES ======================================== */ #muktibot-container * { font-family: 'Segoe UI', sans-serif; box-sizing: border-box; } #chat-button { position: fixed; bottom: 20px; right: 20px; background: linear-gradient(135deg, #a702e8, #b603fc); color: white; width: 60px; height: 60px; border-radius: 50%; border: none; font-size: 28px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); cursor: pointer; z-index: 99998; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } #chat-button:hover { transform: scale(1.1); box-shadow: 0 6px 12px rgba(0,0,0,0.3); } #chat-window { display: none; position: fixed; bottom: 90px; right: 20px; width: 350px; height: 500px; background: #fff; border-radius: 15px; box-shadow: 0 5px 25px rgba(0,0,0,0.2); z-index: 99999; } #chat-window.active { display: flex; flex-direction: column; } #chat-header { background: linear-gradient(135deg, #a702e8, #b603fc); color: white; padding: 15px; font-size: 18px; font-weight: bold; border-top-left-radius: 15px; border-top-right-radius: 15px; display: flex; justify-content: space-between; align-items: center; } #chat-content { flex-grow: 1; overflow-y: auto; padding: 10px; } #chat-log { display: flex; flex-direction: column; gap: 10px; } .message { padding: 8px 12px; border-radius: 18px; margin-bottom: 5px; max-width: 85%; line-height: 1.4; } .user-msg { background: #8800aa; color: white; align-self: flex-end; border-bottom-right-radius: 4px; } .bot-msg { background: #e9e9eb; color: #333; align-self: flex-start; border-bottom-left-radius: 4px; } #chat-input-area { padding: 10px; border-top: 1px solid #ddd; display: flex; gap: 10px; } #chat-input { flex-grow: 1; border: 1px solid #ccc; border-radius: 20px; padding: 8px 15px; font-size: 14px; } #send-btn { background: #a702e8; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; cursor: pointer; transition: background-color 0.2s; }``` ### 3. JavaScript File (`script.js`) This file manages the age calculation logic as well as the script that prevents right-clicking and developer tools. ```javascript // --- AGE CALCULATOR SCRIPT --- document.addEventListener('DOMContentLoaded', () => { const birthDateInput = document.getElementById('birth-date'); const calculateBtn = document.getElementById('calculate-btn'); const resultsContainer = document.getElementById('results-container'); if(birthDateInput) { // Set the maximum date to today to prevent selecting future dates birthDateInput.max = new Date().toISOString().split("T")[0]; } if(calculateBtn) { calculateBtn.addEventListener('click', () => { const birthDateString = birthDateInput.value; if (!birthDateString) { alert("Please select your date of birth."); return; } const birthDate = new Date(birthDateString); const today = new Date(); let years = today.getFullYear() - birthDate.getFullYear(); let months = today.getMonth() - birthDate.getMonth(); let days = today.getDate() - birthDate.getDate(); if (days < 0) { months--; // Get the last day of the previous month days += new Date(today.getFullYear(), today.getMonth(), 0).getDate(); } if (months < 0) { years--; months += 12; } const totalDays = Math.floor((today - birthDate) / (1000 * 60 * 60 * 24)); // Update primary results document.getElementById('years-result').textContent = years; document.getElementById('months-result').textContent = months; document.getElementById('days-result').textContent = days; // Calculate next birthday let nextBirthday = new Date(today.getFullYear(), birthDate.getMonth(), birthDate.getDate()); if(today > nextBirthday) { nextBirthday.setFullYear(today.getFullYear() + 1); } const daysUntilBirthday = Math.ceil((nextBirthday - today) / (1000 * 60 * 60 * 24)); document.getElementById('next-birthday-result').textContent = `${daysUntilBirthday} days`; // Update summary facts document.getElementById('total-months-result').textContent = (years * 12 + months).toLocaleString(); document.getElementById('total-weeks-result').textContent = Math.floor(totalDays / 7).toLocaleString(); document.getElementById('total-days-result').textContent = totalDays.toLocaleString(); document.getElementById('total-hours-result').textContent = (totalDays * 24).toLocaleString(); document.getElementById('total-minutes-result').textContent = (totalDays * 24 * 60).toLocaleString(); // Show results resultsContainer.style.display = 'block'; }); } }); // --- RIGHT-CLICK AND DEV TOOLS PREVENTION SCRIPT --- document.addEventListener('contextmenu', event => event.preventDefault()); document.addEventListener('keydown', e => { // Block Ctrl+U, Ctrl+S, Ctrl+Shift+I, F12 if ( (e.ctrlKey && (e.key === 'u' || e.key === 'U' || e.key === 's' || e.key === 'S')) || (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'i')) || e.key === 'F12' ) { e.preventDefault(); // Optional: Redirect to home page // window.location.href = 'https://bodoly.com/'; } });