This repository has been archived on 2024-02-28. You can view files and clone it, but cannot push or open issues or pull requests.
furpsocial/index.php

300 lines
11 KiB
PHP
Raw Permalink Normal View History

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-04 20:21:08 +01:00
#signature-input {
width: calc(100% - 140px);
}
2023-08-04 22:18:46 +01:00
button, #submit-input {
2023-08-04 20:22:57 +01:00
font-weight: 600;
border: none;
cursor: pointer;
}
2023-08-04 22:29:44 +01:00
#submit-input {
background: var(--accent);
color: white;
width: 100%; /* so that it's not so close to clear, might think of a better solution later */
}
#clear-button {
float: right;
color: red;
2023-08-04 20:22:57 +01:00
}
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;
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:52:32 +01:00
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext("2d");
2023-08-04 18:56:29 +01:00
const copy = ctx.createImageData(128, 64);
2023-08-04 18:58:56 +01:00
for (let i = 0; i < copy.data.length; i += 4) {
2023-08-04 19:29:03 +01:00
if (bits[i/4] === "1") {
2023-08-04 18:58:56 +01:00
copy.data[i+3] = 255;
2023-08-04 19:16:22 +01:00
}
2023-08-04 18:56:29 +01:00
}
ctx.putImageData(copy, 0, 0);
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-04 19:40:55 +01:00
Draw here:<br>
<canvas id="canvas-input" width="128" height="64"></canvas>
2023-08-04 21:54:22 +01:00
<div style="margin-bottom: 12px;">
<button type="button" onclick="setPen();" id="pen-button">Pen</button>
<button type="button" onclick="setEraser();" id="eraser-button">Eraser</button>
2023-08-04 22:29:44 +01:00
<button type="button" onclick="clearCanvas();" id="clear-button">Clear</button>
2023-08-04 19:40:55 +01:00
</div>
2023-08-02 23:31:51 +01:00
<form method="post" action="farp.php">
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">
2023-08-04 22:07:03 +01:00
<input id="submit-input" type="submit" value="Farp it">
2023-08-02 23:31:51 +01:00
</form>
2023-08-02 00:32:55 +01:00
2023-08-04 19:47:48 +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 (drawing and signature). 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 an oekaki-sharing 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");
2023-08-04 22:07:03 +01:00
const penButton = document.getElementById("pen-button");
const eraserButton = document.getElementById("eraser-button");
const submit = document.getElementById("submit-input");
2023-08-04 20:10:33 +01:00
// tools
var currentTool;
2023-08-04 16:10:58 +01:00
const pen = ctx.createImageData(2, 2);
for (let i = 0; i < pen.data.length; i += 4) {
pen.data[i+3] = 255;
}
2023-08-04 19:47:48 +01:00
const eraser = ctx.createImageData(2, 2);
for (let i = 0; i < eraser.data.length; i += 4) {
eraser.data[i+3] = 0;
}
2023-08-04 22:07:03 +01:00
//
var isDrawing = false;
2023-08-04 22:07:03 +01:00
canvas.onmousedown = function() {
submit.disabled = false;
isDrawing = true;
2023-08-04 22:11:35 +01:00
draw(window.event);
}
2023-08-04 22:07:03 +01:00
2023-08-04 16:46:55 +01:00
document.onmouseup = function() {
isDrawing = false;
2023-08-04 16:46:55 +01:00
// 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 (isDrawing) {
2023-08-04 16:10:58 +01:00
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
2023-08-04 20:00:11 +01:00
ctx.putImageData(currentTool, posX, posY);
2023-08-04 16:10:58 +01:00
}
2023-08-04 19:47:48 +01:00
function setPen() {
2023-08-04 20:00:11 +01:00
currentTool = pen;
penButton.style.textDecoration = "underline";
eraserButton.style.textDecoration = "none";
2023-08-04 19:47:48 +01:00
}
function setEraser() {
2023-08-04 20:00:11 +01:00
currentTool = eraser;
penButton.style.textDecoration = "none";
eraserButton.style.textDecoration = "underline";
2023-08-04 19:47:48 +01:00
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
submit.disabled = true;
2023-08-04 19:47:48 +01:00
}
2023-08-04 20:10:33 +01:00
2023-08-04 22:03:27 +01:00
// initialize state
2023-08-04 20:10:33 +01:00
setPen();
2023-08-04 22:03:27 +01:00
clearCanvas();
2023-08-04 16:10:58 +01:00
</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 19:40:55 +01:00
<!--
2023-08-04 17:15:51 +01:00
<div class="post">
Furp social is currently under construction as we implement oekaki farping. Come back soon!
</div>
2023-08-04 19:40:55 +01:00
-->
2023-08-04 17:15:51 +01:00
2023-08-04 20:10:33 +01:00
<!--<h1 class="feed-header">Farp highlights</h1>-->
2023-08-04 17:15:51 +01:00
</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>
<span class="post" id="refresh" onclick="window.location.href = 'https://furp.colean.cc'">refresh feed</span>
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 18:50:26 +01:00
while (strlen($line = strip_tags(fgets($myfile))) > 1) {
2023-08-04 18:48:47 +01:00
echo "<div class='post'><h2>" . $line . "</h2>";
2023-08-04 18:47:07 +01:00
echo "<i>" . strip_tags(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:47:07 +01:00
echo "<script>loadImageBits('c" . $index . "', '" . substr(strip_tags(fgets($myfile)), 0, 8192) . "');</script>";
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>