add plain version and create gf page
Marco Andronaco andronacomarco@gmail.com
Tue, 20 Sep 2022 15:17:11 +0200
50 files changed,
291 insertions(+),
19 deletions(-)
jump to
M
index.html
→
index.html
@@ -18,7 +18,7 @@ </div>
<div id="main-container"> <div class="center" style="padding-top:30px;"> <a onmousedown="goToPage('about')"> - <img src="res/gif/text.gif" alt="BiRabittoh's cool website" class="hover-tilt"> + <img src="res/gif/index/text.gif" alt="BiRabittoh's cool website" class="hover-tilt"> </a> </div> <div id="menu-div" class="shadow">@@ -26,41 +26,41 @@ <h1 style="margin-top:0px;">My favorite things:</h1>
<a onmousedown="goToPage('earthbound')"> <div class="menu-item"> <span>Earthbound</span> - <img src="res/gif/ness1.gif"> + <img src="res/gif/index/ness1.gif"> </div> </a> <a onmousedown="goToPage('zelda')"> <div class="menu-item"> <span>Zelda</span> - <img src="res/gif/linkmc.gif"> + <img src="res/gif/index/linkmc.gif"> </div> </a> <a onmousedown="goToPage('dragonquest')"> <div class="menu-item"> <span>Dragon Quest</span> - <img src="res/gif/slime1.gif"> + <img src="res/gif/index/slime1.gif"> </div> </a> <a onmousedown="goToPage('indies')"> <div class="menu-item"> <span>Indies</span> - <img src="res/gif/tutoriel.gif"> + <img src="res/gif/index/tutoriel.gif"> </div> </a> <a onmousedown="goToPage('anime')"> <div class="menu-item"> <span>Anime</span> - <img src="res/gif/jojo.gif"> + <img src="res/gif/index/jojo.gif"> </div> </a> <a onmousedown="goToPage('gf')"> <div class="menu-item"> <span>My perfect gf</span> - <img src="res/gif/kirby.gif"> + <img src="res/gif/index/kirby.gif"> </div> </a> </div> - <iframe id="mainframe" name="content" src="pages/about.html"></iframe> + <iframe id="mainframe" name="content" src="pages/about.html" height="1"></iframe> </div> <div id="music-player" onmouseenter="showTitle()" style="bottom: -100%"> <div id="music-player-base" onmousedown="playPause()">
A
index.plain.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html> +<html lang="en" style="height: 100%" onmousedown="firstClickPlay(this);"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>BiRabittoh</title> + <link rel="stylesheet" href="res/css/style.css"> + <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>ðŸ¥</text></svg>"> +</head> + +<body style='background-image: url("res/img/background.jpg"); height: 100%;'> + <div id="main-container"> + <div class="center" style="padding-top:30px;"> + <a href="pages/about.html" target="content"> + <img src="res/gif/index/text.gif" alt="BiRabittoh's cool website" class="hover-tilt"> + </a> + </div> + <div id="menu-div" class="shadow"> + <h1 style="margin-top:0px;">My favorite things:</h1> + <a href="pages/earthbound.html" target="content"> + <div class="menu-item"> + <span>Earthbound</span> + <img src="res/gif/index/ness1.gif"> + </div> + </a> + <a href="pages/zelda.html" target="content"> + <div class="menu-item"> + <span>Zelda</span> + <img src="res/gif/index/linkmc.gif"> + </div> + </a> + <a href="pages/dragonquest.html" target="content"> + <div class="menu-item"> + <span>Dragon Quest</span> + <img src="res/gif/index/slime1.gif"> + </div> + </a> + <a href="pages/indies.html" target="content"> + <div class="menu-item"> + <span>Indies</span> + <img src="res/gif/index/tutoriel.gif"> + </div> + </a> + <a href="pages/anime.html" target="content"> + <div class="menu-item"> + <span>Anime</span> + <img src="res/gif/index/jojo.gif"> + </div> + </a> + <a href="pages/gf.html" target="content"> + <div class="menu-item"> + <span>My perfect gf</span> + <img src="res/gif/index/kirby.gif"> + </div> + </a> + </div> + <iframe scrolling="no" id="mainframe" name="content" src="pages/about.html" height="1000"></iframe> + </div> + <script>function firstClickPlay(){}</script> + <script src="res/js/frame-link-plain.js"></script> +</body> + +</html>
M
pages/gf.html
→
pages/gf.html
@@ -9,8 +9,53 @@ </head>
<body data-page="gf"> - <h1>My love Giulia</h1> + <span style="left: 95px; top:25px; font-size: xx-large; text-shadow: 2px 2px violet;"class="el center">My love Giulia</span> + <span style="left: 125px; top: 100px;" class="el center tilt-right deeppink white-shadow">This is my beautiful gf <3</span> + <span style="left: 225px; top: 250px;" class="el center tilt-left deeppink white-shadow">Look at her --></span> + <span style="left: 180px; top: 400px;" class="el center tilt-left deeppink white-shadow">She's so perfect!!</span> + <div style="position: absolute; left: 333px; top: 11px;"> + <img style="width:60px;" class="el up-down" src="../res/gif/gf/heart_spin.gif" /> + </div> + <img style="left: 355px; top: 40px; z-index: -1;" class="el tilt-left" src="../res/img/giulia.gif" /> + <img style="left: 580px; top: 25px; width:220px; z-index:2;" class="el flip-x" src="../res/gif/gf/dove.gif" /> + <img style="left: 473px; top: 233px; width:60px;" class="el flip-x" src="../res/gif/gf/sparkle.gif" /> + <img style="left: 560px; top: 70px; width:60px;" class="el" src="../res/gif/gf/sparkle.gif" /> + <img style="left: 500px; top: 140px; width:30px;" class="el tilt-45" src="../res/gif/gf/star.gif" /> + <img style="left: 612px; top: 230px; width:30px;" class="el tilt-45" src="../res/gif/gf/star.gif" /> + <img style="left: 150px; top: 480px; width:500px;" class="el" src="../res/gif/gf/line_strawberries.gif" /> + + <span style="top: 530px;" class="el full-width"> <!-- reference for normal text --> + Her name is Giulia and she is currently trying to get a Physics degree while also working in a pizzeria, + helping with chores and dealing with a lot of weird people (me included). + She's among the strongest and smartest people I know, definitely the + most beautiful, and I'm so glad I get to hug her and be hers forever!! + </span> + <marquee style="left: 0; top: 712px;" class="el" width="100%"> + <span class="center mediumvioletred white-shadow">this is a pic of us together <3</span> + </marquee> + <img style="left: 190px; top: 680px; z-index: -1;" class="el tilt-right" src="../res/img/rockers.gif" /> + <img style="left: 553px; top: 668px; width: 150px; z-index: -2;" class="el tilt-left" src="../res/gif/gf/3dheart.gif" /> + <img style="left: 360px; top: 830px; width: 80px;" class="el" src="../res/gif/gf/heart.gif" /> + <img style="left: 465px; top: 740px; width: 100px;" class="el flip-y" src="../res/gif/gf/whiteflower.gif" /> + <img style="left: 345px; top: 980px; width: 100px;" class="el" src="../res/gif/gf/spinningheartmedium.gif" /> + + <span style="left: 50px; top: 1130px;" class="el half-width"> + She likes cats, hamsters and anything that's pink and cute, which is weird because I am neither of those things. + </span> + <img style="left: 50px; top: 1220px;" class="el" src="../res/gif/gf/hamtaro.gif" /> + <img style="left: 200px; top: 1435px;" class="el" src="../res/gif/gf/mew.gif" /> + <img style="left: 260px; top: 1455px;" class="el" src="../res/gif/gf/heartbounce.gif" /> + <img style="left: 268px; top: 1447px; width: 70px;" class="el flip-x" src="../res/gif/gf/pikachu.gif" /> + + + <span style="left: 297px; top: 1510px; line-height:2px; text-shadow: none" class="el center">^<br />|</span> + <span style="left: 236px; top: 1510px; line-height:2px; text-shadow: none" class="el center">^<br />|</span> + <span style="left: 225px; top: 1515px;" class="el">her</span> + <span style="left: 290px; top: 1515px;" class="el">me</span> + <span style="left: 450px; top: 1130px" class="el half-width">One time she ate too much soup and then she felt sick but she still wanted more soup</span> + <img style="left: 300px; top: 1130px;" class="el" src="../res/gif/gf/soup.gif" /> + <script src="../res/js/slow_load.js"></script> <script src="../res/js/iframe.js"></script> </body>
M
res/css/style.css
→
res/css/style.css
@@ -19,10 +19,10 @@ html {
font-family: "04b_03"; color: white; cursor: url("../cur/cursor2x.cur"), auto; + text-shadow: 1px 1px #000000; } #mainframe { - height: inherit; width: 100%; border: 0px; cursor: url("../cur/cursor2x.cur"), auto;@@ -36,10 +36,6 @@ img {
image-rendering: pixelated; } -.center { - text-align: center; -} - .hover-tilt { transition: transform .1s ease-in-out; rotate: -1.5deg;@@ -53,10 +49,6 @@ /* width: calc(100% / 2); */
height: 100%; width: 800px; margin: auto; -} - -.shadow { - text-shadow: 1px 1px #000000; } #menu-div {@@ -137,3 +129,80 @@ background-image: url("../img/player_overlay.png");
cursor: url("../cur/pointer2x.cur"), auto; background-size: contain; } + +/* PAGES STUFF */ +.full-width { + left: 50px; + width: 700px; +} + +.half-width { + width: 300px; +} + +.center { + text-align: center; +} + +.left { + text-align: left; +} + +.right { + text-align: left; +} + +.tilt-right { + rotate: 2deg; +} + +.tilt-left { + rotate: -2deg; +} + +.tilt-45 { + rotate: 45deg; +} + +.flip-x { + transform: scaleX(-1); +} + +.flip-y { + transform: scaleY(-1); +} + +.white-shadow { + text-shadow: 1px 1px white; +} + +.deeppink { + color: deeppink; +} + +.mediumvioletred { + color: mediumvioletred; +} + +.el { + position: absolute; + overflow-wrap: break-word; + font-size: large; + line-height: 25px; +} + +.up-down { + animation: MoveUpDown 3s linear infinite; + position: relative; + left: 0; + bottom: 0; +} + +@keyframes MoveUpDown { + 0%, 100% { + bottom: 0; + } + 50% { + bottom: 10px; + } + }
A
res/js/frame-link-plain.js
@@ -0,0 +1,76 @@
+// Melo-tech Frame Link Management System 3.2 +// This script updates the URL on each page, allowing you to share and bookmark frameset and iFrame links! +// Feel free to steal this code! +// Get help here - https://forum.melonking.net/index.php?topic=115 + +// oO How to use this code Oo +// 1. Add '<script src="https://melonking.net/scripts/frame-link.js"></script>' to your <head>. +// 2. Add 'id="mainframe"' to your main iFrame or Frame window. +// Optional: Create a second <script></script> section AFTER you link the frame-link.js +// Optional: add 'updateTitle = false;' if you want to disable title updating. (Default is true) +// Optional: add 'titlePrefix = "My Site ";' if you want to add a prefix to your titles. (Default is none) +// Optional: add 'pageParam = "z";' if you want to change the url path of your pages. (Default is z) +// Optional: if you use a hitCounter like GoatCounter add 'hitCounterFunction = function () { XXX MY HIT COUNTER CODE }', this function will automaticly be called each time someone click a page, so you can log per page hits within your frame. +// See https://melonking.net/melon.html for a working example! GOOD LUCK! + +var mainFrame; +var firstLoad = true; +var updateTitle = true; +var pageParam = "z"; +var titlePrefix = "BiRabittoh | "; +var hitCounterFunction = undefined; + +//Event to handle first page load - Also sets up the mainFrame +window.addEventListener("DOMContentLoaded", (e) => { + mainFrame = document.getElementById("mainframe"); + mainFrame.addEventListener("load", updateHistory, false); + setMainFrame(); +}); + +//Event to handle back button presses +window.addEventListener("popstate", function (e) { + if (e.state !== null) { + setMainFrame(); + } +}); + +function goToPageInitial(page) { + +} + +//Checks to see if a page parameter exists and sets the mainframe src to that page. +function setMainFrame() { + let params = new URLSearchParams(window.location.search); + let page = params.get(pageParam); + if (page == null) return; + + document.getElementById("mainframe").src = page; +} + +//Updates the browser history with the current page, causing the URL bar to update. +function updateHistory() { + let title = titlePrefix + mainFrame.contentDocument.title; + + // Stops the page getting into an infinate loop reloading itself. + if (firstLoad) { + firstLoad = false; + if (updateTitle) { + document.title = title; + } + if (hitCounterFunction != undefined) { + hitCounterFunction(); + } + return; + } + + history.replaceState(null, "", "?" + pageParam + "=" + mainFrame.contentWindow.location.pathname); + + if (updateTitle) { + document.title = title; + } + + //Save a hit - Optionally run this if a hit counter has been defined. + if (hitCounterFunction != undefined) { + hitCounterFunction(); + } +}
M
res/js/iframe.js
→
res/js/iframe.js
@@ -1,1 +1,19 @@
-hide_all();+ +if (!parent.location.href.includes("plain")) { + hide_all(); +} +const page_height = { + "about": 1500, + "anime": 1000, + "dragonquest": 1000, + "earthbound": 1000, + "gf": 1600, + "indies": 1000, + "zelda": 1000 +} + +const page = document.body.getAttribute("data-page"); +const iframe = parent.document.getElementById("mainframe"); + +iframe.height = page_height[page]; +iframe.scrolling = "no";
