Skip to content

feat: add premium glassmorphism landing page for API root #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
diusazzad wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add premium glassmorphism landing page for API root #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified __pycache__/main.cpython-313.pyc
View file
Open in desktop
Binary file not shown.
14 changes: 13 additions & 1 deletion main.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
from fastapi import FastAPI
from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI(
title="DataMind AI API",
description="Intelligent Data & Document Assistant API",
version="1.0.0",
)

# Mount static files (CSS, JS, Images)
app.mount("/static", StaticFiles(directory="static"), name="static")

# Setup Jinja2 templates
templates = Jinja2Templates(directory="templates")

@app.get("/")
def read_root(request: Request):
return templates.TemplateResponse(request=request, name="index.html")

@app.get("/health")
def health_check():
return {"Status": "success", "message": "DataMind AI Server is running flawlessly!!!!"}
Expand Down
227 changes: 227 additions & 0 deletions static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Outfit:wght@400;600;800&display=swap');

:root {
--bg-color: #0b0f19;
--card-bg: rgba(255, 255, 255, 0.03);
--glass-border: rgba(255, 255, 255, 0.08);
--primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
--text-main: #f8fafc;
--text-muted: #94a3b8;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: var(--bg-color);
color: var(--text-main);
font-family: 'Inter', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-x: hidden;
position: relative;
}

/* Animated Background Blobs */
.blob {
position: absolute;
filter: blur(80px);
z-index: -1;
opacity: 0.5;
animation: float 10s infinite ease-in-out alternate;
}

.blob-1 {
top: -10%;
left: -10%;
width: 400px;
height: 400px;
background: rgba(99, 102, 241, 0.4);
border-radius: 50%;
}

.blob-2 {
bottom: -10%;
right: -10%;
width: 500px;
height: 500px;
background: rgba(168, 85, 247, 0.4);
border-radius: 50%;
animation-delay: -5s;
}

@keyframes float {
0% { transform: translateY(0px) scale(1); }
100% { transform: translateY(30px) scale(1.1); }
}

/* Glassmorphism Container */
.container {
background: var(--card-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 3rem 4rem;
text-align: center;
max-width: 800px;
width: 90%;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeUp {
0% { opacity: 0; transform: translateY(40px); }
100% { opacity: 1; transform: translateY(0); }
}

h1 {
font-family: 'Outfit', sans-serif;
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -1px;
}

p.subtitle {
font-size: 1.25rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
line-height: 1.6;
}

/* Features Grid */
.features {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}

.feature-badge {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
padding: 0.75rem 1.5rem;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-main);
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}

.feature-badge:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.feature-badge i {
color: #a855f7;
}

/* Buttons */
.btn-container {
display: flex;
gap: 1.5rem;
justify-content: center;
}

.btn {
text-decoration: none;
padding: 1rem 2.5rem;
border-radius: 12px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
}

.btn-primary {
background: var(--primary-gradient);
color: white;
box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.5);
position: relative;
overflow: hidden;
border: none;
}

.btn-primary::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(transparent, rgba(255, 255, 255, 0.2), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
opacity: 0;
}

.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 20px 30px -5px rgba(99, 102, 241, 0.6);
}

.btn-primary:hover::after {
left: 100%;
opacity: 1;
}

.btn-secondary {
background: transparent;
color: var(--text-main);
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
}

.btn-secondary:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}

/* Pulse Animation for Status */
.status {
position: absolute;
top: 2rem;
right: 2rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 600;
color: #10b981;
background: rgba(16, 185, 129, 0.1);
padding: 0.5rem 1rem;
border-radius: 999px;
border: 1px solid rgba(16, 185, 129, 0.2);
}

.pulse {
width: 8px;
height: 8px;
background-color: #10b981;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
animation: pulse-ring 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse-ring {
to {
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
}
}
62 changes: 62 additions & 0 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataMind AI | Enterprise Intelligent Assistant</title>
<meta name="description" content="DataMind AI is an enterprise-grade Intelligent Data & Document Assistant powered by LLMs.">

<!-- Custom CSS -->
<link rel="stylesheet" href="/static/css/style.css">

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>

<!-- Animated Background Blobs -->
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>

<!-- Live Status Indicator -->
<div class="status">
<div class="pulse"></div>
API Online
</div>

<!-- Main Glassmorphism Container -->
<div class="container">
<h1>DataMind AI</h1>
<p class="subtitle">
Enterprise Intelligent Data & Document Assistant. <br>
Bridging the gap between your databases, unstructured documents, and end-users through powerful Natural Language Processing.
</p>

<div class="features">
<div class="feature-badge">
<i class="fa-solid fa-chart-pie"></i> Data Analytics
</div>
<div class="feature-badge">
<i class="fa-solid fa-database"></i> Text-to-SQL
</div>
<div class="feature-badge">
<i class="fa-solid fa-file-pdf"></i> RAG Intelligence
</div>
<div class="feature-badge">
<i class="fa-solid fa-robot"></i> AI Agents
</div>
</div>

<div class="btn-container">
<!-- Link to the auto-generated FastAPI Swagger UI docs -->
<a href="/docs" class="btn btn-primary">
<i class="fa-solid fa-rocket"></i> Explore API Docs
</a>
<a href="/redoc" class="btn btn-secondary">
<i class="fa-solid fa-book"></i> View ReDoc
</a>
</div>
</div>

</body>
</html>