298 lines
10 KiB
HTML
298 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Welcome to RaktaPulse{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
:root {
|
|
--primary-red: #E63946;
|
|
--dark-red: #D62828;
|
|
--white: #FFFFFF;
|
|
--light-red: #FFF1F2;
|
|
}
|
|
|
|
.welcome-body {
|
|
background-color: var(--white);
|
|
overflow-x: hidden;
|
|
margin-left: -48px; /* Offset the parent padding */
|
|
margin-right: -48px;
|
|
margin-top: -48px;
|
|
margin-bottom: -48px;
|
|
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
/* Hide Sidebar and Top Bar on Welcome Page */
|
|
#sidebar { display: none !important; }
|
|
#content { margin-left: 0 !important; width: 100% !important; background: white !important; }
|
|
.top-bar { display: none !important; }
|
|
#sosButton { display: none !important; }
|
|
.p-4.p-md-5 { padding: 0 !important; }
|
|
|
|
.hero-section {
|
|
min-height: 90vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
padding: 60px 0;
|
|
background: linear-gradient(180deg, var(--light-red) 0%, var(--white) 100%);
|
|
}
|
|
|
|
.hero-content {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
animation: fadeInUp 1s ease forwards;
|
|
}
|
|
|
|
.hero-image {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
animation: zoomIn 1.2s ease forwards 0.3s;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.floating-icon {
|
|
animation: float 3s ease-in-out infinite;
|
|
color: var(--primary-red);
|
|
filter: drop-shadow(0 10px 15px rgba(230, 57, 70, 0.2));
|
|
}
|
|
|
|
@keyframes float {
|
|
0% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
100% { transform: translateY(0px); }
|
|
}
|
|
|
|
.btn-hero {
|
|
padding: 16px 44px;
|
|
font-size: 1.1rem;
|
|
border-radius: 8px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
text-transform: none;
|
|
letter-spacing: 0.5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-hero-primary {
|
|
background-color: var(--primary-red);
|
|
border: none;
|
|
color: white;
|
|
box-shadow: 0 4px 6px -1px rgba(230, 57, 70, 0.2);
|
|
}
|
|
|
|
.btn-hero-primary:hover {
|
|
background-color: var(--dark-red);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 15px -3px rgba(230, 57, 70, 0.3);
|
|
color: white;
|
|
}
|
|
|
|
.feature-card {
|
|
border: 1px solid #F1F1F1;
|
|
border-radius: 12px;
|
|
transition: all 0.4s ease;
|
|
background: white;
|
|
padding: 40px;
|
|
height: 100%;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
border-color: var(--primary-red);
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 24px;
|
|
color: var(--primary-red);
|
|
display: inline-block;
|
|
}
|
|
|
|
.pulse-animation {
|
|
animation: pulse-red 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse-red {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.stats-section {
|
|
background: var(--white);
|
|
border-top: 1px solid #F1F1F1;
|
|
border-bottom: 1px solid #F1F1F1;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 3.5rem;
|
|
font-weight: 800;
|
|
color: var(--primary-red);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #6B7280;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.nav-link {
|
|
color: #374151 !important;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--primary-red) !important;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="welcome-body">
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white py-4 border-bottom sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand d-flex align-items-center" href="#">
|
|
<i class="bi bi-droplet-fill text-danger fs-3 me-2"></i>
|
|
<span class="fs-4 fw-bold text-dark">Rakta<span class="text-danger">Pulse</span></span>
|
|
</a>
|
|
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#welcomeNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="welcomeNav">
|
|
<ul class="navbar-nav ms-auto align-items-center gap-4">
|
|
<li class="nav-item"><a class="nav-link fw-semibold" href="{% url 'login' %}">Sign In</a></li>
|
|
<li class="nav-item"><a class="btn btn-hero-primary px-4 py-2" href="{% url 'register' %}" style="border-radius: 6px;">Create Account</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-section">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 hero-content">
|
|
<div class="badge bg-danger bg-opacity-10 text-danger px-3 py-2 mb-4 fw-semibold rounded-pill">
|
|
Next-Gen Blood Management
|
|
</div>
|
|
<h1 class="display-3 fw-bold mb-4" style="color: #111827; line-height: 1.1;">Streamlining <span class="text-danger">Life-Saving</span> Connections.</h1>
|
|
<p class="lead mb-5 text-muted" style="max-width: 90%;">A high-efficiency platform for real-time blood donor matching, hospital coordination, and emergency response management.</p>
|
|
<div class="d-flex gap-3 flex-wrap">
|
|
<a href="{% url 'register' %}" class="btn btn-hero btn-hero-primary">Get Started</a>
|
|
<a href="{% url 'login' %}" class="btn btn-hero btn-outline-dark">System Login</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 text-center hero-image mt-5 mt-lg-0">
|
|
<div class="position-relative">
|
|
<i class="bi bi-droplet-fill floating-icon" style="font-size: 18rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="py-5" style="background: white;">
|
|
<div class="container py-5">
|
|
<div class="row mb-5 justify-content-center">
|
|
<div class="col-lg-6 text-center">
|
|
<h2 class="fw-bold mb-3" style="color: #111827;">Engineered for Impact</h2>
|
|
<p class="text-muted">Our core modules provide the tools needed for rapid response and efficient data management.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="feature-card">
|
|
<i class="bi bi-cpu feature-icon"></i>
|
|
<h4 class="fw-bold mb-3">Smart Matching</h4>
|
|
<p class="text-muted mb-0">AI-driven geolocation algorithm to find the most compatible donors in the shortest time.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="feature-card">
|
|
<i class="bi bi-database-check feature-icon"></i>
|
|
<h4 class="fw-bold mb-3">Live Inventory</h4>
|
|
<p class="text-muted mb-0">Real-time tracking of blood stock levels across all partner hospitals and blood banks.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="feature-card">
|
|
<i class="bi bi-shield-lock feature-icon"></i>
|
|
<h4 class="fw-bold mb-3">Secure Channels</h4>
|
|
<p class="text-muted mb-0">End-to-end encrypted communication for donor privacy and secure medical data handling.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="stats-section">
|
|
<div class="container">
|
|
<div class="row text-center">
|
|
<div class="col-md-4 mb-5 mb-md-0">
|
|
<div class="stat-number">10.4k</div>
|
|
<div class="stat-label">Verified Donors</div>
|
|
</div>
|
|
<div class="col-md-4 mb-5 mb-md-0">
|
|
<div class="stat-number">85%</div>
|
|
<div class="stat-label">Response Rate</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="stat-number">120+</div>
|
|
<div class="stat-label">Tech Partners</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Call to Action -->
|
|
<section class="py-5">
|
|
<div class="container py-5">
|
|
<div class="border border-danger border-2 p-5 rounded-4 text-center">
|
|
<h2 class="display-5 fw-bold mb-4" style="color: #111827;">Ready to Integrate?</h2>
|
|
<p class="lead mb-5 text-muted">Join the network of tech-driven healthcare providers saving lives every day.</p>
|
|
<a href="{% url 'register' %}" class="btn btn-hero btn-hero-primary pulse-animation">Create Your Account</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-white py-5 border-top">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6 text-center text-md-start text-muted">
|
|
<span class="fw-bold text-danger">RaktaPulse</span> © 2026. <span class="ms-2">v2.1.0-stable</span>
|
|
</div>
|
|
<div class="col-md-6 text-center text-md-end mt-3 mt-md-0">
|
|
<div class="d-flex justify-content-center justify-content-md-end gap-4">
|
|
<a href="#" class="text-muted"><i class="bi bi-github"></i></a>
|
|
<a href="#" class="text-muted"><i class="bi bi-twitter-x"></i></a>
|
|
<a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
{% endblock %}
|