mudanças

codigo/assets/css/comentário.css

@@ -4,12 +4,26 @@
     box-sizing: border-box;
     font-family: "Inter", sans-serif;
 }
+
+:root {
+    --text-color: #C8C2C2;
+    --bg-color: #1E1D1C;
+    --switch-bg-url: url(./image/moon-stars.svg);
+}
+
+.light {
+    --text-color: black;
+    --bg-color: #F6F0E2;
+    --switch-bg-url: url(../image/sun.svg);
+}
+
 body {
     display: flex;
-    background-color: #F6F0E2;
+    background-color: var(--bg-color);
     min-height: 100vh;
 }
-/* Menu */ 
+
+/* Menu */
 nav h1 {
     color: white;
     font-size: xx-large;
@@ -19,19 +33,10 @@ nav.menu-lateral {
     width: 260px;
     height: 100%;
     background-color: #000000;
-    padding: 40px 0px 40px 0px;
+    padding: 40px 0px;
     position: fixed;
     display: block;
 }
-nav.recolher {
-    width: 100%;
-    padding-left: 10px;
-}
-nav.recolher > i {
-    color: white;
-    font-size: 24px;
-    cursor: pointer;
-}
 nav ul {
     list-style: none;
 }
@@ -57,7 +62,7 @@ li.item-menu a {
 .cadastro {
     text-align: center;
     background-color: #DBB3CA;
-    margin: 200px 12px 0 12px;
+    margin: 100px 12px 0 12px;
     width: 220px;
     height: 157px;
     padding: auto;
@@ -78,7 +83,43 @@ li.item-menu a {
     align-items: center;
     margin-top: 25px;
 }
-/* Comentário*/
+#switch {
+    position: relative;
+    width: 64px;
+    margin: 4px auto; 
+}
+#switch button {
+    width: 32px;
+    height: 32px;
+    background: white var(--switch-bg-url) no-repeat center;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 1;
+    transform: translateY(-50%);
+    animation: slide-back 0.2s;
+}
+.light #switch button {
+    animation: slide-in 0.2s forwards;
+}
+#switch button:hover {
+    outline: 8px solid rgba(255, 255, 255, 0.2);
+}
+#switch span {
+    display: block;
+    width: 64px;
+    height: 24px;
+    background: grey;
+    border: 1px solid white;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    border-radius: 9999px;
+}
+
+/* Comentário */
 footer {
     display: flex;
     flex-direction: column;
@@ -87,8 +128,9 @@ footer {
     margin: auto;
 }
 .comentario {
-    padding: 20px;
-    width: 500px;
+   padding: 20px;
+   width: 500px;
+   color: var(--text-color);
 }
 .comentario hr {
     width: 100%;
@@ -137,6 +179,7 @@ footer {
     color: #808080;
 }
 button#publish {
+    margin-top: 7px;
     display: flex;
     justify-content: space-around;
 }
@@ -177,48 +220,57 @@ button#publish {
     font-size: 0.8em;
     float: right;
 }
-.menu-toggle {
-    display: none;
-}
+
 /* Responsividade */
 @media(max-width: 800px) {
     body {
         flex-direction: column;
     }
-
     nav.menu-lateral {
+        position: absolute;
+        z-index: 1000;
         display: flex;
+        align-items: center;
+        flex-direction: column;
         width: 100%;
-        height: auto;
-        position: static;
-        position: absolute;
-        z-index: 1;
+        height: 100%;
     }
-
     .menu-toggle {
         display: block;
-        font-size: 2rem;
+        font-size: 30px;
         color: white;
         background-color: #000000;
-        border-radius: 25%;
+        border-radius: 50%;
         padding: 10px;
         margin: 15px;
         position: fixed;
         right: 1%;
+        bottom: 1%;
         cursor: pointer;
         z-index: 1001;
     }
-
-    .comentario {
-        width: 90%;
-    }
-
     .commentbox {
         flex-direction: column;
         align-items: center;
     }
-
     .commentbox > img {
         margin: 0 0 20px 0;
     }
 }
+
+@keyframes slide-in {
+    from {
+        left: 0;
+    }
+    to {
+        left: 50%;
+    }
+}
+@keyframes slide-back {
+    from {
+        left: 50%;
+    }
+    to {
+        left: 0;
+    }
+}

codigo/assets/js/comentario.js

@@ -77,6 +77,9 @@ customElements.define('star-rater', StarRater);
 
 // Comentário
 
+const commentKey = 'comments';
+let commentsData = JSON.parse(localStorage.getItem(commentKey)) || [];
+
 const userId = {
     name: null,
     identity: null,
@@ -106,10 +109,10 @@ function addPost() {
     userId.name = userName.value;
     if (userId.name === "Anônimo") {
         userId.identity = false;
-        userId.image = "./image/user1.png";
+        userId.image = "../assets/images/user1.png";
     } else {
         userId.identity = true;
-        userId.image = "./image/user1.png";
+        userId.image = "../assets/images/user1.png";
     }
     userId.message = userComment.value;
     userId.date = new Date().toLocaleString();
@@ -129,8 +132,19 @@ function addPost() {
     </div>`;
     comments.innerHTML += published;
     userComment.value = "";
+
+    commentsData.push({
+        name: userId.name,
+        identity: userId.identity,
+        image: userId.image,
+        message: userId.message,
+        date: userId.date,
+        rating: userId.rating
+    });
+    localStorage.setItem(commentKey, JSON.stringify(commentsData));
 }
 
+
 publishBtn.addEventListener("click", addPost);
 
 function createStarsHTML(rating) {
@@ -142,14 +156,62 @@ function createStarsHTML(rating) {
     return starsHTML;
 }
 
+
+
 // Menu toggle
 const menuToggle = document.getElementById("menu-toggle");
 const menuLateral = document.querySelector(".menu-lateral");
 
 menuToggle.addEventListener("click", () => {
-    if (menuLateral.style.display === "block") {
+    if (menuLateral.style.display === "block" || menuLateral.style.display === "") {
         menuLateral.style.display = "none";
     } else {
         menuLateral.style.display = "block";
     }
-});
+});
+
+//Thema
+function toggleMode() {
+    const html = document.documentElement;
+    const currentTheme = localStorage.getItem("theme");
+
+    if (currentTheme === "light") {
+        html.classList.remove("light");
+        localStorage.setItem("theme", "dark");
+    } else {
+        html.classList.add("light");
+        localStorage.setItem("theme", "light");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const html = document.documentElement;
+    const theme = localStorage.getItem("theme");
+
+    if (theme === "light") {
+        html.classList.add("light");
+    } else {
+        html.classList.remove("light");
+    }
+
+    commentsData = JSON.parse(localStorage.getItem("commentKey")) || [];
+    renderComments();
+});
+function renderComments() {
+    comments.innerHTML = '';
+    commentsData.forEach(comment => {
+        let published = `
+        <div class="parents">
+            <img src="${comment.image}">
+            <div>
+                <h1>${comment.name}</h1>
+                <p>${comment.message}</p>
+                <div class="user-rating">
+                    ${createStarsHTML(comment.rating)}
+                </div>
+                <span class="date">${comment.date}</span>
+            </div>
+        </div>`;
+        comments.innerHTML += published;
+    });
+}

codigo/assets/js/menu.js

@@ -0,0 +1,23 @@
+function toggleMode() {
+    const html = document.documentElement;
+    const currentTheme = localStorage.getItem("theme");
+
+    if (currentTheme === "light") {
+        html.classList.remove("light");
+        localStorage.setItem("theme", "dark");
+    } else {
+        html.classList.add("light");
+        localStorage.setItem("theme", "light");
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const html = document.documentElement;
+    const theme = localStorage.getItem("theme");
+
+    if (theme === "light") {
+        html.classList.add("light");
+    } else {
+        html.classList.remove("light");
+    }
+});