tinydc.net/index.html at main · GoodrichDev/tinydc.net · 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
103
104
105
106
107
108
109
110
111
112
113
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>tinyDC — Rack inventory</title>
    <meta name="description" content="Explore tinyDC's documented rack layout, server hardware, storage, and services.">
    <link rel="canonical" href="https://tinydc.net/">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://tinydc.net/">
    <meta property="og:title" content="tinyDC — Rack inventory">
    <meta property="og:description" content="Interactive rack visualizer showing server placement, CPU, RAM, storage, NIC, and hardware specs.">
    <meta property="og:site_name" content="tinyDC">
    <meta property="og:image" content="https://tinydc.net/social-card-20260909.png">
    <meta property="og:image:secure_url" content="https://tinydc.net/social-card-20260909.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1730">
    <meta property="og:image:height" content="909">
    <meta property="og:image:alt" content="tinyDC — Rack inventory. A dark rack diagram with one device highlighted in amber.">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://tinydc.net/">
    <meta name="twitter:title" content="tinyDC — Rack inventory">
    <meta name="twitter:description" content="Explore tinyDC's server rack, hardware insights, and system configuration.">
    <meta name="twitter:image" content="https://tinydc.net/social-card-20260909.png">
    <meta name="twitter:image:alt" content="tinyDC — Rack inventory. A dark rack diagram with one device highlighted in amber.">
    <link rel="image_src" href="https://tinydc.net/social-card-20260909.png">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <a class="skip-link" href="#main">Skip to inventory</a>
    <header class="site-header">
        <div class="header-inner">
            <a class="wordmark" href="/" aria-label="tinyDC home">
                <svg class="brand-mark" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="3" width="18" height="7" rx="1"/><rect x="3" y="14" width="18" height="7" rx="1"/><path d="M7 6.5h2m-2 11h2m4-11h4m-4 11h4"/></svg>
                tiny<span>DC</span>
            </a>
            <span class="header-context">Infrastructure / Inventory</span>
            <a class="source-link" href="https://github.com/GoodrichDev/tinydc.net" target="_blank" rel="noopener noreferrer">Source <span aria-hidden="true">↗</span></a>
        </div>
    </header>

    <main id="main" class="app" tabindex="-1">
        <section class="page-heading" aria-labelledby="page-title">
            <div>
                <p class="eyebrow">TINYDC / HARDWARE</p>
                <h1 id="page-title">Rack inventory</h1>
                <p class="page-description">Hardware, placement, and what runs on it.</p>
            </div>
            <dl class="rack-summary" aria-label="Rack summary">
                <div><dt>Devices</dt><dd id="device-count">—</dd></div>
                <div><dt>Occupied</dt><dd><span id="occupied-units">—</span><span class="summary-suffix"> U</span></dd></div>
                <div><dt>Capacity</dt><dd><span id="total-units">—</span><span class="summary-suffix"> U</span></dd></div>
            </dl>
        </section>

        <div class="workspace">
            <section id="rack-section" class="rack-panel" aria-labelledby="rack-title">
                <header class="panel-header">
                    <h2 id="rack-title">Server rack</h2>
                    <span class="panel-caption">Front elevation</span>
                </header>
                <div class="rack-stage">
                    <div class="rack-orientation"><span>UNIT</span><span>TOP</span></div>
                    <div id="rack" class="rack" aria-label="Rack devices"></div>
                    <div class="rack-orientation rack-bottom"><span id="rack-capacity">— U RACK</span><span>BOTTOM</span></div>
                </div>
                <footer class="rack-legend"><span><i class="selection-key" aria-hidden="true"></i>Selected device</span><span>Select a device to inspect</span></footer>
            </section>

            <section id="device-panel" class="device-panel" aria-labelledby="device-panel-title" tabindex="-1">
                <header class="panel-header detail-panel-header">
                    <h2 id="device-panel-title">Device details</h2>
                    <a class="back-to-rack" href="#rack-section">↑ Rack layout</a>
                    <span class="panel-caption detail-caption">Hardware inventory</span>
                </header>
                <div id="details-empty" class="empty-state" role="status">Loading rack inventory…</div>
                <div id="details" class="details" hidden>
                    <div class="device-heading">
                        <p id="detail-id" class="device-id"></p>
                        <h3 id="detail-name"></h3>
                        <div class="device-location"><span id="detail-position"></span><span class="location-divider" aria-hidden="true">/</span><span id="detail-units"></span></div>
                    </div>
                    <section class="detail-section" aria-labelledby="specs-title">
                        <h4 id="specs-title">Specifications</h4>
                        <dl class="spec-list">
                            <div><dt>Processor</dt><dd id="detail-cpu"></dd></div>
                            <div><dt>Memory</dt><dd id="detail-ram"></dd></div>
                            <div><dt>Storage</dt><dd id="detail-storage"></dd></div>
                            <div><dt>Network</dt><dd id="detail-nic"></dd></div>
                        </dl>
                    </section>
                    <section class="detail-section" aria-labelledby="services-title">
                        <h4 id="services-title">Services</h4>
                        <ul id="detail-services" class="services-list"></ul>
                    </section>
                    <section class="detail-section notes-section" aria-labelledby="notes-title">
                        <h4 id="notes-title">Notes</h4>
                        <p id="detail-notes"></p>
                    </section>
                    <div class="monitoring-note"><span class="status-marker" aria-hidden="true"></span><p>Live monitoring <span id="detail-online">unavailable</span><small>Hardware and service health are not tracked here.</small></p></div>
                </div>
            </section>
        </div>

        <footer class="page-footer">
            <details class="inventory-source"><summary>About this inventory</summary><p id="inventory-note"></p></details>
            <span>tinyDC · Independent infrastructure</span>
        </footer>
        <noscript><p class="empty-state">Enable JavaScript to explore the rack inventory.</p></noscript>
    </main>
</body>
</html>