-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·238 lines (208 loc) · 10.8 KB
/
Copy pathindex.html
File metadata and controls
executable file
·238 lines (208 loc) · 10.8 KB
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!--
Anthony Wilson - Site root page
Protected by the GNU General Public License V3
2 November 2020
20-11-2
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Anthony Wilson</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Anthony Wilson">
<meta name="description" content="Main project webpage, which links to all of my most popular public projects">
<link rel="icon" type="image/png" href="/Favicon128x128.png" sizes="128x128">
<meta property="og:title" content="Anthony Wilson">
<meta property="og:type" content="website">
<meta property="og:url" content="https://AnthonyW2.github.io/">
<!--meta property="og:image" content="/OGImage.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="256">
<meta property="og:image:height" content="256"-->
<meta property="og:description" content="Welcome to my site. From here, I link my various open-source projects, an about me page, and other relevant information.">
</head>
<body onload="StartJS()">
<!--The heading bar that stays at the top of the page-->
<div id="HeaderContainer">
<div id="MainHeaderContainer">
<h1 id="MainHeader">Anthony Wilson</h1>
<div id="SettingsBtn" onclick="OpenSettingsDialogue()">
<svg id="GearSVG" width="60" height="60">
<polygon id="GearPolygon" points="29.800003,49.999 34.097767,49.575706 35.601387,43.9149 38.457855,42.388084 44.00001,44.28285 46.739674,40.944557 43.8001,35.878544 44.740307,32.77909 49.999,30.199995 49.575706,25.902235 43.9149,24.398613 42.388084,21.542143 44.28285,15.99999 40.944557,13.260326 35.87854,16.1999 32.779095,15.259693 30.199995,10.000999 25.902231,10.4242935 24.398615,16.085098 21.542145,17.611916 15.999989,15.7171545 13.260323,19.05545 16.1999,24.121458 15.259693,27.22091 10.000999,29.8 10.4242935,34.09777 16.085098,35.601383 17.611916,38.457863 15.717154,44.00001 19.055445,46.739677 24.121452,43.8001 27.220911,44.740307" fill="#e0e0e0"/>
<circle id="GearInnerCircle" cx="30" cy="30" r="10" fill="#383838"/>
⚙ <!--If the browser doesn't support inline SVGs, display this gear icon instead-->
</svg>
</div>
</div>
<!--div id="HeaderChategoryBtnsContainer">
<a href="#All" id="HdrCtgBtnAll" class="HeaderChategoryBtn" onclick="SetChategoryFilter(0)">All</a>
<a href="#Games" id="HdrCtgBtnGames" class="HeaderChategoryBtn" onclick="SetChategoryFilter(1)">Games</a>
<a href="#4D" id="HdrCtgBtn4D" class="HeaderChategoryBtn" onclick="SetChategoryFilter(2)">4D</a>
<a href="#Physics" id="HdrCtgBtnPhysics" class="HeaderChategoryBtn" onclick="SetChategoryFilter(3)">Physics</a>
<a href="#Plants" id="HdrCtgBtnPlants" class="HeaderChategoryBtn" onclick="SetChategoryFilter(4)">Plants</a>
<a href="#AI" id="HdrCtgBtnAI" class="HeaderChategoryBtn" onclick="SetChategoryFilter(5)">AI</a>
<a href="#Other" id="HdrCtgBtnOther" class="HeaderChategoryBtn" onclick="SetChategoryFilter(6)">Other</a>
<input type="text" id="SearchBar" placeholder="Search"></input>
</div-->
</div>
<!--Page links-->
<div id="PageLinksContainer">
<!--Parity Site-->
<a href="https://anthonyw2.github.io/" class="InheritColor">
<div class="PageLink" style="top: 100px;">
<div class="PageLinkHeader">
Github Pages site
</div>
<div class="PageLinkDescription">
<p>My server does't have 24/7 uptime, so a copy of this site is also hosted on Github Pages.<br>Follow this link to visit it.</p>
</div>
</div>
</a>
<!--Projects Page-->
<a href="Projects/" class="InheritColor">
<div class="PageLink" style="top: 400px;">
<div class="PageLinkHeader">
Projects page
</div>
<div class="PageLinkDescription">
<p>On this page you can find links to all of my public & open-source projects.<br>There are links to things like 4 Dimensional Chess, 4 Dimensional Arimaa, smaller test projects, physics simulations, AI projects, etc.</p>
</div>
</div>
</a>
<!--About Me Page-->
<a href="AboutMe/" class="InheritColor">
<div class="PageLink" style="top: 700px;">
<div class="PageLinkHeader">
About Me
</div>
<div class="PageLinkDescription">
<p>
• General Info<br>
• My Setup<br>
• Projects History<br>
</p>
</div>
</div>
</a>
</div>
<div id="SettingsDialogue" hidden>
<div id="DimBackground" onclick="CloseSettingsDialogue()"></div>
<div id="SettingsWindow">
<select id="ThemeSelector" onchange="UpdateColorScheme()">
<option value="0">Faded Grey (Default)</option>
<option value="1">Light White</option>
<option value="2">Steel Grey</option>
<option value="3">Green</option>
</select>
</div>
</div>
<script>
// === Settings cog rotation === //
var settingsCogRotation = 0;
var settingsCogElem = document.getElementById("GearSVG");
// Rotate the settings button in the top right of the page
function RotateSettingsCog(){
// Apply rotate transformation to element
settingsCogElem.style.transform = "rotate("+settingsCogRotation+"deg)";
// Increment rotation value
settingsCogRotation += 0.5;
// Call this function on the next animation frame
window.requestAnimationFrame(RotateSettingsCog);
}
// === Settings dialogue === //
// Bring up the setting dialogue window
function OpenSettingsDialogue(){
document.getElementById("SettingsDialogue").hidden = false;
}
// Close the setting dialogue window
function CloseSettingsDialogue(){
document.getElementById("SettingsDialogue").hidden = true;
}
// === Page color schemes === //
var Themes = [
[ // Default dark grey theme
"#505050", //0 - Body background
"#383838", //1 - Header background
"#e0e0e0", //2 - Header text
"#e0e0e0", //3 - Settings button (cogwheel)
"#353535", //4 - Header chategory button background
"#404040", //5 - Header chategory button background 2
"#d0d0d0", //6 - Header chategory button text
"#404040", //7 - Search bar background
"#d0d0d0", //8 - Search bar text
"#404040", //9 - Project link header BG
"#d0d0d0", //10 - Project link header text
"#303030", //11 - Project link BG
"#d0d0d0" //12 - Project link description text
],
//0 1 2 3 4 5 6 7 8 9 10 11 12
["#e0e0e0","#b0b0b0","#202020","#202020","#d0d0d0","#b5b5b5","#303030","#c0c0c0","#303030","#c0c0c0","#303030","#d0d0d0","#303030"], // Light/white theme
["#3C4144","#545B5F","#e0e0e0","#e0e0e0","#282B2D","#303436","#d0d0d0","#303436","#d0d0d0","#242729","#d0d0d0","#303436","#d0d0d0"], // Steel grey theme
["#60AF09","#2E7D10","#e0e0e0","#e0e0e0","#218B00","#1F7904","#e0e0e0","#1F7904","#d0d0d0","#1C6D04","#d0d0d0","#1F7904","#d0d0d0"] // Green theme
];
// Change the color scheme of the page
function ChangeColorScheme(theme){
// Change body (0)
document.body.style.background = Themes[theme][0];
// Change header (1,2)
document.getElementById("HeaderContainer").style.background = Themes[theme][1];
document.getElementById("MainHeader").style.color = Themes[theme][2];
// Change settings cog (3)
document.getElementById("SettingsBtn").style.color = Themes[theme][3];
document.getElementById("GearPolygon").setAttribute("fill",Themes[theme][3]);
document.getElementById("GearInnerCircle").setAttribute("fill",Themes[theme][1]);
// Chategory buttons (4,5,6)
//var HeaderChategoryBtns = document.getElementsByClassName("HeaderChategoryBtn");
//for(var a = 0;a < HeaderChategoryBtns.length;a += 1){
// if(a%2 == 0){
// HeaderChategoryBtns[a].style.background = Themes[theme][4];
// }else{
// HeaderChategoryBtns[a].style.background = Themes[theme][5];
// }
// HeaderChategoryBtns[a].style.color = Themes[theme][6];
//}
// Search bar (7,8)
//document.getElementById("SearchBar").style.background = Themes[theme][7];
//document.getElementById("SearchBar").style.color = Themes[theme][8];
// Page links (9,10,11,12)
var ProjectLinks = document.getElementsByClassName("PageLink");
var ProjectLinkHeaders = document.getElementsByClassName("PageLinkHeader");
var ProjectLinkDescriptions = document.getElementsByClassName("PageLinkDescription");
for(var a = 0;a < ProjectLinks.length;a += 1){
ProjectLinkHeaders[a].style.background = Themes[theme][9];
ProjectLinkHeaders[a].style.color = Themes[theme][10];
ProjectLinks[a].style.background = Themes[theme][11];
ProjectLinkDescriptions[a].style.color = Themes[theme][12];
}
}
// Get the selected color scheme from the element in the settings menu and apply it
function UpdateColorScheme(){
var ThemeSelector = document.getElementById("ThemeSelector");
ChangeColorScheme(parseInt(ThemeSelector.options[ThemeSelector.selectedIndex].value));
}
// === Handle keypresses globally === //
document.onkeydown = function(e){
e = e || window.event;
if(e.key === "Escape" || e.keyCode === 27){
if(document.getElementById("SettingsDialogue").hidden){
OpenSettingsDialogue();
}else{
CloseSettingsDialogue();
}
}
};
// === Start JavaScript once the body has loaded === //
function StartJS(){
if(window.getComputedStyle(document.body,null).getPropertyValue("background-color") != "rgb(80, 80, 80)"){
document.body.style.background = "#505050";
document.body.style.setProperty("background-color","#505050");
console.log(window.getComputedStyle(document.body,null).getPropertyValue("background-color"));
//alert("For the best experience on this site, disable any color-changing plugins (such as dark mode plugins)");
}
RotateSettingsCog();
}
</script>
</body>
</html>