diff --git a/src/assets/stylesheets/navbar.scss b/src/assets/stylesheets/navbar.scss index 105b29b..78f353b 100644 --- a/src/assets/stylesheets/navbar.scss +++ b/src/assets/stylesheets/navbar.scss @@ -8,7 +8,7 @@ $white: #fff; .navbar { width: 300px; - height: 100%; + height: auto; display: flex; flex-direction: column; align-items: center; @@ -25,6 +25,21 @@ $white: #fff; background-color: transparent; } +.navbar-top-container { + width: 100%; + height: 70px; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; +} + +.navbar-top-secret { + width: 40px; + height: 40px; + background-color: transparent; +} + .navbar-top-hamburger { width: 45px; height: 45px; diff --git a/src/assets/stylesheets/settings.scss b/src/assets/stylesheets/settings.scss index 764cdd4..202500e 100644 --- a/src/assets/stylesheets/settings.scss +++ b/src/assets/stylesheets/settings.scss @@ -49,4 +49,137 @@ $white: #fff; overflow: hidden; background-color: transparent; margin-bottom: 50px; + animation: fadeInUp; + animation-duration: .5s; +} + +.settings-title { + width: 80%; + height: auto; + font-size: 32px; + font-weight: bold; + color: $white; + font-family: "Gotham Medium"; + margin: 10px; + background-color: transparent; + margin-bottom: 20px; + text-align: left; +} + +.settings-powerContainer, .settings-creditsContainer { + width: 80%; + height: 100px; + background: linear-gradient( + -30deg, + rgb(187, 208, 236) 0%, + rgba(255, 255, 255, 1) 100% + ); + display: flex; + align-items: center; + justify-content: flex-start; + flex-direction: row; + border-radius: 20px; + border: 1px solid $gray; + margin-bottom: 5px; + margin-top: 5px; + transition: all 0.3s ease-in-out; + text-decoration: none; + background-color: transparent; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +} + +.settings-creditsContainer { + height: 500px; + display: flex; + justify-content: center; + align-items: center; +} + +.settings-powerButton { + width: 200px; + height: 50px; + border-radius: 20px; + background: linear-gradient( + 15deg, + rgb(223, 223, 223) 0%, + rgb(255, 255, 255) 100% + ); + display: flex; + justify-content: center; + align-items: center; + transition: all 0.3s ease-in-out; + filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15)); + cursor: pointer; + text-decoration: none; + margin-right: 20px; + margin-left: 20px; +} + +.settings-powerButton span { + width: auto; + height: auto; + font-size: 20px; + margin-top: 2px; + color: $medium-blue; + font-family: "Gotham Bold"; + background-color: transparent; +} + +.settings-credits { + width: 95%; + height: 430px; + background-color: transparent; + display: flex; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; +} + +.entry-links, .entry-name, .entry-position, .settings-credits-title { + width: auto; + height: auto; + text-align: left; + font-family: "Gotham Medium"; + color: $light-blue; + font-size: 20px; + background-color: transparent; + background: transparent; + text-decoration: none; + margin-bottom: 7px; + margin-right: 30px; +} + +.settings-credits-title { + font-size: 24px; + font-weight: bold; + color: $dark-blue; + font-family: "Gotham Medium"; + margin-bottom: 10px; +} + +.entry { + width: 100%; + height: auto; + display: flex; + justify-content: flex-start; + align-items: center; + background-color: transparent; +} + +.entry-name { + width: auto; + height: auto; + color: $medium-blue; +} + +.entry-position { + width: auto; + height: auto; + color: $light-blue +} + +.entry-links { + width: auto; + height: auto; + color: $hover-blue } \ No newline at end of file diff --git a/src/assets/stylesheets/statistics.scss b/src/assets/stylesheets/statistics.scss index bc20916..74ecc5e 100644 --- a/src/assets/stylesheets/statistics.scss +++ b/src/assets/stylesheets/statistics.scss @@ -49,6 +49,8 @@ $white: #fff; overflow: hidden; background-color: transparent; margin-bottom: 50px; + animation: fadeInUp; + animation-duration: .5s; } .statistics-title { diff --git a/src/assets/stylesheets/summary.scss b/src/assets/stylesheets/summary.scss deleted file mode 100644 index 1551578..0000000 --- a/src/assets/stylesheets/summary.scss +++ /dev/null @@ -1,150 +0,0 @@ -$dark-blue: #002554; -$medium-blue: #004990; -$light-blue: #007cbe; -$hover-blue: #25b3ff; -$black: #000; -$gray: #bdbdbd; -$white: #fff; - -.summary { - background: linear-gradient( - 180deg, - rgb(0 37 84 / 100%) 0%, - rgb(0 124 190 / 100%) 50%, - rgb(255, 255, 255) 100% - ); - background-color: transparent; - overflow-y: visible; - width: calc(100% - 300px); - height: auto; - display: block; - justify-content: center; - align-items: center; -} - -.summary-image { - width: 100%; - height: 200px; - background: transparent; - display: flex; - align-items: center; - justify-content: center; -} - -.summary-image img { - width: auto; - height: 200px; - background-color: transparent; - margin-top: 50px; -} - -.summary-fieldContainer { - width: 100%; - min-height: calc(100% - 200px); - height: auto; - display: flex; - align-items: center; - justify-content: flex-start; - flex-direction: column; - overflow: hidden; - background-color: transparent; - margin-bottom: 50px; -} - -.summary-title { - width: 80%; - height: auto; - font-size: 32px; - font-weight: bold; - color: $white; - font-family: "Gotham Medium"; - margin: 10px; - background-color: transparent; - margin-bottom: 20px; -} - -.summary-grid { - width: 80%; - height: auto; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - align-items: flex-start; - background-color: transparent; - overflow: visible; - // add row gap - gap: 20px; -} - -.summary-grid-container { - width: 32%; - height: 300px; - background: linear-gradient( - -30deg, - rgb(187, 208, 236) 0%, - rgba(255, 255, 255, 1) 100% - ); - margin-top: 5px; - - display: flex; /* Center the content */ - align-items: center; /* Center vertically */ - justify-content: center; /* Center horizontally */ - - border-radius: 20px; - border: 1px solid $gray; - transition: all 0.3s ease-in-out; - text-decoration: none; - filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); - cursor: pointer; - overflow: visible; -} - -.summary-iframe { - width: 95%; /* Ensure iframes take up full width of their grid cell */ - height: 95%; /* Adjust the height of iframes */ - border-radius: 20px; - - - // Debug Borders - // border-width: 5px; - // border-style: solid; -} - -// .summary-iframe { -// width: 400px; -// height: 400px; -// min-height: 1px; -// background: transparent; -// margin: 10px; -// display: block; -// } - -// .summary-fieldContainer-pp { -// width: 25%; -// height: 300px; -// border-radius: 20px; -// text-align: center; -// padding: 10px; -// } - -// .summary-fieldContainer-graph { -// width: 25%; -// } - - -// .summary-dashboard { -// width: 100%; -// height: 900px; -// border-radius: 20px; -// text-align: center; -// padding: 10px; -// } - -// .summary-fieldContainer-dashboard { -// width: 100%; -// height: 300px; -// border-radius: 20px; -// text-align: center; -// padding: 10px; -// } \ No newline at end of file diff --git a/src/components/NavBar.js b/src/components/NavBar.js index b79a1a1..fc5a542 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -3,23 +3,55 @@ import { NavLink } from "react-router-dom"; import "../assets/stylesheets/navbar.scss"; export default class NavBar extends Component { + constructor(props) { + super(props); + this.state = { + clicks: 0, + timer: null, + }; + } + componentDidMount() { let path = window.location.pathname; - if (path.includes("browse")) { - document.getElementById("browse").style.backgroundColor = "#007CBE"; - document.getElementById("browse-s").style.color = "white"; + if (path.includes("statistics")) { + document.getElementById("statistics").style.backgroundColor = "#007CBE"; + document.getElementById("statistics-s").style.color = "white"; } else if (path.includes("map")) { document.getElementById("map").style.backgroundColor = "#007CBE"; document.getElementById("map-s").style.color = "white"; } else if (path.includes("cable")) { document.getElementById("browse").style.backgroundColor = "#007CBE"; document.getElementById("browse-s").style.color = "white"; - } else if (path.includes("statistics")) { - document.getElementById("statistics").style.backgroundColor = "#007CBE"; - document.getElementById("statistics-s").style.color = "white"; } else { - document.getElementById("home").style.backgroundColor = "#007CBE"; - document.getElementById("home-s").style.color = "white"; + document.getElementById("browse").style.backgroundColor = "#007CBE"; + document.getElementById("browse-s").style.color = "white"; + } + } + + handleClick = () => { + const { clicks, timer } = this.state; + if (clicks === 0) { + const newTimer = setTimeout(() => { + this.setState({ clicks: 0 }); + clearTimeout(newTimer); + }, 1000); + this.setState({ timer: newTimer }); + } + + this.setState({ clicks: clicks + 1 }); + + if (clicks + 1 === 3) { + + window.location.replace("/settings") + + clearTimeout(timer); + this.setState({ clicks: 0, timer: null }); + } + }; + + componentWillUnmount() { + if (this.state.timer) { + clearTimeout(this.state.timer); } } @@ -27,19 +59,12 @@ export default class NavBar extends Component { return (
-
≡
+
+
≡
+
+

Jukebox

    - - - ❤️ Summary - - 🛍️ Browse diff --git a/src/components/SettingsComponent.js b/src/components/SettingsComponent.js index e8d4d86..75a9ad2 100644 --- a/src/components/SettingsComponent.js +++ b/src/components/SettingsComponent.js @@ -3,13 +3,79 @@ import BeldenLogo from "../assets/images/belden-white.png"; import "../assets/stylesheets/settings.scss"; export default class SettingsComponent extends Component { + shutdownPower = () => { + console.log("Shutting down..."); + this.props.socket.send('{"type":"shutdown","call":"request","data":{}}'); + }; + + restartPower = () => { + console.log("Restarting..."); + this.props.socket.send('{"type":"restart","call":"request","data":{}}'); + }; + render() { return (
    Belden
    -
    +
    +

    ⚙️ Settings

    +
    +
    this.shutdownPower()} + > + 🔴 Power Off +
    +
    this.restartPower()} + > + 🟨 Restart +
    +
    +
    +
    +

    Credits:

    +
    + Cole Deck, + Project Lead, + https://deck.sh +
    +
    + Natorion Johnson, + Lead PCB assembler, + https://linkedin.com/in/NatorionJ +
    +
    + Fannie, + CAD Design, Fabrication Planner + https://linkedin.com/in/fannieyu +
    +
    + Elias Frey Reschly, + Mechanical Design, Fabrication + +
    +
    + Scarlett Deck, + Front-End Dev, UI/UX Designer, + https://kadan.live +
    +
    + Lucas Ferguson, + Front-End Dev, + https://lucasferguson.webflow.io +
    +
    + Dustin Thomas, + Back-End Dev, + https://cptlobster.dev +
    +
    +
    +
    ); } diff --git a/src/components/SummaryComponent.js b/src/components/SummaryComponent.js deleted file mode 100644 index 04fd5b0..0000000 --- a/src/components/SummaryComponent.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { Component } from "react"; -import BeldenLogo from "../assets/images/belden-white.png"; -import "../assets/stylesheets/summary.scss"; - -export default class SummaryComponent extends Component { - render() { - return ( -
    -
    - Belden -
    -
    -

    ❤️ Summary

    -
    -
    -