Procházet zdrojové kódy

Welcome: match local-login layout with centered logo above the box

Both the anonymous home view and the local-admin sign-in page now share
a narrow max-w-md card with the cycle logo centered above it; welcome
buttons stack full-width to mirror the Sign-in button.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
chiappa před 2 dny
rodič
revize
5f28590674
2 změnil soubory, kde provedl 68 přidání a 26 odebrání
  1. 20 0
      views/auth/local.twig
  2. 48 26
      views/home.twig

+ 20 - 0
views/auth/local.twig

@@ -2,6 +2,26 @@
 
 {% block content %}
 <section class="max-w-md mx-auto mt-6">
+    <div class="flex justify-center mb-4">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="48" height="48" aria-hidden="true" class="block" fill="none">
+            <defs>
+                <radialGradient id="brand-cycle-glow-card" cx="32" cy="32" r="20" gradientUnits="userSpaceOnUse">
+                    <stop offset="0"   stop-color="#6366f1" stop-opacity="0.55"/>
+                    <stop offset="0.6" stop-color="#6366f1" stop-opacity="0.12"/>
+                    <stop offset="1"   stop-color="#6366f1" stop-opacity="0"/>
+                </radialGradient>
+            </defs>
+            <circle cx="32" cy="32" r="20" fill="url(#brand-cycle-glow-card)"/>
+            <path d="M52 32 A20 20 0 1 1 32 12" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
+            <path d="M44 8 L52 12 L48 20" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <circle cx="32" cy="32" r="5"  fill="#6366f1"/>
+            <circle cx="48" cy="20" r="2.5" fill="currentColor" opacity="0.55"/>
+            <circle cx="52" cy="40" r="2.5" fill="currentColor" opacity="0.55"/>
+            <circle cx="40" cy="50" r="2.5" fill="currentColor" opacity="0.55"/>
+            <circle cx="20" cy="48" r="2.5" fill="currentColor" opacity="0.55"/>
+            <circle cx="14" cy="32" r="2.5" fill="#10b981"/>
+        </svg>
+    </div>
     <div class="rounded-lg border bg-white p-6 dark:bg-slate-800 dark:border-slate-700">
         <h1 class="text-xl font-semibold tracking-tight">Local admin sign-in</h1>
         <p class="text-slate-600 text-sm mt-1 dark:text-slate-400">

+ 48 - 26
views/home.twig

@@ -15,32 +15,54 @@
     {% endif %}
 
     {% if currentUser is null %}
-        <div class="rounded-lg border bg-white p-6 dark:bg-slate-800 dark:border-slate-700">
-            <h1 class="text-2xl font-semibold tracking-tight">Sprint Planner</h1>
-            <p class="text-slate-600 mt-2 max-w-prose dark:text-slate-400">
-                Sign in with your Microsoft account to get started. The first person
-                to sign in becomes the admin automatically.
-            </p>
-            <div class="mt-4 flex flex-wrap items-center gap-3">
-                {% if oidcConfigured %}
-                    <a href="/auth/login"
-                       class="inline-flex items-center gap-2 rounded-md bg-slate-900 text-white px-4 py-2 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
-                        Sign in with Microsoft
-                    </a>
-                {% endif %}
-                {% if localAdminEnabled %}
-                    <a href="/auth/local"
-                       class="inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white text-slate-700 px-4 py-2 text-sm font-medium hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
-                        Sign in as local admin
-                    </a>
-                {% endif %}
-                {% if not oidcConfigured and not localAdminEnabled %}
-                    <span class="inline-block rounded-md bg-slate-100 text-slate-600 px-3 py-2 text-sm dark:bg-slate-700 dark:text-slate-300">
-                        No sign-in method configured. Set <code>ENTRA_*</code> (with
-                        <code>OIDC_ENABLED</code> not set to <code>false</code>) or
-                        <code>LOCAL_ADMIN_*</code> in <code>.env</code>.
-                    </span>
-                {% endif %}
+        <div class="max-w-md mx-auto mt-6">
+            <div class="flex justify-center mb-4">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="48" height="48" aria-hidden="true" class="block" fill="none">
+                    <defs>
+                        <radialGradient id="brand-cycle-glow-card" cx="32" cy="32" r="20" gradientUnits="userSpaceOnUse">
+                            <stop offset="0"   stop-color="#6366f1" stop-opacity="0.55"/>
+                            <stop offset="0.6" stop-color="#6366f1" stop-opacity="0.12"/>
+                            <stop offset="1"   stop-color="#6366f1" stop-opacity="0"/>
+                        </radialGradient>
+                    </defs>
+                    <circle cx="32" cy="32" r="20" fill="url(#brand-cycle-glow-card)"/>
+                    <path d="M52 32 A20 20 0 1 1 32 12" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
+                    <path d="M44 8 L52 12 L48 20" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <circle cx="32" cy="32" r="5"  fill="#6366f1"/>
+                    <circle cx="48" cy="20" r="2.5" fill="currentColor" opacity="0.55"/>
+                    <circle cx="52" cy="40" r="2.5" fill="currentColor" opacity="0.55"/>
+                    <circle cx="40" cy="50" r="2.5" fill="currentColor" opacity="0.55"/>
+                    <circle cx="20" cy="48" r="2.5" fill="currentColor" opacity="0.55"/>
+                    <circle cx="14" cy="32" r="2.5" fill="#10b981"/>
+                </svg>
+            </div>
+            <div class="rounded-lg border bg-white p-6 dark:bg-slate-800 dark:border-slate-700">
+                <h1 class="text-xl font-semibold tracking-tight">Sprint Planner</h1>
+                <p class="text-slate-600 text-sm mt-1 dark:text-slate-400">
+                    Sign in with your Microsoft account to get started. The first
+                    person to sign in becomes the admin automatically.
+                </p>
+                <div class="mt-4 space-y-2">
+                    {% if oidcConfigured %}
+                        <a href="/auth/login"
+                           class="flex items-center justify-center w-full rounded-md bg-slate-900 text-white px-4 py-2 text-sm font-medium hover:bg-slate-800 dark:bg-slate-700 dark:hover:bg-slate-600">
+                            Sign in with Microsoft
+                        </a>
+                    {% endif %}
+                    {% if localAdminEnabled %}
+                        <a href="/auth/local"
+                           class="flex items-center justify-center w-full rounded-md border border-slate-300 bg-white text-slate-700 px-4 py-2 text-sm font-medium hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700">
+                            Sign in as local admin
+                        </a>
+                    {% endif %}
+                    {% if not oidcConfigured and not localAdminEnabled %}
+                        <span class="block rounded-md bg-slate-100 text-slate-600 px-3 py-2 text-sm dark:bg-slate-700 dark:text-slate-300">
+                            No sign-in method configured. Set <code>ENTRA_*</code> (with
+                            <code>OIDC_ENABLED</code> not set to <code>false</code>) or
+                            <code>LOCAL_ADMIN_*</code> in <code>.env</code>.
+                        </span>
+                    {% endif %}
+                </div>
             </div>
         </div>
     {% else %}