Spaces:

AgentVikram
/

mindmeld-summaraizer

Running

App Files Files Community

AgentVikram commited on Nov 18, 2025

Commit

c487bfb

verified ·

1 Parent(s): d576558

this is too generic. I want more futuristic, minimal and super cool

Browse files

Files changed (5) hide show

components/neon-button.js +58 -0
components/podcast-player.js +24 -6
index.html +8 -10
script.js +68 -3
style.css +47 -2

components/neon-button.js ADDED Viewed

	@@ -0,0 +1,58 @@

+class NeonButton extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        button {
+          position: relative;
+          background: transparent;
+          color: var(--neon-primary);
+          border: 2px solid var(--neon-primary);
+          padding: 1rem 2.5rem;
+          font-size: 1rem;
+          font-weight: 500;
+          text-transform: uppercase;
+          letter-spacing: 0.1em;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          overflow: hidden;
+          z-index: 1;
+        }
+        button:hover {
+          color: var(--bg-dark);
+          box-shadow: 0 0 10px var(--neon-primary),
+                      0 0 20px var(--neon-primary),
+                      0 0 40px var(--neon-primary);
+        }
+        button::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -100%;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, var(--neon-primary), transparent);
+          transition: 0.5s;
+          z-index: -1;
+        }
+        button:hover::before {
+          left: 100%;
+        }
+        .icon {
+          margin-right: 0.5rem;
+          vertical-align: middle;
+        }
+      </style>
+      <button>
+        <i data-feather="${this.getAttribute('icon')}" class="icon"></i>
+        <slot></slot>
+      </button>
+    `;
+    feather.replace();
+  }
+}
+customElements.define('neon-button', NeonButton);

components/podcast-player.js CHANGED Viewed

@@ -4,13 +4,31 @@ class PodcastPlayer extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         .player-container {
-          background: linear-gradient(to right, #1a1a2e, #16213e);
-          border-radius: 12px;
-          padding: 1.5rem;
-          color: white;
-          margin-top: 2rem;
         }
-        .player-header {
           display: flex;
           align-items: center;
           margin-bottom: 1rem;

     this.shadowRoot.innerHTML = `
       <style>
         .player-container {
+          background: rgba(10, 10, 20, 0.8);
+          border: 1px solid rgba(0, 240, 255, 0.2);
+          border-radius: 0;
+          padding: 2rem;
+          color: var(--text-primary);
+          margin-top: 3rem;
+          backdrop-filter: blur(10px);
+          box-shadow: 0 0 30px rgba(0, 240, 255, 0.1);
+          position: relative;
+          overflow: hidden;
+        }
+        .player-container::before {
+          content: '';
+          position: absolute;
+          top: -2px;
+          left: -2px;
+          right: -2px;
+          bottom: -2px;
+          background: linear-gradient(45deg, var(--neon-primary), var(--neon-secondary));
+          z-index: -1;
+          filter: blur(5px);
+          opacity: 0.3;
         }
+.player-header {
           display: flex;
           align-items: center;
           margin-bottom: 1rem;

index.html CHANGED Viewed

@@ -30,13 +30,13 @@
 </head>
 <body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
     <custom-navbar></custom-navbar>
-    <main class="container mx-auto px-4 py-8">
-        <section class="text-center mb-16">
-            <h1 class="text-4xl md:text-6xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent mb-4">
-                MindMeld SummarAIzer
             </h1>
-            <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
                 Transform any content into digestible knowledge with AI-powered summaries, mind maps, and podcast-style audio overviews.
             </p>
 </section>
@@ -44,10 +44,8 @@
         <section class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-16">
             <div class="flex flex-col md:flex-row gap-4 mb-6">
                 <div class="relative flex-1">
-                    <button class="w-full py-3 px-4 rounded-lg bg-primary-500 hover:bg-primary-600 text-white font-medium transition">
-                        <i data-feather="upload" class="inline mr-2"></i> Upload File (PDF, DOCX, PPTX, MP3, MP4)
-                    </button>
-                    <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept=".pdf,.docx,.pptx,.mp3,.mp4,.jpg,.png" multiple>
                 </div>
                 <div class="flex-1">
                     <input type="text" placeholder="Enter YouTube/Article URL" class="w-full py-3 px-4 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 font-medium transition focus:outline-none focus:ring-2 focus:ring-primary-500">

 </head>
 <body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
     <custom-navbar></custom-navbar>
+    <div class="scanlines"></div>
+    <main class="container mx-auto px-4 py-12 max-w-7xl">
+        <section class="text-center mb-20">
+            <h1 class="text-5xl md:text-7xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent mb-6 animate-neon-glow">
+                <span class="inline-block animate-float">NEURAL</span> <span class="inline-block animate-float delay-100">SYNTHESIS</span>
             </h1>
+<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
                 Transform any content into digestible knowledge with AI-powered summaries, mind maps, and podcast-style audio overviews.
             </p>
 </section>
         <section class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-16">
             <div class="flex flex-col md:flex-row gap-4 mb-6">
                 <div class="relative flex-1">
+                <neon-button icon="upload">Upload File</neon-button>
+<input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept=".pdf,.docx,.pptx,.mp3,.mp4,.jpg,.png" multiple>
                 </div>
                 <div class="flex-1">
                     <input type="text" placeholder="Enter YouTube/Article URL" class="w-full py-3 px-4 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 font-medium transition focus:outline-none focus:ring-2 focus:ring-primary-500">

script.js CHANGED Viewed

@@ -1,4 +1,69 @@
-// Theme toggle functionality
 document.addEventListener('DOMContentLoaded', () => {
-    // Check for saved theme preference
-    if (localStorage.getItem('color

+// Futuristic cursor effect
 document.addEventListener('DOMContentLoaded', () => {
+  // Create custom cursor
+  const cursor = document.createElement('div');
+  cursor.style.position = 'fixed';
+  cursor.style.width = '20px';
+  cursor.style.height = '20px';
+  cursor.style.borderRadius = '50%';
+  cursor.style.backgroundColor = 'rgba(0, 240, 255, 0.5)';
+  cursor.style.pointerEvents = 'none';
+  cursor.style.zIndex = '9999';
+  cursor.style.transform = 'translate(-50%, -50%)';
+  cursor.style.mixBlendMode = 'exclusion';
+  cursor.style.transition = 'transform 0.1s ease, width 0.3s ease, height 0.3s ease';
+  document.body.appendChild(cursor);
+  // Create cursor trail
+  const trail = document.createElement('div');
+  trail.style.position = 'fixed';
+  trail.style.width = '40px';
+  trail.style.height = '40px';
+  trail.style.borderRadius = '50%';
+  trail.style.border = '1px solid rgba(0, 240, 255, 0.3)';
+  trail.style.pointerEvents = 'none';
+  trail.style.zIndex = '9998';
+  trail.style.transform = 'translate(-50%, -50%)';
+  trail.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
+  document.body.appendChild(trail);
+  document.addEventListener('mousemove', (e) => {
+    cursor.style.left = `${e.clientX}px`;
+    cursor.style.top = `${e.clientY}px`;
+    setTimeout(() => {
+      trail.style.left = `${e.clientX}px`;
+      trail.style.top = `${e.clientY}px`;
+      trail.style.opacity = '1';
+    }, 100);
+  });
+  document.addEventListener('mouseleave', () => {
+    trail.style.opacity = '0';
+  });
+  document.addEventListener('mousedown', () => {
+    cursor.style.width = '15px';
+    cursor.style.height = '15px';
+  });
+  document.addEventListener('mouseup', () => {
+    cursor.style.width = '20px';
+    cursor.style.height = '20px';
+  });
+  // Add hover effects
+  const hoverElements = document.querySelectorAll('a, button, [data-hover]');
+  hoverElements.forEach(el => {
+    el.addEventListener('mouseenter', () => {
+      cursor.style.width = '40px';
+      cursor.style.height = '40px';
+      cursor.style.backgroundColor = 'rgba(255, 0, 240, 0.7)';
+    });
+    el.addEventListener('mouseleave', () => {
+      cursor.style.width = '20px';
+      cursor.style.height = '20px';
+      cursor.style.backgroundColor = 'rgba(0, 240, 255, 0.5)';
+    });
+  });

style.css CHANGED Viewed

@@ -1,10 +1,55 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
-    font-family: 'Inter', sans-serif;
-    transition: background-color 0.3s ease;
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+  --neon-primary: #00f0ff;
+  --neon-secondary: #ff00f0;
+  --bg-dark: #0a0a12;
+  --bg-light: #f5f5ff;
+  --text-primary: #e0e0ff;
+  --text-secondary: #a0a0c0;
+}
 body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  background: var(--bg-dark);
+  color: var(--text-primary);
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+@keyframes neon-glow {
+  0%, 100% { text-shadow: 0 0 10px var(--neon-primary), 0 0 20px var(--neon-primary); }
+  50% { text-shadow: 0 0 5px var(--neon-primary), 0 0 10px var(--neon-primary); }
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+@keyframes scanline {
+  0% { background-position: 0 -100vh; }
+  100% { background-position: 0 100vh; }
 }
+.scanlines {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to bottom,
+    transparent 95%,
+    rgba(0, 240, 255, 0.05) 96%,
+    transparent 97%
+  );
+  background-size: 100% 8px;
+  pointer-events: none;
+  z-index: 9999;
+  animation: scanline 4s linear infinite;
+  mix-blend-mode: overlay;
+}
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;