Domů Procházet Nápověda
Registrovat se Přihlásit se
wilson.silva
/
AdminLte
zrcadlo https://github.com/almasaeed2010/AdminLTE
1
0
Rozštěpit 0
Soubory Úkoly 0 Wiki
Procházet zdrojové kódy

feat: add page templates for profile, settings, invoice, pricing, FAQ, errors

Adds eight static page templates that have been requested repeatedly --
v3 had most of these and they weren't ported in the v4 rewrite (#6011):

- pages/profile.html        avatar header, tabbed Activity / Timeline /
                            Settings panes, about card with skills
- pages/settings.html       left-rail pills for Account, Notifications,
                            Security, Billing, Danger Zone
- pages/invoice.html        print-ready invoice with totals math
                            computed in frontmatter, .d-print-none on
                            the action toolbar so the printed output is
                            clean
- pages/pricing.html        3-tier cards with billing toggle and a
                            feature comparison table
- pages/faq.html            data-driven accordions across three topic
                            groups, with a search bar header
- pages/404.html            full-screen centered, search + back-to-home
                            CTAs, no sidebar
- pages/500.html            full-screen centered, back-to-home +
                            contact-support CTAs
- pages/maintenance.html    full-screen centered with ETA card

All pages use pure Bootstrap 5 utility classes -- no custom CSS, no
external dependencies. Sidenav entries land in a later commit.
Aigars Silkalns před 1 dnem
rodič
f9844f7e32
revize
fea5756c80
8 změnil soubory, kde provedl 1521 přidání a 0 odebrání
Jednotné zobrazení Ukázat statistiku rozdílových dat
  1. 54 0
      src/html/pages/pages/404.astro
  2. 43 0
      src/html/pages/pages/500.astro
  3. 199 0
      src/html/pages/pages/faq.astro
  4. 175 0
      src/html/pages/pages/invoice.astro
  5. 50 0
      src/html/pages/pages/maintenance.astro
  6. 252 0
      src/html/pages/pages/pricing.astro
  7. 403 0
      src/html/pages/pages/profile.astro
  8. 345 0
      src/html/pages/pages/settings.astro

+ 54 - 0
src/html/pages/pages/404.astro
Zobrazit soubor 

@@ -0,0 +1,54 @@
 
+---
 
+import Head from "@components/_head.astro"
 
+import Scripts from "@components/_scripts.astro"
 
+
 
+const title = "AdminLTE 4 | 404 Error Page"
 
+const path = "../../../dist"
 
+const htmlPath = "..";
 
+---
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <body class="bg-body-tertiary">
 
+    <main class="d-flex align-items-center min-vh-100 py-5">
 
+      <div class="container">
 
+        <div class="row justify-content-center">
 
+          <div class="col-md-8 col-lg-6 text-center">
 
+            <div class="display-1 fw-bold text-primary lh-1 mb-3">404</div>
 
+            <h1 class="h3 mb-3">Oops! Page not found.</h1>
 
+            <p class="text-secondary mb-4">
 
+              We could not find the page you were looking for. Meanwhile, you
 
+              may return to the dashboard or try searching for what you need.
 
+            </p>
 
+            <form class="row g-2 justify-content-center mb-4" role="search">
 
+              <div class="col-sm-8">
 
+                <div class="input-group">
 
+                  <span class="input-group-text bg-body">
 
+                    <i class="bi bi-search" aria-hidden="true"></i>
 
+                  </span>
 
+                  <input
 
+                    type="search"
 
+                    class="form-control"
 
+                    placeholder="Search&hellip;"
 
+                    aria-label="Search"
 
+                  />
 
+                </div>
 
+              </div>
 
+              <div class="col-sm-auto">
 
+                <button class="btn btn-primary w-100" type="submit">Search</button>
 
+              </div>
 
+            </form>
 
+            <a href={htmlPath + "/index.html"} class="btn btn-outline-secondary">
 
+              <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
 
+              Back to dashboard
 
+            </a>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </main>
 
+    <Scripts path={path} />
 
+  </body>
 
+</html>

+ 43 - 0
src/html/pages/pages/500.astro
Zobrazit soubor 

@@ -0,0 +1,43 @@
 
+---
 
+import Head from "@components/_head.astro"
 
+import Scripts from "@components/_scripts.astro"
 
+
 
+const title = "AdminLTE 4 | 500 Error Page"
 
+const path = "../../../dist"
 
+const htmlPath = "..";
 
+---
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <body class="bg-body-tertiary">
 
+    <main class="d-flex align-items-center min-vh-100 py-5">
 
+      <div class="container">
 
+        <div class="row justify-content-center">
 
+          <div class="col-md-8 col-lg-6 text-center">
 
+            <div class="display-1 fw-bold text-danger lh-1 mb-3">500</div>
 
+            <h1 class="h3 mb-3">Something went wrong on our end.</h1>
 
+            <p class="text-secondary mb-4">
 
+              The server encountered an unexpected condition. Our team has been
 
+              notified. Please try again in a moment, or contact support if the
 
+              issue persists.
 
+            </p>
 
+            <div class="d-flex gap-2 justify-content-center">
 
+              <a href={htmlPath + "/index.html"} class="btn btn-primary">
 
+                <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
 
+                Back to dashboard
 
+              </a>
 
+              <a href="mailto:support@example.com" class="btn btn-outline-secondary">
 
+                <i class="bi bi-life-preserver me-1" aria-hidden="true"></i>
 
+                Contact support
 
+              </a>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </main>
 
+    <Scripts path={path} />
 
+  </body>
 
+</html>

+ 199 - 0
src/html/pages/pages/faq.astro
Zobrazit soubor 

@@ -0,0 +1,199 @@
 
+---
 
+import Head from "@components/_head.astro"
 
+import Footer from "@components/dashboard/_footer.astro"
 
+import Topbar from "@components/dashboard/_topbar.astro"
 
+import Sidenav from "@components/dashboard/_sidenav.astro"
 
+import Scripts from "@components/_scripts.astro"
 
+
 
+const title = "AdminLTE 4 | FAQ"
 
+const path = "../../../dist"
 
+const mainPage = "pages"
 
+const page = "faq";
 
+
 
+const sections = [
 
+  {
 
+    title: "Getting started",
 
+    icon: "rocket-takeoff",
 
+    items: [
 
+      {
 
+        q: "How do I create an account?",
 
+        a: "Click <strong>Sign up</strong> in the top-right corner, enter your email and a strong password, then verify your email to activate your workspace."
 
+      },
 
+      {
 
+        q: "Can I try the product before paying?",
 
+        a: "Yes. Every paid plan includes a 14-day free trial. No credit card is required to start."
 
+      },
 
+      {
 
+        q: "How do I invite teammates?",
 
+        a: "From <strong>Settings &rarr; Team</strong>, click <strong>Invite member</strong> and enter their email. They&rsquo;ll receive an invitation link valid for seven days."
 
+      }
 
+    ]
 
+  },
 
+  {
 
+    title: "Billing &amp; plans",
 
+    icon: "credit-card",
 
+    items: [
 
+      {
 
+        q: "Which payment methods do you accept?",
 
+        a: "We accept all major credit and debit cards. Annual Enterprise plans can be paid by invoice."
 
+      },
 
+      {
 
+        q: "Can I change my plan later?",
 
+        a: "Yes. Upgrades take effect immediately and are pro-rated. Downgrades take effect at the end of the current billing cycle."
 
+      },
 
+      {
 
+        q: "Do you offer refunds?",
 
+        a: "We offer a full refund within 30 days of your first paid invoice, no questions asked."
 
+      }
 
+    ]
 
+  },
 
+  {
 
+    title: "Security &amp; privacy",
 
+    icon: "shield-lock",
 
+    items: [
 
+      {
 
+        q: "Where is my data stored?",
 
+        a: "Data is stored in encrypted form in SOC 2-certified data centers. You can choose your region (US or EU) when you set up your workspace."
 
+      },
 
+      {
 
+        q: "Do you support SSO?",
 
+        a: "Yes, on the Enterprise plan. We support SAML 2.0 and OIDC with providers including Okta, Azure AD, and Google Workspace."
 
+      },
 
+      {
 
+        q: "How can I export or delete my data?",
 
+        a: "You can export your data at any time from <strong>Settings &rarr; Data</strong>. Deletion requests are honored within 30 days per our DPA."
 
+      }
 
+    ]
 
+  }
 
+];
 
+---
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
 
+    <div class="app-wrapper">
 
+      <Topbar path={path} />
 
+      <Sidenav path={path} mainPage={mainPage} page={page} />
 
+      <main class="app-main">
 
+        <div class="app-content-header">
 
+          <div class="container-fluid">
 
+            <div class="row">
 
+              <div class="col-sm-6">
 
+                <h3 class="mb-0">FAQ</h3>
 
+              </div>
 
+              <div class="col-sm-6">
 
+                <ol class="breadcrumb float-sm-end">
 
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                  <li class="breadcrumb-item active" aria-current="page">FAQ</li>
 
+                </ol>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="app-content">
 
+          <div class="container-fluid">
 
+            <!-- Headline + search -->
 
+            <div class="text-center mb-4">
 
+              <h2 class="mb-2">How can we help?</h2>
 
+              <p class="text-secondary mb-3">
 
+                Search our knowledge base, or browse the topics below.
 
+              </p>
 
+              <form
 
+                class="row g-2 justify-content-center"
 
+                role="search"
 
+                onsubmit="event.preventDefault();"
 
+              >
 
+                <div class="col-md-8 col-lg-6">
 
+                  <div class="input-group input-group-lg">
 
+                    <span class="input-group-text bg-body">
 
+                      <i class="bi bi-search" aria-hidden="true"></i>
 
+                    </span>
 
+                    <input
 
+                      type="search"
 
+                      class="form-control"
 
+                      placeholder="Search the FAQ&hellip;"
 
+                      aria-label="Search the FAQ"
 
+                    />
 
+                  </div>
 
+                </div>
 
+              </form>
 
+            </div>
 
+
 
+            <div class="row g-4">
 
+              {
 
+                sections.map((section, idx) => (
 
+                  <div class="col-lg-12">
 
+                    <div class="card">
 
+                      <div class="card-header d-flex align-items-center">
 
+                        <i
 
+                          class={`bi bi-${section.icon} fs-4 text-primary me-2`}
 
+                          aria-hidden="true"
 
+                        />
 
+                        <h3 class="card-title mb-0" set:html={section.title} />
 
+                      </div>
 
+                      <div class="card-body">
 
+                        <div class="accordion accordion-flush" id={`faq-${idx}`}>
 
+                          {section.items.map((item, j) => (
 
+                            <div class="accordion-item">
 
+                              <h2 class="accordion-header">
 
+                                <button
 
+                                  class="accordion-button collapsed"
 
+                                  type="button"
 
+                                  data-bs-toggle="collapse"
 
+                                  data-bs-target={`#faq-${idx}-${j}`}
 
+                                  aria-expanded="false"
 
+                                  aria-controls={`faq-${idx}-${j}`}
 
+                                >
 
+                                  {item.q}
 
+                                </button>
 
+                              </h2>
 
+                              <div
 
+                                id={`faq-${idx}-${j}`}
 
+                                class="accordion-collapse collapse"
 
+                                data-bs-parent={`#faq-${idx}`}
 
+                              >
 
+                                <div
 
+                                  class="accordion-body text-secondary"
 
+                                  set:html={item.a}
 
+                                />
 
+                              </div>
 
+                            </div>
 
+                          ))}
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                ))
 
+              }
 
+            </div>
 
+
 
+            <!-- Still need help? -->
 
+            <div class="card mt-4">
 
+              <div class="card-body text-center py-4">
 
+                <i
 
+                  class="bi bi-chat-dots text-primary"
 
+                  style="font-size: 2.5rem;"
 
+                  aria-hidden="true"
 
+                ></i>
 
+                <h3 class="h5 mt-3 mb-2">Still need help?</h3>
 
+                <p class="text-secondary mb-3">
 
+                  Can&rsquo;t find what you&rsquo;re looking for? Our support team is happy
 
+                  to help.
 
+                </p>
 
+                <a href="mailto:support@example.com" class="btn btn-primary">
 
+                  <i class="bi bi-envelope me-1" aria-hidden="true"></i>
 
+                  Contact support
 
+                </a>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <Footer />
 
+    </div>
 
+    <Scripts path={path} />
 
+  </body>
 
+</html>

+ 175 - 0
src/html/pages/pages/invoice.astro
Zobrazit soubor 

@@ -0,0 +1,175 @@
 
+---
 
+import Head from "@components/_head.astro"
 
+import Footer from "@components/dashboard/_footer.astro"
 
+import Topbar from "@components/dashboard/_topbar.astro"
 
+import Sidenav from "@components/dashboard/_sidenav.astro"
 
+import Scripts from "@components/_scripts.astro"
 
+
 
+const title = "AdminLTE 4 | Invoice"
 
+const path = "../../../dist"
 
+const mainPage = "pages"
 
+const page = "invoice";
 
+
 
+const items = [
 
+  { qty: 1, name: "Pro plan subscription", desc: "May 18 - Jun 18, 2026", price: 29 },
 
+  { qty: 3, name: "Additional seats", desc: "Pro-rated for current period", price: 12.5 },
 
+  { qty: 1, name: "SMS notifications add-on", desc: "1,000 messages", price: 5 }
 
+];
 
+const subtotal = items.reduce((s, i) => s + i.qty * i.price, 0);
 
+const tax = +(subtotal * 0.0825).toFixed(2);
 
+const total = +(subtotal + tax).toFixed(2);
 
+const fmt = (n: number) => n.toFixed(2);
 
+---
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
 
+    <div class="app-wrapper">
 
+      <Topbar path={path} />
 
+      <Sidenav path={path} mainPage={mainPage} page={page} />
 
+      <main class="app-main">
 
+        <div class="app-content-header">
 
+          <div class="container-fluid">
 
+            <div class="row">
 
+              <div class="col-sm-6">
 
+                <h3 class="mb-0">Invoice</h3>
 
+              </div>
 
+              <div class="col-sm-6">
 
+                <ol class="breadcrumb float-sm-end">
 
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                  <li class="breadcrumb-item active" aria-current="page">Invoice</li>
 
+                </ol>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="app-content">
 
+          <div class="container-fluid">
 
+            <!-- Action bar (hidden on print) -->
 
+            <div class="d-flex justify-content-end gap-2 mb-3 d-print-none">
 
+              <button
 
+                class="btn btn-outline-secondary"
 
+                onclick="window.print()"
 
+                type="button"
 
+              >
 
+                <i class="bi bi-printer me-1" aria-hidden="true"></i>Print
 
+              </button>
 
+              <a href="#" class="btn btn-outline-secondary">
 
+                <i class="bi bi-download me-1" aria-hidden="true"></i>PDF
 
+              </a>
 
+              <a href="#" class="btn btn-primary">
 
+                <i class="bi bi-send me-1" aria-hidden="true"></i>Send invoice
 
+              </a>
 
+            </div>
 
+
 
+            <div class="card">
 
+              <div class="card-body p-4 p-md-5">
 
+                <!-- Header -->
 
+                <div class="row mb-4">
 
+                  <div class="col-sm-6">
 
+                    <h2 class="h4 mb-0 text-primary fw-semibold">AdminLTE, Inc.</h2>
 
+                    <p class="text-secondary mb-0 small">
 
+                      795 Folsom Ave, Suite 600<br />
 
+                      San Francisco, CA 94107<br />
 
+                      billing@example.com
 
+                    </p>
 
+                  </div>
 
+                  <div class="col-sm-6 text-sm-end">
 
+                    <h1 class="h2 mb-1">Invoice</h1>
 
+                    <p class="text-secondary mb-0">
 
+                      <span class="fw-semibold">#</span>INV-2026-00428
 
+                    </p>
 
+                    <span class="badge text-bg-success mt-1">Paid</span>
 
+                  </div>
 
+                </div>
 
+
 
+                <!-- Billing details -->
 
+                <div class="row mb-4">
 
+                  <div class="col-sm-6">
 
+                    <p class="text-secondary small mb-1">Billed to</p>
 
+                    <p class="mb-0 fw-semibold">Acme Corporation</p>
 
+                    <p class="text-secondary small mb-0">
 
+                      Attn: Jane Doe<br />
 
+                      1234 Market Street<br />
 
+                      San Francisco, CA 94103
 
+                    </p>
 
+                  </div>
 
+                  <div class="col-sm-6 text-sm-end">
 
+                    <p class="text-secondary small mb-1">Issue date</p>
 
+                    <p class="mb-2">May 18, 2026</p>
 
+                    <p class="text-secondary small mb-1">Due date</p>
 
+                    <p class="mb-0">June 1, 2026</p>
 
+                  </div>
 
+                </div>
 
+
 
+                <!-- Items -->
 
+                <div class="table-responsive mb-3">
 
+                  <table class="table align-middle mb-0">
 
+                    <thead>
 
+                      <tr>
 
+                        <th class="border-top-0">Description</th>
 
+                        <th class="border-top-0 text-end" style="width: 6rem;">
 
+                          Qty
 
+                        </th>
 
+                        <th class="border-top-0 text-end" style="width: 9rem;">
 
+                          Unit price
 
+                        </th>
 
+                        <th class="border-top-0 text-end" style="width: 9rem;">
 
+                          Amount
 
+                        </th>
 
+                      </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                      {
 
+                        items.map((it) => (
 
+                          <tr>
 
+                            <td>
 
+                              <p class="mb-0 fw-semibold">{it.name}</p>
 
+                              <small class="text-secondary">{it.desc}</small>
 
+                            </td>
 
+                            <td class="text-end">{it.qty}</td>
 
+                            <td class="text-end">${fmt(it.price)}</td>
 
+                            <td class="text-end">${fmt(it.qty * it.price)}</td>
 
+                          </tr>
 
+                        ))
 
+                      }
 
+                    </tbody>
 
+                  </table>
 
+                </div>
 
+
 
+                <!-- Totals -->
 
+                <div class="row justify-content-end">
 
+                  <div class="col-md-5 col-lg-4">
 
+                    <dl class="row mb-0">
 
+                      <dt class="col-7 text-secondary fw-normal">Subtotal</dt>
 
+                      <dd class="col-5 text-end mb-2">${fmt(subtotal)}</dd>
 
+                      <dt class="col-7 text-secondary fw-normal">Tax (8.25%)</dt>
 
+                      <dd class="col-5 text-end mb-2">${fmt(tax)}</dd>
 
+                      <dt class="col-7 fw-semibold border-top pt-2">Total due</dt>
 
+                      <dd class="col-5 text-end fw-semibold border-top pt-2 mb-0">
 
+                        ${fmt(total)} USD
 
+                      </dd>
 
+                    </dl>
 
+                  </div>
 
+                </div>
 
+
 
+                <!-- Footer note -->
 
+                <hr class="my-4" />
 
+                <p class="text-secondary small mb-0">
 
+                  Thanks for your business. Payment is due within 14 days. If
 
+                  you have any questions about this invoice, please contact
 
+                  <a href="mailto:billing@example.com">billing@example.com</a>.
 
+                </p>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <Footer />
 
+    </div>
 
+    <Scripts path={path} />
 
+  </body>
 
+</html>

+ 50 - 0
src/html/pages/pages/maintenance.astro
Zobrazit soubor 

@@ -0,0 +1,50 @@
 
+---
 
+import Head from "@components/_head.astro"
 
+import Scripts from "@components/_scripts.astro"
 
+
 
+const title = "AdminLTE 4 | Maintenance"
 
+const path = "../../../dist"
 
+---
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <body class="bg-body-tertiary">
 
+    <main class="d-flex align-items-center min-vh-100 py-5">
 
+      <div class="container">
 
+        <div class="row justify-content-center">
 
+          <div class="col-md-8 col-lg-6 text-center">
 
+            <i
 
+              class="bi bi-tools text-warning"
 
+              style="font-size: 4rem;"
 
+              aria-hidden="true"
 
+            ></i>
 
+            <h1 class="h3 mt-3 mb-2">We&rsquo;ll be right back.</h1>
 
+            <p class="text-secondary mb-4">
 
+              The application is undergoing scheduled maintenance. We expect to
 
+              be back online shortly. Thanks for your patience.
 
+            </p>
 
+            <div class="card mx-auto" style="max-width: 24rem;">
 
+              <div class="card-body text-start">
 
+                <p class="text-secondary small mb-2">
 
+                  Estimated completion
 
+                </p>
 
+                <p class="fw-semibold mb-0">
 
+                  <i class="bi bi-clock me-1" aria-hidden="true"></i>
 
+                  In approximately 30 minutes
 
+                </p>
 
+              </div>
 
+            </div>
 
+            <p class="text-secondary small mt-4 mb-0">
 
+              For urgent issues, reach us at
 
+              <a href="mailto:support@example.com">support@example.com</a>
 
+            </p>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </main>
 
+    <Scripts path={path} />
 
+  </body>
 
+</html>

+ 252 - 0
src/html/pages/pages/pricing.astro
Zobrazit soubor 

@@ -0,0 +1,252 @@
 
+---
 
+import Head from "@components/_head.astro"
 
+import Footer from "@components/dashboard/_footer.astro"
 
+import Topbar from "@components/dashboard/_topbar.astro"
 
+import Sidenav from "@components/dashboard/_sidenav.astro"
 
+import Scripts from "@components/_scripts.astro"
 
+
 
+const title = "AdminLTE 4 | Pricing"
 
+const path = "../../../dist"
 
+const mainPage = "pages"
 
+const page = "pricing";
 
+---
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
 
+    <div class="app-wrapper">
 
+      <Topbar path={path} />
 
+      <Sidenav path={path} mainPage={mainPage} page={page} />
 
+      <main class="app-main">
 
+        <div class="app-content-header">
 
+          <div class="container-fluid">
 
+            <div class="row">
 
+              <div class="col-sm-6">
 
+                <h3 class="mb-0">Pricing</h3>
 
+              </div>
 
+              <div class="col-sm-6">
 
+                <ol class="breadcrumb float-sm-end">
 
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                  <li class="breadcrumb-item active" aria-current="page">Pricing</li>
 
+                </ol>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="app-content">
 
+          <div class="container-fluid">
 
+            <!-- Headline -->
 
+            <div class="text-center mb-4">
 
+              <h2 class="mb-2">Pick the plan that fits your team</h2>
 
+              <p class="text-secondary mb-0">
 
+                Simple, transparent pricing. No hidden fees. Cancel any time.
 
+              </p>
 
+            </div>
 
+
 
+            <!-- Billing toggle -->
 
+            <div class="d-flex justify-content-center mb-4">
 
+              <div class="btn-group" role="group" aria-label="Billing period">
 
+                <input type="radio" class="btn-check" name="billing" id="billing-monthly" checked />
 
+                <label class="btn btn-outline-primary" for="billing-monthly">Monthly</label>
 
+                <input type="radio" class="btn-check" name="billing" id="billing-yearly" />
 
+                <label class="btn btn-outline-primary" for="billing-yearly">
 
+                  Yearly <span class="badge text-bg-success ms-1">Save 20%</span>
 
+                </label>
 
+              </div>
 
+            </div>
 
+
 
+            <!-- Plans -->
 
+            <div class="row g-4 row-cols-1 row-cols-md-3 mb-4">
 
+              <!-- Starter -->
 
+              <div class="col">
 
+                <div class="card h-100">
 
+                  <div class="card-body p-4">
 
+                    <h5 class="fw-semibold">Starter</h5>
 
+                    <p class="text-secondary small mb-3">
 
+                      For individuals getting started.
 
+                    </p>
 
+                    <div class="mb-3">
 
+                      <span class="display-5 fw-bold">$0</span>
 
+                      <span class="text-secondary">/mo</span>
 
+                    </div>
 
+                    <a href="#" class="btn btn-outline-primary w-100 mb-3">Get started</a>
 
+                    <ul class="list-unstyled small mb-0">
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        Up to 3 projects
 
+                      </li>
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        Community support
 
+                      </li>
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        1 GB storage
 
+                      </li>
 
+                      <li class="text-secondary">
 
+                        <i class="bi bi-dash-circle me-2" aria-hidden="true"></i>
 
+                        Advanced analytics
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- Pro (highlighted) -->
 
+              <div class="col">
 
+                <div class="card h-100 border-primary shadow-sm position-relative">
 
+                  <span
 
+                    class="badge text-bg-primary position-absolute top-0 start-50 translate-middle"
 
+                  >Most popular</span>
 
+                  <div class="card-body p-4">
 
+                    <h5 class="fw-semibold">Pro</h5>
 
+                    <p class="text-secondary small mb-3">
 
+                      For growing teams that need more.
 
+                    </p>
 
+                    <div class="mb-3">
 
+                      <span class="display-5 fw-bold">$29</span>
 
+                      <span class="text-secondary">/mo</span>
 
+                    </div>
 
+                    <a href="#" class="btn btn-primary w-100 mb-3">Start free trial</a>
 
+                    <ul class="list-unstyled small mb-0">
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        Unlimited projects
 
+                      </li>
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        Priority email support
 
+                      </li>
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        100 GB storage
 
+                      </li>
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        Advanced analytics
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <!-- Enterprise -->
 
+              <div class="col">
 
+                <div class="card h-100">
 
+                  <div class="card-body p-4">
 
+                    <h5 class="fw-semibold">Enterprise</h5>
 
+                    <p class="text-secondary small mb-3">
 
+                      For organizations with custom needs.
 
+                    </p>
 
+                    <div class="mb-3">
 
+                      <span class="display-5 fw-bold">Custom</span>
 
+                    </div>
 
+                    <a href="#" class="btn btn-outline-primary w-100 mb-3">Contact sales</a>
 
+                    <ul class="list-unstyled small mb-0">
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        Everything in Pro
 
+                      </li>
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        SSO &amp; SCIM
 
+                      </li>
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        Dedicated account manager
 
+                      </li>
 
+                      <li class="mb-2">
 
+                        <i class="bi bi-check-circle-fill text-success me-2" aria-hidden="true"></i>
 
+                        Custom SLA
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+            <!-- Feature comparison table -->
 
+            <div class="card">
 
+              <div class="card-header">
 
+                <h3 class="card-title">Compare features</h3>
 
+              </div>
 
+              <div class="card-body p-0">
 
+                <div class="table-responsive">
 
+                  <table class="table mb-0 align-middle">
 
+                    <thead>
 
+                      <tr>
 
+                        <th>Feature</th>
 
+                        <th class="text-center">Starter</th>
 
+                        <th class="text-center">Pro</th>
 
+                        <th class="text-center">Enterprise</th>
 
+                      </tr>
 
+                    </thead>
 
+                    <tbody>
 
+                      <tr>
 
+                        <td>Projects</td>
 
+                        <td class="text-center">3</td>
 
+                        <td class="text-center">Unlimited</td>
 
+                        <td class="text-center">Unlimited</td>
 
+                      </tr>
 
+                      <tr>
 
+                        <td>Storage</td>
 
+                        <td class="text-center">1 GB</td>
 
+                        <td class="text-center">100 GB</td>
 
+                        <td class="text-center">Custom</td>
 
+                      </tr>
 
+                      <tr>
 
+                        <td>Team members</td>
 
+                        <td class="text-center">1</td>
 
+                        <td class="text-center">Up to 20</td>
 
+                        <td class="text-center">Unlimited</td>
 
+                      </tr>
 
+                      <tr>
 
+                        <td>Advanced analytics</td>
 
+                        <td class="text-center">
 
+                          <i class="bi bi-x-lg text-secondary" aria-hidden="true"></i>
 
+                          <span class="visually-hidden">No</span>
 
+                        </td>
 
+                        <td class="text-center">
 
+                          <i class="bi bi-check-lg text-success" aria-hidden="true"></i>
 
+                          <span class="visually-hidden">Yes</span>
 
+                        </td>
 
+                        <td class="text-center">
 
+                          <i class="bi bi-check-lg text-success" aria-hidden="true"></i>
 
+                          <span class="visually-hidden">Yes</span>
 
+                        </td>
 
+                      </tr>
 
+                      <tr>
 
+                        <td>SSO &amp; SCIM</td>
 
+                        <td class="text-center">
 
+                          <i class="bi bi-x-lg text-secondary" aria-hidden="true"></i>
 
+                          <span class="visually-hidden">No</span>
 
+                        </td>
 
+                        <td class="text-center">
 
+                          <i class="bi bi-x-lg text-secondary" aria-hidden="true"></i>
 
+                          <span class="visually-hidden">No</span>
 
+                        </td>
 
+                        <td class="text-center">
 
+                          <i class="bi bi-check-lg text-success" aria-hidden="true"></i>
 
+                          <span class="visually-hidden">Yes</span>
 
+                        </td>
 
+                      </tr>
 
+                      <tr>
 
+                        <td>Support</td>
 
+                        <td class="text-center">Community</td>
 
+                        <td class="text-center">Priority email</td>
 
+                        <td class="text-center">Dedicated</td>
 
+                      </tr>
 
+                    </tbody>
 
+                  </table>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <Footer />
 
+    </div>
 
+    <Scripts path={path} />
 
+  </body>
 
+</html>

+ 403 - 0
src/html/pages/pages/profile.astro
Zobrazit soubor 

@@ -0,0 +1,403 @@
 
+---
 
+import Head from "@components/_head.astro"
 
+import Footer from "@components/dashboard/_footer.astro"
 
+import Topbar from "@components/dashboard/_topbar.astro"
 
+import Sidenav from "@components/dashboard/_sidenav.astro"
 
+import Scripts from "@components/_scripts.astro"
 
+
 
+const title = "AdminLTE 4 | User Profile"
 
+const path = "../../../dist"
 
+const mainPage = "pages"
 
+const page = "profile";
 
+---
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
 
+    <div class="app-wrapper">
 
+      <Topbar path={path} />
 
+      <Sidenav path={path} mainPage={mainPage} page={page} />
 
+      <main class="app-main">
 
+        <div class="app-content-header">
 
+          <div class="container-fluid">
 
+            <div class="row">
 
+              <div class="col-sm-6">
 
+                <h3 class="mb-0">User Profile</h3>
 
+              </div>
 
+              <div class="col-sm-6">
 
+                <ol class="breadcrumb float-sm-end">
 
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                  <li class="breadcrumb-item"><a href="#">User</a></li>
 
+                  <li class="breadcrumb-item active" aria-current="page">Profile</li>
 
+                </ol>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="app-content">
 
+          <div class="container-fluid">
 
+            <div class="row g-3">
 
+              <!-- Profile sidebar -->
 
+              <div class="col-md-3">
 
+                <!-- About card -->
 
+                <div class="card">
 
+                  <div class="card-body text-center">
 
+                    <div
 
+                      class="rounded-circle bg-primary-subtle text-primary d-inline-flex align-items-center justify-content-center mb-3"
 
+                      style="width: 96px; height: 96px; font-size: 2rem;"
 
+                      aria-hidden="true"
 
+                    >
 
+                      JD
 
+                    </div>
 
+                    <h3 class="h5 mb-0">Jane Doe</h3>
 
+                    <p class="text-secondary mb-3">Product Designer</p>
 
+                    <ul class="list-group list-group-flush text-start small">
 
+                      <li
 
+                        class="list-group-item d-flex justify-content-between px-0"
 
+                      >
 
+                        <span class="text-secondary">Followers</span>
 
+                        <span class="fw-semibold">1,322</span>
 
+                      </li>
 
+                      <li
 
+                        class="list-group-item d-flex justify-content-between px-0"
 
+                      >
 
+                        <span class="text-secondary">Following</span>
 
+                        <span class="fw-semibold">543</span>
 
+                      </li>
 
+                      <li
 
+                        class="list-group-item d-flex justify-content-between px-0"
 
+                      >
 
+                        <span class="text-secondary">Friends</span>
 
+                        <span class="fw-semibold">13,287</span>
 
+                      </li>
 
+                    </ul>
 
+                    <a href="#" class="btn btn-primary w-100 mt-3">
 
+                      <i class="bi bi-person-plus me-1" aria-hidden="true"></i>
 
+                      Follow
 
+                    </a>
 
+                  </div>
 
+                </div>
 
+                <!-- About details -->
 
+                <div class="card mt-3">
 
+                  <div class="card-header">
 
+                    <h3 class="card-title">About</h3>
 
+                  </div>
 
+                  <div class="card-body small">
 
+                    <p class="fw-semibold mb-1">
 
+                      <i
 
+                        class="bi bi-mortarboard me-1 text-secondary"
 
+                        aria-hidden="true"
 
+                      ></i>
 
+                      Education
 
+                    </p>
 
+                    <p class="text-secondary mb-3">
 
+                      BS in Computer Science from the University of Tennessee at
 
+                      Knoxville
 
+                    </p>
 
+                    <p class="fw-semibold mb-1">
 
+                      <i
 
+                        class="bi bi-geo-alt me-1 text-secondary"
 
+                        aria-hidden="true"
 
+                      ></i>
 
+                      Location
 
+                    </p>
 
+                    <p class="text-secondary mb-3">Malibu, California</p>
 
+                    <p class="fw-semibold mb-1">
 
+                      <i
 
+                        class="bi bi-tags me-1 text-secondary"
 
+                        aria-hidden="true"
 
+                      ></i>
 
+                      Skills
 
+                    </p>
 
+                    <p class="mb-3">
 
+                      <span class="badge text-bg-secondary me-1">UI/UX</span>
 
+                      <span class="badge text-bg-secondary me-1">Figma</span>
 
+                      <span class="badge text-bg-secondary me-1">Design Systems</span>
 
+                      <span class="badge text-bg-secondary">Research</span>
 
+                    </p>
 
+                    <p class="fw-semibold mb-1">
 
+                      <i
 
+                        class="bi bi-pencil-square me-1 text-secondary"
 
+                        aria-hidden="true"
 
+                      ></i>
 
+                      Notes
 
+                    </p>
 
+                    <p class="text-secondary mb-0">
 
+                      Lorem ipsum represents a long-held tradition for designers,
 
+                      typographers and the like.
 
+                    </p>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+
 
+              <!-- Tabbed content -->
 
+              <div class="col-md-9">
 
+                <div class="card">
 
+                  <div class="card-header p-0 border-bottom-0">
 
+                    <ul
 
+                      class="nav nav-tabs"
 
+                      id="profile-tabs"
 
+                      role="tablist"
 
+                    >
 
+                      <li class="nav-item" role="presentation">
 
+                        <button
 
+                          class="nav-link active"
 
+                          id="activity-tab"
 
+                          data-bs-toggle="tab"
 
+                          data-bs-target="#activity"
 
+                          type="button"
 
+                          role="tab"
 
+                          aria-selected="true"
 
+                        >
 
+                          Activity
 
+                        </button>
 
+                      </li>
 
+                      <li class="nav-item" role="presentation">
 
+                        <button
 
+                          class="nav-link"
 
+                          id="timeline-tab"
 
+                          data-bs-toggle="tab"
 
+                          data-bs-target="#timeline"
 
+                          type="button"
 
+                          role="tab"
 
+                          aria-selected="false"
 
+                        >
 
+                          Timeline
 
+                        </button>
 
+                      </li>
 
+                      <li class="nav-item" role="presentation">
 
+                        <button
 
+                          class="nav-link"
 
+                          id="settings-tab"
 
+                          data-bs-toggle="tab"
 
+                          data-bs-target="#settings"
 
+                          type="button"
 
+                          role="tab"
 
+                          aria-selected="false"
 
+                        >
 
+                          Settings
 
+                        </button>
 
+                      </li>
 
+                    </ul>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div class="tab-content">
 
+                      <!-- Activity tab -->
 
+                      <div
 
+                        class="tab-pane fade show active"
 
+                        id="activity"
 
+                        role="tabpanel"
 
+                        aria-labelledby="activity-tab"
 
+                      >
 
+                        <article class="d-flex gap-3 mb-4">
 
+                          <div
 
+                            class="flex-shrink-0 rounded-circle bg-success-subtle text-success d-flex align-items-center justify-content-center"
 
+                            style="width: 40px; height: 40px;"
 
+                            aria-hidden="true"
 
+                          >
 
+                            JD
 
+                          </div>
 
+                          <div class="flex-grow-1">
 
+                            <div class="d-flex justify-content-between">
 
+                              <h4 class="h6 mb-0">Jane Doe</h4>
 
+                              <small class="text-secondary">2 hours ago</small>
 
+                            </div>
 
+                            <p class="mb-2">
 
+                              Shipped <a href="#">design-system v2.4</a> with a
 
+                              refreshed color palette and new motion primitives.
 
+                            </p>
 
+                            <a href="#" class="btn btn-sm btn-outline-secondary">
 
+                              <i
 
+                                class="bi bi-hand-thumbs-up me-1"
 
+                                aria-hidden="true"
 
+                              ></i>
 
+                              Like
 
+                            </a>
 
+                            <a
 
+                              href="#"
 
+                              class="btn btn-sm btn-outline-secondary ms-1"
 
+                            >
 
+                              <i
 
+                                class="bi bi-chat me-1"
 
+                                aria-hidden="true"
 
+                              ></i>
 
+                              Comment
 
+                            </a>
 
+                          </div>
 
+                        </article>
 
+                        <article class="d-flex gap-3 mb-4">
 
+                          <div
 
+                            class="flex-shrink-0 rounded-circle bg-info-subtle text-info d-flex align-items-center justify-content-center"
 
+                            style="width: 40px; height: 40px;"
 
+                            aria-hidden="true"
 
+                          >
 
+                            JD
 
+                          </div>
 
+                          <div class="flex-grow-1">
 
+                            <div class="d-flex justify-content-between">
 
+                              <h4 class="h6 mb-0">Jane Doe</h4>
 
+                              <small class="text-secondary">Yesterday</small>
 
+                            </div>
 
+                            <p class="mb-2">
 
+                              Posted a question in
 
+                              <a href="#">#design-help</a>: how should we handle
 
+                              focus rings on dark-themed CTA buttons?
 
+                            </p>
 
+                          </div>
 
+                        </article>
 
+                        <article class="d-flex gap-3">
 
+                          <div
 
+                            class="flex-shrink-0 rounded-circle bg-warning-subtle text-warning d-flex align-items-center justify-content-center"
 
+                            style="width: 40px; height: 40px;"
 
+                            aria-hidden="true"
 
+                          >
 
+                            JD
 
+                          </div>
 
+                          <div class="flex-grow-1">
 
+                            <div class="d-flex justify-content-between">
 
+                              <h4 class="h6 mb-0">Jane Doe</h4>
 
+                              <small class="text-secondary">3 days ago</small>
 
+                            </div>
 
+                            <p class="mb-0">
 
+                              Updated her bio and added <em>Research</em> to her
 
+                              skills.
 
+                            </p>
 
+                          </div>
 
+                        </article>
 
+                      </div>
 
+
 
+                      <!-- Timeline tab -->
 
+                      <div
 
+                        class="tab-pane fade"
 
+                        id="timeline"
 
+                        role="tabpanel"
 
+                        aria-labelledby="timeline-tab"
 
+                      >
 
+                        <ul class="list-unstyled mb-0">
 
+                          <li class="d-flex gap-3 mb-3">
 
+                            <span
 
+                              class="badge text-bg-success rounded-pill flex-shrink-0 align-self-start mt-1"
 
+                            >
 
+                              <i class="bi bi-check-lg" aria-hidden="true"></i>
 
+                            </span>
 
+                            <div>
 
+                              <p class="mb-0 fw-semibold">
 
+                                Released v2.4 of the design system
 
+                              </p>
 
+                              <small class="text-secondary">May 16, 2026</small>
 
+                            </div>
 
+                          </li>
 
+                          <li class="d-flex gap-3 mb-3">
 
+                            <span
 
+                              class="badge text-bg-info rounded-pill flex-shrink-0 align-self-start mt-1"
 
+                            >
 
+                              <i class="bi bi-mic" aria-hidden="true"></i>
 
+                            </span>
 
+                            <div>
 
+                              <p class="mb-0 fw-semibold">
 
+                                Spoke at the local UX meetup
 
+                              </p>
 
+                              <small class="text-secondary">April 22, 2026</small>
 
+                            </div>
 
+                          </li>
 
+                          <li class="d-flex gap-3">
 
+                            <span
 
+                              class="badge text-bg-warning rounded-pill flex-shrink-0 align-self-start mt-1"
 
+                            >
 
+                              <i class="bi bi-briefcase" aria-hidden="true"></i>
 
+                            </span>
 
+                            <div>
 
+                              <p class="mb-0 fw-semibold">
 
+                                Joined the product team as Senior Designer
 
+                              </p>
 
+                              <small class="text-secondary">March 1, 2026</small>
 
+                            </div>
 
+                          </li>
 
+                        </ul>
 
+                      </div>
 
+
 
+                      <!-- Settings tab -->
 
+                      <div
 
+                        class="tab-pane fade"
 
+                        id="settings"
 
+                        role="tabpanel"
 
+                        aria-labelledby="settings-tab"
 
+                      >
 
+                        <form class="row g-3">
 
+                          <div class="col-md-6">
 
+                            <label class="form-label" for="profile-first">
 
+                              First name
 
+                            </label>
 
+                            <input
 
+                              type="text"
 
+                              class="form-control"
 
+                              id="profile-first"
 
+                              value="Jane"
 
+                            />
 
+                          </div>
 
+                          <div class="col-md-6">
 
+                            <label class="form-label" for="profile-last">
 
+                              Last name
 
+                            </label>
 
+                            <input
 
+                              type="text"
 
+                              class="form-control"
 
+                              id="profile-last"
 
+                              value="Doe"
 
+                            />
 
+                          </div>
 
+                          <div class="col-md-6">
 
+                            <label class="form-label" for="profile-email">
 
+                              Email
 
+                            </label>
 
+                            <input
 
+                              type="email"
 
+                              class="form-control"
 
+                              id="profile-email"
 
+                              value="jane@example.com"
 
+                            />
 
+                          </div>
 
+                          <div class="col-md-6">
 
+                            <label class="form-label" for="profile-role">
 
+                              Role
 
+                            </label>
 
+                            <input
 
+                              type="text"
 
+                              class="form-control"
 
+                              id="profile-role"
 
+                              value="Product Designer"
 
+                            />
 
+                          </div>
 
+                          <div class="col-12">
 
+                            <label class="form-label" for="profile-bio">Bio</label>
 
+                            <textarea
 
+                              class="form-control"
 
+                              id="profile-bio"
 
+                              rows="4">Designer with a soft spot for design tokens and accessibility.</textarea>
 
+                          </div>
 
+                          <div class="col-12">
 
+                            <button type="submit" class="btn btn-primary">
 
+                              Save changes
 
+                            </button>
 
+                            <button type="reset" class="btn btn-outline-secondary ms-1">
 
+                              Cancel
 
+                            </button>
 
+                          </div>
 
+                        </form>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <Footer />
 
+    </div>
 
+    <Scripts path={path} />
 
+  </body>
 
+</html>

+ 345 - 0
src/html/pages/pages/settings.astro
Zobrazit soubor 

@@ -0,0 +1,345 @@
 
+---
 
+import Head from "@components/_head.astro"
 
+import Footer from "@components/dashboard/_footer.astro"
 
+import Topbar from "@components/dashboard/_topbar.astro"
 
+import Sidenav from "@components/dashboard/_sidenav.astro"
 
+import Scripts from "@components/_scripts.astro"
 
+
 
+const title = "AdminLTE 4 | Settings"
 
+const path = "../../../dist"
 
+const mainPage = "pages"
 
+const page = "settings";
 
+---
 
+
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <Head title={title} path={path} />
 
+  </head>
 
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
 
+    <div class="app-wrapper">
 
+      <Topbar path={path} />
 
+      <Sidenav path={path} mainPage={mainPage} page={page} />
 
+      <main class="app-main">
 
+        <div class="app-content-header">
 
+          <div class="container-fluid">
 
+            <div class="row">
 
+              <div class="col-sm-6">
 
+                <h3 class="mb-0">Settings</h3>
 
+              </div>
 
+              <div class="col-sm-6">
 
+                <ol class="breadcrumb float-sm-end">
 
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
 
+                  <li class="breadcrumb-item active" aria-current="page">Settings</li>
 
+                </ol>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+        <div class="app-content">
 
+          <div class="container-fluid">
 
+            <div class="row g-3">
 
+              <!-- Left rail -->
 
+              <div class="col-md-3">
 
+                <div
 
+                  class="list-group list-group-flush nav nav-pills flex-column"
 
+                  id="settings-nav"
 
+                  role="tablist"
 
+                >
 
+                  <a
 
+                    href="#account"
 
+                    class="list-group-item list-group-item-action active"
 
+                    data-bs-toggle="pill"
 
+                    role="tab"
 
+                    aria-selected="true"
 
+                  >
 
+                    <i class="bi bi-person me-2" aria-hidden="true"></i>Account
 
+                  </a>
 
+                  <a
 
+                    href="#notifications"
 
+                    class="list-group-item list-group-item-action"
 
+                    data-bs-toggle="pill"
 
+                    role="tab"
 
+                  >
 
+                    <i class="bi bi-bell me-2" aria-hidden="true"></i>Notifications
 
+                  </a>
 
+                  <a
 
+                    href="#security"
 
+                    class="list-group-item list-group-item-action"
 
+                    data-bs-toggle="pill"
 
+                    role="tab"
 
+                  >
 
+                    <i class="bi bi-shield-lock me-2" aria-hidden="true"></i>Security
 
+                  </a>
 
+                  <a
 
+                    href="#billing"
 
+                    class="list-group-item list-group-item-action"
 
+                    data-bs-toggle="pill"
 
+                    role="tab"
 
+                  >
 
+                    <i class="bi bi-credit-card me-2" aria-hidden="true"></i>Billing
 
+                  </a>
 
+                  <a
 
+                    href="#danger"
 
+                    class="list-group-item list-group-item-action text-danger"
 
+                    data-bs-toggle="pill"
 
+                    role="tab"
 
+                  >
 
+                    <i
 
+                      class="bi bi-exclamation-triangle me-2"
 
+                      aria-hidden="true"
 
+                    ></i>
 
+                    Danger zone
 
+                  </a>
 
+                </div>
 
+              </div>
 
+
 
+              <!-- Tab content -->
 
+              <div class="col-md-9">
 
+                <div class="tab-content">
 
+                  <!-- Account -->
 
+                  <div
 
+                    class="tab-pane fade show active"
 
+                    id="account"
 
+                    role="tabpanel"
 
+                  >
 
+                    <div class="card">
 
+                      <div class="card-header">
 
+                        <h3 class="card-title">Account</h3>
 
+                      </div>
 
+                      <div class="card-body">
 
+                        <form class="row g-3">
 
+                          <div class="col-md-6">
 
+                            <label class="form-label" for="settings-name">
 
+                              Full name
 
+                            </label>
 
+                            <input
 
+                              type="text"
 
+                              class="form-control"
 
+                              id="settings-name"
 
+                              value="Jane Doe"
 
+                            />
 
+                          </div>
 
+                          <div class="col-md-6">
 
+                            <label class="form-label" for="settings-email">
 
+                              Email
 
+                            </label>
 
+                            <input
 
+                              type="email"
 
+                              class="form-control"
 
+                              id="settings-email"
 
+                              value="jane@example.com"
 
+                            />
 
+                          </div>
 
+                          <div class="col-md-6">
 
+                            <label class="form-label" for="settings-tz">
 
+                              Time zone
 
+                            </label>
 
+                            <select class="form-select" id="settings-tz">
 
+                              <option>UTC</option>
 
+                              <option selected>America/Los_Angeles</option>
 
+                              <option>Europe/London</option>
 
+                              <option>Asia/Tokyo</option>
 
+                            </select>
 
+                          </div>
 
+                          <div class="col-md-6">
 
+                            <label class="form-label" for="settings-lang">
 
+                              Language
 
+                            </label>
 
+                            <select class="form-select" id="settings-lang">
 
+                              <option selected>English</option>
 
+                              <option>Español</option>
 
+                              <option>Français</option>
 
+                              <option>Deutsch</option>
 
+                            </select>
 
+                          </div>
 
+                          <div class="col-12">
 
+                            <button type="submit" class="btn btn-primary">
 
+                              Save changes
 
+                            </button>
 
+                          </div>
 
+                        </form>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+
 
+                  <!-- Notifications -->
 
+                  <div class="tab-pane fade" id="notifications" role="tabpanel">
 
+                    <div class="card">
 
+                      <div class="card-header">
 
+                        <h3 class="card-title">Notifications</h3>
 
+                      </div>
 
+                      <div class="card-body">
 
+                        <p class="text-secondary">
 
+                          Choose what to be notified about.
 
+                        </p>
 
+                        {
 
+                          [
 
+                            ["Product updates", "Major releases and changelogs"],
 
+                            ["Security alerts", "Sign-in attempts and account changes"],
 
+                            ["Weekly digest", "A summary of activity in your workspace"],
 
+                            ["Mentions", "When a teammate @mentions you"]
 
+                          ].map(([label, desc], i) => (
 
+                            <div class="d-flex justify-content-between align-items-start py-2 border-bottom">
 
+                              <div>
 
+                                <p class="mb-0 fw-semibold">{label}</p>
 
+                                <small class="text-secondary">{desc}</small>
 
+                              </div>
 
+                              <div class="form-check form-switch mb-0">
 
+                                <input
 
+                                  class="form-check-input"
 
+                                  type="checkbox"
 
+                                  role="switch"
 
+                                  id={`notif-${i}`}
 
+                                  checked={i < 2}
 
+                                />
 
+                                <label
 
+                                  class="visually-hidden"
 
+                                  for={`notif-${i}`}
 
+                                >
 
+                                  Toggle {label}
 
+                                </label>
 
+                              </div>
 
+                            </div>
 
+                          ))
 
+                        }
 
+                        <button class="btn btn-primary mt-3">Save preferences</button>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+
 
+                  <!-- Security -->
 
+                  <div class="tab-pane fade" id="security" role="tabpanel">
 
+                    <div class="card">
 
+                      <div class="card-header">
 
+                        <h3 class="card-title">Password</h3>
 
+                      </div>
 
+                      <div class="card-body">
 
+                        <form class="row g-3">
 
+                          <div class="col-md-12">
 
+                            <label class="form-label" for="pwd-current">
 
+                              Current password
 
+                            </label>
 
+                            <input
 
+                              type="password"
 
+                              class="form-control"
 
+                              id="pwd-current"
 
+                            />
 
+                          </div>
 
+                          <div class="col-md-6">
 
+                            <label class="form-label" for="pwd-new">
 
+                              New password
 
+                            </label>
 
+                            <input type="password" class="form-control" id="pwd-new" />
 
+                          </div>
 
+                          <div class="col-md-6">
 
+                            <label class="form-label" for="pwd-confirm">
 
+                              Confirm new password
 
+                            </label>
 
+                            <input
 
+                              type="password"
 
+                              class="form-control"
 
+                              id="pwd-confirm"
 
+                            />
 
+                          </div>
 
+                          <div class="col-12">
 
+                            <button type="submit" class="btn btn-primary">
 
+                              Update password
 
+                            </button>
 
+                          </div>
 
+                        </form>
 
+                      </div>
 
+                    </div>
 
+                    <div class="card mt-3">
 
+                      <div class="card-header">
 
+                        <h3 class="card-title">Two-factor authentication</h3>
 
+                      </div>
 
+                      <div class="card-body d-flex justify-content-between align-items-center">
 
+                        <div>
 
+                          <p class="mb-0 fw-semibold">Authenticator app</p>
 
+                          <small class="text-secondary">
 
+                            Use an authenticator app such as 1Password or Authy.
 
+                          </small>
 
+                        </div>
 
+                        <button class="btn btn-outline-primary">Enable</button>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+
 
+                  <!-- Billing -->
 
+                  <div class="tab-pane fade" id="billing" role="tabpanel">
 
+                    <div class="card">
 
+                      <div class="card-header">
 
+                        <h3 class="card-title">Current plan</h3>
 
+                      </div>
 
+                      <div class="card-body">
 
+                        <div class="d-flex justify-content-between align-items-center mb-3">
 
+                          <div>
 
+                            <p class="mb-0 fw-semibold">Pro plan</p>
 
+                            <small class="text-secondary">
 
+                              $29 / month &middot; Renews June 18, 2026
 
+                            </small>
 
+                          </div>
 
+                          <a href="#" class="btn btn-outline-primary btn-sm">
 
+                            Change plan
 
+                          </a>
 
+                        </div>
 
+                        <hr />
 
+                        <p class="fw-semibold mb-2">Payment method</p>
 
+                        <div class="d-flex justify-content-between align-items-center">
 
+                          <div>
 
+                            <i
 
+                              class="bi bi-credit-card-2-front me-2"
 
+                              aria-hidden="true"
 
+                            ></i>
 
+                            Visa ending in 4242
 
+                          </div>
 
+                          <a href="#" class="btn btn-link btn-sm">Update</a>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+
 
+                  <!-- Danger zone -->
 
+                  <div class="tab-pane fade" id="danger" role="tabpanel">
 
+                    <div class="card border-danger">
 
+                      <div class="card-header bg-danger-subtle">
 
+                        <h3 class="card-title text-danger">Danger zone</h3>
 
+                      </div>
 
+                      <div class="card-body">
 
+                        <div class="d-flex justify-content-between align-items-start mb-3">
 
+                          <div>
 
+                            <p class="mb-0 fw-semibold">Export account data</p>
 
+                            <small class="text-secondary">
 
+                              Download a copy of all your data as a ZIP archive.
 
+                            </small>
 
+                          </div>
 
+                          <button class="btn btn-outline-secondary">Export</button>
 
+                        </div>
 
+                        <hr />
 
+                        <div class="d-flex justify-content-between align-items-start">
 
+                          <div>
 
+                            <p class="mb-0 fw-semibold text-danger">
 
+                              Delete account
 
+                            </p>
 
+                            <small class="text-secondary">
 
+                              This will permanently delete your account and all
 
+                              associated data. This cannot be undone.
 
+                            </small>
 
+                          </div>
 
+                          <button class="btn btn-danger">Delete account</button>
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <Footer />
 
+    </div>
 
+    <Scripts path={path} />
 
+  </body>
 
+</html>