diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.html | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..d2f7310 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,140 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="UTF-8"/> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <title>My Hardware Setup</title> + <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&family=Roboto&family=Shrikhand&display=swap" rel="stylesheet"> + <link href="/static/css/style.css" rel="stylesheet"/> + <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> + <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> + <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> + <script src="https://cdn.jsdelivr.net/npm/[email protected]/crypto-js.min.js"></script> + <script src="/static/js/main.js" defer></script> +</head> +<body> + <header> + <h1>The Heart of the Operation: My Rig, Server & Laptops</h1> + <h3>Dive deep into the silicon and circuits that power my digital world!</h3> + </header> + + <section class="main-content"> + <div class="container"> + <h2>What Makes it Tick?</h2> + <p>Ever wondered what's inside the box? I have build my setup that help's me do all of my activities smoothly and easily. Below, I'll break down the key components and what they do.</p> + + <img src="/static/images/ashita-no-joe-joe-yabuki.gif" alt="Animated CPU GIF" class="component-image"> + <div class="component-section"> + <h3><span class="icon">🖧</span> The Server</h3> + <p>This is where all of my websites, applications, files, and projects are hosted. These are accessible 24/7.</p> + <div class="component-item"> + <h4>CPU: Intel Xeon Gold</h4> + <p>The processor that handles all server requests.</p> + </div> + + <div class="component-item"> + <h4>RAM: 8GB</h4> + <p>Memory for the server to run applications.</p> + </div> + + <div class="component-item"> + <h4>Storage: 50GB SSD</h4> + <p>Fast storage for the server's operating system and data.</p> + </div> + + <div class="component-item"> + <h4>Server Status:</h4> + <div id="server-stats"> + <div class="status-container"> + <div id="server-status" class="status-light"> </div> + <span id="uptime">Checking status...</span> + </div> + </div> + </div> + + <div class="component-item" id="metrics-controls"> + <button id="view-metrics-btn" class="button">View Server Metrics</button> + </div> + + <!-- Add SNMP Metrics Section (hidden by default) --> + <div class="component-item" id="metrics-section" style="display: none;"> + <h4>Real-time Metrics:</h4> + <div id="metrics-container"> + <div class="metric-grid"> + <!-- Charts will be dynamically added here based on available metrics --> + </div> + </div> + </div> + </div> + <div class="component-section"> + <h3><span class="icon">💻</span> ThinkPad E14</h3> + <p>My daily driver laptop for work and portability.</p> + <div class="component-item"> + <h4>RAM: 16GB</h4> + <p>Plenty of memory for multitasking.</p> + </div> + <div class="component-item"> + <h4>Storage: 256GB SSD</h4> + <p>Fast storage for quick boot and application loading.</p> + </div> + </div> + + <div class="component-section"> + <h3><span class="icon">💻</span> ThinkPad T480 (Librebooted)</h3> + <p>My privacy-focused laptop, running Libreboot for enhanced security and control.</p> + <div class="component-item"> + <h4>RAM: 16GB</h4> + <p>Memory for smooth operation, even with security-focused software.</p> + </div> + <div class="component-item"> + <h4>Storage: 512GB SSD</h4> + <p>Fast and reliable storage.</p> + </div> + </div> + </div> + </section> + + <section class="cta-section"> + <div class="container"> + <h2>Explore More!</h2> + <p>Want to see these components in action? Check out these links:</p> + <a href="https://surgot.in" class="button">Visit My Website</a> + <a href="https://git.surgot.in" class="button">See My Code</a> + </div> + </section> + + <!-- + <section class="testimonials"> + <div class="container"> + <h2>What People Are Saying (About My Projects, Powered by This Hardware):</h2> + <div class="testimonial"> + <p>"[QUOTE ABOUT YOUR WEBSITE/PROJECT] - It loads so fast!" - [Name/Username]</p> + </div> + <div class="testimonial"> + <p>"[QUOTE ABOUT YOUR YOUTUBE VIDEOS/PROJECT] - The editing is incredible!" - [Name/Username]</p> + </div> + </div> + </section> + --> + + <!-- Password Modal --> + <div id="password-modal" class="modal"> + <div class="modal-content"> + <span class="close-button">×</span> + <h3>Authentication Required</h3> + <p>Please enter the password to view server metrics:</p> + <div class="password-input-container"> + <input type="password" id="metrics-password" placeholder="Enter password"> + <button id="submit-password" class="button submit-button">Submit</button> + </div> + <p id="password-error" class="error-message"></p> + </div> + </div> + + <footer> + <p>© Surgot/2025 - Built with passion (and a lot of processing power!)</p> + </footer> + +</body> +</html> |