620200137e
- Rearranged navigation significantly
- Navbar is now unlimited width on desktop
- Navbar is now always on top of the screen, even on the landing page
- Navbar has been replaced with hamburger menu on mobile
- Significant styling alterations to look good on phones tm
- Most of the credit goes to a certain meta tag.
- (Appearance on desktop is mostly unchanged)
- The background on mobile is now 100% image, but darkened to improve contrast
- Table pages such as /links/ and /stats/ now rearrange on mobile:
column a column a column b
column b vs column a column b
column a column a column b
column b column a column b
- font size on landing page scales with device width on tall displays
- guestbook posts use CSS grid now
- Working on a @media (prefers-contrast: more) theme as well. Can't figure out how to test it though
- Updated /stats/
- Added some new stats
- Updated CD collection size
- Updated /about/uses/
- I now use Nextcloud News instead of Yarr
- My phone runs Graphene
- I use Fennec browser on mobile instead of standard Firefox
- New background as the old one was horrible for contrast
- Added Waxlimbs - For Science! to /about/music/
- The oldest three articles on /blog/ now show a warning on hover that they're from the legacy v2 site
- Corrected various markup issues with the help of validator.w3.org/nu/
- Added alt text to a ton of images
- todo list is no longer a separate html file. it was fucking with the scaling on mobile and I couldn't be bothered
- /stuff/ remains unchanged. I'll get to it
- Hopefully that's everything lol
235 lines
7.1 KiB
PHP
235 lines
7.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Guestbook</title>
|
|
<link href="../style.css" rel="stylesheet" type="text/css" media="all">
|
|
<style>
|
|
table {
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
td {
|
|
padding: 0.3rem;
|
|
}
|
|
|
|
form > table {
|
|
width: 100%;
|
|
margin: auto;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
form td:first-child {
|
|
text-align: right;
|
|
}
|
|
|
|
article {
|
|
width: 90%;
|
|
margin: 2rem auto;
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-areas:
|
|
'gb-name gb-date gb-index'
|
|
'gb-cool gb-cool gb-cool'
|
|
'gb-found gb-found gb-found'
|
|
'gb-message gb-message gb-message'
|
|
'gb-reply gb-reply gb-reply';
|
|
}
|
|
|
|
input, textarea {
|
|
border: none;
|
|
font-family: var(--stdfont);
|
|
}
|
|
input[type="text"], input[type="email"], textarea {
|
|
width: 100%;
|
|
background: none;
|
|
border-bottom: 2px solid #444444;
|
|
color: gainsboro;
|
|
padding: 0.35rem;
|
|
box-sizing: border-box;
|
|
font-size: .9em;
|
|
}
|
|
input[type="submit"], input[type="reset"] {
|
|
padding: 0.35rem 0.5rem;
|
|
box-shadow: 2px 2px 6px black;
|
|
margin: 0.3rem;
|
|
display: inline-block;
|
|
}
|
|
input[type="submit"]:active, input[type="reset"]:active {
|
|
transform: translate(1px, 1px); box-shadow: 0 0 2px black;
|
|
}
|
|
input[type="submit"]:hover, input[type="reset"]:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
hr {
|
|
width: 30%;
|
|
}
|
|
.error {
|
|
color: red;
|
|
font-size: 0.85em;
|
|
}
|
|
.success {
|
|
color: #00ff00;
|
|
font-size: 0.85em;
|
|
}
|
|
.reply {
|
|
border-left: 3px solid gainsboro;
|
|
padding-left: 1rem;
|
|
}
|
|
.message {
|
|
padding-top: 1.5rem;
|
|
}
|
|
.gb-date {
|
|
text-align: center;
|
|
}
|
|
.gb-index {
|
|
text-align: right;
|
|
}
|
|
@media only screen and (hover: none) {
|
|
form td:first-child {
|
|
text-align: left;
|
|
}
|
|
form td:nth-child(2) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
input[type="text"], input[type="email"], textarea {
|
|
background: none;
|
|
border: 2px solid #00000033;
|
|
border-bottom: 2px solid #888888;
|
|
}
|
|
article {
|
|
width: 100%;
|
|
margin: 2rem auto;
|
|
}
|
|
article td:nth-child(2) {
|
|
text-align: left;
|
|
}
|
|
article td:last-child {
|
|
text-align: left;
|
|
}
|
|
article td:first-child {
|
|
text-align: left;
|
|
}
|
|
article {
|
|
grid-template-areas:
|
|
'gb-name gb-name gb-index'
|
|
'gb-date gb-date gb-date'
|
|
'gb-cool gb-cool gb-cool'
|
|
'gb-found gb-found gb-found'
|
|
'gb-message gb-message gb-message'
|
|
'gb-reply gb-reply gb-reply';
|
|
}
|
|
}
|
|
@media (prefers-contrast: more) {
|
|
input[type="text"], input[type="email"], textarea {
|
|
outline: 1px solid white;
|
|
color: white;
|
|
}
|
|
input:focus, textarea:focus {
|
|
outline: 3px solid white;
|
|
}
|
|
input[type="submit"] {
|
|
background: none;
|
|
color: white;
|
|
outline: 1px solid white;
|
|
}
|
|
}
|
|
</style>
|
|
<?php include($_SERVER['DOCUMENT_ROOT'] . '/seasonal.php'); ?>
|
|
</head>
|
|
<body>
|
|
<?php include($_SERVER['DOCUMENT_ROOT'] . '/nav.php'); ?>
|
|
<h1>guestbook</h1>
|
|
<h2 id="caption">say hi!</h2>
|
|
<nav>
|
|
<a href="feed.php">RSS</a>
|
|
</nav>
|
|
<?php
|
|
$return = $_GET["return"];
|
|
?>
|
|
<form action="submit.php" method="post" autocomplete="off">
|
|
<table>
|
|
|
|
<?php if($return == "noname") { echo "<td></td><td><span class='error'>Name required!</span></td>"; } ?>
|
|
<tr>
|
|
<td>Name<span style="color:red;">*</span></td>
|
|
<td><input type="text" name="name"></td>
|
|
</tr>
|
|
|
|
<?php if($return == "invalidwebsite") { echo "<td></td><td><span class='error'>Invalid URL!</span></td>"; } ?>
|
|
<tr>
|
|
<td>Website</td>
|
|
<td><input type="text" name="website" placeholder="https://"></td>
|
|
</tr>
|
|
|
|
<?php if($return == "invalidlink") { echo "<td></td><td><span class='error'>Invalid URL!</span></td>"; } ?>
|
|
<tr>
|
|
<td>Link something cool</td>
|
|
<td><input type="text" name="cool" placeholder="https://"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>How did you find me?</td>
|
|
<td><textarea name="found"></textarea></td>
|
|
</tr>
|
|
|
|
<?php if($return == "nomessage") { echo "<td></td><td><span class='error'>Message required!</span></td>"; } ?>
|
|
<tr>
|
|
<td>Message<span style="color:red;">*</span></td>
|
|
<td><textarea name="message"></textarea></td>
|
|
</tr>
|
|
|
|
<?php if($return == "botcheckfailed") { echo "<td></td><td><span class='error'>You failed the bot check!</span></td>"; } ?>
|
|
<tr>
|
|
<td>Bot test (type <u>isopod</u>)<span style="color:red;">*</span></td>
|
|
<td><input type="text" name="botcheck"></td>
|
|
</tr>
|
|
|
|
<?php if($return == "success") { echo "<td></td><td><span class='success'>Successfully posted!</span></td>"; } ?>
|
|
<tr>
|
|
<td colspan="2" style="text-align: center;"><input type="reset"><input type="submit" value="Post"></td>
|
|
</tr>
|
|
|
|
</table>
|
|
</form>
|
|
<?php
|
|
$totaloutput = "";
|
|
$postlist = json_decode(file_get_contents("posts.json"));
|
|
$index = 1;
|
|
foreach($postlist as $post) {
|
|
$output = "";
|
|
$date = date("Y-m-d h:iA", $post->date);
|
|
$name = $post->name;
|
|
$message = $post->message;
|
|
$found = $post->found;
|
|
$website = $post->website;
|
|
$cool = $post->cool;
|
|
$coolsanitized = htmlentities(preg_replace("/https?:\/\//i", "", $cool));
|
|
$reply = htmlentities($post->reply);
|
|
|
|
$output = $output."<hr><article><div style='grid-area:gb-name;'>";
|
|
if($website) { $output = $output."<a href='$website'>$name</a>"; }
|
|
else { $output = $output.$name; }
|
|
$output = $output."</div><div style='grid-area:gb-date;' class='gb-date'>$date</div><div style='grid-area:gb-index;' class='gb-index'>Entry #$index</div>";
|
|
if($cool) {
|
|
$output = $output."<div style='grid-area:gb-cool;'><b>cool thing</b>: <a href='$cool'>$coolsanitized</a></div>";
|
|
}
|
|
if($found) {
|
|
$output = $output."<div style='grid-area:gb-found;'><b>How did you find me?</b><br>$found</div>";
|
|
}
|
|
$output = $output."<div style='grid-area:gb-message;'>$message</div>";
|
|
if($reply) {
|
|
$output = $output."<div style='grid-area:gb-reply;' class='reply'><b>Reply</b>:<br>$reply</div>";
|
|
}
|
|
$output = $output."</article>";
|
|
$index++;
|
|
$totaloutput = $output.$totaloutput;
|
|
}
|
|
echo $totaloutput; ?>
|
|
<div id="leftsidebg" style="background-image: url(bg.png);"></div>
|
|
<?php include($_SERVER['DOCUMENT_ROOT'] . '/chromealert.php'); ?>
|
|
</body>
|
|
</html>
|