|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>WhiteCell.AI – AI BIO LAB INTERFACE</title>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
|
|
|
<style>
|
|
|
body {
|
|
|
margin: 0;
|
|
|
font-family: 'Orbitron', sans-serif;
|
|
|
background: radial-gradient(ellipse at center, #050b14 0%, #000000 100%);
|
|
|
color: #e0f2ff;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
|
|
|
header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 1rem 2rem;
|
|
|
background: rgba(2, 6, 17, 0.3);
|
|
|
backdrop-filter: blur(10px);
|
|
|
box-shadow: 0 0 15px rgba(0, 238, 255, 0.1);
|
|
|
border-bottom: 1px solid rgba(0, 255, 255, 0.05);
|
|
|
|
|
|
}
|
|
|
|
|
|
.logo {
|
|
|
font-size: 1.5rem;
|
|
|
color: #00d9ff;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
nav a {
|
|
|
color: #8eefff;
|
|
|
margin-left: 1.5rem;
|
|
|
text-decoration: none;
|
|
|
transition: 0.3s;
|
|
|
}
|
|
|
|
|
|
nav a:hover {
|
|
|
color: #ffffff;
|
|
|
text-shadow: 0 0 10px #00eaff;
|
|
|
}
|
|
|
|
|
|
main {
|
|
|
text-align: center;
|
|
|
padding: 6rem 2rem 4rem;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
font-size: 2.5rem;
|
|
|
margin-bottom: 1rem;
|
|
|
text-shadow: 0 0 20px #00eaff;
|
|
|
}
|
|
|
|
|
|
.btn-launch {
|
|
|
padding: 1rem 2rem;
|
|
|
border: none;
|
|
|
background: #00bfff;
|
|
|
color: white;
|
|
|
font-size: 1.2rem;
|
|
|
border-radius: 1rem;
|
|
|
cursor: pointer;
|
|
|
box-shadow: 0 0 20px #00eaff;
|
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
|
text-decoration: none;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.btn-launch:hover {
|
|
|
transform: scale(1.05);
|
|
|
box-shadow: 0 0 30px #00eaff;
|
|
|
}
|
|
|
|
|
|
.background-animation {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
background: radial-gradient(circle at 30% 30%, #0a1628 0%, #020611 100%);
|
|
|
z-index: -1;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
#stars div {
|
|
|
position: absolute;
|
|
|
width: 2px;
|
|
|
height: 2px;
|
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
|
border-radius: 50%;
|
|
|
animation: twinkle 4s infinite ease-in-out;
|
|
|
}
|
|
|
|
|
|
nav a {
|
|
|
position: relative;
|
|
|
color: #8eefff;
|
|
|
margin-left: 1.5rem;
|
|
|
text-decoration: none;
|
|
|
transition: 0.3s;
|
|
|
}
|
|
|
|
|
|
nav a::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
width: 0%;
|
|
|
height: 2px;
|
|
|
bottom: -4px;
|
|
|
left: 0;
|
|
|
background: #00eaff;
|
|
|
box-shadow: 0 0 8px #00eaff;
|
|
|
transition: width 0.3s ease;
|
|
|
}
|
|
|
|
|
|
nav a:hover::after {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.logo:hover {
|
|
|
animation: glitch 0.5s infinite;
|
|
|
text-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
|
|
|
}
|
|
|
|
|
|
@keyframes glitch {
|
|
|
0% { transform: translate(0); }
|
|
|
20% { transform: translate(-1px, 1px); }
|
|
|
40% { transform: translate(1px, -1px); }
|
|
|
60% { transform: translate(-1px, -1px); }
|
|
|
80% { transform: translate(1px, 1px); }
|
|
|
100% { transform: translate(0); }
|
|
|
}
|
|
|
|
|
|
|
|
|
@keyframes twinkle {
|
|
|
0%, 100% {
|
|
|
opacity: 0.2;
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
50% {
|
|
|
opacity: 1;
|
|
|
transform: scale(1.4);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes pulse-bg {
|
|
|
from { background-position: 0 0; }
|
|
|
to { background-position: 40px 40px; }
|
|
|
}
|
|
|
|
|
|
.scene {
|
|
|
width: 300px;
|
|
|
height: 300px;
|
|
|
perspective: 1000px;
|
|
|
margin: 0 auto 2rem;
|
|
|
}
|
|
|
|
|
|
.dna {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
transform-style: preserve-3d;
|
|
|
animation: rotate 12s linear infinite;
|
|
|
}
|
|
|
|
|
|
.pair {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform-style: preserve-3d;
|
|
|
}
|
|
|
|
|
|
.ball {
|
|
|
width: 14px;
|
|
|
height: 14px;
|
|
|
border-radius: 50%;
|
|
|
background: rgba(0, 255, 255, 0.9);
|
|
|
box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
.connector {
|
|
|
width: 60px;
|
|
|
height: 2px;
|
|
|
background: linear-gradient(to right, rgba(0,255,255,0.6), rgba(255,255,255,0.2), rgba(0,255,255,0.6));
|
|
|
position: absolute;
|
|
|
top: 6px;
|
|
|
left: -30px;
|
|
|
transform-origin: center;
|
|
|
}
|
|
|
|
|
|
@keyframes rotate {
|
|
|
0% { transform: rotateY(0deg); }
|
|
|
100% { transform: rotateY(360deg); }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<div class="background-animation">
|
|
|
<div id="stars"></div>
|
|
|
</div>
|
|
|
|
|
|
<header>
|
|
|
<div class="logo">🧬 WhiteCell.AI</div>
|
|
|
<nav>
|
|
|
<a href="/upload" class="btn btn-primary">Upload</a>
|
|
|
<a href="#scan">Scan</a>
|
|
|
<a href="#results">Results</a>
|
|
|
<a href="#assistant">Assistant</a>
|
|
|
</nav>
|
|
|
</header>
|
|
|
|
|
|
<main>
|
|
|
<div class="scene">
|
|
|
<div class="dna" id="dna"></div>
|
|
|
</div>
|
|
|
<h1>AI-Powered Blood Cell Detection</h1>
|
|
|
<a href="/upload" class="btn-launch">🧬 Launch AI Scan</a>
|
|
|
</main>
|
|
|
|
|
|
<script>
|
|
|
const dna = document.getElementById('dna');
|
|
|
const pairs = 40;
|
|
|
for (let i = 0; i < pairs; i++) {
|
|
|
const pair = document.createElement('div');
|
|
|
pair.className = 'pair';
|
|
|
const angle = (i / pairs) * 360;
|
|
|
const y = (i - pairs / 2) * 8;
|
|
|
pair.style.transform = `rotateY(${angle}deg) translateZ(120px) translateY(${y}px)`;
|
|
|
|
|
|
const ball1 = document.createElement('div');
|
|
|
ball1.className = 'ball';
|
|
|
ball1.style.left = '-40px';
|
|
|
|
|
|
const ball2 = document.createElement('div');
|
|
|
ball2.className = 'ball';
|
|
|
ball2.style.left = '40px';
|
|
|
|
|
|
const connector = document.createElement('div');
|
|
|
connector.className = 'connector';
|
|
|
connector.style.transform = `rotate(${i % 2 === 0 ? 30 : -30}deg)`;
|
|
|
|
|
|
pair.appendChild(ball1);
|
|
|
pair.appendChild(ball2);
|
|
|
pair.appendChild(connector);
|
|
|
dna.appendChild(pair);
|
|
|
}
|
|
|
|
|
|
|
|
|
const starsContainer = document.getElementById('stars');
|
|
|
for (let i = 0; i < 100; i++) {
|
|
|
const star = document.createElement('div');
|
|
|
star.style.top = Math.random() * 100 + 'vh';
|
|
|
star.style.left = Math.random() * 100 + 'vw';
|
|
|
const size = (Math.random() * 1.5 + 1);
|
|
|
star.style.width = size + 'px';
|
|
|
star.style.height = size + 'px';
|
|
|
star.style.animationDuration = (Math.random() * 4 + 3) + 's';
|
|
|
starsContainer.appendChild(star);
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
