pyro569.github.io/index.html at main · Pyro569/pyro569.github.io · 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
<html>

<head>
    <script type="text/javascript" src="/javascript/index.js"></script>
    <script type="text/javascript" src="/javascript/taskbar.js"></script>
    <title>nathanfeiler.dev</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RXK04G9G1N"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-RXK04G9G1N');
</script>


<body style="background-color: darkcyan;" id="desktop">
    <!--Page Includes-->


    <!--Page Body-->

        <!--Desktop Icons-->
        <div class="desktopIcons" style="line-height: 0.2;">
            <button onclick="openTextFile('/desktop/settings.html')" style="background-color: transparent; border: 0px;"><img src="/images/desktop icons/text_doc.png"></img></button>
                <h6 style="left: 0.5vw; position: relative;">ㅤSettings</h6>
            <button onclick="openTextFile('/subpages/projects.html')" style="background-color: transparent; border: 0px;"><img src="/images/desktop icons/text_doc.png"></img></button>
                <h6 style="left: 0.5vw; position: relative;">ㅤProjects</h6>
            <!--<button onclick="openTextFile('/subpages/kobiware.html')" style="background-color: transparent; border: 0px;"><img src="/images/desktop icons/text_doc.png"></img></button>
                <h6>ㅤKobiWare</h6>-->
            <button onclick="openTextFile('/subpages/tsa.html')" style="background-color: transparent; border: 0px;"><img src="/images/desktop icons/text_doc.png"></img></button>
                <h6 style="left: 0.5vw; position: relative;">TSA</h6>
            <button onclick="openGame('/subpages/games.html')" style="background-color: transparent; border: 0px;"><img src="/images/desktop icons/game_cartridge.png"></img></button>
                <h6 style="left: 0.5vw; position: relative;">ㅤGames</h6>
        </div>

        <iframe id="textFrame" style="width: 25%; height: 25%; border-width: 5px;" src="/subpages/DawnLang.html" draggable="true"></iframe>

        <div class="taskbar">
            <button style="width: 10%; height: 5%; background-color: darkgray;" id="startButton">Start</button>
            <button onclick="currentTime()" style="width: 10%; height: 5%; background-color: darkgray; border: 0;" id="emptyTaskBar"></button>
            <button onclick="currentTime()" style="width: 65%; height: 5%; background-color: darkgray; border: 0;" id="emptyTaskbar1">
                <h5 id="start"></h5>
            </button>
            <button onclick="currentTime()" style="width: 20%; height: 5%; background-color: darkgray;" id="dateTimeButton">
                <h5 id="dateTime"></h5>
            </button>
        </div>


        <div class="startMenu" style="width: 10%; height: 50%; background-color: darkgray;" id="startMenu">
            <button onmouseenter="startSubmenu()" id="programs" style="width: 100%; height: 10%; background-color: darkgray;">Programs<img src="/images/desktop icons/arrow.png" style="height: 25%;"></button>
            <button id="favorites" style="width: 100%; height: 10%; background-color: darkgray;">Favorites<img src="/images/desktop icons/arrow.png" style="height: 25%;"></button>
            <button id="internet" style="width: 100%; height: 10%; background-color: darkgray;" onclick="internetExplorer()">Internet Explorer</button>
        </div>

        <div class="startMenuExtension" style="width: 10%; height: 45%; background-color: darkgray;" id="startMenuExtension">
                <button id="programs" style="width: 100%; height: 10%; background-color: darkgray;">Programs<img src="/images/desktop icons/arrow.png" style="height: 25%;"></button>
                <button id="favorites" style="width: 100%; height: 10%; background-color: darkgray;">Favorites<img src="/images/desktop icons/arrow.png" style="height: 25%;"></button>
        </div>

        <script>
            function timer() {
                currentTime();
            }
            setInterval(timer, 1000); //get the current date and time every second, should probably change later as this seems slightly demanding

            document.getElementById('textFrame').style.display = "none"; //initially make the iframe invisible so as to give the "on desktop feel"
            document.getElementById('startMenu').style.display = "none";
            document.getElementById('startMenuExtension').style.display = "none";

            var textFrame = document.getElementById('textFrame');

            textFrame.addEventListener('dragstart', dragStart);
            textFrame.addEventListener('dragend', dragEnd);

            function dragStart(event) {
                event.dataTransfer.setData('text/plain', event.target.id);
            }

            function dragEnd(event) {
                event.target.style.opacity = '1';
            }

            document.addEventListener('dragover', dragOver);
            document.addEventListener('drop', drop);

            function dragOver(event) {
                event.preventDefault();
            }

            function drop(event) {
                event.preventDefault();

                var data = event.dataTransfer.getData('text/plain');

                var draggableElement = document.getElementById(data);

                draggableElement.style.left = event.clientX + 'px';
                draggableElement.style.top = event.clientY + 'px';
            }
        </script>

</body>

</html>