Update README.md for clearer virtual environment activation instructions; enhance UI structure and styling in page.tsx

anaol216 · anaol216 · commit 711824a13e30 · 2025-05-15T23:41:21.000+03:00
diff --git a/README.md b/README.md
@@ -34,7 +34,10 @@ cd backend
 
 # Create virtual environment
 python -m venv venv
-source venv/bin/activate  # On Windows: venv\Scripts\activate
+# On Windows: 
+venv\Scripts\activate 
+# on macos 
+source venv/bin/activate  
 
 # Install dependencies
 pip install -r ../requirements.txt
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -1,4 +1,3 @@
-// pages/index.tsx
 "use client";
 
 import React, { useState } from 'react';
@@ -30,40 +29,50 @@ export default function Home() {
   };
 
   return (
-    <>
-    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center px-4" style={{ backgroundImage: "url('/background.jpg'), backgroundSize: 'cover', backgroundPosition: 'center'" }}>
-      <div className="absolute inset-0 bg-black opacity-50"></div>
-      <h1 className="text-3xl font-bold mb-6">&#127916; Movie Recommender</h1>
+    <div
+      className="min-h-screen bg-gray-900 text-white px-4 relative flex items-center justify-center"
+      style={{
+        backgroundImage: "url('/background.jpg')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      {/* &#128306; Background Overlay */}
+      <div className="absolute inset-0 bg-black opacity-50 z-0" />
 
-      <input
-        type="text"
-        placeholder="Enter Video ID"
-        value={selectedId}
-        onChange={(e) => setSelectedId(e.target.value)}
-        className="p-2 rounded text-black w-64 mb-4 bg-gray-200"
-      />
+      {/* &#128307; Foreground UI */}
+      <div className="z-10 flex flex-col items-center">
+        <h1 className="text-3xl font-bold mb-6">&#127916; Movie Recommender</h1>
 
-      <button
-        onClick={handleFetch}
-        className="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded"
-      >
-        &#128269; Show Recommendations
-      </button>
+        <input
+          type="text"
+          placeholder="Enter Video ID"
+          value={selectedId}
+          onChange={(e) => setSelectedId(e.target.value)}
+          className="p-2 rounded text-black w-64 mb-4 bg-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
 
-      {loading && <p className="mt-4">Loading...</p>}
+        <button
+          onClick={handleFetch}
+          className="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded transition"
+        >
+          &#128269; Show Recommendations
+        </button>
 
-      <div className="mt-8 w-full max-w-xl">
-        {recommendations.map((rec, i) => (
-          <div key={i} className="bg-gray-800 rounded p-4 mb-4 shadow">
-            <h2 className="text-xl font-semibold mb-2">&#127916; Recommendation {i + 1}</h2>
-            <p><strong>Video ID:</strong> {rec.video_id}</p>
-            <p><strong>Video Type:</strong> {rec.video_type}</p>
-            <p><strong>Music Type:</strong> {rec.music_type}</p>
-            <p><strong>Tag:</strong> {rec.tag}</p>
-          </div>
-        ))}
+        {loading && <p className="mt-4">Loading...</p>}
+
+        <div className="mt-8 w-full max-w-xl">
+          {recommendations.map((rec, i) => (
+            <div key={i} className="bg-gray-800 rounded p-4 mb-4 shadow">
+              <h2 className="text-xl font-semibold mb-2">&#127916; Recommendation {i + 1}</h2>
+              <p><strong>Video ID:</strong> {rec.video_id}</p>
+              <p><strong>Video Type:</strong> {rec.video_type}</p>
+              <p><strong>Music Type:</strong> {rec.music_type}</p>
+              <p><strong>Tag:</strong> {rec.tag}</p>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
-    </>
   );
 }
