|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>CTRL + ALT + HEAL</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link |
|
|
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" |
|
|
rel="stylesheet" |
|
|
/> |
|
|
<style> |
|
|
:root { |
|
|
--tropical-indigo: rgb(120, 187, 242); |
|
|
--wisteria: rgb(197, 217, 251); |
|
|
--latte-cream: #ffffff; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: "Rubik", sans-serif; |
|
|
background-color: var(--latte-cream); |
|
|
color: #333; |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
transition: all 0.8s ease-out; |
|
|
} |
|
|
.fade-in.show { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.glass-card { |
|
|
background: rgba(162, 160, 160, 0.075); |
|
|
backdrop-filter: blur(12px); |
|
|
border-radius: 1rem; |
|
|
border: 1px solid rgba(255, 255, 255, 0.3); |
|
|
padding: 2rem; |
|
|
text-align: center; |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
.glass-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
padding-bottom: 4px; |
|
|
transition: color 0.3s; |
|
|
} |
|
|
.nav-link::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
width: 0%; |
|
|
height: 2px; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
background-color: var(--tropical-indigo); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.parallax { |
|
|
background-attachment: fixed; |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
|
|
|
#typed-heading, |
|
|
#typed-paragraph { |
|
|
overflow: hidden; |
|
|
white-space: nowrap; |
|
|
border-right: 2px solid var(--tropical-indigo); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav |
|
|
class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md" |
|
|
> |
|
|
<div |
|
|
class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center" |
|
|
> |
|
|
|
|
|
<a |
|
|
href="index.html" |
|
|
class="text-2xl font-bold text-[#FOE3CE hover:text-[var(--tropical-indigo)] transition" |
|
|
> |
|
|
CTRL + ALT + HEAL |
|
|
</a> |
|
|
|
|
|
|
|
|
<ul class="hidden md:flex space-x-6 font-medium text-gray-800"> |
|
|
<li><a href="index.html" class="nav-link">Home</a></li> |
|
|
<li><a href="analyzer.html" class="nav-link">Analyzer</a></li> |
|
|
<li><a href="past_data.html" class="nav-link">Past Reports</a></li> |
|
|
<li><a href="profile.html" class="nav-link">Profile</a></li> |
|
|
<li id="authNavItem"><a href="login.html" class="nav-link">Login</a></li> |
|
|
</ul> |
|
|
|
|
|
|
|
|
<button |
|
|
id="hamburger" |
|
|
class="md:hidden text-[var(--latte-cream)] text-2xl" |
|
|
> |
|
|
☰ |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<ul |
|
|
id="mobile-menu" |
|
|
class="hidden flex-col space-y-4 bg-white/30 backdrop-blur-lg border border-white/20 rounded-xl shadow-lg mt-2 p-4 mx-6 md:hidden" |
|
|
> |
|
|
<li> |
|
|
<a |
|
|
href="index.html" |
|
|
class="block text-gray-800 hover:text-[var(--neon-green)]" |
|
|
>Home</a |
|
|
> |
|
|
</li> |
|
|
<li> |
|
|
<a |
|
|
href="analyzer.html" |
|
|
class="block text-gray-800 hover:text-[var(--neon-green)]" |
|
|
>Analyzer</a |
|
|
> |
|
|
</li> |
|
|
<li> |
|
|
<a |
|
|
href="profile.html" |
|
|
class="block text-gray-800 hover:text-[var(--neon-green)]" |
|
|
>Profile</a |
|
|
> |
|
|
</li> |
|
|
<li> |
|
|
<a |
|
|
href="login.html" |
|
|
class="block text-gray-800 hover:text-[var(--neon-green)]" |
|
|
>Login</a |
|
|
> |
|
|
</li> |
|
|
<li> |
|
|
<a |
|
|
href="about.html" |
|
|
class="block text-gray-800 hover:text-[var(--neon-green)]" |
|
|
>About</a |
|
|
> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<script> |
|
|
const hamburger = document.getElementById("hamburger"); |
|
|
const mobileMenu = document.getElementById("mobile-menu"); |
|
|
|
|
|
hamburger.addEventListener("click", () => { |
|
|
mobileMenu.classList.toggle("hidden"); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
<section |
|
|
class="relative min-h-[600px] flex items-center justify-center" |
|
|
style=" |
|
|
background-image: url('https://videos.openai.com/vg-assets/assets%2Ftask_01k2qzfsscev8vmftcka1wp2et%2F1755299042_img_1.webp?st=2025-08-15T21%3A17%3A52Z&se=2025-08-21T22%3A17%3A52Z&sks=b&skt=2025-08-15T21%3A17%3A52Z&ske=2025-08-21T22%3A17%3A52Z&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skoid=3d249c53-07fa-4ba4-9b65-0bf8eb4ea46a&skv=2019-02-02&sv=2018-11-09&sr=b&sp=r&spr=https%2Chttp&sig=j0aFWc%2BchHFLtaa8JPylXkDFsrtP8zazpKyO8Edy5n8%3D&az=oaivgprodscus'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
" |
|
|
> |
|
|
<div class="absolute inset-0 bg-black/40"></div> |
|
|
<div class="relative z-10 text-center px-6 fade-in"> |
|
|
<h1 class="text-5xl md:text-6xl font-bold text-white mb-4"> |
|
|
CTRL + ALT + HEAL |
|
|
</h1> |
|
|
<p class="text-lg text-gray-200 mb-2"> |
|
|
From medical chaos to clarity. Upload your report, get real answers — |
|
|
fast. |
|
|
</p> |
|
|
<p class="text-sm text-gray-300 mb-6"> |
|
|
No stress, no spiraling. Just answers that feel human. |
|
|
</p> |
|
|
<a href="login.html" |
|
|
><button |
|
|
class="bg-[var(--tropical-indigo)] hover:bg-[var(--wisteria)] text-white px-8 py-3 rounded-lg shadow-lg transition" |
|
|
> |
|
|
Sign Up / Login |
|
|
</button></a |
|
|
> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-[var(--latte-cream)]"> |
|
|
<div class="max-w-6xl mx-auto px-6 grid md:grid-cols-3 gap-8 fade-in"> |
|
|
<div class="glass-card"> |
|
|
<h3 class="text-2xl font-bold text-[var(--tropical-indigo)] mb-2"> |
|
|
Fast Results |
|
|
</h3> |
|
|
<p>Upload your report and get human-readable answers instantly.</p> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<h3 class="text-2xl font-bold text-[var(--tropical-indigo)] mb-2"> |
|
|
Clear Language |
|
|
</h3> |
|
|
<p>No medical jargon, just plain language you can understand.</p> |
|
|
</div> |
|
|
<div class="glass-card"> |
|
|
<h3 class="text-2xl font-bold text-[var(--tropical-indigo)] mb-2"> |
|
|
Actionable Steps |
|
|
</h3> |
|
|
<p>Know what to do next without the stress and confusion.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section |
|
|
class="relative h-[200px] flex items-center justify-center text-center text-white parallax" |
|
|
> |
|
|
<div class="absolute inset-0 bg-black/40"></div> |
|
|
<div class="relative z-10 px-6 fade-in"> |
|
|
<h2 id="typed-heading" class="text-4xl font-bold mb-4"></h2> |
|
|
<p id="typed-paragraph" class="text-lg max-w-xl mx-auto"></p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-[var(--latte-cream)] fade-in"> |
|
|
<div |
|
|
class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center" |
|
|
> |
|
|
<div> |
|
|
<h3 class="text-3xl font-bold text-[var(--tropical-indigo)] mb-4"> |
|
|
Been There. |
|
|
</h3> |
|
|
<p class="mb-4"> |
|
|
That’s exactly why we built this app — to stop the health spiral |
|
|
before it even starts. We know what it’s like to open a medical |
|
|
report and immediately feel overwhelmed. Weird abbreviations. |
|
|
Numbers with no context. Pages that feel like they were written for |
|
|
robots, not real people. It’s confusing, it’s stressful, and it’s |
|
|
usually a late‐night Google rabbit hole that somehow ends in you |
|
|
thinking you’ve got 3 rare conditions and a 2-day countdown. |
|
|
</p> |
|
|
<p> |
|
|
So we made something better. Just upload your report. We’ll break it |
|
|
down into plain, human language. We’ll highlight what actually |
|
|
matters, skip the jargon, and explain everything in a way that |
|
|
actually makes sense. Most importantly, we’ll give you real, |
|
|
practical steps — no guessing, no spiraling. You don’t need a |
|
|
medical degree to understand your own health. You just need the |
|
|
right guide. That’s us. |
|
|
</p> |
|
|
</div> |
|
|
<div class="w-full h-80 rounded-lg overflow-hidden shadow-lg"> |
|
|
<img |
|
|
src="https://i.pinimg.com/originals/44/c7/c1/44c7c1f3fbd68b2151c37af5f08198f1.gif" |
|
|
class="object-cover w-full h-full rounded-lg" |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 bg-[var(--wisteria)] text-white fade-in"> |
|
|
<div |
|
|
class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center" |
|
|
> |
|
|
<p>© 2025 CTRL + ALT + HEAL. All rights reserved.</p> |
|
|
<div class="flex space-x-4 mt-4 md:mt-0"> |
|
|
<a href="#" class="hover:underline">Privacy Policy</a> |
|
|
<a href="#" class="hover:underline">Terms of Service</a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script type="module"> |
|
|
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js'; |
|
|
import { getAuth, onAuthStateChanged, signOut } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js'; |
|
|
import { getFirestore, doc, getDoc, updateDoc } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js'; |
|
|
|
|
|
const firebaseConfig = { |
|
|
apiKey: "AIzaSyAPhM_Ee7cLzyKHs5zyFy8g5ZOk9-pubRI", |
|
|
authDomain: "login-tutorial-7a9e1.firebaseapp.com", |
|
|
projectId: "login-tutorial-7a9e1", |
|
|
storageBucket: "login-tutorial-7a9e1.firebasestorage.app", |
|
|
messagingSenderId: "491093197824", |
|
|
appId: "1:491093197824:web:9f866..." |
|
|
}; |
|
|
|
|
|
const app = initializeApp(firebaseConfig); |
|
|
const auth = getAuth(app); |
|
|
const db = getFirestore(app); |
|
|
|
|
|
let currentUser = null; |
|
|
|
|
|
onAuthStateChanged(auth, (user) => { |
|
|
const authNavItem = document.getElementById('authNavItem'); |
|
|
if (authNavItem) { |
|
|
if (user) { |
|
|
authNavItem.innerHTML = '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>'; |
|
|
} else { |
|
|
authNavItem.innerHTML = '<a href="login.html" class="hover:text-[#6B9080]">Login</a>'; |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
window.logout = async () => { |
|
|
try { |
|
|
await signOut(auth); |
|
|
localStorage.clear(); |
|
|
window.location.href = 'login.html'; |
|
|
} catch (error) { |
|
|
console.error("Error signing out:", error); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const fadeObserver = new IntersectionObserver( |
|
|
(entries) => { |
|
|
entries.forEach((entry) => { |
|
|
if (entry.isIntersecting) entry.target.classList.add("show"); |
|
|
}); |
|
|
}, |
|
|
{ threshold: 0.1 } |
|
|
); |
|
|
document |
|
|
.querySelectorAll(".fade-in") |
|
|
.forEach((el) => fadeObserver.observe(el)); |
|
|
|
|
|
|
|
|
const typeObserver = new IntersectionObserver( |
|
|
(entries) => { |
|
|
entries.forEach((entry) => { |
|
|
if (entry.isIntersecting) { |
|
|
typeText("typed-heading", "Your Health, Your Clarity", 80); |
|
|
typeText( |
|
|
"typed-paragraph", |
|
|
"We make complex medical reports simple and easy to understand.", |
|
|
30 |
|
|
); |
|
|
typeObserver.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, |
|
|
{ threshold: 0.5 } |
|
|
); |
|
|
|
|
|
typeObserver.observe( |
|
|
document.querySelector("#typed-heading").parentElement |
|
|
); |
|
|
|
|
|
function typeText(id, text, speed) { |
|
|
const el = document.getElementById(id); |
|
|
let i = 0; |
|
|
function type() { |
|
|
if (i < text.length) { |
|
|
el.innerHTML += text.charAt(i); |
|
|
i++; |
|
|
setTimeout(type, speed); |
|
|
} |
|
|
} |
|
|
type(); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
