From e53941c72538312c21908a87aca3953418f8780d Mon Sep 17 00:00:00 2001
From: Joel Jolly <128782382+withinJoel@users.noreply.github.com>
Date: Mon, 23 Feb 2026 15:43:22 +0530
Subject: [PATCH 1/2] Added interactions to all the three 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..e6f2aacfd 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:-translate-y-1 hover:shadow-2xl">
           <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:-translate-y-1 hover:shadow-2xl">
           <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:-translate-y-1 hover:shadow-2xl">
           <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 7ca53fdb891cd896c7599c08b401c64cbfc314d6 Mon Sep 17 00:00:00 2001
From: Joel Jolly <128782382+withinJoel@users.noreply.github.com>
Date: Mon, 23 Feb 2026 16:16:46 +0530
Subject: [PATCH 2/2] Enhance quiz card styles with focus states

Updated transition classes for quiz card components to include focus states.
---
 web/templates/web/quiz/quiz_list.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/templates/web/quiz/quiz_list.html b/web/templates/web/quiz/quiz_list.html
index e6f2aacfd..fa0e016e9 100644
--- a/web/templates/web/quiz/quiz_list.html
+++ b/web/templates/web/quiz/quiz_list.html
@@ -24,7 +24,9 @@ <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:-translate-y-1 hover:shadow-2xl">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden 
+                    transition duration-300 hover:-translate-y-1 hover:shadow-2xl
+                    focus-within:-translate-y-1 focus-within:shadow-2xl">
           <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 +74,9 @@ <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:-translate-y-1 hover:shadow-2xl">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden 
+                    h-full transition duration-300 hover:-translate-y-1 hover:shadow-2xl
+                    focus-within:-translate-y-1 focus-within:shadow-2xl">
           <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 +117,9 @@ <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:-translate-y-1 hover:shadow-2xl">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden 
+                    h-full transition duration-300 hover:-translate-y-1 hover:shadow-2xl
+                    focus-within:-translate-y-1 focus-within:shadow-2xl">
           <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