|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AquaVision Sentinel - Water Monitoring Intelligence</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: 2rem; |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
color: white; |
|
|
background: #000; |
|
|
} |
|
|
.animate-float-1, .animate-float-2, .animate-float-3 { |
|
|
animation-duration: 20s; |
|
|
animation-timing-function: ease-in-out; |
|
|
animation-iteration-count: infinite; |
|
|
} |
|
|
.animate-float-1 { |
|
|
animation-name: float1; |
|
|
} |
|
|
.animate-float-2 { |
|
|
animation-name: float2; |
|
|
animation-delay: 5s; |
|
|
} |
|
|
.animate-float-3 { |
|
|
animation-name: float3; |
|
|
animation-delay: 10s; |
|
|
} |
|
|
@keyframes float1 { |
|
|
0%, 100% { transform: translate(0, 0); } |
|
|
50% { transform: translate(30px, 20px); } |
|
|
} |
|
|
@keyframes float2 { |
|
|
0%, 100% { transform: translate(0, 0); } |
|
|
50% { transform: translate(-20px, 30px); } |
|
|
} |
|
|
@keyframes float3 { |
|
|
0%, 100% { transform: translate(0, 0); } |
|
|
50% { transform: translate(15px, -10px); } |
|
|
} |
|
|
.wave { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 200%; |
|
|
height: 100%; |
|
|
background-repeat: repeat no-repeat; |
|
|
background-position: 0 bottom; |
|
|
transform-origin: center bottom; |
|
|
background-size: 50% 100%; |
|
|
} |
|
|
.wave1 { |
|
|
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="rgba(255,255,255,0.1)"/></svg>'); |
|
|
animation: wave 12s linear infinite; |
|
|
} |
|
|
.wave2 { |
|
|
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="rgba(255,255,255,0.05)"/></svg>'); |
|
|
animation: wave 18s linear infinite reverse; |
|
|
} |
|
|
@keyframes wave { |
|
|
0% { transform: translateX(0) translateZ(0) scaleY(1); } |
|
|
50% { transform: translateX(-25%) translateZ(0) scaleY(0.8); } |
|
|
100% { transform: translateX(-50%) translateZ(0) scaleY(1); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-inter text-white" style="background: linear-gradient(135deg, rgba(9,45,74,0.6) 0%, rgba(14,73,120,0.5) 50%, rgba(25,129,211,0.4) 100%);"> |
|
|
|
|
|
<div class="relative z-10 max-w-6xl mx-auto my-8 rounded-2xl overflow-hidden shadow-2xl backdrop-blur-sm bg-white/10 border border-white/20"> |
|
|
|
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none"> |
|
|
<div class="absolute top-1/4 left-1/5 w-3 h-3 bg-white/30 rounded-full animate-float-1"></div> |
|
|
<div class="absolute top-2/3 left-3/4 w-4 h-4 bg-white/40 rounded-full animate-float-2"></div> |
|
|
<div class="absolute top-1/3 right-1/4 w-2 h-2 bg-white/20 rounded-full animate-float-3"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-12"> |
|
|
|
|
|
<div class="flex justify-between items-start mb-8"> |
|
|
<div class="flex items-center gap-6"> |
|
|
<div class="bg-white/90 p-4 rounded-xl shadow-lg"> |
|
|
<img src="https://ik.imagekit.io/0szracf6d/SCR-20251023-qxjt-removebg-preview-2.png?updatedAt=1761335579056" alt="REVRES Logo" class="w-24 h-24"> |
|
|
</div> |
|
|
<div> |
|
|
<h1 class="text-5xl font-extrabold tracking-tight">REVRES</h1> |
|
|
<p class="text-xl font-light text-white/80">Reservoir Volume Evaluation Using Remote Sensing</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-16"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold leading-tight mb-6 max-w-2xl"> |
|
|
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-teal-200">Monitoring Water</span><br> |
|
|
<span class="bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-100">Securing Rural Futures</span> |
|
|
</h2> |
|
|
|
|
|
<p class="text-xl text-white/90 mb-8 max-w-2xl leading-relaxed"> |
|
|
Leveraging satellite imagery and AI to provide near real-time reservoir monitoring and forecasting |
|
|
for sustainable water management. |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> |
|
|
<div class="bg-white/10 p-5 rounded-xl border border-white/20 backdrop-blur-sm hover:bg-white/20 transition-all"> |
|
|
<div class="flex items-center gap-4"> |
|
|
<div class="bg-blue-500/20 p-3 rounded-full"> |
|
|
<i data-feather="eye" class="w-8 h-8 text-blue-300"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Real-Time Monitoring</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white/10 p-5 rounded-xl border border-white/20 backdrop-blur-sm hover:bg-white/20 transition-all"> |
|
|
<div class="flex items-center gap-4"> |
|
|
<div class="bg-teal-500/20 p-3 rounded-full"> |
|
|
<i data-feather="activity" class="w-6 h-6 text-teal-300"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">AI-Powered Forecasts</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white/10 p-5 rounded-xl border border-white/20 backdrop-blur-sm hover:bg-white/20 transition-all"> |
|
|
<div class="flex items-center gap-4"> |
|
|
<div class="bg-blue-400/20 p-3 rounded-full"> |
|
|
<i data-feather="globe" class="w-6 h-6 text-blue-200"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold">Scalable Solution</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-center gap-6"> |
|
|
<div class="flex gap-6 items-center"> |
|
|
<div class="bg-white p-4 rounded-lg h-24 w-auto flex items-center justify-center shadow-md"> |
|
|
<img src="https://ik.imagekit.io/0szracf6d/lnec.png?updatedAt=1761321905207" alt="LNEC" class="h-22 max-h-22 object-contain"> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg h-24 w-auto flex items-center justify-center shadow-md"> |
|
|
<img src="https://ik.imagekit.io/0szracf6d/EDIA.png?updatedAt=1761321922801" alt="EDIA" class="h-20 max-h-20 object-contain"> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white/90 text-blue-900 px-4 py-2 rounded-lg flex items-center gap-3 shadow-md w-auto"> |
|
|
<img src="https://ik.imagekit.io/0szracf6d/FUTURAL_LOGO-2.png?updatedAt=1761335543238" alt="FUTURAL Initiative" class="h-12"> |
|
|
<div class="flex flex-col"> |
|
|
<span class="text-sm font-semibold">Funded by</span> |
|
|
<span class="font-bold">FUTURAL Open Call</span> |
|
|
<span class="text-xs mt-1">This sub-project has received funding from the project FUTURAL (Grant Agreement number: 101083958) through its Open Call, funded by the European Union's Horizon Europe research and innovation programme.</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-0 left-0 w-full h-32 overflow-hidden"> |
|
|
<div class="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-blue-900/80 to-transparent"></div> |
|
|
<div class="wave wave1"></div> |
|
|
<div class="wave wave2"></div> |
|
|
</div> |
|
|
</div> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
