modified changes

package-lock.json

@@ -16,12 +16,10 @@
         "tesseract.js": "^6.0.1"
       },
       "devDependencies": {
-        "@tailwindcss/postcss": "^4",
         "@types/axios": "^0.9.36",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
-        "tailwindcss": "^4",
         "typescript": "^5"
       }
     },

package.json

@@ -17,12 +17,10 @@
     "tesseract.js": "^6.0.1"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
     "@types/axios": "^0.9.36",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "tailwindcss": "^4",
     "typescript": "^5"
   }
 }

pages/components/slideviewer.tsx

@@ -51,7 +51,7 @@ export default function SlideViewer({
 
   useEffect(() => {
     resetAudio();
-    setShowVideo(false); // Reset video when slide changes
+    setShowVideo(false);
     if (audioRef.current) {
       audioRef.current.load();
       audioRef.current.play().catch(() => {});

pages/editor.tsx

@@ -86,7 +86,7 @@ const EditorPage = () => {
 
   const handleInsert = (index: number, before = false) => {
     const newSlide: SlideFormData = {
-      slideNumber: 0, // will be reset
+      slideNumber: 0,
       imageUrl: '',
       audioUrl: null,
       videoUrl: null
@@ -112,7 +112,6 @@ const EditorPage = () => {
   await Promise.all(slides.map(async (slide, index) => {
     const slideIndex = index + 1;
 
-    // Slide image
     if (slide.newImageFile) {
       formData.append('slide', new File(
         [slide.newImageFile],
@@ -129,7 +128,6 @@ const EditorPage = () => {
       ));
     }
 
-    // Audio
     if (slide.newAudioFile) {
       formData.append('audio', new File(
         [slide.newAudioFile],
@@ -146,7 +144,6 @@ const EditorPage = () => {
       ));
     }
 
-    // Video
     if (slide.newVideoFile) {
       formData.append('video', new File(
         [slide.newVideoFile],
@@ -169,7 +166,6 @@ const EditorPage = () => {
     if ((res.data as any).success) {
       alert("Slides saved successfully");
 
-      // ✅ Update localStorage after successful save
       const updatedSlides = slides.map((slide, index) => {
         const slideNumber = index + 1;
         const baseName = `slide${slideNumber}`;

pages/index.tsx

@@ -21,19 +21,16 @@ export default function Home() {
       return;
     }
 
-
     const formData = new FormData();
     formData.append('pdf', pdfFile);
     formData.append('zip', zipFile);
 
-
     try {
       setLoading(true);
       const res = await axios.post<Slide[]>('http://localhost:3001/upload', formData, {
         headers: { 'Content-Type': 'multipart/form-data' },
-        timeout: 60000, // 60 seconds for large files
+        timeout: 60000,
       });
-      console.log(res.data,'res.data')
       localStorage.setItem('slides', JSON.stringify(res.data));
       router.push('/player');
     } catch (err) {
@@ -45,65 +42,102 @@ export default function Home() {
   };
 
   return (
-    <div style={styles.container}>
-      <h1 style={styles.heading}>Upload Slides & Media</h1>
+    <div style={styles.page}>
+      <div style={styles.card}>
+        <h1 style={styles.heading}>📤 Upload Slides & Media</h1>
 
-      <div style={styles.formGroup}>
-        <label style={styles.label}>Upload PDF file:</label>
-        <input type="file" accept=".pdf" onChange={(e) => setPdfFile(e.target.files?.[0] || null)} />
-      </div>
+        <div style={styles.formGroup}>
+          <label style={styles.label}>Upload PDF file</label>
+          <input
+            type="file"
+            accept=".pdf"
+            style={styles.input}
+            onChange={(e) => setPdfFile(e.target.files?.[0] || null)}
+          />
+        </div>
 
+        <div style={styles.formGroup}>
+          <label style={styles.label}>Upload Media ZIP (mp3/mp4)</label>
+          <input
+            type="file"
+            accept=".zip"
+            style={styles.input}
+            onChange={(e) => setZipFile(e.target.files?.[0] || null)}
+          />
+        </div>
 
-      <div style={styles.formGroup}>
-        <label style={styles.label}>Upload Media ZIP (mp3/mp4):</label>
-        <input type="file" accept=".zip" onChange={(e) => setZipFile(e.target.files?.[0] || null)} />
+        <button
+          onClick={handleUpload}
+          style={{
+            ...styles.uploadButton,
+            ...(loading ? styles.disabledButton : {}),
+          }}
+          disabled={loading}
+        >
+          {loading ? 'Uploading...' : 'Start Upload'}
+        </button>
       </div>
-
-      <button onClick={handleUpload} style={styles.uploadButton} disabled={loading}>
-        {loading ? 'Uploading...' : 'Start Upload'}
-      </button>
     </div>
   );
 }
 
 const styles: { [key: string]: React.CSSProperties } = {
-  container: {
-    padding: '2rem',
-    background: '#f9fafb',
+  page: {
+    backgroundColor: '#f3f4f6',
     minHeight: '100vh',
     display: 'flex',
-    flexDirection: 'column',
+    justifyContent: 'center',
     alignItems: 'center',
-    fontFamily: 'Segoe UI, sans-serif',
+    padding: '1rem',
+  },
+  card: {
+    backgroundColor: '#ffffff',
+    padding: '2rem 3rem',
+    borderRadius: '1rem',
+    boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)',
+    maxWidth: '450px',
+    width: '100%',
+    textAlign: 'center',
   },
   heading: {
-    fontSize: '2.5rem',
-    color: '#1f2937',
+    fontSize: '2rem',
     marginBottom: '2rem',
-    textAlign: 'center',
+    color: '#111827',
+    fontWeight: 600,
   },
   formGroup: {
     marginBottom: '1.5rem',
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    maxWidth: '400px',
+    textAlign: 'left',
   },
   label: {
+    display: 'block',
     marginBottom: '0.5rem',
-    fontSize: '1rem',
     color: '#374151',
+    fontSize: '1rem',
+    fontWeight: 500,
+  },
+  input: {
+    width: '100%',
+    padding: '0.5rem',
+    border: '1px solid #d1d5db',
+    borderRadius: '0.5rem',
+    fontSize: '1rem',
+    backgroundColor: '#f9fafb',
   },
   uploadButton: {
-    marginTop: '1rem',
-    padding: '0.75rem 2rem',
+    width: '100%',
+    padding: '0.75rem',
     fontSize: '1rem',
     backgroundColor: '#2563eb',
     color: '#ffffff',
     border: 'none',
-    borderRadius: 8,
-    cursor: 'pointer',
+    borderRadius: '0.5rem',
     fontWeight: 'bold',
-    transition: 'background-color 0.2s ease-in-out',
+    cursor: 'pointer',
+    transition: 'all 0.3s ease',
+  },
+  disabledButton: {
+    backgroundColor: '#93c5fd',
+    cursor: 'not-allowed',
   },
 };

pages/player.tsx

@@ -36,13 +36,11 @@ export default function Player() {
       if (Array.isArray(parsedSlides) && parsedSlides.length > 0) {
         setSlides(parsedSlides);
 
-        // Extract quiz slide numbers
         const quizSlides: number[] = parsedSlides
           .filter((s: Slide) => s.imageUrl.toLowerCase().includes('quiz'))
           .map((s: Slide) => s.slideNumber)
           .sort((a, b) => a - b);
 
-        // Build redirect map
         const redirectMap: { [key: number]: number } = {};
         for (let i = 0; i < quizSlides.length; i++) {
           const currentQuiz = quizSlides[i];

utils/api.ts

@@ -2,7 +2,7 @@
 import axios from 'axios';
 
 const API = axios.create({
-  baseURL: 'http://localhost:3001', // <-- Your backend URL here
+  baseURL: 'http://localhost:3001',
   timeout: 80000,
 });