add settings to bionic
This commit is contained in:
parent
028fad926c
commit
0cd1f04eec
|
@ -14,6 +14,27 @@ if ($_SERVER['HTTP_HOST'] == 'localhost') {
|
||||||
$main_url = "https://tilde.team/~grizzly";
|
$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'])) {
|
if(!isset($_COOKIE['theme'])) {
|
||||||
setcookie('theme', 'dark', time() + (86400 * 30 * 30), "/");
|
setcookie('theme', 'dark', time() + (86400 * 30 * 30), "/");
|
||||||
$theme = 'dark';
|
$theme = 'dark';
|
||||||
|
@ -81,7 +102,7 @@ $output = array_map(function($word) {
|
||||||
<div class="app">
|
<div class="app">
|
||||||
<header>
|
<header>
|
||||||
<span>~team</span>
|
<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>
|
<span><a href="https://tilde.team/"><- back to tilde.team</a></span>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
|
@ -95,27 +116,70 @@ $output = array_map(function($word) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bionic">
|
<div class="bionic">
|
||||||
<p>
|
<?php if (isset($_POST['text'])) {
|
||||||
<?php if (isset($_POST['text'])) {
|
echo "<p>".join($output, " ")."</p>";
|
||||||
echo join($output, " ");
|
} else { ?>
|
||||||
} else { ?>
|
|
||||||
<p class="intro">
|
<p class="intro">
|
||||||
<strong>
|
<strong>
|
||||||
did you know that your brain reads faster than your eye?
|
did you know that your brain reads faster than your eye?
|
||||||
</strong>
|
</strong>
|
||||||
<span>
|
<span>
|
||||||
my implementation according to german patent for quick text reading
|
my implementation according to german patent for fast text reading
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</p>
|
|
||||||
|
|
||||||
<form action="bionic-reading.php" method="post">
|
<form action="bionic-reading.php" method="post">
|
||||||
<textarea name="text" placeholder="paste your text and try to read"></textarea>
|
<textarea name="text" placeholder="paste your text and try to read"></textarea>
|
||||||
<input type="submit" value="to bionic">
|
<input type="submit" value="to bionic">
|
||||||
</form>
|
</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>
|
<div>
|
||||||
more info: <a href="https://patents.google.com/patent/DE102017112916A1/en ">https://patents.google.com/patent/DE102017112916A1/en</a>
|
more info: <a href="https://patents.google.com/patent/DE102017112916A1/en ">https://patents.google.com/patent/DE102017112916A1/en</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -33,7 +33,8 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
textarea {
|
textarea
|
||||||
|
/* [type="submit"] */ {
|
||||||
background-color: #2c2c2c;
|
background-color: #2c2c2c;
|
||||||
border: 1px solid #444;
|
border: 1px solid #444;
|
||||||
border-radius: 0.2em;
|
border-radius: 0.2em;
|
||||||
|
|
|
@ -208,6 +208,17 @@ footer p {
|
||||||
display: block;
|
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,
|
||||||
.button:hover,
|
.button:hover,
|
||||||
[type="submit"]:hover,
|
[type="submit"]:hover,
|
||||||
|
|
|
@ -39,7 +39,7 @@ if (@$_GET['theme'] == 'light') {
|
||||||
<div class="app">
|
<div class="app">
|
||||||
<header>
|
<header>
|
||||||
<span>~team</span>
|
<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>
|
<span><a href="https://tilde.team/"><- back to tilde.team</a></span>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
|
|
Loading…
Reference in New Issue