Initial commit of website contents
This commit is contained in:
will
parent
da68bf6143
commit
0ebbb66880
13 changed files with 700 additions and 0 deletions
17
.gitignore
vendored
Normal file
17
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
*.ttf
|
||||||
|
*.png
|
||||||
|
*.jpg
|
||||||
|
*.jxl
|
||||||
|
*.webp
|
||||||
|
*.avif
|
||||||
|
*.gif
|
||||||
|
*.mp4
|
||||||
|
*.mkv
|
||||||
|
*.webm
|
||||||
|
*.mp3
|
||||||
|
*.wav
|
||||||
|
*.flac
|
||||||
|
*.ogg
|
||||||
|
/downloads/
|
||||||
|
/downloads/*
|
||||||
|
/downloads/**
|
||||||
BIN
acetwisty.ico
Normal file
BIN
acetwisty.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
131
art/index.php
Normal file
131
art/index.php
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<?php
|
||||||
|
$siteurl = $_SERVER['HTTP_HOST'];
|
||||||
|
if($siteurl == "deeptwisty.com") {
|
||||||
|
echo '<link rel="icon" type="image/x-icon" href="../favicon.ico"><title>deep twisty official NFTs</title><style>@font-face { font-family: "Ubuntu"; src: url(../ubuntu.ttf); } :root { --stdfont: "Ubuntu", Century Gothic,CenturyGothic,AppleGothic,sans-serif; } </style>';
|
||||||
|
} elseif($siteurl == "isopod.cool") {
|
||||||
|
echo '<link rel="icon" type="image/x-icon" href="../../favicon.ico"><title>niceopod official NFTs</title><style>:root { --stdfont: mono, monospace; } </style>';
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--shadowcolor: #00000099;
|
||||||
|
--imagesperrow: 4;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: var(--stdfont);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: #202020;
|
||||||
|
width: 100vw;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.flex-container {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
:root {
|
||||||
|
--imagesperrow: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
:root {
|
||||||
|
--imagesperrow: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
height: calc(100vw / var(--imagesperrow));
|
||||||
|
width: calc(100vw / var(--imagesperrow));
|
||||||
|
color: transparent;
|
||||||
|
text-decoration: none;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100%;
|
||||||
|
padding: 2rem;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 0 0 0 var(--shadowcolor) inset;
|
||||||
|
}
|
||||||
|
a span {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
input[type="checkbox"]:checked + label a {
|
||||||
|
--shadowcolor: #000000ef;
|
||||||
|
}
|
||||||
|
a:hover, input[type="checkbox"]:checked + label a {
|
||||||
|
color: white;
|
||||||
|
background-size: 115%;
|
||||||
|
/*box-shadow: 0 calc(100vw / var(--imagesperrow)) 0 0 var(--shadowcolor) inset;*/
|
||||||
|
box-shadow: 0 0 0 calc(100vw / var(--imagesperrow) / 2) var(--shadowcolor) inset;
|
||||||
|
}
|
||||||
|
.caption {
|
||||||
|
padding: 10px;
|
||||||
|
padding-top: 6px;
|
||||||
|
height: 100%;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flex-container">
|
||||||
|
<?php
|
||||||
|
function test_image($name) { // Returns true if a file is an image (png or gif), false otherwise
|
||||||
|
return (strpos($name, ".png") > 0 or strpos($name, ".gif") > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
$images = array_filter(scandir("."), "test_image"); // Generate array of every image in the directory by filename
|
||||||
|
|
||||||
|
usort($images, function($a, $b) { // Sort images by modification date of the files
|
||||||
|
return filemtime("$b") - filemtime("$a");
|
||||||
|
});
|
||||||
|
|
||||||
|
$datecounts = array();
|
||||||
|
foreach($images as $im) { // Generate list of dates and how many images have them
|
||||||
|
$mt = date("Y-m-d", filemtime("$im")); // File modification date in ISO format
|
||||||
|
if($datecounts[$mt]) {
|
||||||
|
$datecounts[$mt]++;
|
||||||
|
} else {
|
||||||
|
$datecounts[$mt] = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$pmt = $mt;
|
||||||
|
foreach($images as $im) { // Loops through each image and echoes it to the page
|
||||||
|
|
||||||
|
$no = substr($im, 0, strpos($im, ".")); // Filename with extension stripped
|
||||||
|
$mt = date("Y-m-d", filemtime("$im")); // File modification date in ISO format
|
||||||
|
$is = getimagesize("$im");
|
||||||
|
$ist = $is[0] . "×" . $is[1] . "px"; // Image size formatted as X×Ypx
|
||||||
|
|
||||||
|
$cl = "";
|
||||||
|
if($datecounts[$mt] > 1) { // If there's more than one image published on the same date, merge them into a single thumbnail that can be clicked to reveal the full set. Would have done this based on names, but that would have been much harder. Might do that later.
|
||||||
|
if($pmt != $mt) {
|
||||||
|
echo "<style>.d$mt { display: none; } #show$mt:checked ~ .d$mt { display: flex; } #show$mt + label:hover a { cursor: pointer; }</style><input type='checkbox' style='display: none;' id='show$mt'></input>";
|
||||||
|
$tn = $no;
|
||||||
|
if(file_exists("thumbs/$mt.png")) { // Use the same image for the group thumbnail as the first image in the group. If there's a thumbnail named with the date in question, use that instead.
|
||||||
|
$tn = $mt;
|
||||||
|
}
|
||||||
|
echo "<label for='show$mt'><a style='background-image:url(thumbs/$tn.png);'><span>...</span></a></label>";
|
||||||
|
$pmt = $mt;
|
||||||
|
}
|
||||||
|
$cl = " class='d$mt'";
|
||||||
|
}
|
||||||
|
|
||||||
|
echo "<a href='$im' style='background-image:url(thumbs/$no.png);'$cl><span>$im<br>$mt • $ist</span></a>";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
86
credits/index.html
Normal file
86
credits/index.html
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
||||||
|
<title>deep twisty - credits</title>
|
||||||
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<link href="../subpage.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<style>
|
||||||
|
section {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin: 0.3rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1 id="header"><span id="headerblue">cre</span><span id="headergreen">di</span><span id="headeryellow">ts</span></h1>
|
||||||
|
<p><a class="white-color" style="text-decoration: none; font-size: 1.4em; font-family: var(--hfont);" href="../">home</a></p><hr>
|
||||||
|
<section>
|
||||||
|
<h2>Pimo</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://blendswap.com/blend/29080">Piano model</a></li>
|
||||||
|
<li><a href="https://www.turbosquid.com/3d-models/photorealistic-human-rig-3d-1422553">Person model</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Tetrahead</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://www.turbosquid.com/3d-models/3d-realistic-musicians-music-model-1653971">Bassist model</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Other</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://seaslug.neocities.org/">deep twisty logo</a></li>
|
||||||
|
<li>Many models and textures:
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://polyhaven.com/">Polyhaven</a></li>
|
||||||
|
<li><a href="https://ambientcg.com/">AmbientCG</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="https://www.musicradar.com/news/tech/sampleradar-500-free-industrial-samples-504614">MusicRadar industrial sample pack</a></li>
|
||||||
|
<li><a href="https://soundpacks.com/free-sound-packs/80s-retro-futuristic-drum-pack/">DataDrive 80s retro futuristic drum pack</a></li>
|
||||||
|
<li><a href="https://soundconstraints.com/products/corona-virus-sample-pack?_pos=1&_sid=c06f60aca&_ss=r">SoundConstraints COVID-19 sample pack</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Software</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
DAWs
|
||||||
|
<ul>
|
||||||
|
<li title="not used for anything, yet"><a href="https://www.reaper.fm/">REAPER</a></li>
|
||||||
|
<li title="used for everything from Nova to Pimo"><a href="https://lmms.io/">LMMS</a></li>
|
||||||
|
<li title="used for Plot Twist"><a href="https://www.audiotool.com/">Audiotool</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Plugins
|
||||||
|
<ul>
|
||||||
|
<li title="used with REAPER"><a href="https://surge-synthesizer.github.io/">Surge XT</a></li>
|
||||||
|
<li title="used with LMMS"><a href="https://www.kvraudio.com/product/synth1-by-daichi-laboratory-ichiro-toda">Synth1</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Visual
|
||||||
|
<ul>
|
||||||
|
<li title="used for all images and videos since Colony"><a href="https://www.blender.org/">Blender</a></li>
|
||||||
|
<li title="used for videos prior to the release of Colony"><a href="https://www.shotcut.org/">Shotcut</a></li>
|
||||||
|
<li title="used for visuals prior to the release of Colony"><a href="https://getpaint.net/">Paint.NET</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Licensing <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="cc4_80x15.png"></a></h2>
|
||||||
|
<p style="max-width: 22rem;">Everything I make is licensed under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons CC BY-NC-SA</a> license unless otherwise specified.</p><p style="max-width: 22rem;">To request permission to use something I've made commercially, contact me at <a href="mailto:willem@deeptwisty.com">willem@deeptwisty.com</a>.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
58
index.php
Normal file
58
index.php
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<?php
|
||||||
|
$captions = array(
|
||||||
|
'musician',
|
||||||
|
'3d artist',
|
||||||
|
'programmer',
|
||||||
|
'gamer',
|
||||||
|
'dweeb',
|
||||||
|
'"artist"',
|
||||||
|
'creative type',
|
||||||
|
'proponent of cool stuff',
|
||||||
|
'linux user',
|
||||||
|
'canadian',
|
||||||
|
'.com'
|
||||||
|
);
|
||||||
|
$cap = str_replace(" ", " ", $captions[array_rand($captions)]);
|
||||||
|
?>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title><?php
|
||||||
|
if($cap != '.com') { echo "deep twisty - $cap"; }
|
||||||
|
else { echo "deeptwisty.com"; }
|
||||||
|
?></title>
|
||||||
|
<meta name="description" content="official website of deep twisty, a musician, we think">
|
||||||
|
<link href="style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
<!--script> if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { document.location="mobile.html"; } </script-->
|
||||||
|
<style>html, body {height: 100%;}</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section id="main">
|
||||||
|
<h1 id="header"><span id="headerblue">deep</span> <span id="headergreen">twi</span><span id="headeryellow">sty</span><span id="subheader"><?php echo $cap; ?></span></h1>
|
||||||
|
<p style="text-shadow: 0 0 4px black;">i'm a computer musician, 3d artist and programmer who's committed to this alias now.<br>this is a hub for the stuff i make. i hope you like it.</p>
|
||||||
|
<nav id="ext">
|
||||||
|
<a rel="me" class="bandcamp-color" href="https://deeptwisty.bandcamp.com">bandcamp</a>
|
||||||
|
<a rel="me" class="youtube-color" href="https://www.youtube.com/@deeptwisty">youtube</a>
|
||||||
|
<a rel="me" class="itchio-color" href="https://deeptwisty.itch.io">itch.io</a>
|
||||||
|
<a rel="me" class="patreon-color" href="https://patreon.com/deeptwisty">patreon</a>
|
||||||
|
</nav>
|
||||||
|
<nav id="int">
|
||||||
|
<a class="white-color" href="/posts">posts</a>
|
||||||
|
<a class="white-color" href="/art">art</a>
|
||||||
|
<a class="white-color" href="/noises">noises</a>
|
||||||
|
</nav>
|
||||||
|
<a href="." style="margin-top: 1rem; font-size: 0;"><img src="images/button.png" style="width: 88px;"/></a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="secondary">
|
||||||
|
<div id="displaycontent">
|
||||||
|
<iframe style="border: 0; width: 450px; height: 450px; max-width: 80vw; max-height: 80vw;" src="https://bandcamp.com/EmbeddedPlayer/album=1230113999/size=large/bgcol=333333/linkcol=ffffff/minimal=true/transparent=true/" seamless><a href="https://deeptwisty.bandcamp.com/album/pimo">Pimo by deep twisty</a></iframe>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<a href="/credits" style="font-size: 10pt; position: absolute; right: .5rem; bottom: .5rem; text-decoration: none;">credits & licensing</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
58
noises/index.php
Normal file
58
noises/index.php
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
||||||
|
<title>deep twisty - noises</title>
|
||||||
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<link href="../subpage.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<style>
|
||||||
|
article {
|
||||||
|
padding: 1rem;
|
||||||
|
max-width: 25rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 0.45rem;
|
||||||
|
font-size: medium;
|
||||||
|
}
|
||||||
|
article p {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
audio {
|
||||||
|
border-radius: 2rem;
|
||||||
|
box-shadow: 2px 2px 8px black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1 id="header"><span id="headerblue">no</span><span id="headergreen">is</span><span id="headeryellow">es</span></h1>
|
||||||
|
<p><a class="white-color" style="text-decoration: none; font-size: 1.4em; font-family: var(--hfont);" href="../">home</a></p><hr>
|
||||||
|
<div id="songs">
|
||||||
|
<?php
|
||||||
|
// Code to automatically populate the page with every mp3 file in the directory.
|
||||||
|
// Should display filename - and date of creation and id3 comment if possible.
|
||||||
|
|
||||||
|
function test_audio($name) { // Returns true if a file is an mp3, false otherwise
|
||||||
|
return (strpos($name, ".mp3") > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
$files = array_filter(scandir("."), "test_audio");
|
||||||
|
|
||||||
|
usort($files, function($a, $b) { // Sort files by modification date of the files
|
||||||
|
return filemtime("$b") - filemtime("$a");
|
||||||
|
});
|
||||||
|
|
||||||
|
foreach($files as $fi) {
|
||||||
|
echo "<article><h2>$fi</h2><audio controls><source src='$fi' type='audio/mpeg'>your browser does not support embedded audio.</audio></article>";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
27
not_found.html
Normal file
27
not_found.html
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>deep twisty</title>
|
||||||
|
<meta name="description" content="official website of deep twisty, a musician, we think">
|
||||||
|
<link href="https://deeptwisty.com/style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
<style>
|
||||||
|
html body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: clip;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="height: 100vh; display: flex; flex-direction: column; justify-content: center;">
|
||||||
|
<div style="height: 14em; width: 110vw; display: flex; flex-direction: column; justify-content: center; align-items: center; background-image: url(https://deeptwisty.com/images/bg_default.png); box-shadow: 0 0 8px 4px black inset; transform: rotate(-3deg) translateX(5vw);">
|
||||||
|
<h1 style="margin: 0; text-align: center; width: 100%; font-size: 8em; text-shadow: 4px 4px 4px black; margin-top: -18px;">404</h1>
|
||||||
|
<h2 style="margin: 0; text-align: center; width: 100%; font-size: 2em; text-shadow: 2px 2px 2px black; margin-top: -10px;">item not found</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
3
pimo-art-credits.txt
Normal file
3
pimo-art-credits.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
Piano: https://blendswap.com/blend/29080
|
||||||
|
Person: https://www.turbosquid.com/3d-models/photorealistic-human-rig-3d-1422553
|
||||||
|
Other models: https://polyhaven.com/models
|
||||||
51
posts/index.php
Normal file
51
posts/index.php
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
||||||
|
<title>deep twisty - posts</title>
|
||||||
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<link href="../subpage.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
<style>
|
||||||
|
article.post {
|
||||||
|
padding: 1rem;
|
||||||
|
max-width: 25rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
h2.datemarker {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
.post p {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1 id="header"><span id="headerblue">po</span><span id="headergreen">st</span><span id="headeryellow">s</span></h1>
|
||||||
|
<p><a class="white-color" style="text-decoration: none; font-size: 1.4em; font-family: var(--hfont);" href="../">home</a><span style="display: inline-block; margin: 0 0.3rem; font-size: 0;"></span><a class="white-color" style="text-decoration: none; font-size: 1.4em; font-family: var(--hfont);" href="https://journal.miso.town/atom?url=https://deeptwisty.com/posts/">feed</a></p><hr>
|
||||||
|
<div id="posts">
|
||||||
|
<?php
|
||||||
|
$infile = fopen("posts.txt", "r") or die("file read error -_-");
|
||||||
|
$content = fread($infile,filesize("posts.txt"));
|
||||||
|
fclose($infile);
|
||||||
|
$post_arr = explode("\n",$content);
|
||||||
|
$posts_out = "";
|
||||||
|
foreach($post_arr as $p) {
|
||||||
|
if(strlen($p) > 3) {
|
||||||
|
$date = substr($p, 0, strpos($p, " "));
|
||||||
|
$pcont = substr($p, strpos($p, " ") + 1);
|
||||||
|
$posts_out = "<article class='post'><h2 class='datemarker'>$date</h2><p>$pcont</p></article>$posts_out";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
echo $posts_out;
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
120
some-assembly-required/index.html
Normal file
120
some-assembly-required/index.html
Normal file
|
|
@ -0,0 +1,120 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
||||||
|
<title>deep twisty - Some Assembly Required</title>
|
||||||
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var leadIndex = 1;
|
||||||
|
var secIndex = 1;
|
||||||
|
var beatIndex = 1;
|
||||||
|
var iteration = "";
|
||||||
|
var noise = document.createElement("AUDIO");
|
||||||
|
|
||||||
|
function setIndices() {
|
||||||
|
leadIndex = document.getElementById("lead").value;
|
||||||
|
secIndex = document.getElementById("sec").value;
|
||||||
|
beatIndex = document.getElementById("beat").value;
|
||||||
|
|
||||||
|
iteration = leadIndex.toString().concat(secIndex.toString().concat(beatIndex.toString()));
|
||||||
|
noise.setAttribute("src", iteration.concat(".mp3"));
|
||||||
|
document.getElementById("iterName").innerHTML='<a class="iter" href="'.concat(iteration) + '.mp3">' + 'Iteration '.concat(iteration) + '</a>';
|
||||||
|
}
|
||||||
|
|
||||||
|
function PlayMusic() {
|
||||||
|
setIndices();
|
||||||
|
noise.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
function StopMusic() {
|
||||||
|
noise.pause();
|
||||||
|
noise.fastSeek(0);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 0 6px black;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
width: 30%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.Main {
|
||||||
|
background: #202020 url("../images/bg_default.png");
|
||||||
|
height: fit-content;
|
||||||
|
min-height: 100%;
|
||||||
|
max-width: 750px;
|
||||||
|
box-shadow: 0 10px 8px 4px black inset;
|
||||||
|
margin-top: -20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
#header {
|
||||||
|
margin-bottom: -15px;
|
||||||
|
transform: rotate(-2deg);
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
color: white;
|
||||||
|
width:15%;
|
||||||
|
padding:.5%;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 2px solid white;
|
||||||
|
box-shadow: 0 0 8px white, 0 0 8px white inset, 4px 4px 8px black;
|
||||||
|
margin: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
text-shadow: 0 0 4px white;
|
||||||
|
background-color: #ffffff22;
|
||||||
|
}
|
||||||
|
button:active {
|
||||||
|
background-color: transparent;
|
||||||
|
text-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width:10%;
|
||||||
|
padding:.5%;
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 4px 4px 4px black, 0 0 2px white, 0 0 2px white inset;
|
||||||
|
margin: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
#subheader {
|
||||||
|
margin-top: -15px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 2em;
|
||||||
|
transform: rotate(0.8deg);
|
||||||
|
font-family: var(--hfont);
|
||||||
|
}
|
||||||
|
.iter { color: gainsboro; transition-duration: 0.2s; }
|
||||||
|
.iter:hover { color: white; text-shadow: 0 0 7px white;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body background="bg_default.png" bgcolor="black">
|
||||||
|
|
||||||
|
<div class="Main">
|
||||||
|
<h1 id="header"><span id="headerblue">Some</span> <span id="headergreen">Assembly</span> <span id="headeryellow">Required</span></h1>
|
||||||
|
<h2 id="subheader">by deep twisty</h2>
|
||||||
|
<h1 id="iterName">Iteration ___</h1>
|
||||||
|
<input type="number" min="1" max="3" step="1" value="1" id="lead">
|
||||||
|
<input type="number" min="1" max="3" step="1" value="1" id="sec">
|
||||||
|
<input type="number" min="1" max="3" step="1" value="1" id="beat"><br>
|
||||||
|
<button onclick="PlayMusic();">play</button>
|
||||||
|
<button onclick="StopMusic();">stop</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
117
style.css
Normal file
117
style.css
Normal file
|
|
@ -0,0 +1,117 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: Ubuntu;
|
||||||
|
src: url(ubuntu.ttf);
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Ubuntu-Bold;
|
||||||
|
src: url(ubuntu-bold.ttf);
|
||||||
|
}
|
||||||
|
:root {
|
||||||
|
--hfont: 'Ubuntu-Bold', 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif;
|
||||||
|
--stdfont: 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
min-height: 100%;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
overflow-x: clip;
|
||||||
|
color: gainsboro;
|
||||||
|
font-family: var(--stdfont);
|
||||||
|
background-color: black;
|
||||||
|
background-image: url('bg_default.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: gainsboro;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-shadow: 0 0 5px black;
|
||||||
|
}
|
||||||
|
#main {
|
||||||
|
flex: 50%;
|
||||||
|
padding: 1rem;
|
||||||
|
box-shadow: 0 0 45px 90px rgba(0, 0, 0, 0.7);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%);
|
||||||
|
background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000 100%);
|
||||||
|
}
|
||||||
|
#secondary {
|
||||||
|
flex: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#displaycontent {
|
||||||
|
box-shadow: 4px 4px 8px 2px black;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
#header {
|
||||||
|
font-family: var(--hfont);
|
||||||
|
font-size: 3.5em;
|
||||||
|
color: transparent;
|
||||||
|
-webkit-text-stroke-width: 2px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#subheader {
|
||||||
|
margin-left: -5px;
|
||||||
|
font-size: 0.6em;
|
||||||
|
color: white;
|
||||||
|
-webkit-text-stroke-width: 0;
|
||||||
|
text-shadow: 0 0 9px white;
|
||||||
|
z-index: 1;
|
||||||
|
animation-name: subheaderappear;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
}
|
||||||
|
@keyframes subheaderappear {
|
||||||
|
from {color: #19191900; text-shadow: 0 0 0 black;}
|
||||||
|
to {color: white; text-shadow: 0 0 9px white;}
|
||||||
|
}
|
||||||
|
nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline;
|
||||||
|
font-family: var(--hfont);
|
||||||
|
font-size: 1.4em;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
@media(max-width: 80vh) {
|
||||||
|
body {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
#main {
|
||||||
|
padding: 1rem;
|
||||||
|
background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%);
|
||||||
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bandcamp-color { color: #629aa9; transition-duration: 0.2s; }
|
||||||
|
.bandcamp-color:hover { color: #86c3d4 ; text-shadow: 0 0 7px #629aa9 ; }
|
||||||
|
.youtube-color { color: #ff0000; transition-duration: 0.2s; }
|
||||||
|
.youtube-color:hover { color: #ff5252 ; text-shadow: 0 0 7px #ff0000 ; }
|
||||||
|
.itchio-color { color: #fa5c5c; transition-duration: 0.2s; }
|
||||||
|
.itchio-color:hover { color: #ff8181 ; text-shadow: 0 0 7px #fa5c5c ; }
|
||||||
|
.patreon-color { color: #FF424D; transition-duration: 0.2s; }
|
||||||
|
.patreon-color:hover { color: #ff656c ; text-shadow: 0 0 7px #FF424D ; }
|
||||||
|
.white-color { color: gainsboro; transition-duration: 0.2s; }
|
||||||
|
.white-color:hover { color: white; text-shadow: 0 0 7px white;}
|
||||||
|
|
||||||
|
#headerblue { -webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue; animation: hblue; animation-duration: 10s; animation-iteration-count: infinite;}
|
||||||
|
@keyframes hblue {
|
||||||
|
0%, 100% {-webkit-text-stroke-color: rgb(0, 0, 200); text-shadow: 0 0 15px rgb(0, 0, 200);}
|
||||||
|
15% {-webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue;}
|
||||||
|
}
|
||||||
|
#headergreen { -webkit-text-stroke-color: #5ff508; text-shadow: 0 0 15px #5ff508; }
|
||||||
|
#headeryellow { -webkit-text-stroke-color: gold; text-shadow: 0 0 15px gold; animation: hyellow; animation-duration: 16.7ms; animation-iteration-count: infinite;}
|
||||||
|
@keyframes hyellow {
|
||||||
|
from {text-shadow: 0 0 15px rgba(219, 186, 0, 0.87);}
|
||||||
|
to {text-shadow: 0 0 15px gold;}
|
||||||
|
}
|
||||||
32
subpage.css
Normal file
32
subpage.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 0 6px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
background: #202020 url("../images/bg_default.png");
|
||||||
|
height: fit-content;
|
||||||
|
min-height: 100%;
|
||||||
|
min-width: 20rem;
|
||||||
|
max-width: 50rem;
|
||||||
|
box-shadow: 0 10px 8px 4px black inset;
|
||||||
|
margin-top: -1.2rem;
|
||||||
|
padding-top: 1.2rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
margin-bottom: -1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
width: 30%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue