index.html (view raw)
1<!DOCTYPE html>
2<html lang="en" style="height: 100%">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>BiRabittoh's cool website</title>
9 <link rel="stylesheet" href="res/style.css">
10 <link href="https://pvinis.github.io/iosevka-webfont/3.4.1/iosevka.css" rel="stylesheet" />
11</head>
12
13<body style='background-image: url("res/img/background.jpg"); height: 100%;'>
14 <div id="main-container">
15 <div class="center" style="padding-top:30px;">
16 <a data-page="about" id="aTitle">
17 <img src="res/gif/text.gif" alt="BiRabittoh's cool website" class="hover-tilt">
18 </a>
19 </div>
20 <div id="background-orange">
21 <h1>My favorite things:</h1>
22 <a data-page="earthbound">
23 <div class="menu-item">
24 <span>Earthbound</span>
25 <img src="res/gif/ness1.gif">
26 </div>
27 </a>
28 <a data-page="dragonquest">
29 <div class="menu-item">
30 <span>Dragon Quest</span>
31 <img src="res/gif/slime1.gif">
32 </div>
33 </a>
34 <a data-page="zelda">
35 <div class="menu-item">
36 <span>Zelda</span>
37 <img src="res/gif/linkmc.gif">
38 </div>
39 </a>
40 <a data-page="indies">
41 <div class="menu-item">
42 <span>Indies</span>
43 <img src="res/gif/tutoriel.gif">
44 </div>
45 </a>
46 <a data-page="anime">
47 <div class="menu-item">
48 <span>Anime</span>
49 <img src="res/gif/jojo.gif">
50 </div>
51 </a>
52 <a data-page="gf">
53 <div class="menu-item">
54 <span>My perfect GF</span>
55 <img src="res/gif/kirby.gif">
56 </div>
57 </a>
58 </div>
59 <!--<iframe id="content-iframe" name="content" src="pages/about.html" onload="this.height = (this.contentWindow.document.body.scrollHeight + 43) + 'px';"></iframe>-->
60 <iframe id="content-iframe" name="content" src="pages/about.html"></iframe>
61 </div>
62 <div id="music-player-base" onclick="playPause()">
63 <div id="music-player-overlay">
64 </div>
65
66 <audio controls loop id="music"><source id="music-source" src="res/mus/Awesome Rap Beat.opus"></audio>
67 </div>
68
69 <script>
70 const menu_div = document.getElementById("background-orange");
71 const iframe = document.getElementById("content-iframe");
72 const music = document.getElementById("music");
73 const source = document.getElementById("music-source");
74 const music_base = document.getElementById("music-player-base");
75
76 const tracks = {
77 "about": "AwesomeRapBeat.opus",
78 "anime": "WeFellIntoaDream.opus",
79 "dragonquest": "ForestFeast.opus",
80 "earthbound": "GoodtimeRock.opus",
81 "gf": "KatiesKuddlyKatKorner.opus",
82 "indies": "Earmint.opus",
83 "zelda": "ForestFeast.opus",
84 }
85
86 let play = false;
87 let currentPage = "about"
88
89 function goToPage(page) {
90 if(currentPage == page)
91 return
92 iframe.src = "pages/" + page + ".html";
93
94 const newTrack = tracks[page];
95
96 if(newTrack != tracks[currentPage]){
97 source.src = "res/mus/" + newTrack;
98 music.pause();
99 music.load();
100 if (play)
101 music.play();
102 }
103
104 currentPage = page;
105 }
106 const title = document.getElementById("aTitle");
107 title.addEventListener("click", () => goToPage(title.getAttribute("data-page")));
108 [ ...menu_div.childNodes ].forEach(element => {
109 try{
110 const page = element.getAttribute("data-page");
111 if (page){
112 element.addEventListener("click", () => goToPage(page));
113 }
114 } catch {}
115 });
116
117
118 function playPause() {
119 if (play){
120 music_base.style.backgroundImage = "url('res/img/player_pause.png')";
121 music.pause();
122 play = false
123 }
124 else {
125 music_base.style.backgroundImage = "url('res/img/player_play.png')";
126 music.volume = 0.1;
127 music.play();
128 play = true
129 }
130 }
131
132 </script>
133</body>
134
135</html>