style for bionic

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 "<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 {
+                    .bionic p span, .bionic .text {
-                        font-size: <?=$fontSize?>px !important;
+                        font-size: <?=$fontSize?>px;
-                        line-height: <?=$lineHeight?> !important;
+                        line-height: <?=$lineHeight?>;
-                        word-spacing: <?=$wordSpacing?>pt !important;
+                        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">

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;
+}

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,