#1 Basic layout and colors
This commit is contained in:
parent
b6ac2682f6
commit
e2b8888130
@ -7,21 +7,35 @@
|
||||
</head>
|
||||
<body>
|
||||
<topbar>
|
||||
<titlebox>Tranga</titlebox>
|
||||
<titlebox>
|
||||
<img src="media/blahaj.png">
|
||||
<span>Tranga</span>
|
||||
</titlebox>
|
||||
<spacer></spacer>
|
||||
<searchdiv>
|
||||
<input id="searchbox" placeholder="Search" type="text">
|
||||
</searchdiv>
|
||||
<img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
|
||||
</topbar>
|
||||
<viewport>
|
||||
<sidebar>
|
||||
<background-placeholder></background-placeholder>
|
||||
|
||||
</sidebar>
|
||||
<content>
|
||||
<background-placeholder></background-placeholder>
|
||||
<publication id="addPublication">
|
||||
<p>+</p>
|
||||
</publication>
|
||||
<publication>
|
||||
<connector class="pill">Connector Name</connector>
|
||||
<connector-name class="pill">Connector Name</connector-name>
|
||||
<publication-name>Publication Name</publication-name>
|
||||
</publication>
|
||||
</content>
|
||||
<settingstab>
|
||||
|
||||
</settingstab>
|
||||
</viewport>
|
||||
<settingstab id="settingstab">
|
||||
|
||||
</settingstab>
|
||||
<script src="interaction.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
Website/interaction.js
Normal file
32
Website/interaction.js
Normal file
@ -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());
|
||||
BIN
Website/media/blahaj.png
Normal file
BIN
Website/media/blahaj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
21
Website/media/settings-cogwheel.svg
Normal file
21
Website/media/settings-cogwheel.svg
Normal file
@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="800px" height="800px" viewBox="0 0 93.5 93.5" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M93.5,40.899c0-2.453-1.995-4.447-4.448-4.447H81.98c-0.74-2.545-1.756-5.001-3.035-7.331l4.998-5
|
||||
c0.826-0.827,1.303-1.973,1.303-3.146c0-1.19-0.462-2.306-1.303-3.146L75.67,9.555c-1.613-1.615-4.673-1.618-6.29,0l-5,5
|
||||
c-2.327-1.28-4.786-2.296-7.332-3.037v-7.07C57.048,1.995,55.053,0,52.602,0H40.899c-2.453,0-4.447,1.995-4.447,4.448v7.071
|
||||
c-2.546,0.741-5.005,1.757-7.333,3.037l-5-5c-1.68-1.679-4.609-1.679-6.288,0L9.555,17.83c-1.734,1.734-1.734,4.555,0,6.289
|
||||
l4.999,5c-1.279,2.33-2.295,4.788-3.036,7.333h-7.07C1.995,36.452,0,38.447,0,40.899V52.6c0,2.453,1.995,4.447,4.448,4.447h7.071
|
||||
c0.74,2.545,1.757,5.003,3.036,7.332l-4.998,4.999c-0.827,0.827-1.303,1.974-1.303,3.146c0,1.189,0.462,2.307,1.302,3.146
|
||||
l8.274,8.273c1.614,1.615,4.674,1.619,6.29,0l5-5c2.328,1.279,4.786,2.297,7.333,3.037v7.071c0,2.453,1.995,4.448,4.447,4.448
|
||||
h11.702c2.453,0,4.446-1.995,4.446-4.448V81.98c2.546-0.74,5.005-1.756,7.332-3.037l5,5c1.681,1.68,4.608,1.68,6.288,0
|
||||
l8.275-8.273c1.734-1.734,1.734-4.555,0-6.289l-4.998-5.001c1.279-2.329,2.295-4.787,3.035-7.332h7.071
|
||||
c2.453,0,4.448-1.995,4.448-4.446V40.899z M62.947,46.75c0,8.932-7.266,16.197-16.197,16.197c-8.931,0-16.197-7.266-16.197-16.197
|
||||
c0-8.931,7.266-16.197,16.197-16.197C55.682,30.553,62.947,37.819,62.947,46.75z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user