style for bionic

This commit is contained in:
Sebastian Korotkiewicz 2022-03-24 20:40:14 +01:00
parent 156e70a9da
commit 9ed1047b9a
Signed by: grizzly
GPG Key ID: 5BDC557B496BDB0D
3 changed files with 71 additions and 19 deletions

View File

@ -15,24 +15,39 @@ if ($_SERVER['HTTP_HOST'] == 'localhost') {
}
if(!isset($_COOKIE['settings'])) {
$init = json_encode(array("fontSize" => 18, "lineHeight" => 2, "wordSpacing" => 2));
$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']));
$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'])) {
@ -61,17 +76,17 @@ function style($m) {
if ( $count <= 3 ) {
// If there are <= 3 letters, one letter is bold.
return "<strong>" . substr($word, 0, 1) . "</strong>" . substr($word, 1);
return "<span>" . substr($word, 0, 1) . "</span>" . substr($word, 1);
} elseif ( $count == 4 ) {
// If there are == 4 letters, two letters are bold.
return "<strong>" . substr($word, 0, 2) . "</strong>" . substr($word, 2);
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 "<strong>" . substr($word, 0, $c) . "</strong>" . substr($word, $c);
return "<span>" . substr($word, 0, $c) . "</span>" . substr($word, $c);
} else {
return $word;
@ -117,12 +132,12 @@ $output = array_map(function($word) {
<div class="bionic">
<?php if (isset($_POST['text'])) {
echo "<p>".join($output, " ")."</p>";
echo "<p class=\"text " . $mystyle . "\">".join($output, " ")."</p>";
} else { ?>
<p class="intro">
<strong>
<span style="font-weight: 900;">
did you know that your brain reads faster than your eye?
</strong>
</span>
<span>
my implementation according to german patent for fast text reading
</span>
@ -135,10 +150,10 @@ $output = array_map(function($word) {
</form>
<style>
.bionic p, .bionic strong {
font-size: <?=$fontSize?>px !important;
line-height: <?=$lineHeight?> !important;
word-spacing: <?=$wordSpacing?>pt !important;
.bionic p span, .bionic .text {
font-size: <?=$fontSize?>px;
line-height: <?=$lineHeight?>;
word-spacing: <?=$wordSpacing?>pt;
}
</style>
@ -173,6 +188,18 @@ $output = array_map(function($word) {
</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">

View File

@ -57,11 +57,11 @@ pre {
color: #aaaaaa;
}
.bionic p strong {
color: #d3d3d3;
}
.intro strong,
.intro span {
display: block;
}
.bionic .ground span {
color: #aaa;
}

View File

@ -190,11 +190,10 @@ footer p {
color: #7e7e7e;
padding: 20px;
}
.bionic p strong {
.bionic p span {
margin-bottom: 20px;
font-size: 18px;
/* color: #5e5e5e; */
color: #181818;
/* color: #181818; */
}
.bionic div {
margin-top: 20px;
@ -219,6 +218,32 @@ footer p {
border-radius: 1rem;
}
.settings summary {
cursor: pointer;
}
.bionic .bold span {
font-weight: 900;
}
.bionic .space span {
display: inline-block;
border-spacing: 10pt;
}
.bionic .larger span {
font-size: larger;
font-weight: 900;
}
.bionic .ground span {
background-color: #181818;
padding: 2px;
color: #ccc;
}
.bionic .underline span {
border-bottom: 5px solid #181818;
}
.bionic .uppercase span {
text-transform: uppercase;
}
button:hover,
.button:hover,
[type="submit"]:hover,