architecture-advisor/index.html at main · programmerShinobi/architecture-advisor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html lang="en" class="">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta
      name="description"
      content="Architecture Advisor — a transparent, quality-attribute-driven decision-support tool for choosing software architecture, and always explaining why. Free, client-side, open source."
    />
    <title>Architecture Advisor</title>

    <!-- Icons + PWA theme (manifest link is injected by vite-plugin-pwa). -->
    <link rel="icon" href="%BASE_URL%favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="%BASE_URL%icons/apple-touch-icon.png" />
    <meta name="theme-color" content="#05060f" />

    <!-- SEO (FR-SEO): canonical + social cards + structured data. URLs come from src/config/site.ts;
         a guard in scripts/generate-seo.mjs cross-checks they never drift. -->
    <link rel="canonical" href="https://programmershinobi.github.io/architecture-advisor/" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Architecture Advisor" />
    <meta property="og:title" content="Architecture Advisor" />
    <meta
      property="og:description"
      content="A transparent, quality-attribute-driven decision-support tool for choosing software architecture — and always explaining why."
    />
    <meta property="og:url" content="https://programmershinobi.github.io/architecture-advisor/" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="Architecture Advisor" />
    <meta
      name="twitter:description"
      content="Answer a few questions about your project — get an explained architecture recommendation across 5 dimensions."
    />
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Architecture Advisor",
        "url": "https://programmershinobi.github.io/architecture-advisor/",
        "applicationCategory": "DeveloperApplication",
        "operatingSystem": "Any (web browser)",
        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
        "description": "A transparent, quality-attribute-driven decision-support tool for choosing software architecture — grounded in ISO/IEC 25010, ATAM, and Attribute-Driven Design, and always explaining why.",
        "license": "https://opensource.org/license/mit/"
      }
    </script>
    <script>
      // Dark by default (matches the design reference); apply light pre-paint if chosen.
      try {
        if (JSON.parse(localStorage.getItem('aa.theme')) === 'light') {
          document.documentElement.classList.add('light');
        }
      } catch (e) {}
    </script>
  </head>
  <body>
    <div id="root"></div>

    <!-- FR-EDGE-4: readable message instead of a blank page for unsupported browsers.
         `nomodule` runs ONLY on browsers without ES-module support (a proxy for pre-ES2020);
         modern browsers ignore it. `<noscript>` covers JavaScript being disabled. -->
    <style>
      .aa-unsupported {
        max-width: 34rem;
        margin: 12vh auto;
        padding: 24px;
        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.6;
        color: #1b1d1f;
        text-align: center;
      }
      .aa-unsupported h1 {
        font-size: 1.25rem;
        margin: 0 0 8px;
      }
      .aa-unsupported p {
        margin: 6px 0;
        color: #4a4f57;
      }
    </style>
    <script nomodule>
      document.getElementById('root').innerHTML =
        '<div class="aa-unsupported" role="alert">' +
        '<h1>Browser tidak didukung / Unsupported browser</h1>' +
        '<p>Architecture Advisor memerlukan browser modern. Gunakan versi terbaru <strong>Chrome, Edge, Firefox, atau Safari</strong> (desktop atau mobile).</p>' +
        '<p>Architecture Advisor needs a modern browser. Please use the latest <strong>Chrome, Edge, Firefox, or Safari</strong> (desktop or mobile).</p>' +
        '</div>';
    </script>
    <noscript>
      <div class="aa-unsupported" role="alert">
        <h1>JavaScript diperlukan / JavaScript required</h1>
        <p>
          Aktifkan JavaScript, dan gunakan versi terbaru <strong>Chrome, Edge, Firefox, atau
          Safari</strong>. — Please enable JavaScript and use the latest <strong>Chrome, Edge,
          Firefox, or Safari</strong>.
        </p>
      </div>
    </noscript>

    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>