From d28e82d900820c7ab9421020b0452a1d5feacd4c Mon Sep 17 00:00:00 2001
From: kapil <dev.kapildevpal@gmail.com>
Date: Fri, 11 Apr 2025 05:33:06 +0530
Subject: [PATCH] feat: optimize UI spacing and layout for better visual
 hierarchy

---
 data/x-icon.svg |   4 +
 index.html      | 153 +++++++++---
 style.css       | 646 +++++++++++++++++++++++++++++++++++++++++-------
 3 files changed, 687 insertions(+), 116 deletions(-)
 create mode 100644 data/x-icon.svg
diff --git a/data/x-icon.svg b/data/x-icon.svg
new file mode 100644
index 0000000..93d56e6
--- /dev/null
+++ b/data/x-icon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" fill="currentColor"/>
+</svg> 
\ No newline at end of file
diff --git a/index.html b/index.html
index 28a95d3..af3df4f 100644
--- a/index.html
+++ b/index.html
@@ -3,45 +3,132 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ISRO-API</title>
+  <title>ISRO 🚀 API - Indian Space Research Organization</title>
   <link href="style.css" rel="stylesheet" type="text/css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;500;600;700;800;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
 <body>
-  <div class="container">
-    <div class="content">
-      <h1 class="container__content__heading">ISRO 🚀 API</h1>
-      <p class="container__content__para">
-        Open Source API for Launched Spacecrafts & Rockets data of ISRO
-      </p>
-      <h2 class="container__content__h2">API End-Points</h2>
-      <ul>
-        <li>
-          Spacecrafts:
-          <img src="data/space_indian.png" alt="PSLV-C49">
-          <a href="/api/spacecrafts" target="_blank" rel="noopener noreferrer">/api/spacecrafts</a>
-        </li>
-        <li>
-          Launchers:
-          <img src="https://www.thestatesman.com/wp-content/uploads/2019/07/CHANDRAYAAN-2-1.jpg" alt="CHANDRAYAAN-2">
-          <a href="/api/launchers" target="_blank" rel="noopener noreferrer">/api/launchers</a>
-        </li>
-        <li>
-          Customer Satellites:
-          <img src="https://static.toiimg.com/photo/msid-70609128/70609128.jpg" alt="Customer">
-          <a href="/api/customer_satellites" target="_blank" rel="noopener noreferrer">/api/customer_satellites</a>
-        </li>
-        <li>
-          Centres:
-          <img src="https://resize.indiatvnews.com/en/resize/newbucket/1200_-/2020/06/isro-gslv-20181114-1593399635.jpg" alt="centers" />
-          <a href="/api/centres" target="_blank" rel="noopener noreferrer">/api/centres</a>
-        </li>
-      </ul>
-      <hr>
-      <h3 class="center-text">Contribute at <a href="https://github.com/isro/api">GitHub</a></h3>
+  <header class="header">
+    <div class="header-content">
+      <h1 class="header-title">ISRO 🚀 API</h1>
+      <p class="header-subtitle">Open Source API for Indian Space Research Organization</p>
     </div>
-  </div>
+  </header>
+
+  <main class="main-content">
+    <section class="api-section">
+      <h2 class="section-title">API Endpoints</h2>
+      <div class="api-grid">
+        <div class="api-card">
+          <div class="card-icon">
+            <i class="fas fa-rocket"></i>
+          </div>
+          <div class="card-content">
+            <h3>Spacecrafts</h3>
+            <p>Access detailed information about ISRO's spacecraft missions</p>
+            <a href="/api/spacecrafts" class="api-link" target="_blank" rel="noopener noreferrer">
+              <i class="fas fa-arrow-right"></i> View API
+            </a>
+          </div>
+        </div>
+
+        <div class="api-card">
+          <div class="card-icon">
+            <i class="fas fa-space-shuttle"></i>
+          </div>
+          <div class="card-content">
+            <h3>Launchers</h3>
+            <p>Explore ISRO's launch vehicle data and specifications</p>
+            <a href="/api/launchers" class="api-link" target="_blank" rel="noopener noreferrer">
+              <i class="fas fa-arrow-right"></i> View API
+            </a>
+          </div>
+        </div>
+
+        <div class="api-card">
+          <div class="card-icon">
+            <i class="fas fa-satellite"></i>
+          </div>
+          <div class="card-content">
+            <h3>Customer Satellites</h3>
+            <p>Information about satellites launched for other countries</p>
+            <a href="/api/customer_satellites" class="api-link" target="_blank" rel="noopener noreferrer">
+              <i class="fas fa-arrow-right"></i> View API
+            </a>
+          </div>
+        </div>
+
+        <div class="api-card">
+          <div class="card-icon">
+            <i class="fas fa-building"></i>
+          </div>
+          <div class="card-content">
+            <h3>Centres</h3>
+            <p>Details about ISRO's research and development centers</p>
+            <a href="/api/centres" class="api-link" target="_blank" rel="noopener noreferrer">
+              <i class="fas fa-arrow-right"></i> View API
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="stats-section">
+      <h2 class="section-title">Quick Stats</h2>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <i class="fas fa-rocket"></i>
+          <h3>100+</h3>
+          <p>Spacecrafts Launched</p>
+        </div>
+        <div class="stat-card">
+          <i class="fas fa-globe-asia"></i>
+          <h3>30+</h3>
+          <p>Countries Served</p>
+        </div>
+        <div class="stat-card">
+          <i class="fas fa-satellite-dish"></i>
+          <h3>50+</h3>
+          <p>Customer Satellites</p>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <div class="footer-content">
+      <div class="contribute-section">
+        <div class="space-icon">
+          <i class="fas fa-rocket"></i>
+        </div>
+        <h3>Launch Your Contribution</h3>
+        <p>Join India's space technology revolution</p>
+        <a href="https://github.com/isro/api" class="contribute-button" target="_blank" rel="noopener noreferrer">
+          <i class="fab fa-github"></i> Contribute on GitHub
+        </a>
+      </div>
+      
+      <div class="social-section">
+        <div class="space-icon">
+          <i class="fas fa-satellite"></i>
+        </div>
+        <h3>Stay Connected</h3>
+        <div class="social-links">
+          <a href="https://x.com/isro" class="social-link x-link" aria-label="X (formerly Twitter)" target="_blank" rel="noopener noreferrer">
+            <img src="data/x-icon.svg" alt="X" class="x-icon">
+            <span>Follow @isro</span>
+          </a>
+          <a href="https://www.isro.gov.in/" class="social-link website-link" aria-label="ISRO Website" target="_blank" rel="noopener noreferrer">
+            <i class="fas fa-globe"></i>
+            <span>Visit ISRO Website</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="footer-stars"></div>
+  </footer>
 </body>
 </html>
diff --git a/style.css b/style.css
index dc14746..c6f12bc 100644
--- a/style.css
+++ b/style.css
@@ -1,105 +1,585 @@
+:root {
+  --primary-color: #06b8ee;
+  --secondary-color: #436fe6;
+  --background-dark: #121212;
+  --background-light: #1e1e1e;
+  --text-color: #ffffff;
+  --card-bg: rgba(255, 255, 255, 0.05);
+  --transition: all 0.3s ease;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 body {
-    font-family: "Poppins", "sans-serif";
-    color: white;
-    text-align: center;
-    margin: 0;
-    background: #121212;
+  font-family: "Poppins", sans-serif;
+  color: var(--text-color);
+  background: var(--background-dark);
+  line-height: 1.6;
+}
+
+/* Header Styles */
+.header {
+  background: linear-gradient(135deg, var(--background-dark), var(--background-light));
+  padding: 3rem 1.5rem;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></svg>') repeat;
+  opacity: 0.1;
+}
+
+.header-title {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 0.8rem;
+  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: fadeIn 1s ease;
+}
+
+.header-subtitle {
+  font-size: 1.1rem;
+  color: rgba(255, 255, 255, 0.8);
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* Main Content Styles */
+.main-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+.section-title {
+  font-size: 2.2rem;
+  text-align: center;
+  margin: 2rem 0 1.5rem;
+  color: var(--text-color);
+  position: relative;
+}
+
+.section-title::after {
+  content: '';
+  display: block;
+  width: 100px;
+  height: 4px;
+  background: var(--primary-color);
+  margin: 1rem auto;
+  border-radius: 2px;
+}
+
+/* API Cards Grid */
+.api-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.api-card {
+  background: var(--card-bg);
+  border-radius: 15px;
+  overflow: hidden;
+  transition: var(--transition);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.api-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.card-icon {
+  width: 70px;
+  height: 70px;
+  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  font-size: 2rem;
+  color: white;
+  transition: var(--transition);
+}
+
+.api-card:hover .card-icon {
+  transform: scale(1.1);
+  box-shadow: 0 0 20px rgba(6, 184, 238, 0.3);
+}
+
+.card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.card-content h3 {
+  font-size: 1.3rem;
+  margin-bottom: 0.5rem;
+  color: var(--primary-color);
+}
+
+.card-content p {
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 1rem;
+}
+
+.api-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: 500;
+  transition: var(--transition);
+  margin-top: auto;
+}
+
+.api-link:hover {
+  color: var(--secondary-color);
+  transform: translateX(5px);
+}
+
+/* Stats Section */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.5rem;
+  margin: 2rem 0;
+}
+
+.stat-card {
+  background: var(--card-bg);
+  padding: 1.5rem;
+  border-radius: 15px;
+  text-align: center;
+  transition: var(--transition);
+}
+
+.stat-card:hover {
+  transform: translateY(-5px);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.stat-card i {
+  font-size: 2.2rem;
+  color: var(--primary-color);
+  margin-bottom: 0.8rem;
+}
+
+.stat-card h3 {
+  font-size: 2.2rem;
+  margin-bottom: 0.5rem;
+  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* Footer Styles */
+.footer {
+  background: linear-gradient(to bottom, var(--background-dark), #000000);
+  padding: 3rem 1.5rem;
+  margin-top: 3rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></svg>') repeat;
+  opacity: 0.1;
+  animation: twinkle 4s infinite;
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  position: relative;
+  z-index: 1;
+}
+
+.space-icon {
+  width: 70px;
+  height: 70px;
+  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  font-size: 2rem;
+  color: white;
+  box-shadow: 0 0 30px rgba(6, 184, 238, 0.4);
+  animation: pulse 2s infinite;
+  position: relative;
+}
+
+.space-icon::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+  animation: glow 2s infinite;
+}
+
+.contribute-section, .social-section {
+  text-align: center;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 15px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: var(--transition);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.contribute-section:hover, .social-section:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  border-color: var(--primary-color);
+}
+
+.contribute-section h3, .social-section h3 {
+  font-size: 1.6rem;
+  margin: 1rem 0;
+  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: 0.5px;
+}
+
+.contribute-section p, .social-section p {
+  color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 1.5rem;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.contribute-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+  color: white;
+  padding: 0.8rem 1.5rem;
+  border-radius: 50px;
+  text-decoration: none;
+  font-weight: 600;
+  transition: var(--transition);
+  box-shadow: 0 4px 12px rgba(6, 184, 238, 0.2);
+  margin-top: auto;
+}
+
+.contribute-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(6, 184, 238, 0.3);
+}
+
+.social-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  width: 100%;
+  max-width: 280px;
+}
+
+.social-link {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  color: var(--text-color);
+  text-decoration: none;
+  padding: 0.8rem 1.2rem;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  transition: var(--transition);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.social-link:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateX(3px);
+  border-color: var(--primary-color);
+}
+
+.x-icon {
+  width: 20px;
+  height: 20px;
+  color: #000000;
+  transition: var(--transition);
+}
+
+.social-link:hover .x-icon {
+  transform: scale(1.1);
+  color: var(--primary-color);
+}
+
+.website-link i {
+  color: var(--primary-color);
+  font-size: 1.3rem;
+  transition: var(--transition);
+}
+
+.social-link:hover i {
+  transform: scale(1.1);
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(6, 184, 238, 0.4);
   }
-  
-  .container {
-    max-width: 90%; /* Increase the max-width for better responsiveness */
-    margin: 0 auto;
-    padding: 20px;
-    border-radius: 10px;
-    color: white;
+  70% {
+    box-shadow: 0 0 0 15px rgba(6, 184, 238, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(6, 184, 238, 0);
+  }
+}
 
-    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
-    /* background: #333; */
+@keyframes glow {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
   }
+}
 
-  h1,p{
-    color: white;
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 0.2;
+  }
+}
 
+/* Responsive Design for Footer */
+@media (max-width: 768px) {
+  .footer {
+    padding: 2rem 1rem;
   }
   
-  .content {
-    padding: 20px;
-    color: white;
+  .footer-content {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
 
+  .contribute-section, .social-section {
+    padding: 1.5rem;
   }
-  
-  h1, h2, h3 {
-    font-weight: 600;
-    padding-bottom: 0.3em;
-    color: #fff;
+
+  .contribute-section h3, .social-section h3 {
+    font-size: 1.4rem;
   }
-  
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center; /* Center the list items */
-    list-style: none;
-    margin: 0;
-    padding: 0;
+
+  .space-icon {
+    margin: 0 auto 1.5rem;
   }
-  
-  li {
-    padding: 0.5em;
-    display: flex;
-    flex-direction: column;
-    /* background: #222; */
-    justify-content: center;
-    align-items: center;
-    margin: 15px;
-    min-width: 45%; /* Adjust the minimum width for responsiveness */
-    border-radius: 10px;
-    box-shadow: 0px 0px 5px 0px rgba(152, 154, 155, 0.75);
-    text-align: center;
-    font-size: 24px;
-    padding: 15px;
-    font-weight: 600;
-    color: #fff;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
   }
-  
-  li a {
-    text-decoration: none;
-    color: #06b8ee;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
-  
-  li:hover {
-    box-shadow: 0 0 10px 0 rgba(6, 133, 236, 0.75);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .main-content {
+    padding: 1rem;
   }
-  
-  a {
-    text-decoration: none;
-    color: #436fe6;
+
+  .section-title {
+    font-size: 1.8rem;
+    margin: 1.5rem 0 1rem;
   }
-  
-  .center-text {
-    text-align: center;
-    margin-top: 45px;
-    color: #fff;
+
+  .api-grid {
+    gap: 1rem;
+    margin: 1rem 0;
   }
-  
-  .container__content__heading,
-  .container__content__para,
-  .container__content__h2 {
-    text-align: center;
-    font-size: 45px;
-    color: #ffffff;
+
+  .api-card {
+    padding: 1.2rem;
   }
-  
+
+  .stats-grid {
+    gap: 1rem;
+    margin: 1.5rem 0;
+  }
+
+  .header {
+    padding: 2rem 1rem;
+  }
+
+  .header-title {
+    font-size: 2.2rem;
+  }
+}
+
+/* Loading Animation */
+.loading {
+  position: relative;
+  overflow: hidden;
+}
+
+.loading::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.container {
+  max-width: 90%; /* Increase the max-width for better responsiveness */
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 10px;
+  color: white;
+
+  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
+  /* background: #333; */
+}
+
+h1,p{
+  color: white;
+
+}
+
+.content {
+  padding: 20px;
+  color: white;
+
+}
+
+h1, h2, h3 {
+  font-weight: 600;
+  padding-bottom: 0.3em;
+  color: #fff;
+}
+
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center; /* Center the list items */
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  padding: 0.5em;
+  display: flex;
+  flex-direction: column;
+  /* background: #222; */
+  justify-content: center;
+  align-items: center;
+  margin: 15px;
+  min-width: 45%; /* Adjust the minimum width for responsiveness */
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px 0px rgba(152, 154, 155, 0.75);
+  text-align: center;
+  font-size: 24px;
+  padding: 15px;
+  font-weight: 600;
+  color: #fff;
+}
+
+li a {
+  text-decoration: none;
+  color: #06b8ee;
+}
+
+li:hover {
+  box-shadow: 0 0 10px 0 rgba(6, 133, 236, 0.75);
+}
+
+a {
+  text-decoration: none;
+  color: #436fe6;
+}
+
+.center-text {
+  text-align: center;
+  margin-top: 45px;
+  color: #fff;
+}
+
+.container__content__heading,
+.container__content__para,
+.container__content__h2 {
+  text-align: center;
+  font-size: 45px;
+  color: #ffffff;
+}
+
+img {
+  max-width: 100%; /* Make images responsive within their containers */
+  max-height: 40vh;
+  object-fit: contain;
+  padding: 5px;
+  margin: 5px;
+}
+
+@media (min-width: 768px) {
   img {
-    max-width: 100%; /* Make images responsive within their containers */
-    max-height: 40vh;
-    object-fit: contain;
-    padding: 5px;
-    margin: 5px;
+    max-width: 400px; /* Adjust the max-width for larger screens */
   }
+}
   
-  @media (min-width: 768px) {
-    img {
-      max-width: 400px; /* Adjust the max-width for larger screens */
-    }
-  }
   
\ No newline at end of file
