Spaces:
Runtime error
Runtime error
<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 rel="stylesheet" href="style.css" /> | |
</head> | |
<body> | |
<!-- NAVBAR --> | |
<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" | |
> | |
<!-- Logo --> | |
<a | |
href="index.html" | |
class="text-2xl font-bold text-[#FOE3CE hover:text-[var(--tropical-indigo)] transition" | |
> | |
CTRL + ALT + HEAL | |
</a> | |
<!-- Desktop Menu --> | |
<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 id="authNavItem"> | |
<a href="login.html" class="nav-link">Login</a> | |
</li> | |
</ul> | |
<!-- Hamburger Menu --> | |
<button | |
id="hamburger" | |
class="md:hidden text-[var(--latte-cream)] text-2xl" | |
> | |
☰ | |
</button> | |
</div> | |
<!-- Mobile Menu --> | |
<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> | |
<!-- HERO SECTION --> | |
<section | |
class="relative min-h-[600px] flex items-center justify-center mt-20" | |
style=" | |
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPzQvOMCaRXTQhCvcYwmi_vdYxJtMpMW7KBA&s'); | |
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> | |
<!-- FEATURES --> | |
<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> | |
<!-- PARALLAX INFO 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> | |
<!-- BEEN THERE --> | |
<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 --> | |
<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: "AIzaSyAKWstCc7HqMgV8DmH2Sy6QwUP3JvZxu9g", | |
authDomain: "appchallenge-c8fe3.firebaseapp.com", | |
projectId: "appchallenge-c8fe3", | |
storageBucket: "appchallenge-c8fe3.firebasestorage.app", | |
messagingSenderId: "943791692455", | |
appId: "1:943791692455:web:ae04d06bf09669b6bdd982", | |
measurementId: "G-HJ7EHW8V4N" | |
}; | |
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); | |
} | |
}; | |
// Fade-in on scroll | |
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)); | |
// Typing effect on scroll | |
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> |