glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

#1 Basic layout and colors

Browse Source
This commit is contained in:
glax 2023-05-22 23:52:35 +02:00
parent b6ac2682f6
commit e2b8888130
5 changed files with 173 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Website/index.html
View File

@ -7,21 +7,35 @@
</head> </head>
<body> <body>
<topbar> <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> </topbar>
<viewport> <viewport>
<sidebar> <sidebar>
<background-placeholder></background-placeholder>
</sidebar> </sidebar>
<content> <content>
<background-placeholder></background-placeholder>
<publication id="addPublication">
<p>+</p>
</publication>
<publication> <publication>
<connector class="pill">Connector Name</connector> <connector-name class="pill">Connector Name</connector-name>
<publication-name>Publication Name</publication-name> <publication-name>Publication Name</publication-name>
</publication> </publication>
</content> </content>
<settingstab>
</settingstab>
</viewport> </viewport>
<settingstab id="settingstab">
</settingstab>
<script src="interaction.js"></script>
</body> </body>
</html> </html>

32
Website/interaction.js Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

21
Website/media/settings-cogwheel.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

127
Website/style.css
View File

@ -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; padding: 0;
margin: 0; margin: 0;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 100vh; 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 { topbar {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: red; height: var(--topbar-height);
height: 4rem; margin: 5px;
} }
titlebox { 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; 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 { viewport {
position: relative;
display: flex; display: flex;
background-color: blue;
flex-flow: row; flex-flow: row;
flex-wrap: nowrap; flex-wrap: nowrap;
flex-grow: 1; flex-grow: 1;
} }
sidebar{ sidebar{
background-color: green; position: relative;
width: 20rem; width: 20rem;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 0 0 5px 0; border-radius: 0 5px 5px 0;
} }
content { content {
background-color: yellow; position: relative;
flex-grow: 1; flex-grow: 1;
margin: 10px; margin: 0 10px 10px 10px;
padding: 5px;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: start;
align-content: start;
} }
settingstab{ settingstab{
background-color: green; position: absolute;
right: -20rem;
bottom: 0;
background-color: rgba(0,0,0,0.5);
width: 20rem; width: 20rem;
height: calc(100% - var(--topbar-height) - 20px);
margin-bottom: 10px; margin-bottom: 10px;
border-radius: 0 0 5px 0; border-radius: 5px 0 0 5px;
} }
publication{ publication{
background-color: gray; background-color: var(--secondary-color);
width: 200px; width: 180px;
height: 300px; height: 300px;
border-radius: 5px; border-radius: 5px;
margin: 10px 10px; 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 { .pill {
flex-grow: 0;
height: 14pt; height: 14pt;
font-size: 12pt; font-size: 12pt;
border-radius: 7pt; border-radius: 7pt;
background-color: white; background-color: var(--primary-color);
padding: 1pt 20px; padding: 1pt 15px;
} }
connector{ connector-name{
position: absolute; width: fit-content;
top: 10px; margin: 10px 0;
left: 10px;
} }
publication-name{ publication-name{
position: absolute; width: fit-content;
font-size: 16pt; font-size: 16pt;
font-weight: bold; font-weight: bold;
top: 35px;
left: 15px;
} }