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
114
115
116
117
118
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <!-- Primary Meta Tags -->
<title>tinyDC — Mini Datacenter Rack Visualizer</title>
<meta name="title" content="tinyDC — Mini Datacenter Rack Visualizer">
<meta name="description" content="View the live rack layout of tinyDC, including server positions, hardware specs, and system details.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://tinydc.net/">
<meta property="og:title" content="tinyDC — Mini Datacenter Rack Visualizer">
<meta property="og:description" content="Interactive rack visualizer showing server placement, CPU, RAM, storage, NIC, and hardware specs.">
<meta property="og:image" content="https://i.imgur.com/NCRjta6.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://tinydc.net/">
<meta property="twitter:title" content="tinyDC — Mini Datacenter Rack Visualizer">
<meta property="twitter:description" content="Explore tinyDC's server rack, hardware insights, and system configuration.">
<meta property="twitter:image" content="https://i.imgur.com/NCRjta6.png">

<!-- Fallback for non-OG scrapers -->
<link rel="image_src" href="https://i.imgur.com/NCRjta6.png">

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="app">
    <header class="app-header">
        <h1 id="rack-title">Server Rack</h1>
        <p class="subtitle">Click a device to view details</p>
    </header>

    <main class="layout">
        <section class="rack-wrapper">
            <div class="rack-frame">
                <div class="rack-top-label">Top</div>
                <div id="rack" class="rack"></div>
                <div class="rack-bottom-label">Bottom</div>
            </div>
        </section>

        <aside class="details-panel">
            <h2>Hardware Information</h2>
            <div id="details-empty">
                <p>Select a device in the rack to view details.</p>
            </div>
            <div id="details" class="details hidden">
                <h3 id="detail-name"></h3>
                <p class="detail-line">
                    <span class="label">Rack Units:</span>
                    <span id="detail-units"></span>
                </p>
                <p class="detail-line">
                    <span class="label">Position:</span>
                    <span id="detail-position"></span>
                </p>
                <p class="detail-line">
                    <span class="label">Online:</span>
                    <span id="detail-online" class="status-pill status-unknown">
              Planned - not wired yet
            </span>
                </p>

                <p class="detail-line specs-heading">
                    <span class="label">Specs:</span>
                </p>
                <div class="specs-grid">
                    <p class="detail-line">
                        <span class="label">CPU:</span>
                        <span id="detail-cpu"></span>
                    </p>
                    <p class="detail-line">
                        <span class="label">RAM:</span>
                        <span id="detail-ram"></span>
                    </p>
                    <p class="detail-line">
                        <span class="label">Storage:</span>
                        <span id="detail-storage"></span>
                    </p>
                    <p class="detail-line">
                        <span class="label">NIC:</span>
                        <span id="detail-nic"></span>
                    </p>
                </div>

                <p class="detail-line">
                    <span class="label">Services:</span>
                </p>
                <ul id="detail-services" class="services-list"></ul>

                <p class="detail-line">
                    <span class="label">Notes:</span>
                </p>
                <p id="detail-notes"></p>

                <div class="future-note">
                    Online states and service health checks will be wired in later.
                </div>
            </div>
        </aside>
    </main>
</div>

<footer class="tiny-footer">
    <a href="https://github.com/GoodrichDev/tinydc.net" target="_blank" rel="noopener noreferrer">
        [View Source Code]
    </a>
</footer>
<script src="script.js"></script>
<!--TRACKING-->
</body>
</html>