License.txt

+MIT License
+
+Copyright 2023 Ahmad Naveed Nassruddin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file

css/style.css

+
+:root {
+  --container-height: 100vh;
+  --container-width: 100%;
+  /* Header part*/
+  --header-height: 10%;
+  --header-width: 95%;
+  --button-height: 8vmin;
+  --button-width: 8vmin;
+  /* Main part */
+  --main-height: 70%;
+  --main-width: 95%;
+  --numberline-height: 95%;
+  --numberline-width: 100%;
+  --box-height: 15%;
+  --box-width: 100%;
+  --svg-height: 100%;
+  --svg-width: 100%;
+
+  /* colors used */
+  --theme-color1: #bfe7da;
+  --theme-color2: #f0ede5;
+  --background-color: #e8ecf2;
+  --font-color-default: #000000;
+  --font-color-green: #4ab391;
+  --font-color-red: #e46f5f;
+  --start-button-color:#bfe7da;
+  --read-button-color:#e8ecf2;
+  --line-stroke-color:#000000;
+  --filter-hover-color:#ffffff73;
+  --filter-freez-color:#ffffff00;
+  --box1-color: #c0ccf1;
+
+  /* box1 primary color #c0ccf1  secondery color #c0ccf177  filter color after click #f89f5677 */
+  /* box2 primary color #f89f56  secondery color #f89f5677  filter color after click #75e99c77*/
+  /* box3 primary color #75e99c  secondery color #75e99c77  filter color after click #c399e677 */
+  /* box4 primary color #c399e6  secondery color #c399e677  */
+  
+  /* box shawdows */
+  --box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.8),
+    5px 5px 10px rgba(0, 0, 0, 0.25);
+
+
+    /* font sizes */
+  --font-line1: 2vmin;
+  --font-line2: 1.5vmin;
+  --font-universal: 1vmin;
+  --font-weight: 500;
+  --font-weight-universal: 250;
+  /* rulers lines (SVG line and text sizes) */
+  --small-lines-size: 0.1vmin;
+  --mid-lines-size: 0.2vmin;
+  --big-lines-size: 0.4vmin;
+  --texts-size: 1.5vmin;
+}
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Alter Version Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Moderne Browser (Chrome/Firefox/Opera) */
+  cursor: pointer;
+}
+
+body {
+  font-family: "GrundschriftRegular";
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* colors  #bfe7da greenish  theme color     #e8ecf2 whitesh Background color  #f7f2ddalternative theme color  */
+.container {
+  height: var(--container-height);
+  width: var(--container-width);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--background-color);
+  user-select: none;
+  z-index: -3;
+}
+
+/* header part starts here */
+.header {
+  height: var(--header-height);
+  width: var(--header-width);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+}
+.header-left {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.header-mid{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-size: contain;
+
+}
+.header-right {
+  display: flex;
+  justify-content: flex-end;
+}
+button {
+  border: none;
+  cursor: pointer;
+  transition: all;
+  transition-duration: 250ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 23px;
+}
+.btn {
+  height: var(--button-height);
+  aspect-ratio: 1;
+  color: var(--font-color-default);
+  border-radius: 1em;
+  box-shadow:var(--box-shadow);
+}
+#start-btn {
+  background-color: var(--theme-color1);
+}
+#readbtn{
+  background-color: var(--read-button-color);
+}
+
+.black-line-big{
+  font-size: var(--font-line1);
+  font-weight: var(--font-weight);
+  color: var(--font-color-default);
+}
+.black-line-mid{
+  font-size: var(--font-line2);
+  font-weight: var(--font-weight);
+  color: var(--font-color-default);
+}
+.color-line-big{
+  font-size: var(--font-line1);
+  font-weight: var(--font-weight);
+  color: var(--font-color-green);
+}
+.color-line-big-red{
+  font-size: var(--font-line1);
+  font-weight: var(--font-weight);
+  color: var(--font-color-red);
+}
+/* Header rightside (reader button ) */
+.speaker {
+  width: 60%;
+}
+
+/* main area starts here */
+.main {
+  width: var(--main-width);
+  height: var(--main-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 0;
+}
+.numberlines {
+  height: var(--numberline-height);
+  width: var(--numberline-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+.box1,
+.box2,
+.box3,
+.box4 {
+  height: var(--box-height);
+  width: var(--box-width);
+  border-radius: 2em;
+  box-shadow:var(--box-shadow);
+}
+.box1 {
+  background-color: var(--box1-color);
+}
+.svgs {
+  height: var(--svg-height);
+  width: var(--svg-width);
+}
+.small-lines {
+  stroke: var(--line-stroke-color);
+  stroke-width: var(--small-lines-size);
+}
+.big-lines {
+  stroke: var(--line-stroke-color);
+  stroke-width: var(--big-lines-size);
+}
+.mid-lines {
+  stroke: var(--line-stroke-color);
+  stroke-width: var(--mid-lines-size);
+}
+.text {
+  fill: var(--line-stroke-color);
+  font-size: var(--texts-size);
+ 
+}
+.wronganswer{
+  fill: var(--font-color-red);
+  font-weight: bold;
+}
+.filter {
+  height: 7%;
+  width: 8.1%;
+  position: absolute;
+  border-radius: 0.7em;
+}
+.filter:hover {
+  background:var(--filter-hover-color);
+}
+.filter2 {
+  height: 10%;
+  width: 3%;
+  position: absolute
+}
+.freez {
+  width: var(--main-width);
+  height: var(--main-height);
+  position: absolute;
+  background-color: var(--filter-freez-color);
+}
+.animated-div{
+  border-radius: 2em;
+  z-index: -1;
+}
+
+.headerText{
+  font-size:28px;
+}
+
+.headerText2{
+  font-size:22px;
+}
+
+
+/* when hover on a button change color only for non touch screens */
+@media (hover: hover) {
+  .btn:hover {
+    background-color: var(--theme-color1);
+    box-shadow: -1px -1px 5px rgba(255, 255, 255, 0.6),
+      1px 1px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 1),
+      inset 2px 2px 4px rgba(0, 0, 0, 0.3);
+  }
+}

index.html

+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="keywords" content="HTML, CSS, JavaScript" />
+    <meta name="author" content="Ahmad Naveed Nassruddin" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="./css/style.css" />
+
+    <script src="https://code.jquery.com/jquery-3.6.0.js" defer></script>
+    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" defer></script>
+    <script
+      src="./js/jquery-ui-touch-punch-master/jquery.ui.touch-punch.min.js"
+      defer
+    ></script>
+    <script
+      src="./js/jquery-ui-touch-punch-master/jquery.ui.touch-punch.js"
+      defer
+    ></script>
+    <script src="./js/app.js" defer></script>
+
+    <title>Zahlenstrahl</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <div class="header-left">
+          <button class="btn" id="start-btn" onclick="start()">Start</button>
+        </div>
+        <div class="header-mid" id="shownumber">
+          <p class="firstLine" id="first-line"></p>
+          <p class="secondLine" id="second-line"></p>
+          <p class="thirdLine" id="third-line"></p>
+        </div>
+        <div class="header-right">
+          <button
+            class="btn"
+            id="readbtn"
+            onclick="read_text()"
+            title="Zahl lesen"
+          >
+            <img class="speaker" src="./imgs/speak-3-48.png" alt="speaker" />
+          </button>
+        </div>
+      </div>
+      <div class="main" id="main">
+        <div class="numberlines" id="number-lines">
+          <div class="box1" id="box-1">
+            <svg class="svgs" id="svg-1"></svg>
+          </div>
+          <div class="box2" id="box-2">
+            <svg class="svgs" id="svg-2"></svg>
+          </div>
+          <div class="box3" id="box-3">
+            <svg class="svgs" id="svg-3"></svg>
+          </div>
+          <div class="box4" id="box-4">
+            <svg class="svgs" id="svg-4"></svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

js/jquery-ui-touch-punch-master/bower.json

+{
+  "name": "jqueryui-touch-punch",
+  "version": "0.2.3",
+  "main": "jquery.ui.touch-punch.min.js",
+  "ignore": [],
+  "dependencies": {
+    "jquery": ">=1.6",
+    "jquery-ui": ">=1.8"
+  }
+}

js/jquery-ui-touch-punch-master/jquery.ui.touch-punch.js

+/*!
+ * jQuery UI Touch Punch 0.2.3
+ *
+ * Copyright 2011–2014, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  jquery.ui.mouse.js
+ */
+(function ($) {
+
+  // Detect touch support
+  $.support.touch = 'ontouchend' in document;
+
+  // Ignore browsers without touch support
+  if (!$.support.touch) {
+    return;
+  }
+
+  var mouseProto = $.ui.mouse.prototype,
+      _mouseInit = mouseProto._mouseInit,
+      _mouseDestroy = mouseProto._mouseDestroy,
+      touchHandled;
+
+  /**
+   * Simulate a mouse event based on a corresponding touch event
+   * @param {Object} event A touch event
+   * @param {String} simulatedType The corresponding mouse event
+   */
+  function simulateMouseEvent (event, simulatedType) {
+
+    // Ignore multi-touch events
+    if (event.originalEvent.touches.length > 1) {
+      return;
+    }
+
+    event.preventDefault();
+
+    var touch = event.originalEvent.changedTouches[0],
+        simulatedEvent = document.createEvent('MouseEvents');
+    
+    // Initialize the simulated mouse event using the touch event's coordinates
+    simulatedEvent.initMouseEvent(
+      simulatedType,    // type
+      true,             // bubbles                    
+      true,             // cancelable                 
+      window,           // view                       
+      1,                // detail                     
+      touch.screenX,    // screenX                    
+      touch.screenY,    // screenY                    
+      touch.clientX,    // clientX                    
+      touch.clientY,    // clientY                    
+      false,            // ctrlKey                    
+      false,            // altKey                     
+      false,            // shiftKey                   
+      false,            // metaKey                    
+      0,                // button                     
+      null              // relatedTarget              
+    );
+
+    // Dispatch the simulated event to the target element
+    event.target.dispatchEvent(simulatedEvent);
+  }
+
+  /**
+   * Handle the jQuery UI widget's touchstart events
+   * @param {Object} event The widget element's touchstart event
+   */
+  mouseProto._touchStart = function (event) {
+
+    var self = this;
+
+    // Ignore the event if another widget is already being handled
+    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
+      return;
+    }
+
+    // Set the flag to prevent other widgets from inheriting the touch event
+    touchHandled = true;
+
+    // Track movement to determine if interaction was a click
+    self._touchMoved = false;
+
+    // Simulate the mouseover event
+    simulateMouseEvent(event, 'mouseover');
+
+    // Simulate the mousemove event
+    simulateMouseEvent(event, 'mousemove');
+
+    // Simulate the mousedown event
+    simulateMouseEvent(event, 'mousedown');
+  };
+
+  /**
+   * Handle the jQuery UI widget's touchmove events
+   * @param {Object} event The document's touchmove event
+   */
+  mouseProto._touchMove = function (event) {
+
+    // Ignore event if not handled
+    if (!touchHandled) {
+      return;
+    }
+
+    // Interaction was not a click
+    this._touchMoved = true;
+
+    // Simulate the mousemove event
+    simulateMouseEvent(event, 'mousemove');
+  };
+
+  /**
+   * Handle the jQuery UI widget's touchend events
+   * @param {Object} event The document's touchend event
+   */
+  mouseProto._touchEnd = function (event) {
+
+    // Ignore event if not handled
+    if (!touchHandled) {
+      return;
+    }
+
+    // Simulate the mouseup event
+    simulateMouseEvent(event, 'mouseup');
+
+    // Simulate the mouseout event
+    simulateMouseEvent(event, 'mouseout');
+
+    // If the touch interaction did not move, it should trigger a click
+    if (!this._touchMoved) {
+
+      // Simulate the click event
+      simulateMouseEvent(event, 'click');
+    }
+
+    // Unset the flag to allow other widgets to inherit the touch event
+    touchHandled = false;
+  };
+
+  /**
+   * A duck punch of the $.ui.mouse _mouseInit method to support touch events.
+   * This method extends the widget with bound touch event handlers that
+   * translate touch events to mouse events and pass them to the widget's
+   * original mouse event handling methods.
+   */
+  mouseProto._mouseInit = function () {
+    
+    var self = this;
+
+    // Delegate the touch handlers to the widget's element
+    self.element.bind({
+      touchstart: $.proxy(self, '_touchStart'),
+      touchmove: $.proxy(self, '_touchMove'),
+      touchend: $.proxy(self, '_touchEnd')
+    });
+
+    // Call the original $.ui.mouse init method
+    _mouseInit.call(self);
+  };
+
+  /**
+   * Remove the touch event handlers
+   */
+  mouseProto._mouseDestroy = function () {
+    
+    var self = this;
+
+    // Delegate the touch handlers to the widget's element
+    self.element.unbind({
+      touchstart: $.proxy(self, '_touchStart'),
+      touchmove: $.proxy(self, '_touchMove'),
+      touchend: $.proxy(self, '_touchEnd')
+    });
+
+    // Call the original $.ui.mouse destroy method
+    _mouseDestroy.call(self);
+  };
+
+})(jQuery);
\ No newline at end of file

js/jquery-ui-touch-punch-master/jquery.ui.touch-punch.min.js

+/*!
+ * jQuery UI Touch Punch 0.2.3
+ *
+ * Copyright 2011–2014, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  jquery.ui.mouse.js
+ */
+!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
\ No newline at end of file

manifest.json

+{
+  "display": "standalone",
+  "orientation": "portrait"
+}