307 lines
7.2 KiB
PHP
307 lines
7.2 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Blog</title>
|
|
</head>
|
|
<body>
|
|
|
|
<style>
|
|
|
|
/* The Modal (background) */
|
|
.modal {
|
|
position: fixed; /* Stay in place */
|
|
z-index: 10; /* Sit on top */
|
|
padding-top: 100px; /* Location of the box */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
overflow: auto; /* Enable scroll if needed */
|
|
background-color: rgb(0,0,0); /* Fallback color */
|
|
background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
|
|
}
|
|
|
|
/* Modal Content */
|
|
.modal-content {
|
|
margin: auto;
|
|
background: #222;
|
|
padding: 20px;
|
|
border-radius: 1rem;
|
|
width: 80%;
|
|
color: white;
|
|
}
|
|
.modal-content>button {
|
|
align-items: center;
|
|
background-color: green;
|
|
border: 0;
|
|
border-radius: 100px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
justify-content: center;
|
|
line-height: 20px;
|
|
max-width: 480px;
|
|
min-height: 40px;
|
|
min-width: 0px;
|
|
overflow: hidden;
|
|
padding: 0px;
|
|
padding-right: 0px;
|
|
padding-left: 0px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
text-align: center;
|
|
touch-action: manipulation;
|
|
transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.modal-content>button:hover {
|
|
background: darkgreen;
|
|
}
|
|
</style>
|
|
|
|
<!-- The Modal -->
|
|
<div id="myModal" class="modal">
|
|
|
|
<!-- Modal content -->
|
|
<div class="modal-content">
|
|
<p>This website uses cookies, including third party ones, to allow for analysis of how people use our website in order to improve your experience and our services. By continuing to use our website, you agree to the use of such cookies. <a href="http://arngren.net">Click here</a> for more information on our Cookie Policy and Privacy Policy.</p>
|
|
|
|
<button onclick="startTheThang()">I OBEY</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
font-family: sans-serif;
|
|
color: white;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
animation: aids 4s linear infinite;
|
|
background: url(https://media.tenor.com/DDX8ev9aqOEAAAAC/astolfo-norway.gif);
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.div-torule-them-all {
|
|
backdrop-filter: blur(10px);
|
|
height: 100%;
|
|
}
|
|
|
|
a {
|
|
color: lightblue;
|
|
}
|
|
.container {
|
|
max-width: 60rem;
|
|
margin: auto;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
main {
|
|
backdrop-filter: blur(20px);
|
|
padding: .75rem;
|
|
border-radius: .75rem;
|
|
}
|
|
|
|
@keyframes aids {
|
|
0% {
|
|
background-position: 0px 0px;
|
|
}
|
|
100% {
|
|
background-position: 498px 270px;
|
|
}
|
|
}
|
|
|
|
.hero-text {
|
|
text-transform: uppercase;
|
|
background-image: linear-gradient(
|
|
-225deg,
|
|
#231557 0%,
|
|
#44107a 29%,
|
|
#ff1361 67%,
|
|
#fff800 100%
|
|
);
|
|
background-size: auto auto;
|
|
background-clip: border-box;
|
|
background-size: 200% auto;
|
|
color: #fff;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: textclip 2s linear infinite;
|
|
display: inline-block;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
@keyframes textclip {
|
|
to {
|
|
background-position: 200% center;
|
|
}
|
|
}
|
|
|
|
.hero-text {
|
|
position: relative;
|
|
-webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
|
|
font-size: 60px;
|
|
}
|
|
.hero-text span {
|
|
position: relative;
|
|
display: inline-block;
|
|
color: #fff;
|
|
text-transform: uppercase;
|
|
animation: waviy 1s infinite;
|
|
animation-delay: calc(.1s * var(--i));
|
|
white-space: pre-wrap;
|
|
|
|
}
|
|
@keyframes waviy {
|
|
0%,40%,100% {
|
|
transform: translateY(0)
|
|
}
|
|
20% {
|
|
transform: translateY(-20px)
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="div-torule-them-all">
|
|
|
|
<script>
|
|
// Amount of Snowflakes
|
|
var snowMax = 16;
|
|
|
|
// Snowflake Colours
|
|
var snowColor = ["#fff"];
|
|
|
|
// Snow Entity
|
|
var snowEntity = "8==D";
|
|
|
|
// Falling Velocity
|
|
var snowSpeed = 0.75;
|
|
|
|
// Minimum Flake Size
|
|
var snowMinSize = 8;
|
|
|
|
// Maximum Flake Size
|
|
var snowMaxSize = 16;
|
|
|
|
// Refresh Rate (in milliseconds)
|
|
var snowRefresh = 25;
|
|
|
|
// Additional Styles
|
|
var snowStyles = "z-index: 0; cursor: default; user-select: none;";
|
|
|
|
/*
|
|
// End of Configuration
|
|
// ----------------------------------------
|
|
// Do not modify the code below this line
|
|
*/
|
|
|
|
var snow = [],
|
|
pos = [],
|
|
coords = [],
|
|
lefr = [],
|
|
marginBottom,
|
|
marginRight;
|
|
|
|
function randomise(range) {
|
|
rand = Math.floor(range * Math.random());
|
|
return rand;
|
|
}
|
|
|
|
function initSnow() {
|
|
var snowSize = snowMaxSize - snowMinSize;
|
|
marginBottom = document.body.scrollHeight - 5;
|
|
marginRight = document.body.clientWidth - 15;
|
|
|
|
for (i = 0; i <= snowMax; i++) {
|
|
coords[i] = 0;
|
|
lefr[i] = Math.random() * 15;
|
|
pos[i] = 0.03 + Math.random() / 10;
|
|
snow[i] = document.getElementById("flake" + i);
|
|
snow[i].style.fontFamily = "inherit";
|
|
snow[i].size = randomise(snowSize) + snowMinSize;
|
|
snow[i].style.fontSize = snow[i].size + "px";
|
|
snow[i].style.color = snowColor[randomise(snowColor.length)];
|
|
snow[i].style.zIndex = -1;
|
|
snow[i].sink = snowSpeed * snow[i].size / 5;
|
|
snow[i].posX = randomise(marginRight - snow[i].size);
|
|
snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size);
|
|
snow[i].style.left = snow[i].posX + "px";
|
|
snow[i].style.top = snow[i].posY + "px";
|
|
}
|
|
|
|
moveSnow();
|
|
}
|
|
|
|
function resize() {
|
|
marginBottom = document.body.scrollHeight - 5;
|
|
marginRight = document.body.clientWidth - 15;
|
|
}
|
|
|
|
function moveSnow() {
|
|
for (i = 0; i <= snowMax; i++) {
|
|
coords[i] += pos[i];
|
|
snow[i].posY += snow[i].sink;
|
|
snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px";
|
|
snow[i].style.top = snow[i].posY + "px";
|
|
|
|
if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
|
|
snow[i].posX = randomise(marginRight - snow[i].size);
|
|
snow[i].posY = 0;
|
|
}
|
|
}
|
|
|
|
setTimeout("moveSnow()", snowRefresh);
|
|
}
|
|
|
|
for (i = 0; i <= snowMax; i++) {
|
|
document.write("<span id='flake" + i + "' style='" + snowStyles + "position:absolute;top:-" + snowMaxSize + "'>" + snowEntity + "</span>");
|
|
}
|
|
|
|
window.addEventListener('resize', resize);
|
|
window.addEventListener('load', initSnow);
|
|
</script>
|
|
|
|
<header style="
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
backdrop-filter: blur(20px);
|
|
">
|
|
<nav class="container">
|
|
<a href="./">Homopage</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<div style="
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
">
|
|
<div class="container">
|
|
|
|
<h1 class="hero-text">
|
|
<?php $hero_text = 'Faggot Homosex Blog'; ?>
|
|
<?php for ($i=0; $i < strlen($hero_text); $i++): ?><span style="--i:<?=$i?>"><?=htmlspecialchars($hero_text[$i])?></span><?php endfor; ?>
|
|
</h1>
|
|
<p>There are no limits to what you can accomplish, except the limits you place on your own thinking. </p>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="container" id="pageContent">
|