-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (105 loc) · 5.94 KB
/
index.html
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
<html>
<head>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<title>FarawayDrip30</title>
</head>
<body>
<center>
<div class="background"></div>
<br><br>
<div id="page" style="position: relative; transition: margin-top 2s;">
<div style="position: absolute; top: 200px; left: 50%; right: 50%; transform: translate(-50%, -50%); display:flex; width: fit-content; margin: auto; pointer-events: none;">
<div><img src="../Assets/Images/floatinghead.png" class="floatinghead"></div>
<div class="boxWidth"></div>
<div><img src="../Assets/Images/floatinghead.png" class="floatinghead" style="animation-delay: -1s;"></div>
</div>
<div>
<div class="headerBox">
<h1 class="title">FarawayDrip30</h1>
</div>
<div class="box" style="background-color: lightblue;">
<a class="titleLink" href="https://www.youtube.com/channel/UCQHx127o2j3G7kTpBMD5aYw">YouTube</a>
<a class="titleLink" href="https://twitter.com/FarawayDrip30">Twitter</a>
<a class="titleLink" href="https://farawaydrip30.itch.io/">Itch.io</a>
<a class="titleLink" href="https://farawaydrip30.newgrounds.com/">Newgrounds</a>
</div>
<div id="mainBox" class="box" style="display: inline-block;">
<h2 class="title">MAIN STUFF</h2>
<div style="width: fit-content;">
<a href="../index.html" id="latestA">
<div id="latestDiv" class="mediaBox" style="float: left;">
<img src="" style="height: 300px;">
<p>Latest</p>
</div>
</a>
<div id="sideFeatures" style="float: left; width: calc(100% - fit-content);">
<a href="info.html?file=Games&type=Game&name=Birdpals">
<div class="mediaBox">
<img src="../Assets/Images/birdpals2.png" style="height: 127px;">
<p>Birdpals</p>
</div>
</a>
<a href="info.html?file=Games&type=Game&name=Watching Someone Pee Simulator">
<div class="mediaBox">
<img src="../Assets/Images/WSPSVS2.webp" style="height: 127px;">
<p>WSPS</p>
</div>
</a>
</div>
</div>
</div>
<div class="box" style="border-bottom-right-radius: 50px; border-bottom-left-radius: 50px;">
<a href="info.html?file=Games&type=IconList&entryType=Game">
<div class="mediaBox">
<img src="../Assets/Images/WSPSVS.webp">
<p>Games</p>
</div>
</a>
<a href="info.html?file=Music&type=IconList&entryType=Music">
<div class="mediaBox">
<img src="../Assets/Images/birdpalsAlbum.jpg">
<p>Music</p>
</div>
</a>
</div>
</div>
</div>
<script src="../Assets/Externals/JQuery/jquery-3.6.0.min.js"></script>
<script src="../Assets/Scripts/loadFromJSON.js"></script>
<script>
var latestA = document.getElementById("latestA");
var latestDiv = document.getElementById("latestDiv");
var mainBox = document.getElementById("mainBox");
var games;
function setGames(data){
games = data
let latestGame = games.Games[games.Games.length-1]
latestDiv.children[0].src = "Assets/Images/" + latestGame.thumbnail
latestA.href = "info.html?file=Games&type=Game&name="+latestGame.name;
}
loadFromJSON("../Assets/JSONs/Games.json",setGames);
function resizeSideFeatures(){
// Sets Side Features div to either be on top of each other or next to (depending on room)
var sideFeatures = document.getElementById("sideFeatures")
sideFeatures.style.width = "fit-content"
if(sideFeatures.offsetWidth / 2 + latestDiv.offsetWidth < mainBox.offsetWidth-20){
sideFeatures.style.width = sideFeatures.offsetWidth / 2;
//console.log("latestDiv: " + latestDiv.offsetWidth + ", sideFeatures: " + sideFeatures.offsetWidth + ", mainBox: " + mainBox.offsetWidth)
}
}
addEventListener("resize", function(e){
resizeSideFeatures();
})
resizeSideFeatures();
latestDiv.children[0].onload = resizeSideFeatures;
</script>
<script>
function floatPage(){
let page = document.getElementById("page");
page.style.marginTop = "-100%";
}
</script>
</center>
</body>
</html>