cool cards

assets/css/custom.css

@@ -373,10 +373,67 @@ footer {
 
 /* Recipe Card Image */
 .card .card-img-top {
-    height: 200px;
+    height: 160px;
+    width: 160px;
     object-fit: cover;
-    border-top-left-radius: 24px;
+    border-radius: 50% !important;
-    border-top-right-radius: 24px;
+    margin: 20px auto 10px auto;
+    border: 5px solid #ffffff;
+    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
+}
+
+.recipe-selection-card {
+    border-radius: 40px !important;
+    text-align: center;
+    overflow: hidden;
+    padding-bottom: 15px;
+}
+
+.card-body {
+    padding: 1rem !important;
+    color: var(--text-main);
+}
+
+.recipe-selection-card .h5 {
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+}
+
+.recipe-selection-card .selection-wrapper {
+    justify-content: center;
+}
+
+.recipe-selection-card .form-check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.recipe-selection-card .recipe-category-label {
+    margin: 5px auto;
+    display: inline-block;
+}
+
+.recipe-selection-card .card-text {
+    margin-bottom: 1rem;
+}
+
+.recipe-controls {
+    border: 1px solid #EAEAEA;
+    transition: all 0.3s ease;
+    padding: 10px !important;
+    border-radius: 20px !important;
+    margin: 0 10px 15px 10px;
+}
+
+.recipe-controls label {
+    font-size: 0.75rem !important;
+}
+
+.recipe-controls .form-control-sm {
+    padding: 4px 8px;
+    font-size: 0.8rem;
 }
 
 /* View Recipe Modal */

assets/js/main.js

@@ -176,7 +176,7 @@ const app = {
 
             recipes.forEach((recipe, index) => {
                 const cardCol = document.createElement('div');
-                cardCol.className = 'col-12 mb-3 recipe-card-enter';
+                cardCol.className = 'col-md-6 mb-4 recipe-card-enter';
                 cardCol.setAttribute('data-id', recipe.id);
                 cardCol.style.animationDelay = `${index * 0.1}s`;
 
@@ -194,16 +194,16 @@ const app = {
                 }
 
                 const cardBody = document.createElement('div');
-                cardBody.className = 'card-body d-flex flex-column';
+                cardBody.className = 'card-body d-flex flex-column align-items-center';
 
                 const titleWrapper = document.createElement('div');
-                titleWrapper.className = 'd-flex justify-content-between align-items-start mb-2 gap-2';
+                titleWrapper.className = 'd-flex flex-column align-items-center mb-2 gap-1 w-100';
 
                 const selectionWrapper = document.createElement('div');
-                selectionWrapper.className = 'form-check mb-0';
+                selectionWrapper.className = 'form-check mb-0 d-flex align-items-center justify-content-center';
                 selectionWrapper.innerHTML = `
-                    <input class="form-check-input select-recipe" type="checkbox" value="${recipe.id}" id="select-recipe-${recipe.id}" ${isSelected ? 'checked' : ''}>
+                    <input class="form-check-input select-recipe me-2" type="checkbox" value="${recipe.id}" id="select-recipe-${recipe.id}" ${isSelected ? 'checked' : ''}>
-                    <label class="form-check-label fw-bold h5 mb-0 ms-1" for="select-recipe-${recipe.id}">
+                    <label class="form-check-label fw-bold h5 mb-0" for="select-recipe-${recipe.id}">
                         ${recipe.name}
                     </label>
                 `;
@@ -220,11 +220,11 @@ const app = {
                 }
                 
                 const text = document.createElement('p');
-                text.className = 'card-text text-muted mb-3';
+                text.className = 'card-text text-muted mb-2 small';
                 text.textContent = `${recipe.ingredients.length} ingredients`;
 
                 const controlsWrapper = document.createElement('div');
-                controlsWrapper.className = 'recipe-controls mb-3 p-2 bg-light rounded';
+                controlsWrapper.className = 'recipe-controls mb-2 p-2 bg-light rounded';
                 controlsWrapper.innerHTML = `
                     <div class="row g-2 align-items-center">
                         <div class="col-6">
@@ -239,9 +239,9 @@ const app = {
                 `;
 
                 const buttonGroup = document.createElement('div');
-                buttonGroup.className = 'mt-auto pt-2 d-flex gap-2';
+                buttonGroup.className = 'mt-auto pt-2 d-flex gap-2 justify-content-center w-100';
                 buttonGroup.innerHTML = `
-                    <button class="btn btn-light btn-sm view-recipe flex-grow-1"><i class="bi bi-eye"></i> View</button>
+                    <button class="btn btn-light btn-sm view-recipe"><i class="bi bi-eye"></i> View</button>
                     <button class="btn btn-light btn-sm edit-recipe"><i class="bi bi-pencil"></i></button>
                     <button class="btn btn-outline-danger btn-sm delete-recipe" title="Delete"><i class="bi bi-trash"></i></button>
                 `;

index.php

@@ -27,7 +27,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v17">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>_v19">
 
 </head>
 <body>
@@ -379,7 +379,7 @@
 
     <!-- Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-<script src="assets/js/main.js?v=<?php echo time(); ?>_v7"></script>
+<script src="assets/js/main.js?v=<?php echo time(); ?>_v9"></script>
 
 <!-- Confirmation Modal -->
 <div class="modal fade" id="confirmRemoveModal" tabindex="-1" aria-labelledby="confirmRemoveModalLabel" aria-hidden="true">