_
This commit is contained in:
Tucan444
BIN
website/GitHub-Mark-Light-64px.png
Normal file
BIN
website/GitHub-Mark-Light-64px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
37
website/WikiSpot.html
Normal file
37
website/WikiSpot.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!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>
|
||||
<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()">☰</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>
|
||||
<div id="downloadHolder">
|
||||
<div id="download">SŤIAHNUŤ ▼</div>
|
||||
<a href=""><img src="samsung1.png" alt="" id="phoneImg"></a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
137
website/WikiSpotCSS.css
Normal file
137
website/WikiSpotCSS.css
Normal file
@@ -0,0 +1,137 @@
|
||||
/* ---------- Základné štýly ---------- */
|
||||
header {
|
||||
background-image: url(header-background.jpg);
|
||||
}
|
||||
body {
|
||||
background-image: url(header-background.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
}
|
||||
/* ---------- Navigačná lišta (navbar) ---------- */
|
||||
.list {
|
||||
margin: 0px;
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
.item {
|
||||
list-style: none;
|
||||
margin-right: 3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item:first-child {
|
||||
margin-right: auto;
|
||||
margin-left: 1.3rem;
|
||||
}
|
||||
.itemImg {
|
||||
margin-right: auto;
|
||||
margin-left: 1.3rem;
|
||||
}
|
||||
.list li {
|
||||
color: #FFFFFF;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
.list li:hover {
|
||||
color: chartreuse;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
.wsImg {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.wsImg:first-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
/* ---------- Burger Menu ---------- */
|
||||
.burger {
|
||||
cursor: pointer;
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
display: flex;
|
||||
visibility: collapse;
|
||||
margin-right: 2rem;
|
||||
margin-top: -10px;
|
||||
position: absolute;
|
||||
}
|
||||
.burgerList {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
#githubImg {
|
||||
display: none;
|
||||
}
|
||||
.item {
|
||||
display: none;
|
||||
}
|
||||
.burger {
|
||||
visibility: visible;
|
||||
}
|
||||
.burgerList {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 30px;
|
||||
margin-top: 0px;
|
||||
color: white;
|
||||
list-style: none;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
.bItem {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.appear {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
/* ---------- Hlavná stránka ---------- */
|
||||
#downloadHolder {
|
||||
margin-top: 5%;
|
||||
margin-left: 25%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 550px;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
#download {
|
||||
cursor: pointer;
|
||||
background-color: none;
|
||||
color: white;
|
||||
border: 4px white solid;
|
||||
border-radius: 50px;
|
||||
width: auto;
|
||||
height: 20px;
|
||||
padding: 10px;
|
||||
position: static;
|
||||
font-size: 20px;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
}
|
||||
#download:hover {
|
||||
background-color: white;
|
||||
color: rgb(47, 40, 150) ;
|
||||
}
|
||||
#phoneImg {
|
||||
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;
|
||||
}
|
||||
158
website/WikiSpotLoc.html
Normal file
158
website/WikiSpotLoc.html
Normal file
@@ -0,0 +1,158 @@
|
||||
<!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="WikiSpotLoc.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="desc_short.js"></script>
|
||||
<script src="click1.js"></script>
|
||||
<script src="sensors.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="wikispot-white.png" alt="wikispot" id="logo" usemap="#navhome">
|
||||
<map name="navhome">
|
||||
<area shape="rect" coords="20, 15, 255, 100" href="http://www.spspb.sk/kontakt.html?page_id=91" alt="home">
|
||||
</map>
|
||||
<nav>
|
||||
<ul id="container">
|
||||
<li id="home" onclick="location.href = 'WikiSpot.html';"><a href="WikiSpot.html">DOMOV</a></li>
|
||||
<li id="about" onclick="location.href = 'WikiSpotLoc.html';"><a href="WikiSpotLoc.html">WIKISPOT</a></li>
|
||||
<li id="project" onclick="location.href = 'WikiSpotPro.html';"><a href="WikiSpotPro.html">O PROJEKTE</a></li>
|
||||
<li id="contact" onclick="location.href = 'http://www.spspb.sk/kontakt.html?page_id=91';"><a href="http://www.spspb.sk/kontakt.html?page_id=91">KONTAKT</a></li>
|
||||
</ul>
|
||||
<div class="nav">
|
||||
<label for="check" id="bmenu">☰</label>
|
||||
<input type="checkbox" id="check">
|
||||
<table class="menu">
|
||||
<tr><td><a href="WikiSpot.html" class="expandable">DOMOV</a></td></tr>
|
||||
<tr><td><a href="WikiSpotLoc.html" class="expandable">WIKISPOT</a></td></tr>
|
||||
<tr><td><a href="WikiSpotPro.html" class="expandable">PROJEKT</a></td></tr>
|
||||
<tr><td><a href="#" class="expandable">KOTAKT</a></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!--Device select-->
|
||||
<input type="radio" id="checkExp1" name="pick" class="pickNone">
|
||||
<input type="radio" id="checkExp2" name="pick" class="pickNone">
|
||||
<!--1st device-->
|
||||
<label for="checkExp1">
|
||||
<section id="wsData1">
|
||||
<div id="wsBackGround1" class="round_s"></div>
|
||||
<section id="myData"></section>
|
||||
<section id="myTitle"></section>
|
||||
<div id="imgData1">
|
||||
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="wsimage1" style="width: 100px; height: 100px;">
|
||||
</div>
|
||||
<input type="checkbox" id="checkDesc1" class="none">
|
||||
<label for="checkDesc1" id="descIcon1" onclick="lul1()"><div id="fuckme1">▼</div></label>
|
||||
<div id="dataExpand1"></div>
|
||||
</section>
|
||||
</label>
|
||||
<section id="wsData1Exp" class="round">
|
||||
<article id="wsData1desc_l">
|
||||
<div id="desc_l1"></div>
|
||||
</article>
|
||||
<article>
|
||||
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="wsData1img" id="wsData1img" style="height: 300px; width: 500px;">
|
||||
</article>
|
||||
</section>
|
||||
<!--2nd device-->
|
||||
<label for="checkExp2">
|
||||
<section id="wsData2">
|
||||
<div id="wsBackGround2" class="round_s"></div>
|
||||
<section id="myData2"></section>
|
||||
<section id="myTitle2"></section>
|
||||
<div id="imgData2">
|
||||
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage2" style="width: 100px; height: 100px;">
|
||||
</div>
|
||||
<label for="checkDesc2" id="descIcon2" onclick="lul2()"><div id="fuckme2">▼</div></label>
|
||||
<input type="checkbox" id="checkDesc2" class="none">
|
||||
<div id="dataExpand2" class="round_s"></div>
|
||||
</section>
|
||||
</label>
|
||||
<section id="wsData2Exp" class="round">
|
||||
<article id="wsData2desc_l">
|
||||
<div id="desc_l2"></div>
|
||||
</article>
|
||||
<article>
|
||||
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData2img" id="wsData2img" style="height: 300px; width: 500px;">
|
||||
</article>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<!--3rd device-->
|
||||
<label for="checkExp3">
|
||||
<section id="wsData3">
|
||||
<div id="wsBackGround3" class="round_s"></div>
|
||||
<section id="myData3"></section>
|
||||
<section id="myTitle3"></section>
|
||||
<div id="imgData3">
|
||||
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage3" style="width: 100px; height: 100px;">
|
||||
</div>
|
||||
<label for="checkDesc3" id="descIcon3" onclick="lul2()"><div id="fuckme3">▼</div></label>
|
||||
<input type="checkbox" id="checkDesc3" class="none">
|
||||
<div id="dataExpand3"></div>
|
||||
</section>
|
||||
</label>
|
||||
<section id="wsData3Exp" class="round">
|
||||
<article id="wsData3desc_l">
|
||||
<div id="desc_l3"></div>
|
||||
</article>
|
||||
<article>
|
||||
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData3img" id="wsData3img" style="height: 300px; width: 500px;">
|
||||
</article>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<!--4th device-->
|
||||
<label for="checkExp4">
|
||||
<section id="wsData4">
|
||||
<div id="wsBackGround4" class="round_s"></div>
|
||||
<section id="myData4"></section>
|
||||
<section id="myTitle4"></section>
|
||||
<div id="imgData4">
|
||||
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage4" style="width: 100px; height: 100px;">
|
||||
</div>
|
||||
<label for="checkDesc4" id="descIcon4" onclick="lul4()"><div id="fuckme4">▼</div></label>
|
||||
<input type="checkbox" id="checkDesc4" class="none">
|
||||
<div id="dataExpand4"></div>
|
||||
</section>
|
||||
</label>
|
||||
<section id="wsData4Exp" class="round">
|
||||
<article id="wsData4desc_l">
|
||||
<div id="desc_l4"></div>
|
||||
</article>
|
||||
<article>
|
||||
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData4img" id="wsData4img" style="height: 300px; width: 500px;">
|
||||
</article>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<!--5th device-->
|
||||
<label for="checkExp5">
|
||||
<section id="wsData5">
|
||||
<div id="wsBackGround5" class="round_s"></div>
|
||||
<section id="myData5"></section>
|
||||
<section id="myTitle5"></section>
|
||||
<div id="imgData5">
|
||||
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsimage5" style="width: 100px; height: 100px;">
|
||||
</div>
|
||||
<label for="checkDesc5" id="descIcon5" onclick="lul5()"><div id="fuckme5">▼</div></label>
|
||||
<input type="checkbox" id="checkDesc5">
|
||||
<div id="dataExpand5"></div>
|
||||
</section>
|
||||
</label>
|
||||
<section id="wsData5Exp" class="round">
|
||||
<article id="wsData5desc_l">
|
||||
<div id="desc_l5"></div>
|
||||
</article>
|
||||
<article>
|
||||
<img src="http://192.168.1.105:8000/files/0/test.jpg" alt="wsData5img" id="wsData5img" style="height: 300px; width: 500px;">
|
||||
</article>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
36
website/WikiSpotPro.html
Normal file
36
website/WikiSpotPro.html
Normal 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()">☰</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
37
website/WikiSpotWS.html
Normal 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()">☰</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
10
website/about.js
Normal 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);
|
||||
});
|
||||
});
|
||||
401
website/app.css
Normal file
401
website/app.css
Normal file
@@ -0,0 +1,401 @@
|
||||
/* ---------- Základné štýly ---------- */
|
||||
header {
|
||||
background-image: url(header-background.jpg);
|
||||
}
|
||||
body {
|
||||
background-image: url(header-background.jpg);
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
/* ---------- Navigačná lišta (navbar) ---------- */
|
||||
.list {
|
||||
margin: 0px;
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.item {
|
||||
list-style: none;
|
||||
margin-right: 3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item:first-child {
|
||||
margin-right: auto;
|
||||
margin-left: 1.3rem;
|
||||
}
|
||||
.itemImg {
|
||||
margin-right: auto;
|
||||
margin-left: 1.3rem;
|
||||
}
|
||||
.list li {
|
||||
color: #FFFFFF;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
.list li:hover {
|
||||
color: chartreuse;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
/* ---------- Burger Menu ---------- */
|
||||
.burger {
|
||||
cursor: pointer;
|
||||
font-size: 40px;
|
||||
color: white;
|
||||
display: flex;
|
||||
visibility: collapse;
|
||||
margin-right: 2rem;
|
||||
margin-top: -10px;
|
||||
position: absolute;
|
||||
}
|
||||
.burgerList {
|
||||
display: none;
|
||||
}
|
||||
/* ---------- 1 ---------- */
|
||||
#list1 {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
font-size: 40px;
|
||||
margin-right: 30px;
|
||||
margin-top: 28px;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
#hey1 {
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
}
|
||||
#hou1 {
|
||||
margin-top: 50px;
|
||||
margin-left: -60px;
|
||||
}
|
||||
/* ---------- 2 ---------- */
|
||||
#list2 {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
font-size: 40px;
|
||||
margin-right: 30px;
|
||||
margin-top: 28px;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
#hey2 {
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
}
|
||||
#hou2 {
|
||||
margin-top: 50px;
|
||||
margin-left: -60px;
|
||||
}
|
||||
/* ---------- 3 ---------- */
|
||||
#list3 {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
font-size: 40px;
|
||||
margin-right: 30px;
|
||||
margin-top: 28px;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
#hey3 {
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
}
|
||||
#hou3 {
|
||||
margin-top: 50px;
|
||||
margin-left: -60px;
|
||||
}
|
||||
/* ---------- 4 ---------- */
|
||||
#list4 {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
font-size: 40px;
|
||||
margin-right: 30px;
|
||||
margin-top: 28px;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
#hey4 {
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
}
|
||||
#hou4 {
|
||||
margin-top: 50px;
|
||||
margin-left: -60px;
|
||||
}
|
||||
/* ---------- 5 ---------- */
|
||||
#list5 {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
font-size: 40px;
|
||||
margin-right: 30px;
|
||||
margin-top: 28px;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
#hey5 {
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
}
|
||||
#hou5 {
|
||||
margin-top: 50px;
|
||||
margin-left: -60px;
|
||||
}
|
||||
/* ---------- Zdieľané štýly (classes) ---------- */
|
||||
.wsList {
|
||||
background: white;
|
||||
width: 550px;
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
margin-left: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.hey {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.short_description {
|
||||
width: 300px;
|
||||
}
|
||||
.list_item_holder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
margin-right: 71px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
}
|
||||
.sens_style_heat {
|
||||
grid-area: senzory;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
.wsImg {
|
||||
border-radius: 10px;
|
||||
margin-right: auto;
|
||||
}
|
||||
.mystyle {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.appear {
|
||||
display: flex;
|
||||
}
|
||||
.arrow {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
font-size: 40px;
|
||||
margin-right: 30px;
|
||||
margin-top: 28px;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
/* ---------- Grid Layout ---------- */
|
||||
.obrazok_small {
|
||||
grid-area: obrazok;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
.text_big {
|
||||
grid-area: description;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-left: 25px;
|
||||
}
|
||||
.sensors_small {
|
||||
width: 140px;
|
||||
grid-area: senzory;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sensors_big {
|
||||
grid-area: senzory;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.info_small {
|
||||
grid-area: info;
|
||||
}
|
||||
.info_big {
|
||||
grid-area: info;
|
||||
}
|
||||
.listHide {
|
||||
display: none;
|
||||
}
|
||||
.expand {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.7fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 5px 5px;
|
||||
grid-template-areas:
|
||||
"obrazok senzory"
|
||||
"description info";
|
||||
margin-top: 2px;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 10px;
|
||||
height: 600px;
|
||||
width: 550px;
|
||||
background-color: white;
|
||||
}
|
||||
.big {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.7fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 5px 5px;
|
||||
grid-template-areas:
|
||||
"obrazok senzory"
|
||||
"description info";
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
margin-top: -12px;
|
||||
left: 650px;
|
||||
top: 117px;
|
||||
height: 700px;
|
||||
width: 900px;
|
||||
background: royalblue;
|
||||
align-items: center;
|
||||
}
|
||||
.appear {
|
||||
display: flex;
|
||||
}
|
||||
/* ---------- Responzívnosť (media tag) ---------- */
|
||||
@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 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.item {
|
||||
display: none;
|
||||
}
|
||||
.burger {
|
||||
visibility: visible;
|
||||
}
|
||||
.burgerList {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 30px;
|
||||
margin-top: 0px;
|
||||
color: white;
|
||||
list-style: none;
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
.bItem {
|
||||
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
44
website/appjs.js
Normal 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")
|
||||
}
|
||||
89
website/desc_short.js
Normal file
89
website/desc_short.js
Normal file
@@ -0,0 +1,89 @@
|
||||
|
||||
$(document).ready(function() {
|
||||
let base_url = "http://localhost:8000/";
|
||||
|
||||
function append_element(image_urls, descriptions, title, id) {
|
||||
|
||||
let template = `
|
||||
<div class="wsList hey">
|
||||
<div></div>
|
||||
<img src="${image_urls[0]}" alt="#" class="obrazok_small">
|
||||
<div class="list_item_holder">
|
||||
<div class="title${id}">${title}</div>
|
||||
<div class="short_description">${descriptions[0]}</div>
|
||||
</div>
|
||||
<div id="arrow${id}" class="arrow">▼</div>
|
||||
</div>
|
||||
<!-- Rozšírené malé zobrazenie -->
|
||||
<div id="listExpand${id}" class="listHide">
|
||||
<img src="${image_urls[1]}" alt="#" class="obrazok_big">
|
||||
<div class="text_small">${descriptions[1]}</div>
|
||||
<div class="sensors_small">
|
||||
</div>
|
||||
<div class="info_small"></div>
|
||||
</div>
|
||||
<!-- Veľké zobrazenie -->
|
||||
<div class="big">
|
||||
<div class="imgBig"><img class="obrazok_big" src="${image_urls[1]}" alt="#"></div>
|
||||
<div class="text_big">${descriptions[1]}</div>
|
||||
<div class="sensors_big">
|
||||
</div>
|
||||
<div class="info_big"></div>
|
||||
</div>`;
|
||||
|
||||
$("body").append(template);
|
||||
|
||||
$.get(`${base_url}${id}/sensors`, function(data1) {
|
||||
Object.keys(data1).forEach(function(key) {
|
||||
let value = data1[key];
|
||||
if (key.startsWith("[translate]-")) {
|
||||
key = key.slice(12, key.length);
|
||||
}
|
||||
$(".sensors_small").append(`<p class="sens_style_heat">${key}: ${value}</p>`);
|
||||
$(".sensors_big").append(`<p class="sens_style_heat">${key}: ${value}</p>`);
|
||||
});
|
||||
});
|
||||
|
||||
$(".arrow").click(function() {
|
||||
|
||||
let id = this.id;
|
||||
id = id.slice(id.length-1, id.length);
|
||||
|
||||
$(`#arrow${id}`).toggleClass("mystyle");
|
||||
$(`#listExpand${id}`).toggleClass("expand");
|
||||
id.a();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$.get(`${base_url}devices_list`, function(data) {
|
||||
|
||||
let connected_id = data[0]["connected_id"];
|
||||
let urls = ["", ""];
|
||||
let descriptions = ["", ""];
|
||||
let title = "";
|
||||
let query = [[]];
|
||||
|
||||
for (let i = 1; i < data.length; i++) {
|
||||
let spot_data = data[i];
|
||||
let spot_id = spot_data["ID"]
|
||||
urls = [`${base_url}files/${spot_id}/${spot_data["description"]["photo_s"]}`,
|
||||
`${base_url}files/${spot_id}/${spot_data["description"]["photo_b"]}`];
|
||||
descriptions = [spot_data["description"]["description_s"],
|
||||
spot_data["description"]["description_l"]];
|
||||
title = spot_data["description"]["title"];
|
||||
|
||||
if (spot_id == connected_id) {
|
||||
query[0] = [urls, descriptions, title, parseInt(spot_id)];
|
||||
} else {
|
||||
query.push([urls, descriptions, title, parseInt(spot_id)]);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < query.length; i++) {
|
||||
append_element(query[i][0], query[i][1], query[i][2], query[i][3]);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
BIN
website/header-background.jpg
Normal file
BIN
website/header-background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
website/samsung1.png
Normal file
BIN
website/samsung1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
8
website/test.txt
Normal file
8
website/test.txt
Normal file
@@ -0,0 +1,8 @@
|
||||
sf
|
||||
fsd
|
||||
f
|
||||
sdf
|
||||
sd
|
||||
fsd
|
||||
f
|
||||
sd
|
||||
BIN
website/wikispot-white.png
Normal file
BIN
website/wikispot-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Reference in New Issue
Block a user