_
This commit is contained in:
JustSteel
parent
87d435c354
commit
db51def124
15
websites/.vscode/launch.json
vendored
Normal file
15
websites/.vscode/launch.json
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
// Use IntelliSense to learn about possible attributes.
|
||||||
|
// Hover to view descriptions of existing attributes.
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Launch Chrome against localhost",
|
||||||
|
"url": "http://localhost:8080",
|
||||||
|
"webRoot": "${workspaceFolder}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,41 +1,33 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="sk">
|
||||||
<head>
|
<head>
|
||||||
<title>Travellly</title>
|
<title>WikiSpot</title>
|
||||||
<link rel="stylesheet" href="WikiSpotCSS.css">
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
||||||
<meta charset="UTF-8">
|
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<script src="appjs.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<img src="wikispot.png" alt="wikispot" id="logo">
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul id="container">
|
<!-- Navigačná lišta /veľká obrazovka/ -->
|
||||||
<li id="home"><a href="travellly.html">HOME</a></li>
|
<ul class="list">
|
||||||
<li id="about"><a href="http://www.spspb.sk/o-skole.html?page_id=95">O NÁS</a></li>
|
<img src="wikispot-white.png" alt="" class="itemImg">
|
||||||
<li id="project"><a href="http://www.spspb.sk/partneri.html?page_id=1362">O PROJEKTE</a></li>
|
<li class="item" onclick="location.href = 'WikiSpot.html'">DOMOV</li>
|
||||||
<li id="contact"><a href="http://www.spspb.sk/kontakt.html?page_id=91">KONTAKT</a></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()">☰</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>
|
</ul>
|
||||||
<div class="nav">
|
|
||||||
<label for="check" id="bmenu">☰</label>
|
|
||||||
<input type="checkbox" id="check">
|
|
||||||
<table class="menu">
|
|
||||||
<tr><td><a href="#" class="expandable">HOME</a></td></tr>
|
|
||||||
<tr><td><a href="#" class="expandable">ABOUT</a></td></tr>
|
|
||||||
<tr><td><a href="#" class="expandable">PROJECT</a></td></tr>
|
|
||||||
<tr><td><a href="#" class="expandable">CONTACT</a></td></tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<!--<article>
|
|
||||||
<div class="an" class="next" id="android"><a href="http://localhost:8000/files/0/PQ.apk">Android</a></div>
|
|
||||||
</article>
|
|
||||||
<section>
|
|
||||||
<div id="phone" class="next"></div>
|
|
||||||
<div id="ref"></div>
|
|
||||||
<div id="ref2"></div>
|
|
||||||
</section>-->
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,210 +1,84 @@
|
|||||||
/* elements */
|
/* ---------- Základné štýly ---------- */
|
||||||
body{
|
header {
|
||||||
background-color: #00B4D8;
|
background-image: url(header-background.jpg);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-image: url(header-background.jpg);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
|
||||||
header{
|
|
||||||
background-color:#0077B6;
|
|
||||||
padding-bottom: 23px;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
padding-top: 25px;
|
|
||||||
padding-left: 25px;
|
|
||||||
}
|
|
||||||
nav{
|
|
||||||
float: right;
|
|
||||||
position: sticky;
|
|
||||||
}
|
|
||||||
ul{
|
|
||||||
margin: 0;
|
|
||||||
margin-left: 280px;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
padding-top: 50px;
|
|
||||||
padding-bottom: 48px;
|
|
||||||
padding-left: 50px;
|
|
||||||
padding-right: 50px;
|
|
||||||
margin-right: -5px;
|
|
||||||
display: inline-block;
|
|
||||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
|
||||||
font-size: 20px;
|
|
||||||
transition: background-color 0.5s;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#contact{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
li:hover{
|
|
||||||
background-color: rgba(79, 80, 80, 0.356);
|
|
||||||
transition: ease-in-out;
|
|
||||||
transition: background-color 0.5s;
|
|
||||||
|
|
||||||
}
|
|
||||||
a{
|
|
||||||
text-decoration: none;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
label{
|
|
||||||
visibility: collapse;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
/* classes */
|
/* ---------- Navigačná lišta (navbar) ---------- */
|
||||||
.expandable{
|
.list {
|
||||||
visibility: collapse;
|
margin: 0px;
|
||||||
display: block;
|
padding: 1rem 0;
|
||||||
margin-left: 0;
|
display: flex;
|
||||||
padding-top: 10px;
|
justify-content: flex-end;
|
||||||
padding-bottom: 10px;
|
align-items: center;
|
||||||
text-decoration: none;
|
|
||||||
color: black;
|
|
||||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
|
||||||
font-size: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
.an{
|
.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;
|
color: #FFFFFF;
|
||||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||||
font-size: 35px;
|
font-size: 20px;
|
||||||
margin: 0;
|
|
||||||
margin-top: 340px;
|
|
||||||
margin-left: 150px;
|
|
||||||
}
|
}
|
||||||
/* IDs */
|
.list li:hover {
|
||||||
#here{
|
color: chartreuse;
|
||||||
margin-top: 150px;
|
transition: color 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
#phone{
|
.wsImg {
|
||||||
width: 200px;
|
border-radius: 10px;
|
||||||
height: 400px;
|
|
||||||
border: 10px solid grey;
|
|
||||||
border-radius: 5%;
|
|
||||||
background-color: black;
|
|
||||||
margin-left: 150px;
|
|
||||||
margin-top: 150px;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
#ref{
|
.wsImg:first-child {
|
||||||
position: relative;
|
margin-right: auto;
|
||||||
margin-top: 180px;
|
|
||||||
margin-left: -30px;
|
|
||||||
width: 2px;
|
|
||||||
height: 250px;
|
|
||||||
border: 2px solid rgba(79, 80, 80, 0.356);
|
|
||||||
border-radius: 30%;
|
|
||||||
background: rgba(126, 133, 133, 0.356);
|
|
||||||
}
|
}
|
||||||
#ref2{
|
/* ---------- Burger Menu ---------- */
|
||||||
position: relative;
|
.burger {
|
||||||
margin-top: 450px;
|
cursor: pointer;
|
||||||
margin-left: -30px;
|
font-size: 40px;
|
||||||
width:50;
|
color: white;
|
||||||
border: 3px solid rgba(166, 172, 172, 0.39);
|
display: flex;
|
||||||
border-radius: 50%;
|
visibility: collapse;
|
||||||
|
margin-right: 2rem;
|
||||||
|
margin-top: -10px;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
#phone, #ref, #ref2, #android{
|
.burgerList {
|
||||||
display: inline;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
#check{
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
/* responsive */
|
@media (max-width: 800px) {
|
||||||
@media (max-width: 1250px){
|
.item {
|
||||||
ul{
|
display: none;
|
||||||
|
}
|
||||||
|
.burger {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
.burgerList {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 30px;
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
margin-left: 0px;
|
color: white;
|
||||||
}
|
list-style: none;
|
||||||
}
|
|
||||||
@media (max-width: 955px){
|
|
||||||
#check:checked ~ * .expandable{
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
ul{
|
|
||||||
visibility: collapse;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
label{
|
|
||||||
font-size: 40px;
|
|
||||||
float: right;
|
|
||||||
margin-top: -90px;
|
|
||||||
margin-right: 45px;
|
|
||||||
position: relative;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
.expandable{
|
|
||||||
visibility: collapse;
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
margin-left: 400px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: black;
|
|
||||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
.menu{
|
.bItem {
|
||||||
position: relative;
|
margin-top: 10px;
|
||||||
margin-left: -12em;
|
|
||||||
}
|
}
|
||||||
|
.appear {
|
||||||
}
|
display: flex;
|
||||||
@media (max-width: 914px){
|
|
||||||
label{
|
|
||||||
font-size: 40px;
|
|
||||||
float: right;
|
|
||||||
margin-top: -90px;
|
|
||||||
margin-right: 45px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.menu{
|
|
||||||
margin-top: -97px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 860px){
|
|
||||||
label{
|
|
||||||
font-size: 40px;
|
|
||||||
float: right;
|
|
||||||
margin-top: -90px;
|
|
||||||
margin-right: 45px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 840px){
|
|
||||||
label{
|
|
||||||
font-size: 40px;
|
|
||||||
float: right;
|
|
||||||
margin-top: -90px;
|
|
||||||
margin-right: 45px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 692px){
|
|
||||||
label{
|
|
||||||
font-size: 40px;
|
|
||||||
float: right;
|
|
||||||
margin-top: -90px;
|
|
||||||
margin-right: 45px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.menu{
|
|
||||||
margin-top: -217px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 635px){
|
|
||||||
label{
|
|
||||||
font-size: 40px;
|
|
||||||
float: right;
|
|
||||||
margin-top: -90px;
|
|
||||||
margin-right: 45px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 618px){
|
|
||||||
label{
|
|
||||||
font-size: 40px;
|
|
||||||
float: right;
|
|
||||||
margin-top: -90px;
|
|
||||||
margin-right: 45px;
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
33
websites/WikiSpotCon.html
Normal file
33
websites/WikiSpotCon.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<!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()">☰</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>
|
||||||
158
websites/WikiSpotLoc.html
Normal file
158
websites/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>
|
||||||
33
websites/WikiSpotPro.html
Normal file
33
websites/WikiSpotPro.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<!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()">☰</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>
|
||||||
146
websites/WikiSpotWS.html
Normal file
146
websites/WikiSpotWS.html
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
<!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()">☰</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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 2. -->
|
||||||
|
<!-- Malé zobrazenie -->
|
||||||
|
<div class="wsList hey" id="wsList2">
|
||||||
|
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
|
||||||
|
<div class="klol">
|
||||||
|
<div id="hey2">Kniznica</div>
|
||||||
|
<div id="hou2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
|
||||||
|
</div>
|
||||||
|
<div id="arrow2" class="arrow" onclick="onclick2()">▼</div>
|
||||||
|
</div>
|
||||||
|
<!-- Rozšírené malé zobrazenie -->
|
||||||
|
<div id="listExpand2" class="listHide">
|
||||||
|
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
|
||||||
|
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
|
||||||
|
<div>
|
||||||
|
<div class="senzory">Teplota</div>
|
||||||
|
<div id="heat" class="senzory"></div>
|
||||||
|
</div>
|
||||||
|
<div class="info"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Veľké zobrazenie -->
|
||||||
|
<div class="big">
|
||||||
|
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
|
||||||
|
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 3. -->
|
||||||
|
<!-- Malé zobrazenie -->
|
||||||
|
<div class="wsList hey" id="wsList3">
|
||||||
|
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
|
||||||
|
<div class="klol">
|
||||||
|
<div id="hey3">Kniznica</div>
|
||||||
|
<div id="hou3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
|
||||||
|
</div>
|
||||||
|
<div id="arrow3" class="arrow" onclick="onclick3()">▼</div>
|
||||||
|
</div>
|
||||||
|
<!-- Rozšírené malé zobrazenie -->
|
||||||
|
<div id="listExpand3" class="listHide">
|
||||||
|
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
|
||||||
|
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
|
||||||
|
<div>
|
||||||
|
<div class="senzory">Teplota</div>
|
||||||
|
<div id="heat" class="senzory"></div>
|
||||||
|
</div>
|
||||||
|
<div class="info"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Veľké zobrazenie -->
|
||||||
|
<div class="big">
|
||||||
|
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
|
||||||
|
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 4. -->
|
||||||
|
<!-- Malé zobrazenie -->
|
||||||
|
<div class="wsList hey" id="wsList4">
|
||||||
|
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
|
||||||
|
<div class="klol">
|
||||||
|
<div id="hey4">Kniznica</div>
|
||||||
|
<div id="hou4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
|
||||||
|
</div>
|
||||||
|
<div id="arrow4" class="arrow" onclick="onclick4()">▼</div>
|
||||||
|
</div>
|
||||||
|
<!-- Rozšírené malé zobrazenie -->
|
||||||
|
<div id="listExpand4" class="listHide">
|
||||||
|
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
|
||||||
|
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
|
||||||
|
<div>
|
||||||
|
<div class="senzory">Teplota</div>
|
||||||
|
<div id="heat" class="senzory"></div>
|
||||||
|
</div>
|
||||||
|
<div class="info"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Veľké zobrazenie -->
|
||||||
|
<div class="big">
|
||||||
|
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
|
||||||
|
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 5. -->
|
||||||
|
<!-- Malé zobrazenie -->
|
||||||
|
<div class="wsList hey" id="wsList5">
|
||||||
|
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" style="height: 100px;" class="wsImg">
|
||||||
|
<div class="klol">
|
||||||
|
<div id="hey5">Kniznica</div>
|
||||||
|
<div id="hou5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.</div>
|
||||||
|
</div>
|
||||||
|
<div id="arrow5" class="arrow" onclick="onclick5()">▼</div>
|
||||||
|
</div>
|
||||||
|
<!-- Rozšírené malé zobrazenie -->
|
||||||
|
<div id="listExpand5" class="listHide">
|
||||||
|
<img src="http://192.168.1.105:8000/files/0/library.jpg" alt="#" class="constantImg">
|
||||||
|
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
|
||||||
|
<div>
|
||||||
|
<div class="senzory">Teplota</div>
|
||||||
|
<div id="heat" class="senzory"></div>
|
||||||
|
</div>
|
||||||
|
<div class="info"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Veľké zobrazenie -->
|
||||||
|
<div class="big">
|
||||||
|
<img class="obrazok" src="http://192.168.1.105:8000/files/0/library.jpg" alt="#">
|
||||||
|
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus recusandae et repellat saepe modi tenetur provident. Perferendis dolorum odit dolorem delectus consequatur eos, deleniti, pariatur corporis in magnam dolor quam? Consequuntur asperiores provident repellendus itaque tenetur, accusantium aperiam nemo architecto cum magnam amet necessitatibus dolore eaque tempore iusto incidunt nihil voluptatem dolores facilis rem cumque animi perferendis. Error, molestias deserunt.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="desc_short.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
278
websites/app.css
Normal file
278
websites/app.css
Normal file
@ -0,0 +1,278 @@
|
|||||||
|
/* ---------- Základné štýly ---------- */
|
||||||
|
header {
|
||||||
|
background-image: url(header-background.jpg);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-image: url(header-background.jpg);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
/* ---------- 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;
|
||||||
|
}
|
||||||
|
.klol {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.constantImg {
|
||||||
|
grid-area: obrazok;
|
||||||
|
display: flex;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
top: 250px;
|
||||||
|
left: 50px;
|
||||||
|
transition: display 1s 1s;
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
grid-area: obrazok;
|
||||||
|
width: 500px;
|
||||||
|
height: 300px;
|
||||||
|
margin-left: 25px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
grid-area: description;
|
||||||
|
}
|
||||||
|
.senzory {
|
||||||
|
grid-area: senzory;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
grid-area: info;
|
||||||
|
}
|
||||||
|
.listHide {
|
||||||
|
display: none;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
left: 650px;
|
||||||
|
top: 117px;
|
||||||
|
height: 700px;
|
||||||
|
width: 900px;
|
||||||
|
background: royalblue;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.appear {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
/* ---------- Responzívnosť (media tag) ---------- */
|
||||||
|
@media (max-width: 1000px) {
|
||||||
|
.big {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
44
websites/appjs.js
Normal file
44
websites/appjs.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
function onclick1() {
|
||||||
|
var click = document.getElementById("arrow1");
|
||||||
|
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")
|
||||||
|
}
|
||||||
119
websites/desc_short.js
Normal file
119
websites/desc_short.js
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
// fetch("http://192.168.1.105:8000/devices_list")
|
||||||
|
// .then(function(response){
|
||||||
|
// return response.json();
|
||||||
|
// })
|
||||||
|
// .then(function(data){
|
||||||
|
// appendData(data);
|
||||||
|
// })
|
||||||
|
// .catch(function(err){
|
||||||
|
// console.log(err);
|
||||||
|
|
||||||
|
// });
|
||||||
|
// function appendData(data){
|
||||||
|
// console.log(data);
|
||||||
|
// console.log(data[1]["files"][0]);
|
||||||
|
// var myJson = JSON.stringify(data[1]["description"]["description_s"]);
|
||||||
|
// var myJson1 = JSON.stringify(data[1]["description"]["title"]);
|
||||||
|
// var myJson2 = JSON.stringify(data[1]["description"]["description_l"]);
|
||||||
|
// var uJson = myJson.replace(/\"/g, "");
|
||||||
|
// var str = (uJson);
|
||||||
|
// var str_esc = escape(str);
|
||||||
|
// console.log(str_esc + "<br>" + myJson1);
|
||||||
|
// console.log(unescape(str_esc));
|
||||||
|
// var mainContainer = document.getElementById("hou1");
|
||||||
|
// var div = document.createElement("div");
|
||||||
|
// div.setAttribute("id", "hou");
|
||||||
|
// div.innerHTML = unescape(str_esc);
|
||||||
|
|
||||||
|
// mainContainer.appendChild(div);
|
||||||
|
|
||||||
|
// var mainContainer1 = document.getElementById("hey1");
|
||||||
|
// var uJson1 = myJson1.replace(/\"/g, "");
|
||||||
|
// var div1 = document.createElement("div");
|
||||||
|
// div1.setAttribute("id", "hey");
|
||||||
|
// div1.innerHTML = unescape(escape(uJson1));
|
||||||
|
// var uJson1 = myJson1.replace(/\"/g, "");
|
||||||
|
|
||||||
|
// mainContainer1.appendChild(div1);
|
||||||
|
// }
|
||||||
|
$(document).ready(function() {
|
||||||
|
let urls = ["http://192.168.1.105:8000/files/0/library.jpg", "http://192.168.1.105:8000/files/0/library.jpg", "http://192.168.1.105:8000/files/0/library.jpg"];
|
||||||
|
let descriptions = ["here", "there"];
|
||||||
|
let n = 1;
|
||||||
|
function append_element(urls, descriptions, n) {
|
||||||
|
|
||||||
|
let template = `<div class="wsList hey">
|
||||||
|
<div ></div>
|
||||||
|
<img src="${urls[0]}" alt="#" style="height: 100px;" class="wsImg">
|
||||||
|
<div class="klol">
|
||||||
|
<div id="hey1"></div>
|
||||||
|
<div id="hou1"></div>
|
||||||
|
</div>
|
||||||
|
<div id="arrow${n}" class="arrow" onclick="onclick${n}()">▼</div>
|
||||||
|
</div>
|
||||||
|
<!-- Rozšírené malé zobrazenie -->
|
||||||
|
<div id="listExpand${n}" class="listHide">
|
||||||
|
<img src="${urls[1]}" alt="#" class="constantImg">
|
||||||
|
<div class="text">${descriptions[0]}</div>
|
||||||
|
<div>
|
||||||
|
<div class="senzory">Teplota</div>
|
||||||
|
<div id="heat" class="senzory"></div>
|
||||||
|
</div>
|
||||||
|
<div class="info"></div>
|
||||||
|
</div>
|
||||||
|
<!-- Veľké zobrazenie -->
|
||||||
|
<div class="big">
|
||||||
|
<img class="obrazok" src="${urls[2]}" alt="#">
|
||||||
|
<div class="text">${descriptions[1]}</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
$("body").append(template);
|
||||||
|
|
||||||
|
}
|
||||||
|
append_element(urls, descriptions, n);
|
||||||
|
|
||||||
|
$.get("http://192.168.1.105:8000/devices_list", function(data) {
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
var myJson = JSON.stringify(data[1]["description"]["description_s"]);
|
||||||
|
var myJson1 = JSON.stringify(data[1]["description"]["title"]);
|
||||||
|
console.log(myJson);
|
||||||
|
console.log(myJson1);
|
||||||
|
uJson = myJson.replace(/\"/g, "");
|
||||||
|
var str = (uJson);
|
||||||
|
var str_esc = escape(str);
|
||||||
|
console.log(str_esc + "<br>" + myJson);
|
||||||
|
console.log(unescape(str_esc));
|
||||||
|
var main = document.getElementById("hou1");
|
||||||
|
var div = document.createElement("div");
|
||||||
|
div.setAttribute("id", "hou");
|
||||||
|
div.innerHTML = unescape(str_esc);
|
||||||
|
|
||||||
|
main.appendChild(div);
|
||||||
|
|
||||||
|
var sub = document.getElementById("hey1");
|
||||||
|
var uJson1 = myJson1.replace(/\"/g, "");
|
||||||
|
var div1 = document.createElement("div");
|
||||||
|
div1.setAttribute("id", "hey");
|
||||||
|
div1.innerHTML = unescape(escape(uJson1));
|
||||||
|
|
||||||
|
sub.appendChild(div1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
ID = 0;
|
||||||
|
$.get(`http://192.168.1.105:8000/${ID}/sensors`, function(data1) {
|
||||||
|
console.log(data1);
|
||||||
|
var sens = JSON.stringify(data1["teplota"]);
|
||||||
|
console.log(sens);
|
||||||
|
var uSens = sens.replace(/\"/g, "");
|
||||||
|
var heat = document.getElementById("heat");
|
||||||
|
var div2 = document.createElement("div");
|
||||||
|
div2.setAttribute("id", "hot");
|
||||||
|
div2.innerHTML = unescape(escape(uSens));
|
||||||
|
|
||||||
|
heat.appendChild(div2);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Loading…
Reference in New Issue
Block a user