diff --git a/websites/.vscode/launch.json b/websites/.vscode/launch.json new file mode 100644 index 0000000..2ba986f --- /dev/null +++ b/websites/.vscode/launch.json @@ -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}" + } + ] +} \ No newline at end of file diff --git a/websites/WikiSpot.html b/websites/WikiSpot.html index 7e7d51d..6b4f73a 100644 --- a/websites/WikiSpot.html +++ b/websites/WikiSpot.html @@ -1,41 +1,33 @@ - + - Travellly - - + WikiSpot + + +
-
- \ No newline at end of file diff --git a/websites/WikiSpotCSS.css b/websites/WikiSpotCSS.css index d95e3b7..2295435 100644 --- a/websites/WikiSpotCSS.css +++ b/websites/WikiSpotCSS.css @@ -1,210 +1,84 @@ -/* elements */ -body{ - background-color: #00B4D8; +/* ---------- Základné štýly ---------- */ +header { + background-image: url(header-background.jpg); +} +body { + background-image: url(header-background.jpg); 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; } -/* classes */ -.expandable{ - visibility: collapse; - display: block; - margin-left: 0; - padding-top: 10px; - padding-bottom: 10px; - text-decoration: none; - color: black; - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - font-size: 20px; - text-align: center; +/* ---------- Navigačná lišta (navbar) ---------- */ +.list { + margin: 0px; + padding: 1rem 0; + display: flex; + justify-content: flex-end; + align-items: 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; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - font-size: 35px; - margin: 0; - margin-top: 340px; - margin-left: 150px; + font-size: 20px; } -/* IDs */ -#here{ - margin-top: 150px; +.list li:hover { + color: chartreuse; + transition: color 0.2s ease-in-out; } -#phone{ - width: 200px; - height: 400px; - border: 10px solid grey; - border-radius: 5%; - background-color: black; - margin-left: 150px; - margin-top: 150px; - position: relative; +.wsImg { + border-radius: 10px; } -#ref{ - position: relative; - 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); +.wsImg:first-child { + margin-right: auto; } -#ref2{ - position: relative; - margin-top: 450px; - margin-left: -30px; - width:50; - border: 3px solid rgba(166, 172, 172, 0.39); - border-radius: 50%; +/* ---------- Burger Menu ---------- */ +.burger { + cursor: pointer; + font-size: 40px; + color: white; + display: flex; + visibility: collapse; + margin-right: 2rem; + margin-top: -10px; + position: absolute; } -#phone, #ref, #ref2, #android{ - display: inline; - float: left; -} -#check{ +.burgerList { display: none; } -/* responsive */ -@media (max-width: 1250px){ - ul{ +@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; - margin-left: 0px; - } -} -@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; + color: white; + list-style: none; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size: 20px; - text-align: center; } - .menu{ - position: relative; - margin-left: -12em; + .bItem { + margin-top: 10px; } - -} -@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; + .appear { + display: flex; } } \ No newline at end of file diff --git a/websites/WikiSpotCon.html b/websites/WikiSpotCon.html new file mode 100644 index 0000000..6b4f73a --- /dev/null +++ b/websites/WikiSpotCon.html @@ -0,0 +1,33 @@ + + + + WikiSpot + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/websites/WikiSpotLoc.html b/websites/WikiSpotLoc.html new file mode 100644 index 0000000..b2b0f3a --- /dev/null +++ b/websites/WikiSpotLoc.html @@ -0,0 +1,158 @@ + + + + WikiSpot + + + + + + + + + +
+ + + home + + +
+ + + + + +
+
+
+
+
+ wsData1img +
+
+ + +
+
+
+
+
+ wsData2img +
+
+ + + + +
+
+
+
+
+ wsData3img +
+
+ + + + +
+
+
+
+
+ wsData4img +
+
+ + + + +
+
+
+
+
+ wsData5img +
+
+ + diff --git a/websites/WikiSpotPro.html b/websites/WikiSpotPro.html new file mode 100644 index 0000000..6b4f73a --- /dev/null +++ b/websites/WikiSpotPro.html @@ -0,0 +1,33 @@ + + + + WikiSpot + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/websites/WikiSpotWS.html b/websites/WikiSpotWS.html new file mode 100644 index 0000000..13f8ef9 --- /dev/null +++ b/websites/WikiSpotWS.html @@ -0,0 +1,146 @@ + + + + + + + + Flextest + + + + +
+ +
+ + + + + +
+ # +
+
Kniznica
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.
+
+
▼
+
+ +
+ # +
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.
+
+
Teplota
+
+
+
+
+ +
+ # +
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.
+
+ + + + +
+ # +
+
Kniznica
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.
+
+
▼
+
+ +
+ # +
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.
+
+
Teplota
+
+
+
+
+ +
+ # +
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.
+
+ + + + +
+ # +
+
Kniznica
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.
+
+
▼
+
+ +
+ # +
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.
+
+
Teplota
+
+
+
+
+ +
+ # +
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.
+
+ + + + +
+ # +
+
Kniznica
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, numquam facilis aut officia.
+
+
▼
+
+ +
+ # +
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.
+
+
Teplota
+
+
+
+
+ +
+ # +
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.
+
+ + + + + \ No newline at end of file diff --git a/websites/app.css b/websites/app.css new file mode 100644 index 0000000..22f4852 --- /dev/null +++ b/websites/app.css @@ -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; + } +} \ No newline at end of file diff --git a/websites/appjs.js b/websites/appjs.js new file mode 100644 index 0000000..45f618e --- /dev/null +++ b/websites/appjs.js @@ -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") +} \ No newline at end of file diff --git a/websites/desc_short.js b/websites/desc_short.js new file mode 100644 index 0000000..6a027a7 --- /dev/null +++ b/websites/desc_short.js @@ -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 + "
" + 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 = `
+
+ # +
+
+
+
+
▼
+
+ +
+ # +
${descriptions[0]}
+
+
Teplota
+
+
+
+
+ +
+ # +
${descriptions[1]}
+
`; + + $("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 + "
" + 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); +}) + }) + +}) diff --git a/websites/wikispot.png b/websites/wikispot.png deleted file mode 100644 index 10d4fac..0000000 Binary files a/websites/wikispot.png and /dev/null differ