From b663f1ce830efd00bad607d152919f99b0c2fcde Mon Sep 17 00:00:00 2001
From: Ghighi Eftimie <ghyyy@ymail.com>
Date: Sun, 16 Oct 2022 16:22:08 +0200
Subject: [PATCH] added font size fader in reader's settings popup #487

---
 cps/templates/read.html | 47 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)
diff --git a/cps/templates/read.html b/cps/templates/read.html
index e5311998..f417e6c1 100644
--- a/cps/templates/read.html
+++ b/cps/templates/read.html
@@ -13,6 +13,38 @@
         <link rel="stylesheet" href="{{ url_for('static', filename='css/libs/normalize.css') }}">
         <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
         <link rel="stylesheet" href="{{ url_for('static', filename='css/popup.css') }}">
+
+        <style>
+            .fontSizeWrapper {
+                position: relative;
+            }
+            .slider {
+                position: absolute;
+                top: 50%;
+                transform: translate(0,-50%);
+                width: 90%;
+                height: 60px;
+                background: transparent;
+                border-radius: 20px;
+                display: flex;
+                align-items: center;
+                box-shadow: 0px 15px 40px #7E6D5766;
+            }
+            .slider label {
+                font-size: 20px;
+                font-weight: 400;
+                font-family: Open Sans;
+                padding-right: 10px;
+                color: white;
+            }
+            .slider input[type="range"] {
+                width: 80%;
+                height: 5px;
+                background: black;
+                border: none;
+                outline: none;
+            }
+        </style>
     </head>
     <body>
       <div id="sidebar">
@@ -84,6 +116,12 @@
                     <input type="checkbox" id="sidebarReflow" name="sidebarReflow">{{_('Reflow text when sidebars are open.')}}
                   </p>
               </div>
+              <div class="fontSizeWrapper">
+                <div class="slider">
+                    <label for="fader">{{ _('Font Sizes') }}</label>
+                    <input type="range" min="75" max="200" value="100" id="fontSizeFader" step="25">
+                </div>
+              </div>
               <div class="closer icon-cancel-circled"></div>
           </div>
       </div>
@@ -128,7 +166,14 @@
             else if (id == "blackTheme") {
               document.getElementById("main").style.backgroundColor = "black";
             }
-          }
+
+        }
+
+        // font size settings logic
+        let fontSizeFader = document.getElementById('fontSizeFader');
+        fontSizeFader.addEventListener ("change", function () {
+            reader.rendition.themes.fontSize(`${this.value}%`)
+        });
       </script>
       <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
       <script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>
