| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>PRISM Project</title>
|
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
| <style>
|
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
|
|
| body {
|
| font-family: 'Poppins', sans-serif;
|
| min-height: 100vh;
|
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| margin: 0;
|
| color: white;
|
| overflow-x: hidden;
|
| }
|
|
|
| .container {
|
| position: relative;
|
| z-index: 1;
|
| width: 100%;
|
| max-width: 1000px;
|
| margin: 0 auto;
|
| padding: 2rem;
|
| }
|
|
|
| .glass-card {
|
| background: rgba(255, 255, 255, 0.1);
|
| backdrop-filter: blur(10px);
|
| border-radius: 20px;
|
| padding: 4rem;
|
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
| border: 1px solid rgba(255, 255, 255, 0.18);
|
| transform: translateY(0);
|
| transition: transform 0.3s ease;
|
| text-align: center;
|
| }
|
|
|
| .glass-card:hover {
|
| transform: translateY(-5px);
|
| }
|
|
|
| .btn-container {
|
| display: flex;
|
| justify-content: space-between;
|
| padding: 0 4rem;
|
| margin-top: 3rem;
|
| }
|
|
|
| .btn {
|
| position: relative;
|
| padding: 1rem 2.5rem;
|
| font-size: 1.1rem;
|
| font-weight: 500;
|
| border-radius: 12px;
|
| cursor: pointer;
|
| transition: all 0.3s ease;
|
| overflow: hidden;
|
| border: none;
|
| min-width: 200px;
|
| }
|
|
|
| .btn::before {
|
| content: '';
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| background: rgba(255, 255, 255, 0.1);
|
| transform: translateX(-100%);
|
| transition: transform 0.3s ease;
|
| }
|
|
|
| .btn:hover::before {
|
| transform: translateX(0);
|
| }
|
|
|
| .btn:hover {
|
| transform: translateY(-2px);
|
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
| }
|
|
|
| .btn-single {
|
| background: linear-gradient(45deg, #4f46e5, #7c3aed);
|
| color: white;
|
| }
|
|
|
| .btn-multiple {
|
| background: linear-gradient(45deg, #10b981, #059669);
|
| color: white;
|
| }
|
|
|
| .animated-bg {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| z-index: 0;
|
| overflow: hidden;
|
| }
|
|
|
| .floating-circle {
|
| position: absolute;
|
| border-radius: 50%;
|
| opacity: 0.1;
|
| }
|
|
|
| .circle1 {
|
| animation: moveCircle1 15s ease-in-out infinite;
|
| }
|
|
|
| .circle2 {
|
| animation: moveCircle2 20s ease-in-out infinite;
|
| }
|
|
|
| .circle3 {
|
| animation: moveCircle3 25s ease-in-out infinite;
|
| }
|
|
|
| @keyframes moveCircle1 {
|
| 0% { transform: translate(-50%, -50%); }
|
| 50% { transform: translate(-40%, -40%); }
|
| 100% { transform: translate(-50%, -50%); }
|
| }
|
|
|
| @keyframes moveCircle2 {
|
| 0% { transform: translate(-50%, -50%); }
|
| 50% { transform: translate(-60%, -40%); }
|
| 100% { transform: translate(-50%, -50%); }
|
| }
|
|
|
| @keyframes moveCircle3 {
|
| 0% { transform: translate(-50%, -50%); }
|
| 50% { transform: translate(-40%, -60%); }
|
| 100% { transform: translate(-50%, -50%); }
|
| }
|
|
|
| .title-gradient {
|
| background: linear-gradient(to right, #fff, #a5b4fc);
|
| -webkit-background-clip: text;
|
| background-clip: text;
|
| color: transparent;
|
| font-size: 3rem;
|
| font-weight: 900;
|
| letter-spacing: 1px;
|
| text-align: center;
|
| margin-bottom: 1.5rem;
|
| }
|
|
|
| .subtitle {
|
| color: #94a3b8;
|
| font-size: 1.1rem;
|
| line-height: 1.6;
|
| max-width: 600px;
|
| margin: 0.5rem auto;
|
| text-align: center;
|
| }
|
|
|
| @media (max-width: 768px) {
|
| .btn-container {
|
| flex-direction: column;
|
| align-items: center;
|
| gap: 1rem;
|
| padding: 0 1rem;
|
| }
|
|
|
| .glass-card {
|
| padding: 2rem;
|
| }
|
|
|
| .btn {
|
| width: 100%;
|
| max-width: 300px;
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="animated-bg">
|
| <div class="floating-circle circle1" style="width: 300px; height: 300px; background: #4f46e5; left: 50%; top: 50%;"></div>
|
| <div class="floating-circle circle2" style="width: 200px; height: 200px; background: #10b981; left: 50%; top: 50%;"></div>
|
| <div class="floating-circle circle3" style="width: 150px; height: 150px; background: #7c3aed; left: 50%; top: 50%;"></div>
|
| </div>
|
|
|
| <div class="container animate_animated animate_fadeIn">
|
| <div class="glass-card">
|
| <h1 class="title-gradient animate_animated animate_fadeInDown">Lock Screen Classifier</h1>
|
| <p class="subtitle animate_animated animatefadeIn animate_delay-1s">
|
| Welcome to our <strong>PRISM</strong> Project
|
| </p>
|
| <p class="subtitle animate_animated animatefadeIn animate_delay-1s">
|
| Let's classify the images with Proper Reasoning for doing so...
|
| </p>
|
| <div class="btn-container animate_animated animatefadeInUp animate_delay-2s">
|
| <button class="btn btn-single" onclick="window.open('/single', '_blank')">
|
| Single Image
|
| </button>
|
| <button class="btn btn-multiple" onclick="window.open('/multiple', '_blank')">
|
| Multiple Images
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| </body>
|
| </html> |
