258 lines
9.4 KiB
PHP
258 lines
9.4 KiB
PHP
<?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";
|
||
}
|
||
|
||
if(!isset($_COOKIE['settings'])) {
|
||
$init = json_encode(
|
||
array(
|
||
"fontSize" => 18,
|
||
"lineHeight" => 2,
|
||
"wordSpacing" => 2,
|
||
"style" => "ground"
|
||
));
|
||
setcookie('settings', $init, time() + (86400 * 30 * 30), "/");
|
||
$fontSize = 18;
|
||
$lineHeight = 2;
|
||
$wordSpacing = 2;
|
||
$mystyle = "ground";
|
||
} else {
|
||
$settings = json_decode($_COOKIE['settings']);
|
||
$fontSize = $settings->fontSize;
|
||
$lineHeight = $settings->lineHeight;
|
||
$wordSpacing = $settings->wordSpacing;
|
||
$mystyle = $settings->style;
|
||
}
|
||
|
||
if(isset($_POST['settings'])) {
|
||
$update = json_encode(
|
||
array(
|
||
"fontSize" => (int)$_POST['fontsize'],
|
||
"lineHeight" => (int)$_POST['lineheight'],
|
||
"wordSpacing" => (int)$_POST['wordspacing'],
|
||
"style" => $_POST['style']
|
||
));
|
||
setcookie('settings', $update, time() + (86400 * 30 * 30), "/");
|
||
$fontSize = (int)$_POST['fontsize'];
|
||
$lineHeight = (int)$_POST['lineheight'];
|
||
$wordSpacing = (int)$_POST['wordspacing'];
|
||
$mystyle = $_POST['style'];
|
||
}
|
||
|
||
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.
|
||
return "<span>" . substr($word, 0, 1) . "</span>" . substr($word, 1);
|
||
|
||
} elseif ( $count == 4 ) {
|
||
// If there are == 4 letters, two letters are bold.
|
||
return "<span>" . substr($word, 0, 2) . "</span>" . substr($word, 2);
|
||
|
||
} elseif ( $count > 4 ) {
|
||
// If there are > 4 letters, 40% of all letters are bold.
|
||
$ch = $count / 100 * 40;
|
||
$c = (int)$ch;
|
||
return "<span>" . substr($word, 0, $c) . "</span>" . substr($word, $c);
|
||
|
||
} 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>grizzly’s space</title>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app">
|
||
<header>
|
||
<span><a href="https://tilde.team/~grizzly" style="float: left;">~grizzly</a></span>
|
||
<span class="quote">security does not exist, no system is safe</span>
|
||
<span><a href="https://tilde.team/"><- 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">
|
||
<?php if (isset($_POST['text'])) {
|
||
echo "<p class=\"text " . $mystyle . "\">".join($output, " ")."</p>";
|
||
} else { ?>
|
||
<p class="intro">
|
||
<span style="font-weight: 900;">
|
||
did you know that your brain reads faster than your eye?
|
||
</span>
|
||
<span>
|
||
my implementation according to german patent for fast text reading
|
||
</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>
|
||
|
||
<style>
|
||
.bionic p span, .bionic .text {
|
||
font-size: <?=$fontSize?>px;
|
||
line-height: <?=$lineHeight?>;
|
||
word-spacing: <?=$wordSpacing?>pt;
|
||
}
|
||
</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>
|
||
|
||
<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>
|
||
|
||
<input type="hidden" name="settings">
|
||
<input type="hidden" name="text" value="<?=$_POST['text']?>">
|
||
<input type="submit" value="save">
|
||
</form>
|
||
</details>
|
||
<?php } ?>
|
||
|
||
<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&me=grizzly"
|
||
>previous</a
|
||
>] [<a href="https://tilde.team/ring/?action=random&me=grizzly"
|
||
>random</a
|
||
>] [<a href="https://tilde.team/ring/?action=next&me=grizzly"
|
||
>next</a
|
||
>]
|
||
<br />
|
||
<a href="https://tilde.team/ring/">how to join this webring</a>
|
||
</div>';
|
||
}
|
||
|
||
?>
|