diff --git a/Website/index.html b/Website/index.html index 778ae14..6725e43 100644 --- a/Website/index.html +++ b/Website/index.html @@ -7,21 +7,35 @@ - Tranga + + + Tranga + + + + + + settingscog + + + +

+

+ - Connector Name + Connector Name Publication Name - - - + + + + \ No newline at end of file diff --git a/Website/interaction.js b/Website/interaction.js new file mode 100644 index 0000000..0df2910 --- /dev/null +++ b/Website/interaction.js @@ -0,0 +1,32 @@ +const slideInRight = [ + { right: "-20rem" }, + { right: "0" } +]; + +const slideInRightTiming = { + duration: 200, + iterations: 1, + fill: "forwards", + easing: "ease-out" +} + +const slideOutRightTiming = { + direction: "reverse", + duration: 200, + iterations: 1, + fill: "forwards", + easing: "ease-in" +} + +const settingsTab = document.querySelector("#settingstab"); +const settingsCog = document.querySelector("#settingscog"); +var slideIn = true; +function slide(){ + if(slideIn) + settingsTab.animate(slideInRight, slideInRightTiming); + else + settingsTab.animate(slideInRight, slideOutRightTiming); + slideIn = !slideIn; +} + +settingsCog.addEventListener("click", () => slide()); \ No newline at end of file diff --git a/Website/media/blahaj.png b/Website/media/blahaj.png new file mode 100644 index 0000000..dbbff93 Binary files /dev/null and b/Website/media/blahaj.png differ diff --git a/Website/media/settings-cogwheel.svg b/Website/media/settings-cogwheel.svg new file mode 100644 index 0000000..7e61388 --- /dev/null +++ b/Website/media/settings-cogwheel.svg @@ -0,0 +1,21 @@ + + + + + + + + + + \ No newline at end of file diff --git a/Website/style.css b/Website/style.css index 341904e..ab5eb1f 100644 --- a/Website/style.css +++ b/Website/style.css @@ -1,86 +1,161 @@ -body{ +:root{ + --background-color: #5bcefa; + --second-background-color: #000; + --primary-color: #f5a9b8; + --secondary-color: #fff; + --topbar-height: 60px; + box-sizing: content-box; +} + +body{ padding: 0; margin: 0; display: flex; flex-flow: column; flex-wrap: nowrap; height: 100vh; - background-color: orange; + background-color: var(--background-color); + font-family: "Inter", sans-serif; + overflow-x: hidden; +} + +background-placeholder{ + background-color: var(--second-background-color); + opacity: 0.05; + position: absolute; + width: 100%; + height: 100%; + border-radius: 5px; } topbar { display: flex; align-items: center; - background-color: red; - height: 4rem; + height: var(--topbar-height); + margin: 5px; } titlebox { - font-size: 20pt; + position: relative; + display: flex; + margin: 0 0 0 40px; + height: 100%; + align-items:center; + justify-content:center; +} + +titlebox span{ + font-size: 24pt; font-weight: bold; - margin: 20px; + background: linear-gradient(120deg, var(--primary-color), var(--secondary-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-left: 20px; +} + +titlebox img { + height: 100%; + margin-right: 10px; +} + +spacer{ + flex-grow: 1; +} + +searchdiv{ + display: block; + margin: 0 10px 0 0; +} + +#searchbox { + padding: 6px 8px; + border: 0; + border-radius: 3px; + font-size: 14pt; + width: 250px; +} + +#settingscog { + margin: 0px 30px; + height: calc(100% - 40px); + filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(115deg) brightness(116%) contrast(101%); } viewport { + position: relative; display: flex; - background-color: blue; flex-flow: row; flex-wrap: nowrap; flex-grow: 1; } sidebar{ - background-color: green; + position: relative; width: 20rem; margin-bottom: 10px; - border-radius: 0 0 5px 0; + border-radius: 0 5px 5px 0; } content { - background-color: yellow; + position: relative; flex-grow: 1; - margin: 10px; - padding: 5px; + margin: 0 10px 10px 10px; border-radius: 5px; display: flex; flex-direction: row; flex-wrap: wrap; + justify-content: start; + align-content: start; } settingstab{ - background-color: green; + position: absolute; + right: -20rem; + bottom: 0; + background-color: rgba(0,0,0,0.5); width: 20rem; + height: calc(100% - var(--topbar-height) - 20px); margin-bottom: 10px; - border-radius: 0 0 5px 0; + border-radius: 5px 0 0 5px; } publication{ - background-color: gray; - width: 200px; + background-color: var(--secondary-color); + width: 180px; height: 300px; border-radius: 5px; margin: 10px 10px; - position: relative; + display: flex; + flex-direction: column; + justify-content: start; + padding: 15px 20px; +} + +#addPublication p{ + width: 100%; + text-align: center; + font-size: 150pt; + vertical-align: middle; + line-height: 300px; + margin: 0; } .pill { + flex-grow: 0; height: 14pt; font-size: 12pt; border-radius: 7pt; - background-color: white; - padding: 1pt 20px; + background-color: var(--primary-color); + padding: 1pt 15px; } -connector{ - position: absolute; - top: 10px; - left: 10px; +connector-name{ + width: fit-content; + margin: 10px 0; } publication-name{ - position: absolute; + width: fit-content; font-size: 16pt; font-weight: bold; - top: 35px; - left: 15px; } \ No newline at end of file