Footer slide controller setup

guest-book.html

@@ -25,6 +25,17 @@
       <span id="now-date"></span>
       <span id="month"></span>
     </div>
+
+    <div class="footer-wrapper">
+      <footer id="site-footer" class="site-footer" aria-label="Footer">
+        <div class="site-footer__inner">
+          <div class="site-footer__title">Footer</div>
+          <button id="footer-lang-select" class="btn site-footer__lang" type="button">
+            Language
+          </button>
+        </div>
+      </footer>
+    </div>
 
       <script src="js/guest-book.js"></script>
 

js/guest-book.js

@@ -23,15 +23,26 @@ function outputDays() {
 }
 
 function outputDaysWeek() {
-  let daysWeeka = daysWeek;
+  // TODO: implement if needed
 }
 
-console.log(daysWeeka);
+// console.log(daysWeeka);
 
 let days = outputDays();
 
 calendar.innerHTML = days;
 
+// Footer: fully reveal on click of #footer-lang-select
+document.addEventListener('click', (e) => {
+  const target = e.target;
+  if (!(target instanceof Element)) return;
+  if (!target.closest('#footer-lang-select')) return;
+
+  const footer = document.getElementById('site-footer');
+  if (!footer) return;
+  footer.classList.add('is-open');
+});
+
 
 
 // console.log(daysWeek[new Date().getDay()]);

styles/general-styles.css

@@ -165,3 +165,34 @@ body,
   width: 20px;
   height: 20px;
 }
+
+/* Footer slide (simple, no build step) */
+.site-footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fff;
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  transform: translate3d(0, 100%, 0);
+  transition: transform 240ms ease;
+  will-change: transform;
+}
+
+.site-footer.is-open {
+  transform: translate3d(0, 0, 0);
+}
+
+.site-footer__inner {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.site-footer__title {
+  font-weight: 600;
+}