windows and book list app

css/style.css

@@ -10,23 +10,37 @@ body {
     background-size: cover;
     background-position-y: 10%;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 }
 
 div {
     position: absolute;
-    border: solid 4px var(--bg-color);
-    border-radius: 8px;
-    padding: 8px;
-    max-width: 100%;
-    max-height: 100%;
+    border-radius: 1vh;
+    padding: 1vh;
     background-color: var(--bg-color);
     color: var(--txt-color);
     text-align: center;
 }
 
+div .header {
+    height: 3vh;
+    background-color: var(--txt-color);
+    color: var(--bg-color);
+    margin: -1vh;
+    padding: 1vh;
+    border-top-left-radius: 1vh;
+    border-top-right-radius: 1vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: grab;
+}
+
 div img {
     max-height: 40vh;
-    border-radius: 8px;
+    border-radius: 1vh;
 }
 
 div a {
@@ -41,11 +55,67 @@ div a {
     top: 1vh;
     left: 1vh;
     right: 1vh;
-    height: 2%;
+    height: 3vh;
+    z-index: 1;
+}
+
+#dock-div {
+    display: flex;
+    flex-direction: column;
+    top: 16vh;
+    left: -9vh;
+    bottom: 16vh;
+    width: 8vh;
+    transition: all 1s;
+    z-index: 1;
+}
+
+#dock-div:hover {
+    left: 1vh;
+}
+
+#booklist-div {
+    max-width: 20%;
+}
+
+#current-book {
+    background-color: #dfdfdf;
+}
+
+#current-book-metadata {
+    line-height: 0;
+}
+
+#next-book-btn {
+    text-align: left;
+}
+
+#previous-book-btn {
+    text-align: right;
+}
+
+.draggable {
+    top: 20%;
+    left: 20%;
+}
+
+.hidden {
+    display: none;
+}
+
+.btn {
+    cursor: pointer;
+}
+
+.logo {
+    width: 3vh;
+}
+
+.dock-icon {
+    font-size: 6vh;
+    line-height: 0;
 }
 
-#welcome-div {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+.closed {
+    filter: grayscale(100%);
 }

index.html

@@ -3,6 +3,7 @@
     <meta charset="UTF-8">
     <title>HarupiOS</title>
     <link rel="stylesheet" href="css/style.css">
+    <script src="js/booklist.js"></script>
 </head>
 <body>
     <main>
@@ -11,10 +12,21 @@
 
             <p id="date-and-time"></p>
             
-            <p id="notif-btn">🔔</p>
+            <p id="notif-btn" class="btn">🔔</p>
+        </div>
+
+        <div id="dock-div">
+            <img src="images/me.png" alt="My profile picture" id="welcome-div-open" class="btn">
+            <p id="booklist-div-open" class="dock-icon btn closed">📚️</p>
         </div>
     
-        <div id="welcome-div">
+        <div id="welcome-div" class="draggable">
+            <span id="welcome-div-header" class="header">
+                <img src="images/me.png" alt="My profile picture" class="logo">
+                <p>Welcome window</p>
+                <p id="welcome-div-close" class="btn">⨯</p>
+            </span>
+
             <h1>Welcome to my personal OS</h1>
 
             <h2>Introduction</h2>
@@ -32,6 +44,28 @@
 
             <p>This website is <a href="https://github.com/Hvrnbi/harupios">open-source</a>.</p>
         </div>
+
+        <div id="booklist-div" class="draggable hidden">
+            <span id="booklist-div-header" class="header">
+                <p id="booklist-div-icon">📚️</p>
+                <p>Book list</p>
+                <p id="booklist-div-close" class="btn">⨯</p>
+            </span>
+
+            <h4>A list of the last books I've read</h4>
+
+            <section id="current-book">
+                <p id="next-book-btn" class="btn">←</p>
+                <h4 id="current-book-title"></h4>
+                <section id="current-book-metadata">
+                    <h6 id="current-book-author"></h6>
+                    <h6 id="current-book-end-date"></h6>
+                    <h6 id="current-book-publication-date"></h6>
+                </section>
+                <p id="current-book-comments"></p>
+                <p id="previous-book-btn" class="btn">→</p>
+            </section>
+        </div>
     </main>
     <script src="js/script.js"></script>
 </body>

js/booklist.js

@@ -0,0 +1,20 @@
+// Last books I read
+
+var books = [
+    {
+        title: "L'iliade",
+        author: "Homer",
+        end_date: "05/28/2026",
+        publication_date: "A long time ago",
+        comments: "It's been a long time since I didn't take so much time to read a book. I found the fight scenes a bit long and repetitive, and there is perhaps too much detail. Maybe I shouldn't have finish it if it wasn't such a classic, but overall I'm glad to know the homeric version of all this mythic characters.",
+        icon: "⚔️"
+    },
+    {
+        title: "L'iliadeux (test)",
+        author: "Homerdeux",
+        end_date: "05/28/2027",
+        publication_date: "A very long time ago",
+        comments: "It's been a long time since I didn't take so much time to read a book. I found the fight scenes a bit long and repetitive, and there is perhaps too much detail. Maybe I shouldn't have finish it if it wasn't such a classic, but overall I'm glad to know the homeric version of all this mythic characters.",
+        icon: "🥔"
+    }
+]

js/script.js

@@ -1,11 +1,118 @@
-// Functions //
+// Clock
+
+var dat = document.querySelector("#date-and-time");
+var tz = Intl.DateTimeFormat().resolvedOptions().timeZone
 
 function updateTime() {
-    var currentTime = new Date().toLocaleString(navigator.languages[0], {"timezone": Intl.DateTimeFormat().resolvedOptions().timeZone});
+    var currentTime = new Date().toLocaleString(navigator.languages[0], {"timezone": tz});
+
+    dat.textContent = currentTime;
+}
+
+setInterval(updateTime, 1000);
+
+// Drag elements (base code from https://www.geeksforgeeks.org/html/draggable-element-using-javascript/)
+
+const dragElements = document.querySelectorAll(".draggable"); 
+
+function onMouseDrag(event, element) {
+    let leftValue = parseInt(window.getComputedStyle(element).left);
+    let topValue = parseInt(window.getComputedStyle(element).top);
+
+    if (0 < (leftValue + event.movementX) &&  (leftValue + event.movementX) < (window.window.innerWidth - element.offsetWidth)) {
+        element.style.left = `${leftValue + event.movementX}px`;
+    }
+
+    if (0 < (topValue + event.movementY) && (topValue + event.movementY) < (window.window.innerHeight - element.offsetHeight)) {
+        element.style.top = `${topValue + event.movementY}px`;
+    }
+}
+
+dragElements.forEach((element) => {
+
+    if (document.getElementById(element.id + "-header"))
+
+    document.getElementById(element.id + "-header").addEventListener("mousedown", (e) => {
+        const onMove = (event) => onMouseDrag(event, element); 
+
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", () => {
+            document.removeEventListener("mousemove", onMove);
+        }, { once: true });
+    });
+
+    if (document.getElementById(element.id + "-open")) {
+        document.getElementById(element.id + "-open").addEventListener("click", () => {
+            openWindow(element);
+            document.getElementById(element.id + "-open").classList.toggle("closed");
+        })
+    }
+
+    if (document.getElementById(element.id + "-close")) {
+        document.getElementById(element.id + "-close").addEventListener("click", () => {
+            closeWindow(element);
+            document.getElementById(element.id + "-close").classList.add("closed");
+        })
+    }
+});
+
+// Open & close windows
+
+var dock = document.getElementById("dock-div");
+var topbar = document.getElementById("topbar-div");
+
+function closeWindow(elt) {
+    elt.classList.add("hidden");
+}
+
+var biggestIndex = 0;
+
+function openWindow(elt) {
+    elt.classList.toggle("hidden");
+    biggestIndex ++;
+    elt.style.zIndex = biggestIndex;
+    dock.style.zIndex = biggestIndex + 1;
+    topbar.style.zIndex = biggestIndex + 1;
+}
+
+// Book list app
+var booktitle = document.getElementById("current-book-title");
+var bookauthor = document.getElementById("current-book-author");
+var bookend = document.getElementById("current-book-end-date");
+var bookpubdate = document.getElementById("current-book-publication-date");
+var bookcomments = document.getElementById("current-book-comments");
+var booklisticon = document.getElementById("booklist-div-icon");
+
+var currentbookid = books.length - 1;
+
+function updateBook(id) {
+    booktitle.textContent = books[id].title;
+    bookauthor.textContent = "Written by " + books[id].author;
+    bookend.textContent = "I finished it on " + books[id].end_date;
+    bookpubdate.textContent = "It was published on " + books[id].publication_date;
+    bookcomments.textContent = books[id].comments;
+    booklisticon.textContent = books[id].icon;
+}
+
+function previousBook() {
+    if (currentbookid > 0) {
+        currentbookid --;
+        updateBook(currentbookid);
+    } else {
+        alert("It was the first book !");
+    }
+}
 
-    document.querySelector("#date-and-time").textContent = currentTime;
+function nextBook() {
+    if (currentbookid < books.length - 1) {
+        currentbookid ++;
+        updateBook(currentbookid);
+    } else {
+        alert("It is the last book !");
+    }
 }
 
-// Intervals //
+document.getElementById("next-book-btn").addEventListener("click", nextBook);
+document.getElementById("previous-book-btn").addEventListener("click", previousBook);
 
-setInterval(updateTime, 1000);
+updateBook(currentbookid);