diff --git "a/codigo/assets/css/coment\303\241rio.css" "b/codigo/assets/css/coment\303\241rio.css" index 6c37def..696c3ab 100644 --- "a/codigo/assets/css/coment\303\241rio.css" +++ "b/codigo/assets/css/coment\303\241rio.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; + } +} diff --git a/codigo/assets/css/menu.css b/codigo/assets/css/menu.css new file mode 100644 index 0000000..e69de29 diff --git a/codigo/assets/images/moon-stars.svg b/codigo/assets/images/moon-stars.svg new file mode 100644 index 0000000..55956f7 --- /dev/null +++ b/codigo/assets/images/moon-stars.svg @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/codigo/assets/images/sun.svg b/codigo/assets/images/sun.svg new file mode 100644 index 0000000..c8815ac --- /dev/null +++ b/codigo/assets/images/sun.svg @@ -0,0 +1,11 @@ + diff --git a/codigo/assets/js/comentario.js b/codigo/assets/js/comentario.js index d2db945..521b75f 100644 --- a/codigo/assets/js/comentario.js +++ b/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() { `; 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"; } -}); \ No newline at end of file +}); + +//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 = ` +
${comment.message}
+ + ${comment.date} +