From c80a7740094bf94547a3d87ea5331ec4041d533d Mon Sep 17 00:00:00 2001 From: InfiniteL8p Date: Tue, 14 Nov 2023 23:40:15 +0100 Subject: [PATCH] updated design --- server/public/css/index.css | 0 server/public/css/settings.css | 0 server/public/css/style.css | 303 ++++++++++++++++++++++++++++----- server/public/css/styleOld.css | 79 +++++++++ server/public/index.html | 92 ++++++++-- server/public/js/script.js | 51 +++++- server/public/js/stream.js | 3 +- server/public/recordings.html | 5 +- server/public/settings.html | 88 ++++++++-- 9 files changed, 540 insertions(+), 81 deletions(-) delete mode 100644 server/public/css/index.css delete mode 100644 server/public/css/settings.css create mode 100644 server/public/css/styleOld.css diff --git a/server/public/css/index.css b/server/public/css/index.css deleted file mode 100644 index e69de29..0000000 diff --git a/server/public/css/settings.css b/server/public/css/settings.css deleted file mode 100644 index e69de29..0000000 diff --git a/server/public/css/style.css b/server/public/css/style.css index 61030f3..35b1af5 100644 --- a/server/public/css/style.css +++ b/server/public/css/style.css @@ -1,79 +1,290 @@ -body { - font-family: 'Arial', sans-serif; +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); + +* { margin: 0; - padding: 0; - background-color: #f4f4f4; - color: #333; + box-sizing: border-box; + -webkit-user-select: none; + user-select: none; +} + +html { + font-size: 62.5%; +} + +:root { + --container-height: 90%; + --container-width: 90%; + --component-background: rgba(0, 0, 0, 0.45); +} + +body { + background: url("https://dynamicwallpaper.club/landing-vids/1.png"); + background-size: cover; + background-attachment: fixed; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + font-family: "Poppins", sans-serif; +} + +.container { + background: rgba(0, 0, 0, 0.2); + transition: 0.3s ease; + -webkit-backdrop-filter: blur(30px); + backdrop-filter: blur(30px); + border-radius: 15px; + width: var(--container-width); + height: var(--container-height); + position: relative; +} + +header { + display: flex; + justify-content: space-between; + width: 100%; + height: 30px; + position: relative; +} + +section.window--buttons { + position: absolute; + top: 15px; + left: 15px; +} + +section.window--buttons .window__close { + width: 1.5rem; + height: 1.5rem; + background: #f00; + display: inline-block; + border-radius: 50%; + transition: 0.3s ease; +} + +section.window--buttons .window__close:hover { + transform: scale(1.2); +} + +section.window--buttons .window__minimize { + margin-left: 5px; + width: 1.5rem; + height: 1.5rem; + background: #f57c00; + display: inline-block; + border-radius: 50%; + transition: 0.3s ease; +} + +section.window--buttons .window__minimize:hover { + transform: scale(1.2); +} + +section.window--buttons .window__maximize { + margin-left: 5px; + width: 1.5rem; + height: 1.5rem; + background: #4caf50; + display: inline-block; + border-radius: 50%; + transition: 0.3s ease; +} + +section.window--buttons .window__maximize:hover { + transform: scale(1.2); +} + +aside { + overflow: scroll; + height: 90%; + margin-top: 20px; + float: left; + width: 200px; + position: sticky; + top: 0; +} + +aside a { + display: block; + margin-top: 7px; + margin-left: 15px; + padding: 0.7rem 4rem; + font-family: "Poppins", sans-serif; + font-size: 1.5rem; + background: none; + width: 170px; + border-radius: 10px; + border: 0; + color: white; + transition: 0.2s ease; + cursor: pointer; + text-decoration: none; +} + +aside a:hover { + background: rgba(0, 0, 0, 0.55); + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); +} + +aside a.active { + background: rgba(0, 0, 0, 0.55); + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); +} + +aside .version { + position: absolute; + left: 15px; + display: grid; + bottom: 15px; } -.navbar { - background-color: #005f73; - overflow: hidden; - padding: 10px 0; +aside .version h1 { + color: #fff; + font-weight: 400; + margin-left: 10px; + font-size: 1.3rem; + place-items: center; } .navbar-nav { list-style: none; padding: 0; margin: 0; + text-align: center; +} + +.content { + color: white; + padding: 15px; + border-radius: 30px; + height: 90%; + margin-right: 20px; + overflow: scroll; +} + +.content .ideas { + display: flex; +} + +.content .ideas .idea { + background: var(--component-background); + width: 50%; + padding: 20px; + border-radius: 20px; + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + transition: 0.3s ease; +} + +.content .ideas .idea:nth-of-type(2) { + margin-left: 15px; +} + +.content .ideas .idea p { + color: gray; + font-size: 1.2rem; +} + +.content .ideas .idea:hover { + transform: scale(1.05); +} + +.content .feed { + margin-top: 20px; +} + +.content .feed h1:nth-of-type(1) { + font-size: 2.2rem; +} + +.content .feed .stream { + width: 100%; + background: var(--component-background); + padding: 1.3rem 0.7rem; + border-radius: 10px; + margin-top: 10px; display: flex; + align-items: center; justify-content: center; - flex-wrap: wrap; + transition: 0.4s ease; } -.nav-item { - padding: 10px 20px; +.content .feed .stream .updt-left { + display: flex; + align-items: center; } -.nav-item a { - text-decoration: none; - color: white; - transition: color 0.3s, background-color 0.3s; +.content .feed .stream .updt-left h1 { + font-size: 1.7rem; + margin-left: 10px; } -.nav-item a:hover { - background-color: #0a9396; - color: #e9d8a6; - border-radius: 5px; +.content .feed .stream .updt-left img { + width: 35px; } -.active { - color: black !important; +.content .trending { + margin-top: 20px; } -.main-content { - padding: 20px; - text-align: center; +.content .trending h1:nth-last-of-type(1) { + font-size: 2.2rem; } -.video-container { - max-width: 600px; - margin: auto; - border: 1px solid #ddd; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - padding: 10px; - background-color: white; +.content .trending .grid { + display: grid; + grid-template-rows: repeat(4, 25%); + grid-template-columns: 25% 25% 25% 25%; + margin-top: 10px; + gap: 5px; +} + +.content .trending .grid .grid__app { + background: var(--component-background); + padding: 13px; + display: inline-block; + display: flex; + height: fit-content; + border-radius: 10px; + justify-content: space-between; +} + +.content .trending .grid .grid__app h1 { + font-size: 1.7rem; +} + +.content .trending .grid .grid__app button { + background: dodgerblue; + color: #fff; + border: 0; + outline: 0; + border-radius: 30px; + width: 30%; + cursor: pointer; +} + +.content .trending .grid .grid__app button:hover { + background: #65b3f2; +} + +.content .trending .grid .grid__app button:active { + background: #0e6eb8; } #videoCanvas { - max-width: 100%; - height: 400px; - border: 1px solid #ddd; + width: 75%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } -/* Responsive Styling */ -@media only screen and (max-width: 600px) { - .navbar-nav { - flex-direction: column; - } - - .nav-item a { - margin-bottom: 5px; - /* Space out items in mobile view */ +@media (max-width: 768px) { + .content .trending .grid { + grid-template-columns: repeat(2, 50%); + grid-template-rows: repeat(4, 25%); } - .video-container { - width: 90%; + aside { + display: none; } } \ No newline at end of file diff --git a/server/public/css/styleOld.css b/server/public/css/styleOld.css new file mode 100644 index 0000000..61030f3 --- /dev/null +++ b/server/public/css/styleOld.css @@ -0,0 +1,79 @@ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; + color: #333; +} + +.navbar { + background-color: #005f73; + overflow: hidden; + padding: 10px 0; +} + +.navbar-nav { + list-style: none; + padding: 0; + margin: 0; + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.nav-item { + padding: 10px 20px; +} + +.nav-item a { + text-decoration: none; + color: white; + transition: color 0.3s, background-color 0.3s; +} + +.nav-item a:hover { + background-color: #0a9396; + color: #e9d8a6; + border-radius: 5px; +} + +.active { + color: black !important; +} + +.main-content { + padding: 20px; + text-align: center; +} + +.video-container { + max-width: 600px; + margin: auto; + border: 1px solid #ddd; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 10px; + background-color: white; +} + +#videoCanvas { + max-width: 100%; + height: 400px; + border: 1px solid #ddd; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +/* Responsive Styling */ +@media only screen and (max-width: 600px) { + .navbar-nav { + flex-direction: column; + } + + .nav-item a { + margin-bottom: 5px; + /* Space out items in mobile view */ + } + + .video-container { + width: 90%; + } +} \ No newline at end of file diff --git a/server/public/index.html b/server/public/index.html index 650e913..4a4428e 100644 --- a/server/public/index.html +++ b/server/public/index.html @@ -4,25 +4,89 @@ - Security Cam Webserver - - - + Security Cam Webserver - Home + + - -
-

Security Cam Webserver

- +
+
+
+
+ +
+ +
+
+
+ + + +
+
+
+

Updates

+

Check the GitHub repository

+

Suggest new features and report bugs!

+
+ +
+

GET STARTED

+

Check the documentation

+

Read the documentation to find out how things work!

+
+
+ +
+

Live Feed

+ +
+ +
+ +
+ +
+

More

+ +
+ +

Lorem ipsum

+ + + + + +

Lorem ipsum

+ + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/server/public/js/script.js b/server/public/js/script.js index c76d7d1..15b39b2 100644 --- a/server/public/js/script.js +++ b/server/public/js/script.js @@ -2,15 +2,60 @@ document.addEventListener('DOMContentLoaded', () => { const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { - const navLink = item.querySelector('.nav-link'); let currentHref = window.location.href; if (currentHref.endsWith('/')) { currentHref += 'index.html'; } - if (navLink.href === currentHref) { - navLink.classList.add('active'); + if (item.href === currentHref) { + item.classList.add('active'); } }); +}); + +const side_bar_btns = document.querySelectorAll("#sidebar-btn"); + +side_bar_btns.forEach((elem) => { + elem.addEventListener("click", () => { + for (let index = 0; index < side_bar_btns.length; index++) { + side_bar_btns[index].classList.remove("active"); + } + elem.classList.add("active"); + }); +}); + +let min = true; + +document.querySelector(".window__close").addEventListener("click", () => { + document.querySelector(".container").style.display = "none"; + + setTimeout(() => { + window.alert( + "Oh No! What did you do? Now you have to refresh to open the app again" + ); + }, 500); +}); + +document.querySelector(".window__maximize").addEventListener("click", () => { + if (min == false) { + min = true; + console.log(min); + document.querySelector(".container").style.width = "90%"; + document.querySelector(".container").style.height = "90%"; + } else { + min = false; + document.querySelector(".container").style.width = "100%"; + document.querySelector(".container").style.height = "100%"; + } +}); + +document.querySelector(".window__minimize").addEventListener("click", () => { + document.querySelector(".container").style.transform = "scale(0)"; + + setTimeout(() => { + window.alert( + "The app is minimized but cannot be opened again because the virtual macos crashed!" + ); + }, 500); }); \ No newline at end of file diff --git a/server/public/js/stream.js b/server/public/js/stream.js index 3b802aa..77c9963 100644 --- a/server/public/js/stream.js +++ b/server/public/js/stream.js @@ -45,8 +45,9 @@ ws.onclose = function () { ws.onerror = function (error) { context.clearRect(0, 0, canvas.width, canvas.height); context.font = '40px Arial'; + context.fillStyle = 'white'; context.textAlign = 'center'; - context.fillText('WebSocket connection error', canvas.width / 2, canvas.height / 2); + context.fillText('WebSocket connection error. Server is probably not online.', canvas.width / 2, canvas.height / 2); } function showMessageOnCanvas(message) { diff --git a/server/public/recordings.html b/server/public/recordings.html index 81e69ea..c0cf5d8 100644 --- a/server/public/recordings.html +++ b/server/public/recordings.html @@ -4,8 +4,8 @@ - Security Cam Webserver - + Security Cam Webserver - Recordings + @@ -16,7 +16,6 @@
  • Home
  • Recordings
  • Settings
    • - diff --git a/server/public/settings.html b/server/public/settings.html index 39a4094..6d9667f 100644 --- a/server/public/settings.html +++ b/server/public/settings.html @@ -4,24 +4,84 @@ - Security Cam Webserver - - - + Security Cam Webserver - Settings + + - - -
    -

    Settings

    +
    +
    +
    +
    + +
    + +
    +
    +
    + + + +
    +
    +
    +

    Updates

    +

    Check the GitHub repository

    +

    Suggest new features and report bugs!

    +
    + +
    +

    GET STARTED

    +

    Check the documentation

    +

    Read the documentation to find out how things work!

    +
    +
    + +
    +

    Settings

    +

    To be added

    +
    + +
    +

    More

    + +
    + +

    Lorem ipsum

    + + +     + + +

    Lorem ipsum

    + + +     +
    +
    +
    +
    + + + + \ No newline at end of file