index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure Scale</title>
<meta name="description" content="Measuring the total configuration surface area of Microsoft Azure — 190 providers, 38,000+ parameters, 46,000+ SKUs, and 15,000+ API operations quantified in human terms.">
<link rel="canonical" href="https://xeeva.github.io/Azure-Scale/">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<meta property="og:title" content="Azure Scale">
<meta property="og:description" content="Measuring the total configuration surface area of Microsoft Azure — 190 providers, 38,000+ parameters, 46,000+ SKUs, and 15,000+ API operations quantified in human terms.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://xeeva.github.io/Azure-Scale/">
<meta property="og:image" content="https://xeeva.github.io/Azure-Scale/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Azure Scale">
<meta name="twitter:description" content="Measuring the total configuration surface area of Microsoft Azure — 190 providers, 38,000+ parameters, 46,000+ SKUs, and 15,000+ API operations quantified in human terms.">
<meta name="twitter:image" content="https://xeeva.github.io/Azure-Scale/og-image.png">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Azure Scale",
  "url": "https://xeeva.github.io/Azure-Scale/",
  "description": "Measuring the total configuration surface area of Microsoft Azure — 190 providers, 38,000+ parameters, 46,000+ SKUs, and 15,000+ API operations quantified in human terms.",
  "author": {
    "@type": "Person",
    "name": "xeeva",
    "url": "https://github.com/xeeva"
  }
}
</script>
<style>
:root {
    --bg-primary: #0a0e1a;
    --bg-card: #1a2035;
    --border: #1e2d4a;
    --border-glow: #0d4f8b;
    --text: #e2e8f0;
    --text-muted: #8892a8;
    --azure-blue: #3b9eff;
    --neon-cyan: #22d3ee;
    --neon-blue: #60a5fa;
    --neon-green: #34d399;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background: var(--bg-primary);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
}
.container {
    max-width: 720px;
    width: 100%;
}
h1 {
    font-size: 2.25rem;
    color: var(--neon-blue);
    text-shadow: 0 0 20px rgba(96,165,250,0.3);
    margin-bottom: 0.5rem;
}
.subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.hook {
    color: var(--neon-green);
    font-size: 0.95rem;
    margin-bottom: 2.5rem;
}
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-decoration: none;
    display: block;
    color: inherit;
}
.card:hover {
    border-color: var(--border-glow);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 12px rgba(59,158,255,0.1);
}
.card h2 {
    font-size: 1.35rem;
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(34,211,238,0.2);
    margin-bottom: 0.5rem;
}
.card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}
.card .arrow {
    color: var(--azure-blue);
    font-size: 1.1rem;
    margin-top: 0.75rem;
    display: inline-block;
}
.feature-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.pill {
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
    background: rgba(59,158,255,0.1);
    border: 1px solid rgba(59,158,255,0.25);
    color: var(--azure-blue);
    white-space: nowrap;
}
.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}
.footer {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.8;
}
.footer a {
    color: var(--azure-blue);
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
.btn-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}
.btn-outline {
    border: 1px solid var(--border-glow);
    color: var(--azure-blue);
    background: transparent;
}
.btn-outline:hover {
    background: rgba(59,158,255,0.08);
}
.btn-sponsor {
    border: 1px solid #db61a2;
    color: #db61a2;
    background: transparent;
}
.btn-sponsor:hover {
    background: rgba(219,97,162,0.08);
}
.heart { font-size: 0.9rem; }
</style>
</head>
<body>
<div class="container">
    <h1>Azure Scale</h1>
    <p class="subtitle">Measuring the total configuration surface area of Microsoft Azure.</p>
    <p class="hook">190 providers. 38,000+ config parameters. ~1.3 years to learn at 5 min each.</p>

    <a class="card" href="azure_complexity_report.html">
        <h2>Complexity Report</h2>
        <p>
            The full breakdown of every Azure resource provider, resource type, configuration
            parameter, SKU variant, API operation, and licensing option. Quantifies the knowledge
            burden that Azure places on the teams responsible for it, and puts it in human terms.
        </p>
        <span class="arrow">Open report &rarr;</span>
    </a>

    <a class="card" href="graph.html">
        <h2>Relationship Graph</h2>
        <p>
            Interactive force-directed graph mapping all 188 resource providers, their sub-services,
            and cross-provider relationships. Filter by category, click any node to inspect it, and
            explore how Azure's services connect.
        </p>
        <div class="feature-pills">
            <span class="pill">Live Stats</span>
            <span class="pill">Heatmap</span>
            <span class="pill">Human Cost</span>
            <span class="pill">Licensing</span>
            <span class="pill">Centrality</span>
            <span class="pill">Comparison</span>
            <span class="pill">Discount Detail</span>
        </div>
        <span class="arrow">Open graph &rarr;</span>
    </a>

    <hr class="divider">

    <div class="footer">
        <p>
            This project is open source. If you spot an error, have a suggestion, or want to
            discuss the data, please
            <a href="https://github.com/xeeva/Azure-Scale/issues">open an issue</a>.
        </p>
        <div class="btn-row">
            <a class="btn btn-outline" href="https://github.com/xeeva/Azure-Scale/issues">
                Report an issue
            </a>
            <a class="btn btn-sponsor" href="https://github.com/sponsors/xeeva">
                <span class="heart">&hearts;</span> Sponsor
            </a>
        </div>
        <p style="margin-top:1rem;font-size:0.75rem;color:var(--text-muted);">
            &copy; 2025–2026 David Summers. Licensed under
            <a href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC 4.0</a>.
        </p>
    </div>
</div>
</body>
</html>