style for bionic
This commit is contained in:
parent
156e70a9da
commit
9ed1047b9a
|
@ -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">
|
||||
|
|
|
@ -57,11 +57,11 @@ pre {
|
|||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.bionic p strong {
|
||||
color: #d3d3d3;
|
||||
}
|
||||
|
||||
.intro strong,
|
||||
.intro span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bionic .ground span {
|
||||
color: #aaa;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue