website/bionic-reading.php

258 lines
9.4 KiB
PHP
Raw Permalink Normal View History

2022-03-24 14:57:14 +00:00
<?php
// The rules implemented are very simple (taken from the patent application [1], the exact numbers are configurable).
// If there are <= 3 letters, one letter is bold.
// If there are == 4 letters, two letters are bold.
// If there are > 4 letters, 40% of all letters are bold.
// [1] https://patents.google.com/patent/DE102017112916A1/en
if ($_SERVER['HTTP_HOST'] == 'localhost') {
$main_url = "http://localhost/public_html_git";
} else {
$main_url = "https://tilde.team/~grizzly";
}
2022-03-24 17:06:53 +00:00
if(!isset($_COOKIE['settings'])) {
2022-03-24 19:40:14 +00:00
$init = json_encode(
array(
"fontSize" => 18,
"lineHeight" => 2,
"wordSpacing" => 2,
"style" => "ground"
));
2022-03-24 17:06:53 +00:00
setcookie('settings', $init, time() + (86400 * 30 * 30), "/");
$fontSize = 18;
$lineHeight = 2;
$wordSpacing = 2;
2022-03-24 19:40:14 +00:00
$mystyle = "ground";
2022-03-24 17:06:53 +00:00
} else {
$settings = json_decode($_COOKIE['settings']);
$fontSize = $settings->fontSize;
$lineHeight = $settings->lineHeight;
$wordSpacing = $settings->wordSpacing;
2022-03-24 19:40:14 +00:00
$mystyle = $settings->style;
2022-03-24 17:06:53 +00:00
}
if(isset($_POST['settings'])) {
2022-03-24 19:40:14 +00:00
$update = json_encode(
array(
"fontSize" => (int)$_POST['fontsize'],
"lineHeight" => (int)$_POST['lineheight'],
"wordSpacing" => (int)$_POST['wordspacing'],
"style" => $_POST['style']
));
2022-03-24 17:06:53 +00:00
setcookie('settings', $update, time() + (86400 * 30 * 30), "/");
$fontSize = (int)$_POST['fontsize'];
$lineHeight = (int)$_POST['lineheight'];
$wordSpacing = (int)$_POST['wordspacing'];
2022-03-24 19:40:14 +00:00
$mystyle = $_POST['style'];
2022-03-24 17:06:53 +00:00
}
2022-03-24 14:57:14 +00:00
if(!isset($_COOKIE['theme'])) {
setcookie('theme', 'dark', time() + (86400 * 30 * 30), "/");
$theme = 'dark';
} else {
$theme = $_COOKIE['theme'];
}
if (@$_GET['theme'] == 'dark') {
setcookie('theme', 'dark', time() + (86400 * 30 * 30), "/");
header("Location: " . $main_url."/bionic-reading.php");
}
if (@$_GET['theme'] == 'light') {
setcookie('theme', 'light', time() + (86400 * 30 * 30), "/");
header("Location: " . $main_url."/bionic-reading.php");
}
$str = $_POST['text'];
$arr = explode(" ", $str);
// $arr = str_word_count($str, 1);
function style($m) {
$word = $m[0];
$count = strlen($word);
if ( $count <= 3 ) {
// If there are <= 3 letters, one letter is bold.
2022-03-24 19:40:14 +00:00
return "<span>" . substr($word, 0, 1) . "</span>" . substr($word, 1);
2022-03-24 14:57:14 +00:00
} elseif ( $count == 4 ) {
// If there are == 4 letters, two letters are bold.
2022-03-24 19:40:14 +00:00
return "<span>" . substr($word, 0, 2) . "</span>" . substr($word, 2);
2022-03-24 14:57:14 +00:00
} elseif ( $count > 4 ) {
// If there are > 4 letters, 40% of all letters are bold.
$ch = $count / 100 * 40;
$c = (int)$ch;
2022-03-24 19:40:14 +00:00
return "<span>" . substr($word, 0, $c) . "</span>" . substr($word, $c);
2022-03-24 14:57:14 +00:00
} else {
return $word;
}
}
$output = array_map(function($word) {
$word = preg_replace_callback('/\w+/i', 'style', $word);
return $word;
}, $arr);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="<?=$main_url?>/components/favicon.svg" />
<link rel="stylesheet" href="<?=$main_url?>/components/css/style.css" />
<?php if ($theme === 'dark') { ?>
<link rel="stylesheet" href="<?=$main_url?>/components/css/dark.css" />
<?php } ?>
<title>grizzlys space</title>
</head>
<body>
<div class="app">
<header>
2022-03-24 17:22:56 +00:00
<span><a href="https://tilde.team/~grizzly" style="float: left;">~grizzly</a></span>
2022-03-24 17:06:53 +00:00
<span class="quote">security does not exist, no system is safe</span>
2022-03-24 14:57:14 +00:00
<span><a href="https://tilde.team/">&lt;- back to tilde.team</a></span>
</header>
<main>
<div class="container">
<div class="content">
<div class="theme">
<?php
if ($theme == 'dark') { echo '<a href="' . $main_url . '/bionic-reading.php?theme=light">light mode</a>'; }
if ($theme == 'light') { echo '<a href="' . $main_url . '/bionic-reading.php?theme=dark">dark mode</a>'; }
?>
</div>
<div class="bionic">
2022-03-24 17:06:53 +00:00
<?php if (isset($_POST['text'])) {
2022-03-24 19:40:14 +00:00
echo "<p class=\"text " . $mystyle . "\">".join($output, " ")."</p>";
2022-03-24 17:06:53 +00:00
} else { ?>
2022-03-24 14:57:14 +00:00
<p class="intro">
2022-03-24 19:40:14 +00:00
<span style="font-weight: 900;">
2022-03-24 14:57:14 +00:00
did you know that your brain reads faster than your eye?
2022-03-24 19:40:14 +00:00
</span>
2022-03-24 14:57:14 +00:00
<span>
2022-03-24 17:06:53 +00:00
my implementation according to german patent for fast text reading
2022-03-24 14:57:14 +00:00
</span>
</p>
<?php } ?>
<form action="bionic-reading.php" method="post">
<textarea name="text" placeholder="paste your text and try to read"></textarea>
<input type="submit" value="to bionic">
</form>
2022-03-24 17:06:53 +00:00
<style>
2022-03-24 19:40:14 +00:00
.bionic p span, .bionic .text {
font-size: <?=$fontSize?>px;
line-height: <?=$lineHeight?>;
word-spacing: <?=$wordSpacing?>pt;
2022-03-24 17:06:53 +00:00
}
</style>
<?php if (isset($_POST['text'])) { ?>
<details class="settings">
<summary>settings</summary>
<form action="bionic-reading.php" method="post">
<span>
<label for="fontsize">Font size: </label>
<select name="fontsize" id="fontsize">
<?php for ($i=7; $i <= 32; $i++) { ?>
<option value="<?=$i?>" <?=$fontSize === $i ? "selected" : ""?>><?=$i?>px</option>
<?php } ?>
</select>
</span>
<span>
<label for="lineheight">Line height: </label>
<select name="lineheight" id="flineheight">
<?php for ($i=1; $i <= 5; $i++) { ?>
<option value="<?=$i?>" <?=$lineHeight === $i ? "selected" : ""?>><?=$i?>px</option>
<?php } ?>
</select>
</span>
<span>
<label for="wordspacing">Word spacing: </label>
<select name="wordspacing" id="wordspacing">
<?php for ($i=1; $i <= 15; $i++) { ?>
<option value="<?=$i?>" <?=$wordSpacing === $i ? "selected" : "" ?>><?=$i?>px</option>
<?php } ?>
</select>
</span>
2022-03-24 19:40:14 +00:00
<span>
<label for="style">Style: </label>
<select name="style" id="style">
<?php
$styles = ["normal", "bold", "space", "larger", "ground", "underline", "uppercase"];
foreach ($styles as $key => $style) {
?>
<option value="<?=$style?>" <?=$mystyle === $style ? "selected" : ""?>><?=$style?></option>
<?php } ?>
</select>
</span>
2022-03-24 17:06:53 +00:00
<input type="hidden" name="settings">
<input type="hidden" name="text" value="<?=$_POST['text']?>">
<input type="submit" value="save">
</form>
</details>
<?php } ?>
2022-03-24 14:57:14 +00:00
<div>
more info: <a href="https://patents.google.com/patent/DE102017112916A1/en ">https://patents.google.com/patent/DE102017112916A1/en</a>
</div>
</div>
</div>
<div class="side">
<?php require_once('components/comments/comment.php'); ?>
<?php require_once('components/comments/form.php'); ?>
</div>
</div>
<?php if ($theme === 'dark') { ?>
<style>.plant { background-color: transparent !important; }</style>
<?php } ?>
</main>
<footer>
<?=WebRing()?>
<div>
copyleft echo date("Y");
<p>
sorted to ravenclaw on <a href="https://wizardingworld.com/">wizardingworld</a>
</p>
</div>
</footer>
</div>
</body>
</html>
<?php
function WebRing() {
return '<!-- tilde.team ring fragment-->
<div class="newring">
[<a href="https://tilde.team/ring/?action=prev&amp;me=grizzly"
>previous</a
>] [<a href="https://tilde.team/ring/?action=random&amp;me=grizzly"
>random</a
>] [<a href="https://tilde.team/ring/?action=next&amp;me=grizzly"
>next</a
>]
<br />
<a href="https://tilde.team/ring/">how to join this webring</a>
</div>';
}
?>