diff --git a/.vscode/settings.json b/.vscode/settings.json index f260a12..a7eece0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ { - "liveServer.settings.port": 5514, + "liveServer.settings.port": 5517, "continue.telemetryEnabled": false } \ No newline at end of file diff --git a/index.html b/index.html index e5f9625..bb8b657 100644 --- a/index.html +++ b/index.html @@ -66,7 +66,9 @@ - +
+
+
@@ -129,6 +131,7 @@ + diff --git a/style.css b/style.css index 998bfdd..f5092dd 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ } html { - background-color: rgb(231, 230, 221); + background-color: #e7e6dd; font-family: "Autour One", serif; /* font-family: "Playwrite AU SA", serif; */ height: 100%; } @@ -22,6 +22,76 @@ body { nav { font-family: "Autour One", serif; } +.update{ + height: 50px; + width:100%; + /* background-color: #deb0f0; */ + text-align: center; + margin: auto; + overflow: hidden; + background-color: #fef6e4; + padding: 10px 0; + /* border-top: 2px solid #94d601;; */ + /* border-bottom: 2px solid #94d601;; */ + position: relative; +} +#message{ + display: inline-block; + white-space: nowrap; + padding-left: 100%; /* Start off-screen */ + animation: scroll-left 25s linear infinite; + font-size: 1.2rem; + color: #333; +} + +@keyframes scroll-left { + 0% { + transform: translateX(0%); + } + 100% { + transform: translateX(-100%); + } +} + + +.update-carousel { + width: 100%; + overflow: hidden; + background-color: #fef6e4; + border-top: 2px solid #ffd100; + border-bottom: 2px solid #ffd100; + padding: 10px; + position: relative; + height: 40px; + display: flex; + align-items: center; + font-size: 1.1rem; + color: #333; +} + +.message-text { + white-space: nowrap; + position: absolute; + left: 100%; + animation: slide-left 8s linear infinite; +} + +@keyframes slide-left { + 0% { + left: 100%; + } + 10% { + left: 50%; + transform: translateX(-50%); + } + 90% { + left: 50%; + transform: translateX(-50%); + } + 100% { + left: -100%; + } +} header { position: relative; diff --git a/update.js b/update.js new file mode 100644 index 0000000..7ff6a0f --- /dev/null +++ b/update.js @@ -0,0 +1,24 @@ +document.addEventListener('DOMContentLoaded', () => { + const message = document.getElementById('message'); + + + fetch('update.json') + .then(response => response.json()) + .then(data => { + + const update = data[0]; + + message.textContent = update.message; + + const updateElement = document.querySelector('.update'); // safer than getElementsByClassName +if (update.message === "") { + updateElement.style.display = "none"; +} + + }) + .catch(error => { + console.error('Error fetching data:', error); + businessCard.innerHTML = '

Error loading data. Check the console.

'; // Display an error message + }); +}); + diff --git a/update.json b/update.json new file mode 100644 index 0000000..88b9594 --- /dev/null +++ b/update.json @@ -0,0 +1,5 @@ +[ +{ + "message": "We will be closed the week of 8/1 - 8/8" +} +] \ No newline at end of file