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 {
|
2023-08-04 16:31:22 +01:00
|
|
|
flex: 1;
|
2023-08-02 23:35:30 +01:00
|
|
|
}
|
|
|
|
|
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-04 16:45:04 +01:00
|
|
|
#image-bits {
|
|
|
|
display: 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-04 16:34:27 +01:00
|
|
|
.feed-header {
|
|
|
|
color: white;
|
|
|
|
display: inline-block;
|
|
|
|
font-size: 20px;
|
|
|
|
margin-top: 16px;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
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-04 17:40:17 +01:00
|
|
|
|
|
|
|
<script>
|
|
|
|
function loadImageBits(canvasId, bits) {
|
2023-08-04 18:09:38 +01:00
|
|
|
alert("loading " + canvasId);
|
2023-08-04 17:40:17 +01:00
|
|
|
}
|
|
|
|
</script>
|
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-02 23:31:51 +01:00
|
|
|
<form method="post" action="farp.php">
|
2023-08-04 16:31:22 +01:00
|
|
|
Draw here:<br>
|
2023-08-04 16:24:56 +01:00
|
|
|
<canvas id="canvas-input" width="128" height="64"></canvas>
|
2023-08-04 16:45:04 +01:00
|
|
|
<input id="image-bits" type="text" name="image-bits">
|
|
|
|
|
2023-08-02 23:31:51 +01:00
|
|
|
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:46:55 +01:00
|
|
|
const bits = document.getElementById("image-bits");
|
2023-08-04 16:10:58 +01:00
|
|
|
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; }
|
2023-08-04 16:46:55 +01:00
|
|
|
document.onmouseup = function() {
|
|
|
|
drawing = false;
|
|
|
|
// write image-bits for posting
|
2023-08-04 16:57:45 +01:00
|
|
|
let canvasData = ctx.getImageData(0, 0, 128, 64);
|
2023-08-04 16:55:05 +01:00
|
|
|
bits.value = "";
|
|
|
|
|
|
|
|
// not best method, ideally want to create an array and then merge
|
|
|
|
for (let i = 0; i < canvasData.data.length; i += 4) {
|
2023-08-04 16:56:34 +01:00
|
|
|
if (canvasData.data[i+3] == 255) {
|
2023-08-04 16:55:05 +01:00
|
|
|
bits.value += "1";
|
|
|
|
} else {
|
|
|
|
bits.value += "0";
|
|
|
|
}
|
|
|
|
}
|
2023-08-04 16:46:55 +01:00
|
|
|
}
|
2023-08-04 16:10:58 +01:00
|
|
|
|
|
|
|
canvas.onmousemove = function() {
|
|
|
|
if (drawing) {
|
|
|
|
draw(window.event);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
function draw(e) {
|
2023-08-04 16:24:56 +01:00
|
|
|
var posX = e.offsetX * canvas.width / canvas.offsetWidth - 1;
|
2023-08-04 16:25:26 +01:00
|
|
|
var posY = e.offsetY * canvas.height / canvas.offsetHeight - 1;
|
2023-08-04 16:10:58 +01:00
|
|
|
|
|
|
|
ctx.putImageData(pen, posX, posY);
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
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>
|
|
|
|
|
2023-08-04 17:15:51 +01:00
|
|
|
<!--<h1 class="feed-header">Farp highlights</h1>-->
|
|
|
|
|
|
|
|
<div class="post">
|
|
|
|
Furp social is currently under construction as we implement oekaki farping. Come back soon!
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="content-column">
|
|
|
|
|
2023-08-02 23:31:51 +01:00
|
|
|
<!-- feed display -->
|
2023-08-04 16:34:27 +01:00
|
|
|
<h1 class="feed-header">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
|
|
|
|
2023-08-04 16:48:43 +01:00
|
|
|
|
2023-08-02 23:31:51 +01:00
|
|
|
<?php
|
|
|
|
// ensure the file exists before attempting to read from it
|
|
|
|
if (!file_exists("posts.txt")) {
|
2023-08-04 17:15:51 +01:00
|
|
|
$myfile = fopen("posts.txt", "w");
|
2023-08-02 23:31:51 +01:00
|
|
|
fclose($myfile);
|
|
|
|
}
|
|
|
|
|
|
|
|
// show content
|
2023-08-04 16:37:54 +01:00
|
|
|
$myfile = fopen("posts.txt", "r") or die("Unable to open file!");
|
2023-08-04 17:22:21 +01:00
|
|
|
if ($myfile) {
|
2023-08-04 17:40:17 +01:00
|
|
|
$index = 0;
|
2023-08-04 17:22:21 +01:00
|
|
|
while (($line = fgets($myfile)) !== false) {
|
2023-08-04 17:25:07 +01:00
|
|
|
echo "<div class='post'><h2>" . $line . "</h2>";
|
|
|
|
echo "<i>" . fgets($myfile) . "</i>";
|
2023-08-04 17:57:40 +01:00
|
|
|
echo "<canvas id='c" . $index . "' style='width: 100%;' width='128' height='64'></canvas></div>";
|
2023-08-04 18:04:34 +01:00
|
|
|
|
2023-08-04 18:38:59 +01:00
|
|
|
echo "<script>loadImageBits('c" . $index . "', '" . "0011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100110011001100
|
2023-08-04 18:18:58 +01:00
|
|
|
fgets($myfile);
|
2023-08-04 17:40:17 +01:00
|
|
|
|
2023-08-04 17:41:39 +01:00
|
|
|
$index++;
|
2023-08-04 17:22:21 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
fclose($myfile);
|
|
|
|
}
|
2023-08-04 16:37:34 +01:00
|
|
|
?>
|
2023-08-02 23:31:51 +01:00
|
|
|
</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>
|