From eda2e41f3075ae4bab8bb82990bd1c43ba293d23 Mon Sep 17 00:00:00 2001
From: zoyatabassum <zoyasyeeda0304@gmail.com>
Date: Mon, 23 Feb 2026 15:40:42 +0530
Subject: [PATCH 1/2] Add hover effects to quizzes list category cards

---
 web/templates/web/quiz/quiz_list.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/templates/web/quiz/quiz_list.html b/web/templates/web/quiz/quiz_list.html
index 7ecb7e30d..aac35c44b 100644
--- a/web/templates/web/quiz/quiz_list.html
+++ b/web/templates/web/quiz/quiz_list.html
@@ -24,7 +24,7 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Quizzes</h1>
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
       <!-- Left column - My Quizzes -->
       <div class="lg:col-span-1">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
           <div class="bg-teal-600 p-4">
             <h2 class="text-xl font-bold text-white flex items-center">
               <i class="fas fa-book mr-2"></i> My Quizzes
@@ -72,7 +72,7 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-1">{{ quiz.tit
       </div>
       <!-- Middle column - Shared Quizzes -->
       <div class="lg:col-span-1">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
           <div class="bg-blue-600 p-4">
             <h2 class="text-xl font-bold text-white flex items-center">
               <i class="fas fa-share-alt mr-2"></i> Shared With Me
@@ -113,7 +113,7 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-1">{{ quiz.tit
       </div>
       <!-- Right column - Public Quizzes -->
       <div class="lg:col-span-1">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
           <div class="bg-purple-600 p-4">
             <h2 class="text-xl font-bold text-white flex items-center">
               <i class="fas fa-globe mr-2"></i> Public Quizzes

From ae4c9f1e811d2034bd9f153f2277244b9b53fa11 Mon Sep 17 00:00:00 2001
From: zoyatabassum <zoyasyeeda0304@gmail.com>
Date: Mon, 2 Mar 2026 14:44:24 +0530
Subject: [PATCH 2/2] refactor: use transition and add motion-safe for
 accessibility

---
 web/templates/web/quiz/quiz_list.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/templates/web/quiz/quiz_list.html b/web/templates/web/quiz/quiz_list.html
index aac35c44b..06519f0b8 100644
--- a/web/templates/web/quiz/quiz_list.html
+++ b/web/templates/web/quiz/quiz_list.html
@@ -24,7 +24,7 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Quizzes</h1>
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
       <!-- Left column - My Quizzes -->
       <div class="lg:col-span-1">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition duration-300 hover:shadow-2xl motion-safe:hover:-translate-y-1">
           <div class="bg-teal-600 p-4">
             <h2 class="text-xl font-bold text-white flex items-center">
               <i class="fas fa-book mr-2"></i> My Quizzes
@@ -72,7 +72,7 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-1">{{ quiz.tit
       </div>
       <!-- Middle column - Shared Quizzes -->
       <div class="lg:col-span-1">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full transition duration-300 hover:shadow-2xl motion-safe:hover:-translate-y-1">
           <div class="bg-blue-600 p-4">
             <h2 class="text-xl font-bold text-white flex items-center">
               <i class="fas fa-share-alt mr-2"></i> Shared With Me
@@ -113,7 +113,7 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-1">{{ quiz.tit
       </div>
       <!-- Right column - Public Quizzes -->
       <div class="lg:col-span-1">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full transition duration-300 hover:shadow-2xl motion-safe:hover:-translate-y-1">
           <div class="bg-purple-600 p-4">
             <h2 class="text-xl font-bold text-white flex items-center">
               <i class="fas fa-globe mr-2"></i> Public Quizzes