5 files changed, 132 insertions, 5 deletions

diff --git a/assets/Fullscreen.svg b/assets/Fullscreen.svg
new file mode 100755
index 0000000..0de34f0
--- /dev/null
+++ b/assets/Fullscreen.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect id="Fullscreen" x="0" y="0" width="200" height="200" style="fill:none;"/>
+    <g id="Fullscreen1" serif:id="Fullscreen">
+        <g transform="matrix(0.844444,0,0,0.844444,15.5556,15.5556)">
+            <path d="M130,22.632C123.028,22.632 117.368,16.972 117.368,10C117.368,3.028 123.028,-2.632 130,-2.632L170.163,-2.632C178.774,-2.632 187.033,0.789 193.122,6.878C199.211,12.967 202.632,21.226 202.632,29.837L202.632,70C202.632,76.972 196.972,82.632 190,82.632C183.028,82.632 177.368,76.972 177.368,70L177.368,29.837C177.368,27.926 176.609,26.093 175.258,24.742C173.907,23.391 172.074,22.632 170.163,22.632L130,22.632Z"/>
+        </g>
+        <g transform="matrix(0.853933,0,0,0.853933,13.7528,17.1685)">
+            <path d="M71.333,173.509C78.227,173.509 83.825,179.106 83.825,186C83.825,192.894 78.227,198.491 71.333,198.491L31.616,198.491C23.101,198.491 14.934,195.108 8.913,189.087C2.892,183.066 -0.491,174.899 -0.491,166.384L-0.491,126.667C-0.491,119.773 5.106,114.175 12,114.175C18.894,114.175 24.491,119.773 24.491,126.667L24.491,166.384C24.491,168.273 25.242,170.086 26.578,171.422C27.914,172.758 29.727,173.509 31.616,173.509L71.333,173.509Z"/>
+        </g>
+        <g transform="matrix(0.853933,0,0,0.853933,13.7528,17.1685)">
+            <path d="M177.509,126.667C177.509,119.773 183.106,114.175 190,114.175C196.894,114.175 202.491,119.773 202.491,126.667L202.491,166.384C202.491,174.899 199.108,183.066 193.087,189.087C187.066,195.108 178.899,198.491 170.384,198.491L130.667,198.491C123.773,198.491 118.175,192.894 118.175,186C118.175,179.106 123.773,173.509 130.667,173.509L170.384,173.509C172.273,173.509 174.086,172.758 175.422,171.422C176.758,170.086 177.509,168.273 177.509,166.384L177.509,126.667Z"/>
+        </g>
+        <g transform="matrix(0.853933,0,0,0.853933,13.7528,17.1685)">
+            <path d="M24.491,67.333C24.491,74.227 18.894,79.825 12,79.825C5.106,79.825 -0.491,74.227 -0.491,67.333L-0.491,27.616C-0.491,19.101 2.892,10.934 8.913,4.913C14.934,-1.108 23.101,-4.491 31.616,-4.491L71.333,-4.491C78.227,-4.491 83.825,1.106 83.825,8C83.825,14.894 78.227,20.491 71.333,20.491L31.616,20.491C29.727,20.491 27.914,21.242 26.578,22.578C25.242,23.914 24.491,25.727 24.491,27.616L24.491,67.333Z"/>
+        </g>
+    </g>
+</svg>
diff --git a/assets/Smallscreen.svg b/assets/Smallscreen.svg
new file mode 100755
index 0000000..de417ed
--- /dev/null
+++ b/assets/Smallscreen.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-217,0)">
+        <g id="Smallscreen" transform="matrix(1,0,0,1,217,0)">
+            <rect x="0" y="0" width="200" height="200" style="fill:none;"/>
+            <g transform="matrix(-0.844444,0,0,-0.844444,285.778,83.1111)">
+                <path d="M130,22.632C123.028,22.632 117.368,16.972 117.368,10C117.368,3.028 123.028,-2.632 130,-2.632L170.163,-2.632C178.774,-2.632 187.033,0.789 193.122,6.878C199.211,12.967 202.632,21.226 202.632,29.837L202.632,70C202.632,76.972 196.972,82.632 190,82.632C183.028,82.632 177.368,76.972 177.368,70L177.368,29.837C177.368,27.926 176.609,26.093 175.258,24.742C173.907,23.391 172.074,22.632 170.163,22.632L130,22.632Z"/>
+            </g>
+            <g transform="matrix(-0.853933,0,0,-0.853933,84.9139,284.165)">
+                <path d="M71.333,173.509C78.227,173.509 83.825,179.106 83.825,186C83.825,192.894 78.227,198.491 71.333,198.491L31.616,198.491C23.101,198.491 14.934,195.108 8.913,189.087C2.892,183.066 -0.491,174.899 -0.491,166.384L-0.491,126.667C-0.491,119.773 5.106,114.175 12,114.175C18.894,114.175 24.491,119.773 24.491,126.667L24.491,166.384C24.491,168.273 25.242,170.086 26.578,171.422C27.914,172.758 29.727,173.509 31.616,173.509L71.333,173.509Z"/>
+            </g>
+            <g transform="matrix(-0.853933,0,0,-0.853933,287.581,284.165)">
+                <path d="M177.509,126.667C177.509,119.773 183.106,114.175 190,114.175C196.894,114.175 202.491,119.773 202.491,126.667L202.491,166.384C202.491,174.899 199.108,183.066 193.087,189.087C187.066,195.108 178.899,198.491 170.384,198.491L130.667,198.491C123.773,198.491 118.175,192.894 118.175,186C118.175,179.106 123.773,173.509 130.667,173.509L170.384,173.509C172.273,173.509 174.086,172.758 175.422,171.422C176.758,170.086 177.509,168.273 177.509,166.384L177.509,126.667Z"/>
+            </g>
+            <g transform="matrix(-0.853933,0,0,-0.853933,84.9139,81.4981)">
+                <path d="M24.491,67.333C24.491,74.227 18.894,79.825 12,79.825C5.106,79.825 -0.491,74.227 -0.491,67.333L-0.491,27.616C-0.491,19.101 2.892,10.934 8.913,4.913C14.934,-1.108 23.101,-4.491 31.616,-4.491L71.333,-4.491C78.227,-4.491 83.825,1.106 83.825,8C83.825,14.894 78.227,20.491 71.333,20.491L31.616,20.491C29.727,20.491 27.914,21.242 26.578,22.578C25.242,23.914 24.491,25.727 24.491,27.616L24.491,67.333Z"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/assets/css/main.css b/assets/css/main.css
index 97d1f73..a7d2bf8 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -17,6 +17,35 @@ footer {
     background: #00000055;

 }

 

+.fixed {

+    position: fixed;

+    top: 0;

+}

+

+#actions {

+    width: 100%;

+    padding: .5rem;

+}

+

+#actions button:first-of-type {

+    margin-right: 1rem;

+}

+

+#actions button {

+    background: transparent;

+    border: none;

+    width: fit-content;

+    padding: 0;

+}

+

+#actions button:hover {

+    color:aquamarine !important;

+}

+

+.aligned.right {

+    justify-content: flex-end;

+}

+

 .flex {

     display: flex;

 }

@@ -25,6 +54,11 @@ footer {
     flex-direction: row;

 }

 

+.centered {

+    align-items: center;

+    justify-content: center;

+}

+

 .flex.col {

     flex-direction: column;

 }

@@ -75,4 +109,27 @@ footer {
     text-transform: uppercase;

     font-weight: 600;

 }

-  
\ No newline at end of file
+

+.icon svg {

+    width: 1em;

+    height: 1em;

+    margin-right: .4em;

+}

+

+.hide {

+    display: none;

+}

+

+.icon:hover {

+    color: inherit !important;

+}

+

+html[data-theme="dark"] .icon,

+html[data-theme="dark"] #actions button {

+    color: white;

+}

+

+html[data-theme="light"] .icon,

+html[data-theme="light"] #actions button {

+    color: #24333e;

+}
\ No newline at end of file
diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js
new file mode 100644
index 0000000..c6094d0
--- /dev/null
+++ b/assets/js/darkmode.js
@@ -0,0 +1,11 @@
+// get with web apis #fullscren element and on click toggle fullscreen
+const darkmode = document.getElementById('darkmode');
+const html = document.querySelector('html');
+darkmode.addEventListener('click', () => {
+    if (html.dataset.theme === 'dark') {
+        html.dataset.theme = 'light';
+    } else {
+        html.dataset.theme = 'dark';
+    }
+});
+
diff --git a/assets/js/fullscreen.js b/assets/js/fullscreen.js
index e191854..e3cc342 100644
--- a/assets/js/fullscreen.js
+++ b/assets/js/fullscreen.js
@@ -1,15 +1,27 @@
-// get with web apis #fullscren element and on click toggle fullscreen
+// page
 const fullscreen = document.getElementById('fullscreen');
+const fullscreenIcon = document.getElementById('fullscreen-icon');
+const smallscreenIcon = document.getElementById('smallscreen-icon');
 const elem = document.documentElement;
-fullscreen.addEventListener('click', () => {
+
+// Functions
+
+function toggleFullscreen(event) {
+  // check if the event is a keydown event or a click event
+  if (event.type === 'keydown') {
+    // check if the key pressed is '/' key
+    if (event.key !== '/') return;
+  }
   if (document.fullscreenElement) {
     closeFullscreen();  
   } else {
     openFullscreen();
   }
-});
+}
 
 function openFullscreen() {
+  smallscreenIcon.classList.toggle('hide');
+  fullscreenIcon.classList.toggle('hide');
   if (elem.requestFullscreen) {
     elem.requestFullscreen();
   } else if (elem.webkitRequestFullscreen) { /* Safari */
@@ -20,6 +32,8 @@ function openFullscreen() {
 }
 
 function closeFullscreen() {
+  smallscreenIcon.classList.toggle('hide');
+  fullscreenIcon.classList.toggle('hide');
   if (document.exitFullscreen) {
     document.exitFullscreen();
   } else if (document.webkitExitFullscreen) { /* Safari */
@@ -27,4 +41,9 @@ function closeFullscreen() {
   } else if (document.msExitFullscreen) { /* IE11 */
     document.msExitFullscreen();
   }
-}
\ No newline at end of file
+}
+
+// Listeners
+
+fullscreen.addEventListener('click', toggleFullscreen);
+document.addEventListener('keydown', toggleFullscreen);
\ No newline at end of file