ada/mill.html at main · mysicol/ada · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/x-icon" href="/assets/favicon.png">
  <title>The Mill</title>
  <link rel="stylesheet" href="style.css">
  <style>
    img {
        border: solid 5px;
        border-color: #38aaae;
        border-radius: 5px;
        margin-top: 20px;
    }
    .image-container {
        width: 100%;
        text-align: center;
    }
    .shower {
        cursor: pointer;
    }
    .shower:hover {
        color: #38aaae;
        transition: ease-out;
        transition-duration: 0.2s;
        text-decoration: underline;
    }
  </style>
    <body>
    <div class="container">
        <h1>the mill</h1>
        <div class="body-container">
            <p>The Mill would have been <b>fifteen feet tall</b>. This is where the <b>calculations happen</b>. The Mill would do this by using a series of barrels, gears, and columns to <b>pull numbers from the memory</b> and <b>store them in registers</b>, smaller units of memory.<br><br>What do you think is like the Mill in a modern computer?</p>
            <p class="shower" onclick="show()"><b>Click here to show:</b></p>
            <div id="imageMachine" style="visibility: hidden">
                <div class="image-container">
                    <img src="./assets/CPU.png" alt="Solid Box" width="600" height="230">
                    <p style="text-align: center">CPU (Central Processing Unit)</p>
                </div>
            </div>
        </div>
        <div class="next-button" onclick="window.location.href='analyticalengine.html'">
            <div class="button-text">< back to analytical engine</div>
        </div>
    </div>
    <script>
        function show() {
                document.getElementById("imageMachine").style.visibility = "visible";
        }
    </script>
</body>
</html>