Improve Navbar and homepage

Improve details page loading and tv series details
2025-12-20 04:33:54 +01:00 · 2025-11-05 22:48:50 +03:30 · 2025-11-05 21:56:08 +03:30
7 changed files with 437 additions and 365 deletions
--- a/package.json
+++ b/package.json
@@ -21,29 +21,29 @@
    "@tailwindcss/vite": "^4.1.16",
    "@vercel/speed-insights": "^1.2.0",
    "@vueuse/motion": "^3.0.3",
-    "axios": "^1.13.1",
-    "pinia": "^3.0.3",
+    "axios": "^1.13.2",
+    "pinia": "^3.0.4",
    "tailwindcss": "^4.1.16",
    "vue": "^3.5.22",
    "vue-router": "^4.6.3"
  },
  "devDependencies": {
    "@tsconfig/node22": "^22.0.2",
-    "@types/node": "^24.9.2",
+    "@types/node": "^24.10.0",
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.6.0",
    "@vue/tsconfig": "^0.8.1",
-    "daisyui": "^5.3.10",
-    "eslint": "^9.38.0",
+    "daisyui": "^5.4.5",
+    "eslint": "^9.39.1",
    "eslint-plugin-vue": "~10.5.1",
    "jiti": "^2.6.1",
    "npm-run-all2": "^8.0.4",
    "prettier": "3.6.2",
    "typescript": "~5.9.3",
-    "vite": "^7.1.12",
+    "vite": "^7.2.0",
    "vite-bundle-analyzer": "^1.2.3",
    "vite-plugin-vue-devtools": "^8.0.3",
-    "vue-tsc": "^3.1.2"
+    "vue-tsc": "^3.1.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,15 +1,15 @@
 <template>
-  <div
-    class="navbar sticky top-0 z-20 bg-white/70 glass border-b border-gray-200/60 shadow-sm transition"
+  <nav
+    class="navbar sticky top-0 z-30 bg-white/70 backdrop-blur-md border-b border-gray-200/60 shadow-sm"
  >
-    <!-- Left -->
+    <!-- Left: Logo + Mobile Menu -->
    <div class="navbar-start">
      <!-- Mobile dropdown -->
-      <div class="dropdown">
-        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden" aria-label="Menu">
+      <div class="dropdown lg:hidden">
+        <label tabindex="0" class="btn btn-ghost p-2" aria-label="Menu">
          <svg
            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-gray-600"
+            class="h-6 w-6 text-gray-700"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
@@ -18,58 +18,56 @@
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
-              d="M4 6h16M4 12h8m-8 6h16"
+              d="M4 6h16M4 12h16M4 18h16"
            />
          </svg>
-        </div>
+        </label>
        <ul
-          tabindex="-1"
-          class="menu menu-sm dropdown-content mt-3 w-52 p-2 rounded-lg shadow-md bg-white/80 backdrop-blur-md border border-gray-200/60"
+          tabindex="0"
+          class="menu menu-sm dropdown-content mt-3 w-52 rounded-md bg-white/90 backdrop-blur-md shadow-lg border border-gray-200/60"
        >
-          <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/">Home</RouterLink></li>
-          <li>
-            <RouterLink class="text-gray-700 hover:text-gray-900" to="/list">Library</RouterLink>
-          </li>
-          <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/add">Add</RouterLink></li>
+          <li><RouterLink to="/" class="nav-link">Home</RouterLink></li>
+          <li><RouterLink to="/list" class="nav-link">Library</RouterLink></li>
+          <li><RouterLink to="/add" class="nav-link">Add</RouterLink></li>
        </ul>
      </div>

      <!-- Logo -->
      <RouterLink
-        class="btn btn-ghost normal-case text-2xl font-bold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
        to="/"
+        class="text-2xl font-extrabold tracking-tight bg-linear-to-r from-gray-700 via-indigo-500 to-cyan-400 bg-clip-text text-transparent"
      >
-        To Vue
+        TBW
      </RouterLink>
    </div>

-    <!-- Center (desktop menu) -->
+    <!-- Center: Desktop Menu -->
    <div class="navbar-center hidden lg:flex">
-      <ul class="menu menu-horizontal px-1 space-x-4">
-        <li>
-          <RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/">Home</RouterLink>
-        </li>
-        <li>
-          <RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list"
-            >Library</RouterLink
-          >
-        </li>
-        <li>
-          <RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/add"
-            >Add</RouterLink
-          >
-        </li>
+      <ul class="menu menu-horizontal gap-6">
+        <li><RouterLink to="/" class="nav-link">Home</RouterLink></li>
+        <li><RouterLink to="/list" class="nav-link">Library</RouterLink></li>
+        <li><RouterLink to="/add" class="nav-link">Add</RouterLink></li>
      </ul>
    </div>

-    <!-- Right -->
+    <!-- Right: CTA -->
    <div class="navbar-end">
      <RouterLink
-        class="btn px-5 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
        to="/list"
+        class="btn px-5 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
      >
-        Go to library
+        Go to Library
      </RouterLink>
    </div>
-  </div>
+  </nav>
 </template>
+
+<style scoped>
+@reference "tailwindcss";
+.nav-link {
+  @apply text-gray-700 font-medium transition-colors hover:text-gray-900;
+}
+.router-link-active.nav-link {
+  @apply text-indigo-600 font-semibold;
+}
+</style>
--- a/src/components/TVSeriesDetails.vue
+++ b/src/components/TVSeriesDetails.vue
@@ -56,14 +56,30 @@ const alreadyAdded = computed(() =>

      <div class="card bg-base-200 w-full lg:w-96 shadow-sm mb-6 mt-6">
        <div class="card-body">
-          <p class="font-semibold text-gray-900">
-            Seasons:
-            <span class="text-gray-600">{{ props.tvSeries!.NumberOfSeasons }}</span>
-          </p>
-          <p class="font-semibold text-gray-900">
-            Expisodes:
-            <span class="text-gray-600">{{ props.tvSeries!.NumberOfEpisodes }}</span>
-          </p>
+          <div class="inline-flex items-center gap-2">
+            <span class="flex items-center font-semibold text-gray-900">
+              Seasons:
+              <span class="ml-1 text-gray-600">{{ props.tvSeries!.NumberOfSeasons }}</span>
+            </span>
+
+            <!-- SVG star separator -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="w-4 h-4 text-yellow-500 shrink-0"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.967a1 1 0 00.95.69h4.178c.969 0 1.371 1.24.588 1.81l-3.385 2.46a1 1 0 00-.364 1.118l1.287 3.966c.3.922-.755 1.688-1.54 1.118l-3.385-2.46a1 1 0 00-1.176 0l-3.385 2.46c-.785.57-1.84-.196-1.54-1.118l1.287-3.966a1 1 0 00-.364-1.118L2.045 9.394c-.783-.57-.38-1.81.588-1.81h4.178a1 1 0 00.95-.69l1.286-3.967z"
+              />
+            </svg>
+
+            <span class="flex items-center font-semibold text-gray-900">
+              Episodes:
+              <span class="ml-1 text-gray-600">{{ props.tvSeries!.NumberOfEpisodes }}</span>
+            </span>
+          </div>

          <p class="font-semibold text-gray-900">
            Last Episode:
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -12,7 +12,7 @@ const instance = axios.create({
  baseURL: 'https://6909aa3d0001d5d30ff1.fra.appwrite.run/3',
  timeout: 6969,
  headers: {
-    'Content-Type': 'application/json'
+    'Content-Type': 'application/json',
  },
 })

--- a/src/views/DetailsView.vue
+++ b/src/views/DetailsView.vue
@@ -60,7 +60,7 @@ onMounted(async () => {
    <!-- Loading -->
    <!-- Loading -->
    <div v-else-if="isLoading" class="flex justify-center items-center min-h-screen">
-      <span class="loading loading-ring loading-lg text-primary"></span>
+      <span class="loading loading-ring loading-xl text-primary"></span>
    </div>

    <!-- Details -->
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,14 +1,48 @@
 <script setup lang="ts"></script>

 <template>
-  <div class="container mx-auto px-4 py-16" v-motion-fade-visible-once>
-    <div class="flex flex-col items-center justify-center text-center">
+  <div class="relative isolate bg-white px-6 pt-16 lg:px-8">
+    <!-- Top blurred gradient background -->
+    <div
+      class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+      aria-hidden="true"
+    >
+      <div
+        class="relative left-[calc(50%-11rem)] aspect-1155/678 w-xl -translate-x-1/2 rotate-30 bg-linear-to-tr from-gray-400 via-indigo-400 to-cyan-400 opacity-30 sm:left-[calc(50%-30rem)] sm:w-6xl"
+        style="
+          clip-path: polygon(
+            74.1% 44.1%,
+            100% 61.6%,
+            97.5% 26.9%,
+            85.5% 0.1%,
+            80.7% 2%,
+            72.5% 32.5%,
+            60.2% 62.4%,
+            52.4% 68.1%,
+            47.5% 58.3%,
+            45.2% 34.5%,
+            27.5% 76.7%,
+            0.1% 64.9%,
+            17.9% 100%,
+            27.6% 76.8%,
+            76.1% 97.7%,
+            74.1% 44.1%
+          );
+        "
+      ></div>
+    </div>
+
+    <!-- Hero content -->
+    <div
+      class="container mx-auto px-4 py-24 sm:py-32 lg:py-40 text-center"
+      v-motion-fade-visible-once
+    >
      <h1 class="text-5xl font-bold mb-8 leading-tight">
        Welcome to <br />
        <span class="text-6xl font-extrabold gradient-text"> To Be Watched </span>
      </h1>

-      <p class="text-lg text-gray-600 max-w-2xl mb-12">
+      <p class="text-lg text-gray-600 max-w-2xl mx-auto mb-12">
        A simple and beautiful media list app built with Vue&nbsp;3 and Tailwind&nbsp;CSS (daisyUI).
      </p>

@@ -19,6 +53,36 @@
        Get Started
      </RouterLink>
    </div>
+
+    <!-- Bottom blurred gradient background -->
+    <div
+      class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+      aria-hidden="true"
+    >
+      <div
+        class="relative left-[calc(50%+3rem)] aspect-1155/678 w-xl -translate-x-1/2 bg-linear-to-tr from-gray-400 via-indigo-400 to-cyan-400 opacity-30 sm:left-[calc(50%+36rem)] sm:w-6xl"
+        style="
+          clip-path: polygon(
+            74.1% 44.1%,
+            100% 61.6%,
+            97.5% 26.9%,
+            85.5% 0.1%,
+            80.7% 2%,
+            72.5% 32.5%,
+            60.2% 62.4%,
+            52.4% 68.1%,
+            47.5% 58.3%,
+            45.2% 34.5%,
+            27.5% 76.7%,
+            0.1% 64.9%,
+            17.9% 100%,
+            27.6% 76.8%,
+            76.1% 97.7%,
+            74.1% 44.1%
+          );
+        "
+      ></div>
+    </div>
  </div>
 </template>

@@ -31,6 +95,7 @@
    /* indigo-400 */ #22d3ee 100% /* cyan-400 */
  );
  -webkit-background-clip: text;
+  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: gradientShift 6s ease infinite alternate;
Author	SHA1	Message	Date
Mohammad Mahdi	4a19199fbb	Improve Navbar and homepage	2025-11-05 22:48:50 +03:30
Mohammad Mahdi	a30972384a	Improve details page loading and tv series details	2025-11-05 21:56:08 +03:30