<!doctype html>
<html lang="en">
    <head>

    <!--
      Author: Ethan Holwey
      Filename: Hardware.html
    -->           
        <title>Hardware</title>
        <meta charset="UTF-8">
        <script src="js/MBCalc.js" defer="defer"></script>   
        <!--CSS Styling Goes Here with the Style Tag-->
        <style>
            h1 {
                text-align: center;
            }

        /* Navigation Bar Reference: https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp */
        /* https://developer.mozilla.org/en-US/docs/Web/CSS/border-right */ 
            nav {
                width: 150px;
                position: fixed;
                top: 0;
                left: 0;
                height: 100%;
                border-right: 1px solid;
                padding-top: 20px;
                
            }
            nav a {
                display: block;
                text-decoration: none;
                padding: 10px;
            }
            /* Shifts the header, main text, and footer to the right to make way for the sidebar */
            main {
                
                margin-left: 160px; 

            }
            header{
                margin-left: 160px;
            } 
            footer{
                text-align: center;
                margin-left: 160px;
            }
            /* Centers the images, reference: https://www.w3schools.com/howto/howto_css_image_center.asp */
            main img {
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 20%;
                padding-top: 10px;
            }
            .paragraph-heading {
                font-size: 20px;
                font-weight: bold;
            }
        </style>

    </head>


    <body>
    <!--Everything goes here-->
    <header>
        <h1>Hardware</h1>
    <nav>
        
        <a href="home.html" title="Home">Home</a>
        <a href="Hardware.html" title="Hardware">Hardware</a>
        <a href="Networking.html" title="Networking">Networking</a>
        <a href="Virtualization.html" title="Virtualization">Virtualization</a>
        <a href="../home.htm" title="Course Homepage">Course Homepage</a>
    </nav>    
    </header>

    <main>
        <hr>
        <img src="images/MiniPC.png" title="Image of the MINISFORUM UN1290 Mini-PC" alt="Image of the MINISFORUM UN1290 Mini-PC">
        <p>My current homelab consists of the following hardware:</p>
        <ul>
            <li>Dell OptiPlex 5060 with an Intel 8th Generation i7 CPU</li>
            <li>MINISFORUM UN1290 Mini-PC with an Intel 12th Generation i9 CPU </li>
            <li>Custom-built PC with an Intel 7th Generation i7 CPU</li>
            <li>Linksys EA7300 Router</li>
        </ul>
        

        <p>The Linksys Router is running OpenWRT for its OS, which is a lightweight Linux distribution that essentially allows for more firewall customization. <a href="Networking.html">More details on the Networking page.</a>
        <br>The Dell OptiPlex 5060 & MINISFORUM Mini-PC are both running Proxmox for their OS, which is a Tier-1 hypervisor that allows for the creation of virtual machines. <a href="Virtualization.html">More details on the Virtualization page.</a>
        <br>The re-purposed Desktop PC is running Unraid OS, which is advertised as an all-in-one solution for storage, virtualization, and Docker containers. While I do use Unraid for some docker containers, 
        <br>I primarily use it as a NAS (Network-Attached Storage) solution for storing files. There are two hard drives within the computer that use Unraid's storage redundancy
        <br>to ensure data isn't lost if one drive fails. 
        </p>
        
        <p>One thing that needs to be consistently upgraded in my homelab is RAM. Having high amounts of memory is crucial when allocating
        <br>resources to virtual machines and containers.
        <br>Below, you'll find a calculator that converts Gigabytes to Megabytes, should that be needed when purchasing RAM or for when
        <br>you need to determine the correct amount of RAM to allocate to a VM.</p> 
        


        <p class="paragraph-heading">Gigabytes to Megabytes Calculator</p>
        <!-- Text box that accepts a number a user enters-->
        <input type="number" id="gigabytes" name="gigabytes" placeholder="Enter Gigabytes">
        <!-- Calculate button-->
        <button id="ConversionButton">Convert</button>

        <p>Answer:<span id="MBConversion"></span></p>
    </main>

    





    <footer>
        <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fholweye542.macombserver.net%2Fitwp1100%2Fproject1%2FHardware.html" title="HTML5 Validation">HTML5 Validation</a>
        <a href="https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fholweye542.macombserver.net%2Fitwp1100%2Fproject1%2FHardware.html" title="CSS Validation">CSS Validation</a>
    </footer>





    </body>
</html>

