2023-08-01 19:57:14 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2023-08-01 23:05:45 +01:00
|
|
|
<title>furpsocial</title>
|
2023-08-01 19:57:14 +01:00
|
|
|
<meta charset="UTF-8">
|
2023-08-02 23:15:41 +01:00
|
|
|
<link rel="stylesheet" href="style.css">
|
2023-08-01 19:57:14 +01:00
|
|
|
<style>
|
2023-08-02 23:35:30 +01:00
|
|
|
#center {
|
2023-08-02 23:54:24 +01:00
|
|
|
width: 100%;
|
2023-08-02 23:35:30 +01:00
|
|
|
max-width: 900px;
|
2023-08-02 23:54:24 +01:00
|
|
|
min-width: 720px;
|
2023-08-02 23:35:30 +01:00
|
|
|
margin: auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#function-column {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#content-column {
|
|
|
|
|
flex: 2;
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-04 16:13:27 +01:00
|
|
|
#canvas-input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border: 1px solid grey;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-01 20:13:44 +01:00
|
|
|
#body-input {
|
2023-08-03 00:17:22 +01:00
|
|
|
width: calc(100% - 6px);
|
2023-08-01 20:13:44 +01:00
|
|
|
height: 150px;
|
2023-08-01 20:43:22 +01:00
|
|
|
resize: none;
|
2023-08-01 20:13:44 +01:00
|
|
|
}
|
2023-08-01 23:22:08 +01:00
|
|
|
|
2023-08-02 22:52:26 +01:00
|
|
|
input[type=submit] {
|
2023-08-03 00:34:27 +01:00
|
|
|
width: 64px;
|
2023-08-02 22:52:26 +01:00
|
|
|
float: right;
|
|
|
|
|
background: var(--accent);
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
border: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-01 23:22:08 +01:00
|
|
|
.post {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: white;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
|
box-shadow: 0px 0px 10px gray;
|
2023-08-02 22:52:26 +01:00
|
|
|
border-radius: 4px;
|
2023-08-01 23:26:11 +01:00
|
|
|
overflow: hidden;
|
2023-08-01 23:46:39 +01:00
|
|
|
margin-bottom: 10px;
|
2023-08-01 23:22:08 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post h1 {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: 20px;
|
2023-08-01 23:27:44 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post h2 {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: 14px;
|
2023-08-01 23:26:11 +01:00
|
|
|
padding: 10px;
|
|
|
|
|
margin: -10px;
|
2023-08-01 23:30:30 +01:00
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.post i {
|
|
|
|
|
float: right;
|
|
|
|
|
color: grey;
|
2023-08-01 23:22:08 +01:00
|
|
|
}
|
2023-08-02 01:10:36 +01:00
|
|
|
|
|
|
|
|
#refresh {
|
2023-08-02 23:31:51 +01:00
|
|
|
width: 120px;
|
2023-08-02 23:44:53 +01:00
|
|
|
margin: 10px 0;
|
2023-08-02 01:15:55 +01:00
|
|
|
font-weight: 600;
|
2023-08-02 01:12:23 +01:00
|
|
|
text-align: center;
|
2023-08-02 23:44:53 +01:00
|
|
|
float: right;
|
2023-08-02 01:12:23 +01:00
|
|
|
padding: 5px;
|
2023-08-02 22:30:49 +01:00
|
|
|
color: var(--accent);
|
2023-08-02 22:41:57 +01:00
|
|
|
cursor: pointer;
|
2023-08-02 01:10:36 +01:00
|
|
|
}
|
2023-08-01 19:57:14 +01:00
|
|
|
</style>
|
2023-08-02 00:32:55 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-08-02 23:31:51 +01:00
|
|
|
|
|
|
|
|
<div id="center">
|
|
|
|
|
|
2023-08-02 23:33:46 +01:00
|
|
|
<div id="function-column">
|
2023-08-02 00:32:55 +01:00
|
|
|
|
2023-08-02 23:31:51 +01:00
|
|
|
<!-- header and options for making posts -->
|
|
|
|
|
<div class="post" style="border-top-left-radius: 0; border-top-right-radius: 0;">
|
|
|
|
|
<h1 style="margin-bottom: 4px;"><span style="color: var(--accent);">furp</span>social</h1>
|
2023-08-02 00:32:55 +01:00
|
|
|
|
2023-08-04 16:14:14 +01:00
|
|
|
<canvas id="canvas-input" width="128" height="64"></canvas>
|
2023-08-02 23:31:51 +01:00
|
|
|
<form method="post" action="farp.php">
|
|
|
|
|
<textarea id="body-input" name="body"></textarea>
|
|
|
|
|
Signature (optional): <input id="signature-input" onchange="logSignature();" type="text" name="signature">
|
|
|
|
|
<input type="submit" value="Farp it">
|
|
|
|
|
</form>
|
2023-08-02 00:32:55 +01:00
|
|
|
|
2023-08-03 00:17:22 +01:00
|
|
|
<span style="font-size: 12px; color: grey;">Privacy Policy: The only data collected by furpsocial server-side is the contents of your posts (signature and body text). This information is stored in our secure databases which are wiped of all post data every week. This data is only used to accomodate furpsocial as a social media platform. Client-side, furpsocial stores your most recently used signature as a cookie, which persists for one day before expiring.</span>
|
2023-08-02 23:31:51 +01:00
|
|
|
</div>
|
2023-08-01 19:57:14 +01:00
|
|
|
|
2023-08-04 16:10:58 +01:00
|
|
|
<script>
|
2023-08-04 16:13:27 +01:00
|
|
|
const canvas = document.getElementById("canvas-input");
|
2023-08-04 16:10:58 +01:00
|
|
|
const crect = canvas.getBoundingClientRect();
|
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
|
|
|
|
|
|
const pen = ctx.createImageData(2, 2);
|
|
|
|
|
for (let i = 0; i < pen.data.length; i += 4) {
|
|
|
|
|
pen.data[i] = 0;
|
|
|
|
|
pen.data[i+1] = 0;
|
|
|
|
|
pen.data[i+2] = 0;
|
|
|
|
|
pen.data[i+3] = 255;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var drawing = false;
|
|
|
|
|
canvas.onmousedown = function() { drawing = true; }
|
|
|
|
|
canvas.onmouseup = function() { drawing = false; }
|
|
|
|
|
|
|
|
|
|
canvas.onmousemove = function() {
|
|
|
|
|
if (drawing) {
|
|
|
|
|
draw(window.event);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function draw(e) {
|
2023-08-04 16:17:55 +01:00
|
|
|
var posX = (e.clientX - crect.left) * canvas.width / crect.width - 1;
|
|
|
|
|
var posY = (e.clientY - crect.top) * canvas.height / crect.height - 1;
|
2023-08-04 16:10:58 +01:00
|
|
|
|
|
|
|
|
ctx.putImageData(pen, posX, posY);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
2023-08-02 23:31:51 +01:00
|
|
|
</div>
|
2023-08-02 22:14:44 +01:00
|
|
|
|
2023-08-02 23:33:46 +01:00
|
|
|
<div id="content-column">
|
2023-08-02 22:08:44 +01:00
|
|
|
|
2023-08-02 23:31:51 +01:00
|
|
|
<!-- save most recent signature as a cookie and autoload on page load -->
|
|
|
|
|
<script>
|
|
|
|
|
function logSignature() {
|
|
|
|
|
// save signature to cookie
|
|
|
|
|
const d = new Date();
|
|
|
|
|
d.setTime(d.getTime() + (1 * 24 * 60 * 60 * 1000));
|
|
|
|
|
document.cookie = "signature=" + document.getElementById("signature-input").value + "; expires=" + d.toUTCString() + ";path=/";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// load caches signature
|
|
|
|
|
if (document.cookie.includes('=')) {
|
|
|
|
|
document.getElementById("signature-input").defaultValue = document.cookie.split('=')[1];
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- feed display -->
|
2023-08-02 23:49:07 +01:00
|
|
|
<h1 style="color: white; display: inline-block; font-size: 20px; margin-top: 16px; margin-bottom: 0;">Global Feed</h1>
|
2023-08-02 23:44:53 +01:00
|
|
|
<span class="post" id="refresh" onclick="window.location.href = 'index.php'">refresh feed</span>
|
2023-08-02 23:31:51 +01:00
|
|
|
|
|
|
|
|
<?php
|
|
|
|
|
// ensure the file exists before attempting to read from it
|
|
|
|
|
if (!file_exists("posts.txt")) {
|
|
|
|
|
$myfile = fopen("posts.txt", "a");
|
|
|
|
|
fclose($myfile);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// show content
|
|
|
|
|
$myfile = fopen("posts.txt", "r") or die("Unable to open file!");
|
|
|
|
|
echo fread($myfile, filesize("posts.txt"));
|
|
|
|
|
fclose($myfile);
|
|
|
|
|
?>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
2023-08-01 23:37:31 +01:00
|
|
|
|
2023-08-01 19:57:14 +01:00
|
|
|
</body>
|
2023-08-01 19:38:07 +01:00
|
|
|
</html>
|
