diff --git a/bionic-reading.php b/bionic-reading.php index 59788f8..2310f46 100644 --- a/bionic-reading.php +++ b/bionic-reading.php @@ -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 "" . substr($word, 0, 1) . "" . substr($word, 1); + return "" . substr($word, 0, 1) . "" . substr($word, 1); } elseif ( $count == 4 ) { // If there are == 4 letters, two letters are bold. - return "" . substr($word, 0, 2) . "" . substr($word, 2); + return "" . substr($word, 0, 2) . "" . 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 "" . substr($word, 0, $c) . "" . substr($word, $c); + return "" . substr($word, 0, $c) . "" . substr($word, $c); } else { return $word; @@ -117,12 +132,12 @@ $output = array_map(function($word) {
".join($output, " ")."

"; + echo "

".join($output, " ")."

"; } else { ?>

- + did you know that your brain reads faster than your eye? - + my implementation according to german patent for fast text reading @@ -135,10 +150,10 @@ $output = array_map(function($word) { @@ -173,6 +188,18 @@ $output = array_map(function($word) { + + + + + diff --git a/components/css/dark.css b/components/css/dark.css index ed5d634..149ca89 100644 --- a/components/css/dark.css +++ b/components/css/dark.css @@ -57,11 +57,11 @@ pre { color: #aaaaaa; } -.bionic p strong { - color: #d3d3d3; -} - .intro strong, .intro span { display: block; } + +.bionic .ground span { + color: #aaa; +} diff --git a/components/css/style.css b/components/css/style.css index 640116d..0a20335 100644 --- a/components/css/style.css +++ b/components/css/style.css @@ -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,