Spaces:

Elishaaa321
/

Scholar_GPT

Running

App Files Files Community

Elishaaa321 commited on Jul 26, 2025

Commit

fa1ca11

verified ·

1 Parent(s): 60b9cb5

Upload 3 files

Browse files

Files changed (3) hide show

auth.html +35 -0
index.html +195 -19
script.js +46 -0

auth.html ADDED Viewed

	@@ -0,0 +1,35 @@

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Login / Signup – ScholarGPT</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-blue-100 to-purple-200 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
+  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-2xl p-8 w-full max-w-md">
+    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">Welcome Back</h2>
+    <form class="space-y-4">
+      <input type="email" placeholder="Email" class="w-full px-4 py-2 rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none" />
+      <input type="password" placeholder="Password" class="w-full px-4 py-2 rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none" />
+      <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded-xl transition">
+        Login
+      </button>
+    </form>
+    <p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
+      Don't have an account?
+      <a href="#" onclick="toggleSignup()" class="text-blue-600 dark:text-blue-400 hover:underline">Sign Up</a>
+    </p>
+  </div>
+  <script>
+    function toggleSignup() {
+      document.querySelector("h2").textContent = "Create Account";
+      const btn = document.querySelector("button");
+      btn.textContent = "Sign Up";
+    }
+  </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,195 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ScholarGPT</title>
+    <script>
+      tailwind.config = { darkMode: 'class' };
+    </script>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-gradient-to-r from-blue-100 via-white to-purple-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
+    <!-- Navbar -->
+    <header class="flex items-center justify-between px-6 py-4 shadow-md bg-gradient-to-br from-blue-100 via-purple-50 to-pink-100 dark:from-gray-900 dark:via-indigo-900 dark:to-purple-900 transition-colors duration-500">
+      <div class="flex items-center space-x-2">
+        <div class="bg-blue-600 text-white p-2 rounded-full">
+          🎓
+        </div>
+        <h1 class="text-xl font-semibold">ScholarGPT</h1>
+      </div>
+      <nav class="hidden md:flex items-center space-x-6">
+        <a href="#" class="hover:text-blue-600 open-user-modal">Dashboard</a>
+        <a href="#" class="hover:text-blue-600 open-user-modal">Opportunities</a>
+        <a href="#" class="hover:text-blue-600 open-user-modal">University Matcher</a>
+      </nav>
+      <div class="flex items-center space-x-4">
+        <a href="auth.html" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl">
+            Get Started
+          </a>
+      </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="relative min-h-screen flex items-center justify-center px-4 py-8 bg-gradient-to-br from-blue-100 via-purple-50 to-pink-100 dark:from-gray-900 dark:via-indigo-900 dark:to-purple-900 transition-colors duration-500">
+      <div class="container mx-auto flex flex-col-reverse md:flex-row items-center justify-between gap-12 md:gap-0">
+        <!-- Left: Text Content -->
+        <div class="w-full md:w-1/2 flex flex-col items-start md:items-start text-left fade-in">
+          <span class="inline-block mb-4 px-4 py-1 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200 text-sm font-medium shadow">AI-Powered Educational Platform</span>
+          <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-4 leading-tight tracking-tight bg-gradient-to-r from-blue-700 via-purple-700 to-pink-600 bg-clip-text text-transparent drop-shadow-lg">Transform Your Academic Journey</h1>
+          <p class="text-lg md:text-xl text-gray-700 dark:text-gray-200 mb-8 font-medium max-w-lg">ScholarGPT empowers students with <span class="text-blue-600 dark:text-blue-300 font-semibold">AI-driven insights</span> for university admissions, academic excellence, and career opportunities worldwide.</p>
+          <div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
+            <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-semibold shadow transition-all open-user-modal">Get Started Free →</button>
+            <button class="border border-gray-400 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 px-6 py-3 rounded-xl font-semibold shadow transition-all">Explore Opportunities</button>
+          </div>
+        </div>
+        <!-- Right: Illustration -->
+        <div class="w-full md:w-1/2 flex justify-center items-center mb-8 md:mb-0 fade-in">
+          <div class="relative">
+            <svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg" class="drop-shadow-2xl">
+              <circle cx="160" cy="160" r="140" fill="url(#paint0_radial)" fill-opacity="0.7"/>
+              <ellipse cx="160" cy="180" rx="100" ry="60" fill="#fff" fill-opacity="0.15"/>
+              <g>
+                <rect x="100" y="120" width="120" height="80" rx="20" fill="#6366f1" fill-opacity="0.9"/>
+                <rect x="120" y="140" width="80" height="40" rx="10" fill="#fff" fill-opacity="0.95"/>
+                <circle cx="160" cy="160" r="12" fill="#6366f1"/>
+                <rect x="150" y="170" width="20" height="8" rx="4" fill="#6366f1" fill-opacity="0.7"/>
+              </g>
+              <defs>
+                <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientTransform="translate(160 160) rotate(90) scale(140)" gradientUnits="userSpaceOnUse">
+                  <stop stop-color="#a5b4fc"/>
+                  <stop offset="1" stop-color="#c4b5fd"/>
+                </radialGradient>
+              </defs>
+            </svg>
+            <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 bg-white/80 dark:bg-gray-900/80 px-4 py-2 rounded-full shadow text-blue-700 dark:text-blue-200 font-semibold text-sm">Your AI Academic Assistant</div>
+          </div>
+        </div>
+      </div>
+      <style>
+        .fade-in {
+          opacity: 0;
+          transform: translateY(30px);
+          animation: fadeInUp 1.2s cubic-bezier(.23,1.01,.32,1) 0.2s forwards;
+        }
+        @keyframes fadeInUp {
+          to {
+            opacity: 1;
+            transform: none;
+          }
+        }
+      </style>
+    </section>
+    <!-- User Info Modal -->
+    <div id="user-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
+      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 w-full max-w-md relative">
+        <button id="close-modal" class="absolute top-2 right-2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-2xl">&times;</button>
+        <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">Welcome to ScholarGPT</h3>
+        <form id="user-info-form" class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium mb-1" for="name">Your Name</label>
+            <input id="name" name="name" type="text" required class="w-full px-3 py-2 rounded border border-gray-300 dark:bg-gray-800 dark:border-gray-700" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1" for="qualification">Qualification</label>
+            <input id="qualification" name="qualification" type="text" required class="w-full px-3 py-2 rounded border border-gray-300 dark:bg-gray-800 dark:border-gray-700" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1" for="ielts">IELTS Score</label>
+            <input id="ielts" name="ielts" type="number" step="0.1" min="0" max="9" required class="w-full px-3 py-2 rounded border border-gray-300 dark:bg-gray-800 dark:border-gray-700" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1" for="cgpa">CGPA</label>
+            <input id="cgpa" name="cgpa" type="number" step="0.01" min="0" max="4" required class="w-full px-3 py-2 rounded border border-gray-300 dark:bg-gray-800 dark:border-gray-700" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1" for="interest">Area of Interest</label>
+            <input id="interest" name="interest" type="text" required class="w-full px-3 py-2 rounded border border-gray-300 dark:bg-gray-800 dark:border-gray-700" />
+          </div>
+          <div class="flex">
+            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-semibold w-full">Submit</button>
+          </div>
+        </form>
+      </div>
+    </div>
+    <!-- Features Section -->
+<section class="px-6 py-20 bg-gradient-to-br from-blue-100 via-purple-50 to-pink-100 dark:from-gray-900 dark:via-indigo-900 dark:to-purple-900 transition-colors duration-500">
+    <div class="text-center mb-12">
+      <span class="text-sm font-semibold text-purple-700 dark:text-purple-300">⚡ Powerful Features</span>
+      <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4 text-blue-900 dark:text-blue-100">Everything You Need to Succeed</h2>
+      <p class="text-gray-700 dark:text-gray-200 max-w-2xl mx-auto">
+        Comprehensive AI-powered tools designed to guide you through every step of your academic journey.
+      </p>
+    </div>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
+      <!-- Card 1 -->
+      <div class="bg-white/80 dark:bg-gray-900/80 p-6 rounded-2xl shadow hover:shadow-lg transition border border-white/40 dark:border-gray-800/60">
+        <div class="text-3xl mb-4 text-purple-600">🧠</div>
+        <h3 class="text-xl font-semibold mb-2 dark:text-white">AI-Powered Assistance</h3>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Get personalized academic guidance with advanced AI that understands your goals</p>
+        <a href="#" class="text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline">Learn More →</a>
+      </div>
+      <!-- Card 2 -->
+      <div class="bg-white/80 dark:bg-gray-900/80 p-6 rounded-2xl shadow hover:shadow-lg transition border border-white/40 dark:border-gray-800/60">
+        <div class="text-3xl mb-4 text-pink-600">🌐</div>
+        <h3 class="text-xl font-semibold mb-2 dark:text-white">Global Opportunities</h3>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Discover hackathons, competitions, and scholarships worldwide</p>
+        <a href="#" class="text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline">Learn More →</a>
+      </div>
+      <!-- Card 3 -->
+      <div class="bg-white/80 dark:bg-gray-900/80 p-6 rounded-2xl shadow hover:shadow-lg transition border border-white/40 dark:border-gray-800/60">
+        <div class="text-3xl mb-4 text-green-600">🎓</div>
+        <h3 class="text-xl font-semibold mb-2 dark:text-white">University Matcher</h3>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Find the perfect universities based on your profile and preferences</p>
+        <a href="#" class="text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline">Learn More →</a>
+      </div>
+      <!-- Card 4 -->
+      <div class="bg-white/80 dark:bg-gray-900/80 p-6 rounded-2xl shadow hover:shadow-lg transition border border-white/40 dark:border-gray-800/60">
+        <div class="text-3xl mb-4 text-sky-600">🔗</div>
+        <h3 class="text-xl font-semibold mb-2 dark:text-white">LinkedIn Evaluator</h3>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Optimize your LinkedIn profile for maximum academic and career impact</p>
+        <a href="#" class="text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline">Learn More →</a>
+      </div>
+      <!-- Card 5 -->
+      <div class="bg-white/80 dark:bg-gray-900/80 p-6 rounded-2xl shadow hover:shadow-lg transition border border-white/40 dark:border-gray-800/60">
+        <div class="text-3xl mb-4 text-orange-500">📊</div>
+        <h3 class="text-xl font-semibold mb-2 dark:text-white">Academic Analyzer</h3>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Analyze your IELTS scores, CGPA, and get improvement suggestions</p>
+        <a href="#" class="text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline">Learn More →</a>
+      </div>
+      <!-- Card 6 -->
+      <div class="bg-white/80 dark:bg-gray-900/80 p-6 rounded-2xl shadow hover:shadow-lg transition border border-white/40 dark:border-gray-800/60">
+        <div class="text-3xl mb-4 text-green-500">📈</div>
+        <h3 class="text-xl font-semibold mb-2 dark:text-white">Progress Tracker</h3>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Track your academic journey with interactive timelines and milestones</p>
+        <a href="#" class="text-sm font-semibold text-blue-600 dark:text-blue-400 hover:underline">Learn More →</a>
+      </div>
+    </div>
+  </section>
+  <!-- Call-to-Action Section -->
+  <section class="flex flex-col items-center justify-center py-20 px-4 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 dark:from-gray-900 dark:via-indigo-900 dark:to-purple-900 transition-colors duration-500">
+    <div class="flex flex-col items-center max-w-xl w-full mx-auto">
+      <div class="mb-6">
+        <svg width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="text-blue-500"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 20h9M12 4v16m0 0H3m9 0V4"/></svg>
+      </div>
+      <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-4 text-center">Ready to Accelerate Your Success?</h2>
+      <p class="text-lg text-gray-600 dark:text-gray-300 mb-8 text-center">Join thousands of students who are already using ScholarGPT to achieve their academic goals and unlock opportunities worldwide.</p>
+      <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-8 py-3 rounded-xl shadow-md transition-all text-lg">Start Your Journey Today <span aria-hidden="true">→</span></a>
+    </div>
+  </section>
+  <script src="script.js"></script>
+  </body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,46 @@

+window.addEventListener('DOMContentLoaded', function () {
+  // Modal open/close logic (event delegation for reliability)
+  const modal = document.getElementById('user-modal');
+  const closeModalBtn = document.getElementById('close-modal');
+  document.body.addEventListener('click', function(e) {
+    const target = e.target.closest('.open-user-modal');
+    if (target) {
+      e.preventDefault();
+      if (modal) modal.classList.remove('hidden');
+    }
+  });
+  if (closeModalBtn) {
+    closeModalBtn.addEventListener('click', function() {
+      modal.classList.add('hidden');
+    });
+  }
+  // Close modal when clicking outside the modal content
+  if (modal) {
+    modal.addEventListener('click', function(e) {
+      if (e.target === modal) {
+        modal.classList.add('hidden');
+      }
+    });
+  }
+  // Handle user info form submission (profile creation in frontend)
+  const userInfoForm = document.getElementById('user-info-form');
+  if (userInfoForm) {
+    userInfoForm.addEventListener('submit', function(e) {
+      e.preventDefault();
+      const profile = {
+        name: userInfoForm.name.value,
+        qualification: userInfoForm.qualification.value,
+        ielts: userInfoForm.ielts.value,
+        cgpa: userInfoForm.cgpa.value,
+        interest: userInfoForm.interest.value
+      };
+      localStorage.setItem('scholargpt_profile', JSON.stringify(profile));
+      if (modal) modal.classList.add('hidden');
+      // Optionally, show a toast or redirect here
+    });
+  }
+});