Tucan444/Mabasej_Team
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

_

Browse Source
This commit is contained in:
Tucan444 2021-05-10 15:03:04 +02:00
parent 359e3c9985
commit 954ef22ca9
18 changed files with 326 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/GitHub-Mark-Light-64px.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

4
websites/index.html → website/WikiSpot.html
View File

@ -16,7 +16,7 @@
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li> <li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li> <li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li> <li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li> <li class="item" onclick="location.href = 'WikiSpotCon.html'"><a href="https://github.com/Tucan444/Mabasej_Team"><img src="GitHub-Mark-Light-64px.png" alt="githublogo" id="githubImg"></a></li>
<div class="burger" onclick="bmenu()">&#9776</div> <div class="burger" onclick="bmenu()">&#9776</div>
</ul> </ul>
<!-- Navigačná lisťa /malá obrazovka/ --> <!-- Navigačná lisťa /malá obrazovka/ -->
@ -31,7 +31,7 @@
<body> <body>
<div id="downloadHolder"> <div id="downloadHolder">
<div id="download">SŤIAHNUŤ &#9660</div> <div id="download">SŤIAHNUŤ &#9660</div>
<div id="phone"><img src="samsung1.png" alt="" id="phoneImg"></div> <a href=""><img src="samsung1.png" alt="" id="phoneImg"></a>
</div> </div>
</body> </body>
</html> </html>

23
websites/WikiSpotCSS.css → website/WikiSpotCSS.css
View File

@ -4,6 +4,8 @@ header {
} }
body { body {
background-image: url(header-background.jpg); background-image: url(header-background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0; margin: 0;
user-select: none; user-select: none;
} }
@ -14,6 +16,7 @@ body {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
flex-direction: row;
} }
.item { .item {
list-style: none; list-style: none;
@ -58,6 +61,9 @@ body {
display: none; display: none;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
#githubImg {
display: none;
}
.item { .item {
display: none; display: none;
} }
@ -111,4 +117,21 @@ body {
} }
#phoneImg { #phoneImg {
width: 350px; width: 350px;
}
#conHolder {
width: 500px;
height: 500px;
margin-top: 15%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
/* ---------- O projekte ---------- */
#projectInfo {
background-color: rgb(255, 255, 255);
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: black;
width: 300px;
height: auto;
} }

0
websites/WikiSpotLoc.html → website/WikiSpotLoc.html
View File

36
website/WikiSpotPro.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<title>WikiSpot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="WikiSpotCSS.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="appjs.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'"><a href="https://github.com/Tucan444/Mabasej_Team"><img src="GitHub-Mark-Light-64px.png" alt="githublogo" id="githubImg"></a></li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
<body>
<article id="projectInfo"></article>
<script src="about.js"></script>
</body>
</html>

37
website/WikiSpotWS.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
<title>WikiSpot</title>
<script src="appjs.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'"><a href="https://github.com/Tucan444/Mabasej_Team"><img src="GitHub-Mark-Light-64px.png" alt="githublogo" id="githubImg"></a></li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
<body>
<script src="desc_short.js"></script>
</body>
</html>

10
website/about.js Normal file
View File

@ -0,0 +1,10 @@
$(document).ready(function(){
$.get("test.txt", function(data){
console.log(data);
let data_string = data.toString();
data_string.replace(new RegExp("\\\\n", "g"), "*");
console.log(JSON.stringify(data_string));
$("#projectInfo").html(data_string);
});
});

175
websites/app.css → website/app.css
View File

@ -6,6 +6,8 @@ body {
background-image: url(header-background.jpg); background-image: url(header-background.jpg);
margin: 0; margin: 0;
user-select: none; user-select: none;
background-repeat: no-repeat;
background-attachment: fixed;
} }
/* ---------- Navigačná lišta (navbar) ---------- */ /* ---------- Navigačná lišta (navbar) ---------- */
.list { .list {
@ -37,12 +39,6 @@ body {
color: chartreuse; color: chartreuse;
transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out;
} }
.wsImg {
border-radius: 10px;
}
.wsImg:first-child {
margin-right: auto;
}
/* ---------- Burger Menu ---------- */ /* ---------- Burger Menu ---------- */
.burger { .burger {
cursor: pointer; cursor: pointer;
@ -161,22 +157,31 @@ body {
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
} }
.klol { .short_description {
width: 300px;
}
.list_item_holder {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: flex-end; justify-content: space-between;
margin-top: 5px;
margin-right: 71px;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 10px; margin-left: 10px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
} }
.constantImg { .sens_style_heat {
grid-area: obrazok; grid-area: senzory;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
display: flex; display: flex;
width: 300px; align-items: center;
height: 300px; flex-direction: column;
top: 250px;
left: 50px; }
transition: display 1s 1s; .wsImg {
border-radius: 10px;
margin-right: auto;
} }
.mystyle { .mystyle {
transform: rotate(180deg); transform: rotate(180deg);
@ -194,24 +199,72 @@ body {
transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out;
} }
/* ---------- Grid Layout ---------- */ /* ---------- Grid Layout ---------- */
.obrazok { .obrazok_small {
grid-area: obrazok; grid-area: obrazok;
width: 500px; display: flex;
align-items: center;
flex-direction: column;
width: 100px;
height: 100px;
margin-left: 25px;
border-radius: 10px;
transition: display 1s 1s;
}
.obrazok_big {
grid-area: obrazok;
width: 400px;
height: 300px; height: 300px;
margin-left: 0px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.imgBig {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.text_small {
grid-area: description;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
margin-left: 25px; margin-left: 25px;
} }
.text { .text_big {
grid-area: description; grid-area: description;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
margin-left: 25px;
} }
.senzory { .sensors_small {
grid-area: senzory; width: 140px;
grid-area: senzory;
display: flex;
justify-content: center;
flex-direction: column;
} }
.info { .sensors_big {
grid-area: senzory;
display: flex;
justify-content: center;
flex-direction: column;
}
.info_small {
grid-area: info;
}
.info_big {
grid-area: info; grid-area: info;
} }
.listHide { .listHide {
display: none; display: none;
background: #ffffff;
} }
.expand { .expand {
display: grid; display: grid;
@ -227,6 +280,7 @@ body {
border-radius: 10px; border-radius: 10px;
height: 600px; height: 600px;
width: 550px; width: 550px;
background-color: white;
} }
.big { .big {
display: grid; display: grid;
@ -238,6 +292,7 @@ body {
"description info"; "description info";
position: absolute; position: absolute;
border-radius: 10px; border-radius: 10px;
margin-top: -12px;
left: 650px; left: 650px;
top: 117px; top: 117px;
height: 700px; height: 700px;
@ -249,7 +304,27 @@ body {
display: flex; display: flex;
} }
/* ---------- Responzívnosť (media tag) ---------- */ /* ---------- Responzívnosť (media tag) ---------- */
@media (max-width: 1000px) { @media (max-width: 1550px) {
.obrazok_big {
width: 400px;
height: 250px;
}
.big {
width: 800px;
height: 600px;
}
}
@media (max-width: 1450px) {
.obrazok_big {
width: 350px;
height: 200px;
}
.big {
width: 700px;
height: 500px;
}
}
@media (max-width: 1350px) {
.big { .big {
display: none; display: none;
} }
@ -262,7 +337,6 @@ body {
visibility: visible; visibility: visible;
} }
.burgerList { .burgerList {
display: none;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-right: 30px; margin-right: 30px;
@ -275,4 +349,53 @@ body {
.bItem { .bItem {
margin-top: 10px; margin-top: 10px;
} }
}
@media (max-width: 570px) {
.wsList {
background: white;
width: 500px;
height: 100px;
border-radius: 10px;
margin-left: 0px;
margin-top: 5px;
}
.wsImg {
width: 120px;
border-radius: 10px;
margin-right: auto;
}
.title0 {
font-size: 15px;
}
.short_description {
font-size: 15px;
}
.list_item_holder {
margin-right: 0px;
}
#arrow0 {
margin-top: 32px;
font-size: 30px;
width: 30px;
height: 30px;
}
.expand {
margin-left: 0px;
width: 500px;
height: 550px;
}
}
@media (max-width: 360px) and (max-height: 640px) {
.wsList {
background: white;
width: 360px;
height: 100px;
border-radius: 10px;
margin-left: 0px;
margin-top: 5px;
}
.list_item_holder {
margin-right: -10px;
}
} }

44
website/appjs.js Normal file
View File

@ -0,0 +1,44 @@
function onclick1() {
var click = document.getElementById("arrow0");
click.classList.toggle("mystyle");
var expand = document.getElementById("listExpand1");
expand.classList.toggle("expand");
var appear = document.getElementById("roko1");
appear.classList.toggle("appear");
}
function onclick2() {
var click = document.getElementById("arrow2");
click.classList.toggle("mystyle");
var expand = document.getElementById("listExpand2");
expand.classList.toggle("expand");
var appear = document.getElementById("roko2");
appear.classList.toggle("appear");
}
function onclick3() {
var click = document.getElementById("arrow3");
click.classList.toggle("mystyle");
var expand = document.getElementById("listExpand3");
expand.classList.toggle("expand");
var appear = document.getElementById("roko3");
appear.classList.toggle("appear");
}
function onclick4() {
var click = document.getElementById("arrow4");
click.classList.toggle("mystyle");
var expand = document.getElementById("listExpand4");
expand.classList.toggle("expand");
var appear = document.getElementById("roko4");
appear.classList.toggle("appear");
}
function onclick5() {
var click = document.getElementById("arrow5");
click.classList.toggle("mystyle");
var expand = document.getElementById("listExpand5");
expand.classList.toggle("expand");
var appear = document.getElementById("roko5");
appear.classList.toggle("appear");
}
function bmenu() {
var burger = document.getElementById("bonger");
burger.classList.toggle("appear")
}

31
websites/desc_short.js → website/desc_short.js
View File

@ -1,43 +1,46 @@
$(document).ready(function() { $(document).ready(function() {
let base_url = "http://192.168.1.156:8000/"; let base_url = "http://localhost:8000/";
function append_element(image_urls, descriptions, title, id) { function append_element(image_urls, descriptions, title, id) {
let template = ` let template = `
<div class="wsList hey"> <div class="wsList hey">
<div ></div> <div></div>
<img src="${image_urls[0]}" alt="#" style="height: 100px;" class="wsImg"> <img src="${image_urls[0]}" alt="#" class="obrazok_small">
<div class="list_item_holder"> <div class="list_item_holder">
<div class="title${id}">${title}</div> <div class="title${id}">${title}</div>
<div class="short_description${id}">${descriptions[0]}</div> <div class="short_description">${descriptions[0]}</div>
</div> </div>
<div id="arrow${id}" class="arrow">&#9660</div> <div id="arrow${id}" class="arrow">&#9660</div>
</div> </div>
<!-- Rozšírené malé zobrazenie --> <!-- Rozšírené malé zobrazenie -->
<div id="listExpand${id}" class="listHide"> <div id="listExpand${id}" class="listHide">
<img src="${image_urls[1]}" alt="#" class="constantImg"> <img src="${image_urls[1]}" alt="#" class="obrazok_big">
<div class="text">${descriptions[1]}</div> <div class="text_small">${descriptions[1]}</div>
<div class="sensors"> <div class="sensors_small">
</div> </div>
<div class="info"></div> <div class="info_small"></div>
</div> </div>
<!-- Veľké zobrazenie --> <!-- Veľké zobrazenie -->
<div class="big"> <div class="big">
<img class="obrazok" src="${image_urls[1]}" alt="#"> <div class="imgBig"><img class="obrazok_big" src="${image_urls[1]}" alt="#"></div>
<div class="text">${descriptions[1]}</div> <div class="text_big">${descriptions[1]}</div>
<div class="sensors_big">
</div>
<div class="info_big"></div>
</div>`; </div>`;
$("body").append(template); $("body").append(template);
$.get(`http://192.168.1.156:8000/${id}/sensors`, function(data1) { $.get(`${base_url}${id}/sensors`, function(data1) {
console.log(data1);
Object.keys(data1).forEach(function(key) { Object.keys(data1).forEach(function(key) {
let value = data1[key]; let value = data1[key];
if (key.startsWith("[translate]-")) { if (key.startsWith("[translate]-")) {
key = key.slice(12, key.length); key = key.slice(12, key.length);
} }
$(".sensors").append(`<p>${key}: ${value}</p>`); $(".sensors_small").append(`<p class="sens_style_heat">${key}: ${value}</p>`);
$(".sensors_big").append(`<p class="sens_style_heat">${key}: ${value}</p>`);
}); });
}); });
@ -48,7 +51,7 @@ $(document).ready(function() {
$(`#arrow${id}`).toggleClass("mystyle"); $(`#arrow${id}`).toggleClass("mystyle");
$(`#listExpand${id}`).toggleClass("expand"); $(`#listExpand${id}`).toggleClass("expand");
id.a();
}); });
} }

0
websites/header-background.jpg → website/header-background.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

0
websites/samsung1.png → website/samsung1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 338 KiB

After

Width:  |  Height:  |  Size: 338 KiB

8
website/test.txt Normal file
View File

@ -0,0 +1,8 @@
sf
fsd
f
sdf
sd
fsd
f
sd

0
websites/wikispot-white.png → website/wikispot-white.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

33
websites/WikiSpotCon.html
View File

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<title>WikiSpot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="WikiSpotCSS.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="appjs.js"></script>
</head>
<body>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
</body>
</html>

33
websites/WikiSpotPro.html
View File

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<title>WikiSpot</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="WikiSpotCSS.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="appjs.js"></script>
</head>
<body>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
</body>
</html>

36
websites/WikiSpotWS.html
View File

@ -1,36 +0,0 @@
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
<title>Flextest</title>
<script src="appjs.js"></script>
<!-- <script src="click1.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<header>
<nav>
<!-- Navigačná lišta /veľká obrazovka/ -->
<ul class="list">
<img src="wikispot-white.png" alt="" class="itemImg">
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
<li class="item" onclick="location.href = 'WikiSpotWS.html'">WIKISPOT</li>
<li class="item" onclick="location.href = 'WikiSpotPro.html'">O PROJEKTE</li>
<li class="item" onclick="location.href = 'WikiSpotCon.html'">KONTAKT</li>
<div class="burger" onclick="bmenu()">&#9776</div>
</ul>
<!-- Navigačná lisťa /malá obrazovka/ -->
<ul class="burgerList" id="bonger">
<li class="bItem">DOMOV</li>
<li class="bItem">WIKISPOT</li>
<li class="bItem">O PROJEKTE</li>
<li class="bItem">KONTAKT</li>
</ul>
</nav>
</header>
<body>
<script src="desc_short.js"></script>
</body>
</html>

4
websites/appjs.js
View File

@ -1,4 +0,0 @@
function bmenu() {
var burger = document.getElementById("bonger");
burger.classList.toggle("appear")
}