furpsocial/index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>furpsocial</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <style>
            #center {
                width: 100%;
                max-width: 900px;
                min-width: 720px;
                margin: auto;
                display: flex;
                gap: 10px;
            }

            #function-column {
                flex: 1;
            }

            #content-column {
                flex: 1;
            }

            #canvas-input {
                width: 100%;
                border: 1px solid grey;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }

            #image-bits {
                display: none;
            }

            #signature-input {
                width: calc(100% - 140px);
            }

            input[type=submit] {
                width: 100%; /* so that it's not so close to clear, might think of a better solution later */
                float: right;
                background: var(--accent);
                color: white;
                font-weight: 600;
                border: none;
                cursor: pointer;
            }

            button {
                background: var(--accent);
                color: white;
                font-weight: 600;
                border: none;
                cursor: pointer;
            }

            #clear-button:hover {
                background: red;
            }

            .feed-header {
                color: white;
                display: inline-block;
                font-size: 20px;
                margin-top: 16px;
                margin-bottom: 0;
            }

            .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;
                border-radius: 4px;
                overflow: hidden;
                margin-bottom: 10px;
            }

            .post h1 {
                margin: 0;
                font-size: 20px;
            }

            .post h2 {
                margin: 0;
                font-size: 14px;
                padding: 10px;
                margin: -10px;
                display: inline-block;
            }

            .post i {
                float: right;
                color: grey;
            }

            #refresh {
                width: 120px;
                margin: 10px 0;
                font-weight: 600;
                text-align: center;
                float: right;
                padding: 5px;
                color: var(--accent);
                cursor: pointer;
            }
        </style>

        <script>
            function loadImageBits(canvasId, bits) {
                const canvas = document.getElementById(canvasId);
                const ctx = canvas.getContext("2d");

                const copy = ctx.createImageData(128, 64);
                for (let i = 0; i < copy.data.length; i += 4) {
                    if (bits[i/4] === "1") {
                        copy.data[i+3] = 255;
                    }
                }

                ctx.putImageData(copy, 0, 0);
            }
        </script>
    </head>
    <body>

        <div id="center">

            <div id="function-column">
        
                <!-- 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>

                    Draw here:<br>
                    <canvas id="canvas-input" width="128" height="64"></canvas>

                    <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>
                        <button type="button" onclick="clearCanvas();" id="clear-button" style="float: right;">Clear</button>
                    </div>

                    <form method="post" action="farp.php">
                        <input id="image-bits" type="text" name="image-bits">

                        Signature (optional): <input id="signature-input" onchange="logSignature();" type="text" name="signature">
                        <input type="submit" value="Farp it">
                    </form>

                    <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>
                </div>

                <script>
                    const canvas = document.getElementById("canvas-input");
                    const bits = document.getElementById("image-bits");
                    const ctx = canvas.getContext("2d");

                    // tools
                    var currentTool;
                    
                    const pen = ctx.createImageData(2, 2);
                    for (let i = 0; i < pen.data.length; i += 4) {
                        pen.data[i+3] = 255;
                    }
                    const penButton = document.getElementById("pen-button");

                    const eraser = ctx.createImageData(2, 2);
                    for (let i = 0; i < eraser.data.length; i += 4) {
                        eraser.data[i+3] = 0;
                    }
                    const eraserButton = document.getElementById("eraser-button");

                    var drawing = false;
                    canvas.onmousedown = function() { drawing = true; }
                    document.onmouseup = function() {
                        drawing = false;
                        // write image-bits for posting
                        let canvasData = ctx.getImageData(0, 0, 128, 64);
                        bits.value = "";

                        // not best method, ideally want to create an array and then merge
                        for (let i = 0; i < canvasData.data.length; i += 4) {
                            if (canvasData.data[i+3] == 255) {
                                bits.value += "1";
                            } else {
                                bits.value += "0";
                            }
                        }
                    }

                    canvas.onmousemove = function() {
                        if (drawing) {
                            draw(window.event);
                        }
                    };

                    function draw(e) {
                        var posX = e.offsetX * canvas.width / canvas.offsetWidth - 1;
                        var posY = e.offsetY * canvas.height / canvas.offsetHeight - 1;
                        
                        ctx.putImageData(currentTool, posX, posY);
                    }

                    function setPen() {
                        currentTool = pen;

                        penButton.style.textDecoration = "underline";
                        eraserButton.style.textDecoration = "none";
                    }

                    function setEraser() {
                        currentTool = eraser;

                        penButton.style.textDecoration = "none";
                        eraserButton.style.textDecoration = "underline";
                    }

                    function clearCanvas() {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                    }

                    setPen();
                </script>

                <!-- 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>

                <!--
                <div class="post">
                    Furp social is currently under construction as we implement oekaki farping. Come back soon!
                </div>
                -->

                <!--<h1 class="feed-header">Farp highlights</h1>-->

            </div>

            <div id="content-column">

                <!-- feed display -->
                <h1 class="feed-header">Global Feed</h1>
                <span class="post" id="refresh" onclick="window.location.href = 'index.php'">refresh feed</span>

                <?php
                // ensure the file exists before attempting to read from it
                if (!file_exists("posts.txt")) {
                    $myfile = fopen("posts.txt", "w");
                    fclose($myfile);
                }

                // show content
                $myfile = fopen("posts.txt", "r") or die("Unable to open file!");
                if ($myfile) {
                    $index = 0;
                    while (strlen($line = strip_tags(fgets($myfile))) > 1) {
                        echo "<div class='post'><h2>" . $line . "</h2>";
                        echo "<i>" . strip_tags(fgets($myfile)) . "</i>";
                        echo "<canvas id='c" . $index . "' style='width: 100%;' width='128' height='64'></canvas></div>";
                        
                        echo "<script>loadImageBits('c" . $index . "', '" . substr(strip_tags(fgets($myfile)), 0, 8192) . "');</script>";

                        $index++;
                    }

                    fclose($myfile);
                }
                ?>
            </div>

        </div>

    </body>
</html>
Update index.php 2023-08-01 19:57:14 +01:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
this works now 2023-08-01 23:05:45 +01:00			`<title>furpsocial</title>`
Update index.php 2023-08-01 19:57:14 +01:00			`<meta charset="UTF-8">`
link style.css 2023-08-02 23:15:41 +01:00			`<link rel="stylesheet" href="style.css">`
Update index.php 2023-08-01 19:57:14 +01:00			`<style>`
fix (again) 2023-08-02 23:35:30 +01:00			`#center {`
Update index.php 2023-08-02 23:54:24 +01:00			`width: 100%;`
fix (again) 2023-08-02 23:35:30 +01:00			`max-width: 900px;`
Update index.php 2023-08-02 23:54:24 +01:00			`min-width: 720px;`
fix (again) 2023-08-02 23:35:30 +01:00			`margin: auto;`
			`display: flex;`
			`gap: 10px;`
			`}`

			`#function-column {`
			`flex: 1;`
			`}`

			`#content-column {`
Update index.php 2023-08-04 16:31:22 +01:00			`flex: 1;`
fix (again) 2023-08-02 23:35:30 +01:00			`}`

canvas input 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;`
			`}`

Update index.php 2023-08-04 16:45:04 +01:00			`#image-bits {`
			`display: none;`
test 2023-08-01 20:13:44 +01:00			`}`
Update index.php 2023-08-01 23:22:08 +01:00
style input 2023-08-04 20:21:08 +01:00			`#signature-input {`
			`width: calc(100% - 140px);`
			`}`

Update index.php 2023-08-02 22:52:26 +01:00			`input[type=submit] {`
style input 2023-08-04 20:21:08 +01:00			`width: 100%; /* so that it's not so close to clear, might think of a better solution later */`
Update index.php 2023-08-02 22:52:26 +01:00			`float: right;`
			`background: var(--accent);`
			`color: white;`
			`font-weight: 600;`
			`border: none;`
			`cursor: pointer;`
			`}`

clear button styling 2023-08-04 20:22:57 +01:00			`button {`
			`background: var(--accent);`
			`color: white;`
			`font-weight: 600;`
			`border: none;`
			`cursor: pointer;`
			`}`

			`#clear-button:hover {`
			`background: red;`
			`}`

Update index.php 2023-08-04 16:34:27 +01:00			`.feed-header {`
			`color: white;`
			`display: inline-block;`
			`font-size: 20px;`
			`margin-top: 16px;`
			`margin-bottom: 0;`
			`}`

Update index.php 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;`
Update index.php 2023-08-02 22:52:26 +01:00			`border-radius: 4px;`
cool look 2023-08-01 23:26:11 +01:00			`overflow: hidden;`
Update index.php 2023-08-01 23:46:39 +01:00			`margin-bottom: 10px;`
Update index.php 2023-08-01 23:22:08 +01:00			`}`

			`.post h1 {`
			`margin: 0;`
			`font-size: 20px;`
cool look :3 2023-08-01 23:27:44 +01:00			`}`

			`.post h2 {`
			`margin: 0;`
			`font-size: 14px;`
cool look 2023-08-01 23:26:11 +01:00			`padding: 10px;`
			`margin: -10px;`
Update index.php 2023-08-01 23:30:30 +01:00			`display: inline-block;`
			`}`

			`.post i {`
			`float: right;`
			`color: grey;`
Update index.php 2023-08-01 23:22:08 +01:00			`}`
add refresh button 2023-08-02 01:10:36 +01:00
			`#refresh {`
columnize 2023-08-02 23:31:51 +01:00			`width: 120px;`
satisfy cc 2023-08-02 23:44:53 +01:00			`margin: 10px 0;`
hey note to self add link back to src code 2023-08-02 01:15:55 +01:00			`font-weight: 600;`
Update index.php 2023-08-02 01:12:23 +01:00			`text-align: center;`
satisfy cc 2023-08-02 23:44:53 +01:00			`float: right;`
Update index.php 2023-08-02 01:12:23 +01:00			`padding: 5px;`
cookie is a go 2023-08-02 22:30:49 +01:00			`color: var(--accent);`
Update index.php 2023-08-02 22:41:57 +01:00			`cursor: pointer;`
add refresh button 2023-08-02 01:10:36 +01:00			`}`
Update index.php 2023-08-01 19:57:14 +01:00			`</style>`
loading image bits prep 2023-08-04 17:40:17 +01:00
			`<script>`
			`function loadImageBits(canvasId, bits) {`
color unnecessary 2023-08-04 18:52:32 +01:00			`const canvas = document.getElementById(canvasId);`
			`const ctx = canvas.getContext("2d");`

Update index.php 2023-08-04 18:56:29 +01:00			`const copy = ctx.createImageData(128, 64);`
image loading probably works now 2023-08-04 18:58:56 +01:00			`for (let i = 0; i < copy.data.length; i += 4) {`
Update index.php 2023-08-04 19:29:03 +01:00			`if (bits[i/4] === "1") {`
image loading probably works now 2023-08-04 18:58:56 +01:00			`copy.data[i+3] = 255;`
=== 2023-08-04 19:16:22 +01:00			`}`
Update index.php 2023-08-04 18:56:29 +01:00			`}`

			`ctx.putImageData(copy, 0, 0);`
loading image bits prep 2023-08-04 17:40:17 +01:00			`}`
			`</script>`
put php in head 2023-08-02 00:32:55 +01:00			`</head>`
			`<body>`
columnize 2023-08-02 23:31:51 +01:00
			`<div id="center">`

fix 2023-08-02 23:33:46 +01:00			`<div id="function-column">`
put php in head 2023-08-02 00:32:55 +01:00
columnize 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>`
put php in head 2023-08-02 00:32:55 +01:00
add tools 2023-08-04 19:40:55 +01:00			`Draw here:<br>`
			`<canvas id="canvas-input" width="128" height="64"></canvas>`

Update index.php 2023-08-04 21:54:22 +01:00			`<div style="margin-bottom: 12px;">`
button style + add responsiveness to click 2023-08-04 20:08:38 +01:00			`<button type="button" onclick="setPen();" id="pen-button">Pen</button>`
			`<button type="button" onclick="setEraser();" id="eraser-button">Eraser</button>`
clear button styling 2023-08-04 20:22:57 +01:00			`<button type="button" onclick="clearCanvas();" id="clear-button" style="float: right;">Clear</button>`
add tools 2023-08-04 19:40:55 +01:00			`</div>`

columnize 2023-08-02 23:31:51 +01:00			`<form method="post" action="farp.php">`
Update index.php 2023-08-04 16:45:04 +01:00			`<input id="image-bits" type="text" name="image-bits">`

columnize 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>`
put php in head 2023-08-02 00:32:55 +01:00
add canvas clearing 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>`
columnize 2023-08-02 23:31:51 +01:00			`</div>`
Update index.php 2023-08-01 19:57:14 +01:00
test oekaki 2023-08-04 16:10:58 +01:00			`<script>`
canvas input 2023-08-04 16:13:27 +01:00			`const canvas = document.getElementById("canvas-input");`
test bits 2023-08-04 16:46:55 +01:00			`const bits = document.getElementById("image-bits");`
test oekaki 2023-08-04 16:10:58 +01:00			`const ctx = canvas.getContext("2d");`

run setPen on start 2023-08-04 20:10:33 +01:00			`// tools`
			`var currentTool;`

test oekaki 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;`
			`}`
button style + add responsiveness to click 2023-08-04 20:08:38 +01:00			`const penButton = document.getElementById("pen-button");`
test oekaki 2023-08-04 16:10:58 +01:00
add canvas clearing 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;`
			`}`
button style + add responsiveness to click 2023-08-04 20:08:38 +01:00			`const eraserButton = document.getElementById("eraser-button");`
add canvas clearing 2023-08-04 19:47:48 +01:00
test oekaki 2023-08-04 16:10:58 +01:00			`var drawing = false;`
			`canvas.onmousedown = function() { drawing = true; }`
test bits 2023-08-04 16:46:55 +01:00			`document.onmouseup = function() {`
			`drawing = false;`
			`// write image-bits for posting`
make data off ctx 2023-08-04 16:57:45 +01:00			`let canvasData = ctx.getImageData(0, 0, 128, 64);`
implement rudimetary canvas reading 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) {`
Update index.php 2023-08-04 16:56:34 +01:00			`if (canvasData.data[i+3] == 255) {`
implement rudimetary canvas reading 2023-08-04 16:55:05 +01:00			`bits.value += "1";`
			`} else {`
			`bits.value += "0";`
			`}`
			`}`
test bits 2023-08-04 16:46:55 +01:00			`}`
test oekaki 2023-08-04 16:10:58 +01:00
			`canvas.onmousemove = function() {`
			`if (drawing) {`
			`draw(window.event);`
			`}`
			`};`

			`function draw(e) {`
Update index.php 2023-08-04 16:24:56 +01:00			`var posX = e.offsetX * canvas.width / canvas.offsetWidth - 1;`
offsetHeight fix 2023-08-04 16:25:26 +01:00			`var posY = e.offsetY * canvas.height / canvas.offsetHeight - 1;`
test oekaki 2023-08-04 16:10:58 +01:00
implement currentTool 2023-08-04 20:00:11 +01:00			`ctx.putImageData(currentTool, posX, posY);`
test oekaki 2023-08-04 16:10:58 +01:00			`}`
add canvas clearing 2023-08-04 19:47:48 +01:00
			`function setPen() {`
implement currentTool 2023-08-04 20:00:11 +01:00			`currentTool = pen;`
button style + add responsiveness to click 2023-08-04 20:08:38 +01:00
			`penButton.style.textDecoration = "underline";`
			`eraserButton.style.textDecoration = "none";`
add canvas clearing 2023-08-04 19:47:48 +01:00			`}`

			`function setEraser() {`
implement currentTool 2023-08-04 20:00:11 +01:00			`currentTool = eraser;`
button style + add responsiveness to click 2023-08-04 20:08:38 +01:00
			`penButton.style.textDecoration = "none";`
			`eraserButton.style.textDecoration = "underline";`
add canvas clearing 2023-08-04 19:47:48 +01:00			`}`

			`function clearCanvas() {`
			`ctx.clearRect(0, 0, canvas.width, canvas.height);`
			`}`
run setPen on start 2023-08-04 20:10:33 +01:00
			`setPen();`
test oekaki 2023-08-04 16:10:58 +01:00			`</script>`

columnize 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>`

add tools 2023-08-04 19:40:55 +01:00			`<!--`
show file please 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>`
add tools 2023-08-04 19:40:55 +01:00			`-->`
show file please 2023-08-04 17:15:51 +01:00
run setPen on start 2023-08-04 20:10:33 +01:00			`<!--<h1 class="feed-header">Farp highlights</h1>-->`

show file please 2023-08-04 17:15:51 +01:00			`</div>`

			`<div id="content-column">`

columnize 2023-08-02 23:31:51 +01:00			`<!-- feed display -->`
Update index.php 2023-08-04 16:34:27 +01:00			`<h1 class="feed-header">Global Feed</h1>`
satisfy cc 2023-08-02 23:44:53 +01:00			`<span class="post" id="refresh" onclick="window.location.href = 'index.php'">refresh feed</span>`
whoops! 2023-08-04 16:48:43 +01:00
columnize 2023-08-02 23:31:51 +01:00			`<?php`
			`// ensure the file exists before attempting to read from it`
			`if (!file_exists("posts.txt")) {`
show file please 2023-08-04 17:15:51 +01:00			`$myfile = fopen("posts.txt", "w");`
columnize 2023-08-02 23:31:51 +01:00			`fclose($myfile);`
			`}`

			`// show content`
Update index.php 2023-08-04 16:37:54 +01:00			`$myfile = fopen("posts.txt", "r") or die("Unable to open file!");`
Update index.php 2023-08-04 17:22:21 +01:00			`if ($myfile) {`
loading image bits prep 2023-08-04 17:40:17 +01:00			`$index = 0;`
hack? 2023-08-04 18:50:26 +01:00			`while (strlen($line = strip_tags(fgets($myfile))) > 1) {`
account for break 2023-08-04 18:48:47 +01:00			`echo "<div class='post'><h2>" . $line . "</h2>";`
strip_tags 2023-08-04 18:47:07 +01:00			`echo "<i>" . strip_tags(fgets($myfile)) . "</i>";`
Update index.php 2023-08-04 17:57:40 +01:00			`echo "<canvas id='c" . $index . "' style='width: 100%;' width='128' height='64'></canvas></div>";`
function call 2023-08-04 18:04:34 +01:00
strip_tags 2023-08-04 18:47:07 +01:00			`echo "<script>loadImageBits('c" . $index . "', '" . substr(strip_tags(fgets($myfile)), 0, 8192) . "');</script>";`
loading image bits prep 2023-08-04 17:40:17 +01:00
forgot a single $ 2023-08-04 17:41:39 +01:00			`$index++;`
Update index.php 2023-08-04 17:22:21 +01:00			`}`

			`fclose($myfile);`
			`}`
linereader 2023-08-04 16:37:34 +01:00			`?>`
columnize 2023-08-02 23:31:51 +01:00			`</div>`

			`</div>`
add date 2023-08-01 23:37:31 +01:00
Update index.php 2023-08-01 19:57:14 +01:00			`</body>`
Add index.php 2023-08-01 19:38:07 +01:00			`</html>`