Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tools | Study Companion</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| body { | |
| background-color: #0E0E12; | |
| color: white; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(8px); | |
| border-radius: 16px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .tool-card { | |
| transition: all 0.3s ease; | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-8px) scale(1.02); | |
| box-shadow: 0 10px 25px rgba(92, 108, 255, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen font-sans"> | |
| <header class="glass-card p-4 mx-4 mt-4 rounded-xl flex justify-between items-center"> | |
| <a href="index.html" class="text-xl font-bold">StudyCompanion</a> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">👤</div> | |
| </header> | |
| <main class="max-w-6xl mx-auto py-12 px-4"> | |
| <div class="text-center mb-8"> | |
| <a href="calculator.html" class="inline-block bg-primary/20 text-white px-6 py-3 rounded-full font-medium hover:bg-primary/30 transition-all">Quick Access: Calculator Tool</a> | |
| </div> | |
| <h1 class="text-3xl font-bold mb-8">Student Tools</h1> | |
| <section class="mb-12"> | |
| <h2 class="text-xl font-bold mb-6">PDF Tools</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"> | |
| <a href="#" class="tool-card glass-card p-6 rounded-xl block hover:border-primary/50 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,#5C6CFF_0%,transparent_70%)] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div> | |
| <div class="text-3xl mb-4 transform transition-transform group-hover:scale-110 duration-300">📄</div> | |
| <h3 class="text-lg font-bold mb-2 transform transition-transform group-hover:scale-105 duration-300">PDF Merge</h3> | |
| <p class="text-gray-300 text-sm">Combine multiple PDFs into one</p> | |
| </a> | |
| <a href="#" class="tool-card glass-card p-6 rounded-xl block hover:border-primary/50 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,#5C6CFF_0%,transparent_70%)] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div> | |
| <div class="text-3xl mb-4 transform transition-transform group-hover:scale-110 duration-300">✂️</div> | |
| <h3 class="text-lg font-bold mb-2 transform transition-transform group-hover:scale-105 duration-300">PDF Split</h3> | |
| <p class="text-gray-300 text-sm">Split PDFs into multiple documents</p> | |
| </a> | |
| <a href="#" class="tool-card glass-card p-6 rounded-xl block hover:border-primary/50 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,#5C6CFF_0%,transparent_70%)] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div> | |
| <div class="text-3xl mb-4 transform transition-transform group-hover:scale-110 duration-300">📦</div> | |
| <h3 class="text-lg font-bold mb-2 transform transition-transform group-hover:scale-105 duration-300">PDF Compress</h3> | |
| <p class="text-gray-300 text-sm">Reduce PDF file size</p> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="mb-12"> | |
| <h2 class="text-xl font-bold mb-6">Image Tools</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"> | |
| <a href="#" class="tool-card glass-card p-6 rounded-xl block hover:border-primary/50 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,#00D4A6_0%,transparent_70%)] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div> | |
| <div class="text-3xl mb-4 transform transition-transform group-hover:scale-110 duration-300">🖼️</div> | |
| <h3 class="text-lg font-bold mb-2 transform transition-transform group-hover:scale-105 duration-300">Image Resize</h3> | |
| <p class="text-gray-300 text-sm">Change dimensions of your images</p> | |
| </a> | |
| <a href="#" class="tool-card glass-card p-6 rounded-xl block hover:border-primary/50 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,#00D4A6_0%,transparent_70%)] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div> | |
| <div class="text-3xl mb-4 transform transition-transform group-hover:scale-110 duration-300">🔄</div> | |
| <h3 class="text-lg font-bold mb-2 transform transition-transform group-hover:scale-105 duration-300">Image Convert</h3> | |
| <p class="text-gray-300 text-sm">Convert between image formats</p> | |
| </a> | |
| <a href="#" class="tool-card glass-card p-6 rounded-xl block hover:border-primary/50 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,#00D4A6_0%,transparent_70%)] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div> | |
| <div class="text-3xl mb-4 transform transition-transform group-hover:scale-110 duration-300">🧹</div> | |
| <h3 class="text-lg font-bold mb-2 transform transition-transform group-hover:scale-105 duration-300">Background Remove</h3> | |
| <p class="text-gray-300 text-sm">Remove backgrounds from images</p> | |
| </a> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="text-xl font-bold mb-6">Student Utilities</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"> | |
| <a href="#" class="tool-card glass-card p-6 rounded-xl block hover:border-primary/50 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,#5C6CFF_0%,transparent_70%)] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div> | |
| <div class="text-3xl mb-4 transform transition-transform group-hover:scale-110 duration-300">🧮</div> | |
| <h3 class="text-lg font-bold mb-2 transform transition-transform group-hover:scale-105 duration-300">CGPA Calculator</h3> | |
| <p class="text-gray-300 text-sm">Calculate your GPA/CGPA</p> | |
| </a> | |
| <a href="#" class="tool-card glass-card p-6 rounded-xl block hover:border-primary/50 relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,#5C6CFF_0%,transparent_70%)] opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div> | |
| <div class="text-3xl mb-4 transform transition-transform group-hover:scale-110 duration-300">📏</div> | |
| <h3 class="text-lg font-bold mb-2 transform transition-transform group-hover:scale-105 duration-300">Unit Converter</h3> | |
| <p class="text-gray-300 text-sm">Convert between measurement units</p> | |
| </a> | |
| </div> | |
| </section> | |
| </main> | |
| </body> | |
| </html> |