Update log.html

log.html

@@ -14,23 +14,20 @@ body{
   background:#F7F5F0;
 }
 
-/* FIX: prevent text overflow/overlap */
 .card, .card *{
   overflow-wrap: anywhere;
   word-break: break-word;
   box-sizing: border-box;
 }
 
-/* UPDATED: bigger card + better spacing */
 .card{
   background:white;
   border-radius:16px;
-  padding:28px;   /* increased from 20px */
+  padding:28px;
   margin-bottom:22px;
   border:1px solid #e5e7eb;
 }
 
-/* improved button spacing */
 .btn{
   padding:10px 16px;
   border-radius:999px;
@@ -38,7 +35,6 @@ body{
   cursor:pointer;
 }
 
-/* priority badges */
 .high{background:#ef4444;color:white;}
 .medium{background:#f59e0b;color:white;}
 .low{background:#10b981;color:white;}
@@ -47,10 +43,22 @@ body{
 .small{font-size:14px;color:#6b7280;}
 .big{font-size:16px;}
 
-/* FIX: better readability spacing */
 .card div{
   line-height:1.5;
 }
+
+/* CHANGED: hover glow on recipient cards */
+.recipient-card {
+  border: 1px solid #e5e7eb;
+  padding: 20px;
+  border-radius: 12px;
+  margin-bottom: 16px;
+  transition: box-shadow 0.25s ease, border-color 0.25s ease;
+}
+.recipient-card:hover {
+  border-color: #10b981;
+  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
+}
 </style>
 </head>
 
@@ -159,27 +167,26 @@ current=await res.json();
 renderAI();
 }
 
-/* AI LIST */
+/* AI LIST — CHANGED: added margin-bottom to name, km, reason, badge; mt-4 on buttons */
 function renderAI(){
 
 aiBox.innerHTML=current.map((x,i)=>`
-<div class="border p-5 rounded-xl mb-4">
+<div class="recipient-card">
 
-<div class="font-bold text-lg">${x.recipient}</div>
-<div class="small mb-1">${x.km} km</div>
-<div class="mb-2">${x.reason}</div>
+<div class="font-bold text-lg mb-1">${x.recipient}</div>
+<div class="small mb-2">${x.km} km</div>
+<div class="mb-3">${x.reason}</div>
 
 <span class="btn ${
 x.priority=="High"?"high":
 x.priority=="Medium"?"medium":"low"
-}">
+} mb-4" style="display:inline-block;margin-bottom:16px;">
 ${x.priority}
 </span>
 
-<!-- FIXED BUTTON LAYOUT -->
-<div class="mt-6 flex gap-3 flex-wrap">
+<div class="mt-2 flex gap-3 flex-wrap">
 
-<button class="btn high"
+<button class="btn"
 style="background:#10b981;color:white"
 onclick="accept(${i})">
 Accept
@@ -216,10 +223,10 @@ function renderAccepted(){
 
 matchedBox.innerHTML=accepted.length?
 accepted.map((a,i)=>`
-<div class="border p-4 flex justify-between mb-3 items-center">
+<div class="recipient-card" style="display:flex;justify-content:space-between;align-items:center;">
 
 <div>
-<div class="font-bold">${a.recipient}</div>
+<div class="font-bold mb-1">${a.recipient}</div>
 <div class="small">${a.km} km</div>
 </div>