Merge pull request #105 from niteeshkanna-sh/claude/stoic-rubin-fnglq7

The about page's four cards, and one colour icon recipe across site and panel

Author: niteeshkanna-sh

404.html

@@ -173,6 +173,7 @@ button { font-family: inherit; }
 .ns-item.is-on { background: var(--accent); color: #14100D; }
 .ns-item.is-on .ns-ico { opacity: 1; }
 .ns-ico { flex-shrink: 0; opacity: 0.82; }
+.ns-item .ns-ico3d { opacity: 1; }
 .ns-item-label { flex: 1; min-width: 0; }
 
 .ns-item .tab-count {
@@ -587,6 +588,24 @@ button { font-family: inherit; }
   background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
   padding: 11px 13px; display: flex; flex-direction: column; gap: 3px;
 }
+/* The plate on a counter card: top right, out of the way of the number, which
+   is what anybody is here to read. Only the five cards that carry one -- the
+   rest of the grid keeps its own rhythm without a hole where an icon is not. */
+.stat-card .ns-ico3d {
+  position: absolute; top: 9px; right: 10px;
+  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.stat-card:has(.ns-ico3d) { position: relative; padding-right: 52px; }
+.stat-card:hover .ns-ico3d { transform: translateY(-2px) scale(1.05); }
+
+/* The sidebar's plates sit a hair lower than a hairline did, and brighten
+   rather than fade: the old rule dimmed the icon on every entry but the one
+   you are on, which on a coloured plate reads as a fault. */
+.ns-ico3d { opacity: 1; }
+
+@media (prefers-reduced-motion: reduce) {
+  .stat-card .ns-ico3d, .stat-card:hover .ns-ico3d { transition: none; transform: none; }
+}
 /* --ink-faint measures 3.35:1 on white, under the 4.5:1 needed for text this
    small, and it was already being used at 0.78rem. Shrinking it further would
    have made a failing contrast worse, so the label moves to --ink-dim at

about/index.html

@@ -250,5 +250,30 @@
       "instagram": "",
       "facebook": ""
     }
+  },
+  "about": {
+    "benefits": {
+      "heading": "What you can count on",
+      "headingAccent": "every hire",
+      "badge": "Drive your dreams · NiteSha Cars & Bikes · ",
+      "items": [
+        {
+          "title": "Trusted, 100%",
+          "body": "A written rate, a stated KM limit and a deposit that comes back. Nothing is agreed by guesswork."
+        },
+        {
+          "title": "Cleaned before pickup",
+          "body": "Every vehicle is washed, checked and fuelled to the agreed level before it reaches you."
+        },
+        {
+          "title": "1000+ customers",
+          "body": "Families, visitors from abroad and businesses across Kanyakumari district."
+        },
+        {
+          "title": "20+ vehicles",
+          "body": "Hatchbacks, sedans, SUVs, 7 seaters and two-wheelers, ready to go."
+        }
+      ]
+    }
   }
 }

admin/admin.css

@@ -1,6 +1,8 @@
 <?php
 declare(strict_types=1);
 
+require_once __DIR__ . '/src/icons.php';
+
 require_once __DIR__ . '/src/csrf.php';
 require_once __DIR__ . '/src/assets.php';
 require_once __DIR__ . '/src/vocab.php';
@@ -84,22 +86,27 @@
 
         <div class="stat-grid">
           <div class="stat-card">
+            <?= admin_icon3d('car', 34) ?>
             <span class="stat-label">Cars Listed</span>
             <span class="stat-value" id="statCarCount">0</span>
           </div>
           <div class="stat-card">
+            <?= admin_icon3d('inbox', 34) ?>
             <span class="stat-label">Booking Inquiries</span>
             <span class="stat-value" id="statInquiryCount">0</span>
           </div>
           <div class="stat-card stat-card-income">
+            <?= admin_icon3d('rupee', 34) ?>
             <span class="stat-label">Total Income</span>
             <span class="stat-value" id="statIncome">₹0</span>
           </div>
           <div class="stat-card stat-card-expense">
+            <?= admin_icon3d('wallet', 34) ?>
             <span class="stat-label">Total Expenses</span>
             <span class="stat-value" id="statExpense">₹0</span>
           </div>
           <div class="stat-card stat-card-balance">
+            <?= admin_icon3d('scales', 34) ?>
             <span class="stat-label">Net Balance</span>
             <span class="stat-value" id="statBalance">₹0</span>
           </div>

admin/content-defaults.json

@@ -0,0 +1,89 @@
+<?php
+/**
+ * The panel's icons: a coloured plate with a mark on it.
+ *
+ * The same recipe the site uses (my-app/src/components/Icon3d.tsx) written for
+ * the server: a plate with a diagonal gradient, a gloss across its top half, a
+ * shadow underneath and a rim inside the edge, with the mark in white on top.
+ * Two copies rather than one, because the panel is PHP served from a different
+ * machine and shares no build with the site -- the same trade the content
+ * defaults already make.
+ *
+ * Every id inside is suffixed, because six plates on a page all defining
+ * "plate" would every one of them paint with whichever the browser read last.
+ *
+ * Only where the icon is big enough to carry it. The bin on a table row and
+ * the chevron on a summary stay hairlines: a plate at sixteen pixels is a
+ * coloured square with something indistinct on it.
+ */
+
+/** Light end, dark end. The dark end is also the shadow. */
+const ADMIN_ICON_TONES = [
+    'gold'   => ['#f6dc84', '#c9a227'],
+    'bronze' => ['#e6a860', '#a85f22'],
+    'navy'   => ['#2b3a72', '#0a0e20'],
+    'green'  => ['#5ee08a', '#128c3e'],
+    'plum'   => ['#d08bd6', '#7b2f86'],
+    'slate'  => ['#9fb0cc', '#465a7e'],
+];
+
+/** The mark, drawn in a 24-unit box, and the plate it sits on by default. */
+function admin_icon_glyphs(): array
+{
+    return [
+        'chart'     => ['navy', '<rect x="3" y="12" width="4" height="8" rx="1" fill="currentColor" stroke="none"/><rect x="10" y="4" width="4" height="16" rx="1" fill="currentColor" stroke="none"/><rect x="17" y="9" width="4" height="11" rx="1" fill="currentColor" stroke="none"/>'],
+        'clipboard' => ['gold', '<rect x="5" y="4" width="14" height="17" rx="2"/><rect x="8.5" y="2" width="7" height="4" rx="1"/><line x1="8" y1="11" x2="16" y2="11"/><line x1="8" y1="15" x2="16" y2="15"/>'],
+        'car'       => ['bronze', '<path d="M3 13l1.4-4.2A2 2 0 0 1 6.3 7.5h11.4a2 2 0 0 1 1.9 1.3L21 13"/><rect x="2.5" y="13" width="19" height="5" rx="1.5"/><circle cx="7" cy="18.5" r="1.4"/><circle cx="17" cy="18.5" r="1.4"/>'],
+        'inbox'     => ['plum', '<path d="M3 12h5l1.5 3h5L16 12h5"/><path d="M5.5 5h13l2.5 7v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7l2.5-7z"/>'],
+        'card'      => ['green', '<rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/><circle cx="16.5" cy="14.5" r="1"/>'],
+        'trend'     => ['slate', '<path d="M3 17l6-6 4 4 8-8"/><path d="M15 7h6v6"/>'],
+        'pencil'    => ['gold', '<path d="M4 20h4l10-10a2.8 2.8 0 0 0-4-4L4 16v4z"/><line x1="13.5" y1="6.5" x2="17.5" y2="10.5"/>'],
+        'pin'       => ['bronze', '<path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/>'],
+        // The dashboard's counters.
+        'rupee'     => ['green', '<path d="M7 5h10"/><path d="M7 9h10"/><path d="M14.5 5c0 3-2.2 4-5 4h-2.5l7.5 10"/>'],
+        'wallet'    => ['bronze', '<path d="M3 8.5A2.5 2.5 0 0 1 5.5 6H18a2 2 0 0 1 2 2v1"/><rect x="3" y="9" width="18" height="10" rx="2.5"/><circle cx="16.5" cy="14" r="1.2"/>'],
+        'scales'    => ['navy', '<path d="M12 4v16"/><path d="M6 8h12"/><path d="M4 16l2.5-6L9 16a2.6 2.6 0 0 1-5 0z"/><path d="M15 16l2.5-6L20 16a2.6 2.6 0 0 1-5 0z"/>'],
+    ];
+}
+
+/**
+ * One icon, as markup.
+ *
+ * @param string      $name  a key of admin_icon_glyphs()
+ * @param int         $size  rendered edge to edge, shadow included
+ * @param string|null $tone  overrides the glyph's own plate colour
+ */
+function admin_icon3d(string $name, int $size = 30, ?string $tone = null, string $class = 'ns-ico3d'): string
+{
+    static $n = 0;
+    $n++;
+
+    $glyphs = admin_icon_glyphs();
+    if (!isset($glyphs[$name])) {
+        return '';
+    }
+
+    [$defaultTone, $paths] = $glyphs[$name];
+    $key   = $tone !== null && isset(ADMIN_ICON_TONES[$tone]) ? $tone : $defaultTone;
+    [$light, $dark] = ADMIN_ICON_TONES[$key];
+    $uid = 'i' . $n;
+
+    return '<svg class="' . htmlspecialchars($class, ENT_QUOTES) . '" width="' . $size . '" height="' . $size . '"'
+        . ' viewBox="0 0 48 48" aria-hidden="true" focusable="false">'
+        . '<defs>'
+        . '<linearGradient id="plate-' . $uid . '" x1="0.15" y1="0" x2="0.85" y2="1">'
+        . '<stop offset="0%" stop-color="' . $light . '"/><stop offset="100%" stop-color="' . $dark . '"/></linearGradient>'
+        . '<linearGradient id="gloss-' . $uid . '" x1="0" y1="0" x2="0" y2="1">'
+        . '<stop offset="0%" stop-color="#fff" stop-opacity="0.5"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></linearGradient>'
+        . '<filter id="drop-' . $uid . '" x="-30%" y="-20%" width="160%" height="160%">'
+        . '<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="' . $dark . '" flood-opacity="0.45"/></filter>'
+        . '</defs>'
+        . '<g filter="url(#drop-' . $uid . ')">'
+        . '<rect x="3" y="2" width="42" height="42" rx="13" fill="url(#plate-' . $uid . ')"/>'
+        . '<rect x="4" y="3" width="40" height="40" rx="12" fill="none" stroke="#fff" stroke-opacity="0.28"/>'
+        . '<rect x="5" y="4" width="38" height="20" rx="11" fill="url(#gloss-' . $uid . ')"/>'
+        . '</g>'
+        . '<g transform="translate(12 11)" fill="none" stroke="#fff" stroke-width="1.7"'
+        . ' stroke-linecap="round" stroke-linejoin="round" color="#fff">' . $paths . '</g>'
+        . '</svg>';
+}

admin/dashboard.php

@@ -46,23 +46,14 @@ function admin_nav_groups(): array
     ];
 }
 
-/** One of the small line drawings beside a navigation entry. */
+/** The plate beside a navigation entry. */
 function admin_nav_icon(string $name): string
 {
-    $paths = [
-        'chart'     => '<rect x="3" y="12" width="4" height="8" rx="1" fill="currentColor" stroke="none"/><rect x="10" y="4" width="4" height="16" rx="1" fill="currentColor" stroke="none"/><rect x="17" y="9" width="4" height="11" rx="1" fill="currentColor" stroke="none"/>',
-        'clipboard' => '<rect x="5" y="4" width="14" height="17" rx="2"/><rect x="8.5" y="2" width="7" height="4" rx="1"/><line x1="8" y1="11" x2="16" y2="11"/><line x1="8" y1="15" x2="16" y2="15"/>',
-        'car'       => '<path d="M3 13l1.4-4.2A2 2 0 0 1 6.3 7.5h11.4a2 2 0 0 1 1.9 1.3L21 13"/><rect x="2.5" y="13" width="19" height="5" rx="1.5"/><circle cx="7" cy="18.5" r="1.4"/><circle cx="17" cy="18.5" r="1.4"/>',
-        'inbox'     => '<path d="M3 12h5l1.5 3h5L16 12h5"/><path d="M5.5 5h13l2.5 7v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7l2.5-7z"/>',
-        'card'      => '<rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/><circle cx="16.5" cy="14.5" r="1"/>',
-        'trend'     => '<path d="M3 17l6-6 4 4 8-8"/><path d="M15 7h6v6"/>',
-        'pencil'    => '<path d="M4 20h4l10-10a2.8 2.8 0 0 0-4-4L4 16v4z"/><line x1="13.5" y1="6.5" x2="17.5" y2="10.5"/>',
-        'pin'       => '<path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/>',
-    ];
+    require_once __DIR__ . '/icons.php';
 
-    return '<svg class="ns-ico" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor"'
-        . ' stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
-        . ($paths[$name] ?? '') . '</svg>';
+    // Twenty-two rather than seventeen: a plate has a gradient, a gloss and a
+    // rim in it, and at seventeen pixels all three are one smudge.
+    return admin_icon3d($name, 22, null, 'ns-ico ns-ico3d');
 }
 
 /**