add settings to bionic
This commit is contained in:
Sebastian Korotkiewicz
parent
028fad926c
commit
0cd1f04eec
GPG Key ID:
5BDC557B496BDB0D
|
|
@ -14,6 +14,27 @@ if ($_SERVER['HTTP_HOST'] == 'localhost') {
|
|||
$main_url = "https://tilde.team/~grizzly";
|
||||
}
|
||||
|
||||
if(!isset($_COOKIE['settings'])) {
|
||||
$init = json_encode(array("fontSize" => 18, "lineHeight" => 2, "wordSpacing" => 2));
|
||||
setcookie('settings', $init, time() + (86400 * 30 * 30), "/");
|
||||
$fontSize = 18;
|
||||
$lineHeight = 2;
|
||||
$wordSpacing = 2;
|
||||
} else {
|
||||
$settings = json_decode($_COOKIE['settings']);
|
||||
$fontSize = $settings->fontSize;
|
||||
$lineHeight = $settings->lineHeight;
|
||||
$wordSpacing = $settings->wordSpacing;
|
||||
}
|
||||
|
||||
if(isset($_POST['settings'])) {
|
||||
$update = json_encode(array("fontSize" => (int)$_POST['fontsize'], "lineHeight" => (int)$_POST['lineheight'], "wordSpacing" => (int)$_POST['wordspacing']));
|
||||
setcookie('settings', $update, time() + (86400 * 30 * 30), "/");
|
||||
$fontSize = (int)$_POST['fontsize'];
|
||||
$lineHeight = (int)$_POST['lineheight'];
|
||||
$wordSpacing = (int)$_POST['wordspacing'];
|
||||
}
|
||||
|
||||
if(!isset($_COOKIE['theme'])) {
|
||||
setcookie('theme', 'dark', time() + (86400 * 30 * 30), "/");
|
||||
$theme = 'dark';
|
||||
|
|
@ -81,7 +102,7 @@ $output = array_map(function($word) {
|
|||
<div class="app">
|
||||
<header>
|
||||
<span>~team</span>
|
||||
<span class="quote">security does not exist, no system is save</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>
|
||||
|
|
@ -95,27 +116,70 @@ $output = array_map(function($word) {
|
|||
</div>
|
||||
|
||||
<div class="bionic">
|
||||
<p>
|
||||
<?php if (isset($_POST['text'])) {
|
||||
echo join($output, " ");
|
||||
} else { ?>
|
||||
<?php if (isset($_POST['text'])) {
|
||||
echo "<p>".join($output, " ")."</p>";
|
||||
} else { ?>
|
||||
<p class="intro">
|
||||
<strong>
|
||||
did you know that your brain reads faster than your eye?
|
||||
</strong>
|
||||
<span>
|
||||
my implementation according to german patent for quick text reading
|
||||
my implementation according to german patent for fast text reading
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<?php } ?>
|
||||
</p>
|
||||
|
||||
<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, .bionic strong {
|
||||
font-size: <?=$fontSize?>px !important;
|
||||
line-height: <?=$lineHeight?> !important;
|
||||
word-spacing: <?=$wordSpacing?>pt !important;
|
||||
}
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@ footer {
|
|||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
textarea
|
||||
/* [type="submit"] */ {
|
||||
background-color: #2c2c2c;
|
||||
border: 1px solid #444;
|
||||
border-radius: 0.2em;
|
||||
|
|
|
|||
|
|
@ -208,6 +208,17 @@ footer p {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.settings {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.settings span {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover,
|
||||
[type="submit"]:hover,
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ if (@$_GET['theme'] == 'light') {
|
|||
<div class="app">
|
||||
<header>
|
||||
<span>~team</span>
|
||||
<span class="quote">security does not exist, no system is save</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue