0.8.3 Clock lol

css/app.css

@@ -16,12 +16,4 @@ body {
 
 ::-webkit-scrollbar {
     display: none;
-    /*width: 0.7em;*/
-    /*background-color: transparent;*/
-    /*margin-right: 0.5em;*/
-}
-
-/*::-webkit-scrollbar-thumb {*/
-/*    background-color: darkgrey;*/
-/*    border-radius: 1em;*/
-/*}*/
+}

css/clock.css

@@ -0,0 +1,12 @@
+.clock-div {
+    font: 3.0em Arial, sans-serif;
+    font-weight: bold;
+    padding-top: 30px;
+    margin: 0;
+    text-align: center;
+}
+
+.clock-text{
+    color: white;
+    text-shadow: 0 0 5px black;
+}

css/content.css

@@ -1,7 +1,7 @@
 .content {
-    padding: 100px 0 0 0;
+    padding: 120px 0 0 0;
     overflow-y: auto;
-    transition: margin 500ms, padding 500ms;
+    transition: margin 500ms, padding-right 500ms, padding-left 500ms;
 }
 
 .grid {

js/app.js

@@ -6,7 +6,7 @@ function initSettingsValues(fromfile = false) {
             chrome.storage.local.set({'version': json['version']}, () => {})
         })
     }
-    chrome.storage.local.get(['cols', 'rows', 'new-tab', 'show-quick', 'show-header'], function (res) {
+    chrome.storage.local.get(['cols', 'rows', 'new-tab', 'show-quick', 'show-header', 'show-clock'], function (res) {
         document.getElementById('cols').innerText = res['cols']
         document.getElementById('range-cols').setAttribute('value', res['cols'])
         document.getElementById('rows').innerText = res['rows']
@@ -26,6 +26,11 @@ function initSettingsValues(fromfile = false) {
         } else {
             document.getElementById('checkbox-show-header').removeAttribute('checked')
         }
+        if (res['show-clock']) {
+            document.getElementById('checkbox-show-clock').setAttribute('checked', '')
+        } else {
+            document.getElementById('checkbox-show-clock').removeAttribute('checked')
+        }
         makeGrid(parseInt(res['cols']), parseInt(res['rows']), fromfile)
     })
     chrome.storage.local.get(['background'], function (res) {
@@ -41,6 +46,7 @@ function initSettingsValues(fromfile = false) {
 document.addEventListener("DOMContentLoaded", () => {
     initSettingsValues()
     beautyfyView()
+    initClock()
 })
 
 window.addEventListener('resize', () => {

js/clock.js

@@ -0,0 +1,45 @@
+function setTime(){
+    let now = new Date()
+    $('#clock').text(now.toLocaleTimeString("ru-RU", {hour: '2-digit', minute:'2-digit'}))
+}
+
+
+function updateTime(){
+    setTime()
+    setTimeout(function () {
+        updateTime()
+    }, 500)
+}
+
+function initClock(){
+    chrome.storage.local.get(['show-clock'], function (res) {
+        if (res['show-clock']) {
+            $('.clock-div').css('display', 'block')
+            $('.content').css('padding-top', '35px')
+        } else {
+            $('.clock-div').css('display', 'none')
+            $('.content').css('padding-top', '120px')
+        }
+        updateTime()
+    })
+}
+
+
+$('#show-clock').on('click', (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    chrome.storage.local.get(['show-clock'], function (res) {
+        if (res['show-clock']) {
+            chrome.storage.local.set({['show-clock']: false}, () => {})
+            document.getElementById('checkbox-show-clock').removeAttribute('checked')
+            $('.clock-div').css('display', 'none')
+            $('.content').css('padding-top', '120px')
+
+        } else {
+            chrome.storage.local.set({['show-clock']: true}, () => {})
+            document.getElementById('checkbox-show-clock').setAttribute('checked', '')
+            $('.clock-div').css('display', 'block')
+            $('.content').css('padding-top', '35px')
+        }
+    })
+})

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Pulchra bookmarks",
   "description": "Pulchra bookmarks extension",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "manifest_version": 3,
   "minimum_chrome_version": "96",
   "chrome_url_overrides": {

newtab.html

@@ -17,6 +17,7 @@
     <link rel="stylesheet" href="css/header.css">
     <link rel="stylesheet" href="css/right-click-menu.css">
     <link rel="stylesheet" href="css/edit-menu.css">
+    <link rel="stylesheet" href="css/clock.css">
 </head>
 
 <body>
@@ -30,6 +31,9 @@
             </div>
         </div>
     </div>
+    <div class="clock-div">
+        <div class="clock-text" id="clock"></div>
+    </div>
     <div class="content">
         <div class="grid" id="grid">
         </div>
@@ -121,6 +125,17 @@
                 </label>
             </div>
         </div>
+        <div class="row rowhover" id="show-clock">
+            <div class="item-left">
+                <span>Show clock</span>
+            </div>
+            <div class="item-right">
+                <label class="switch">
+                    <input type="checkbox" id="checkbox-show-clock">
+                    <span class="slider round"></span>
+                </label>
+            </div>
+        </div>
         <div class="row rowgroup">
             <div class="rowgroup-title">
                 <span>Behavior</span>
@@ -276,6 +291,7 @@
 <script type="text/javascript" src="js/settings.js"></script>
 <script type="text/javascript" src="js/saveopen.js"></script>
 <script type="text/javascript" src="js/header.js"></script>
+<script type="text/javascript" src="js/clock.js"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
 </html>