diff --git a/lab3/db.json b/lab3/db.json deleted file mode 100644 index f2ae48d..0000000 --- a/lab3/db.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "posts": [ - { - "id": 1, - "title": "json-server", - "author": "typicode" - } - ], - "comments": [ - { - "id": 1, - "body": "some comment", - "postId": 1 - } - ], - "profile": { - "name": "typicode" - } -} \ No newline at end of file diff --git a/lab3/zad10/index.html b/lab3/zad10/index.html new file mode 100644 index 0000000..6d8c76e --- /dev/null +++ b/lab3/zad10/index.html @@ -0,0 +1,25 @@ + + + + + + + + Document + + + +
+
+

Select items

+
+ +
+ + + \ No newline at end of file diff --git a/lab3/zad10/json/produktyA.json b/lab3/zad10/json/produktyA.json new file mode 100644 index 0000000..99ecb4a --- /dev/null +++ b/lab3/zad10/json/produktyA.json @@ -0,0 +1,10 @@ +{ + "Samochody":["Fiat","Mercedes"], + "Hulajnogi":[], + "Soki":["Jupi", "Kubuś", "Hoop"], + "Słodycze":["Czekolada", "Cukierki"], + "Rowery":["Kross", "Merida"], + "Telefony":["Samsung S7", "Iphone"], + "Gry":["League of Legends", "Drakensang Online" ], + "Meble":["Szafa", "Komoda"] +} \ No newline at end of file diff --git a/lab3/zad10/json/produktyB.json b/lab3/zad10/json/produktyB.json new file mode 100644 index 0000000..fe772d4 --- /dev/null +++ b/lab3/zad10/json/produktyB.json @@ -0,0 +1,10 @@ +{ + "Samochody":[], + "Hulajnogi":[], + "Soki":[], + "Słodycze":["Wawel", "Michałki", "Czekolada", "Cukierki"], + "Rowery":["Laguna", "Spider", "Psycho"], + "Telefony":[], + "Gry":["CS:GO", "Tibia", "World of Warcraft", "Assasin's Creed"], + "Meble":["Szafa", "Komoda"] +} \ No newline at end of file diff --git a/lab3/zad10/json/produktyC.json b/lab3/zad10/json/produktyC.json new file mode 100644 index 0000000..e1fe0ef --- /dev/null +++ b/lab3/zad10/json/produktyC.json @@ -0,0 +1,10 @@ +{ + "Samochody":["Mercedes", "Lamborgini", "Ferrari", "Peugeot", "Volkswagen"], + "Hulajnogi":[], + "Soki":["Tymbark", "Caprio"], + "Słodycze":[], + "Rowery":[], + "Telefony":["Motorola", "Nokia", "Xperia"], + "Gry":["7 Days to die"], + "Meble":["Stolik"] +} \ No newline at end of file diff --git a/lab3/zad10/script.js b/lab3/zad10/script.js new file mode 100644 index 0000000..124cfc6 --- /dev/null +++ b/lab3/zad10/script.js @@ -0,0 +1,216 @@ +var previewArray = new Array; + + +async function getData(){ + var data = new Array; + + var res1 = await fetch("json/produktyA.json") + data.push(await res1.json()) + + var res2 = await fetch("json/produktyB.json") + data.push(await res2.json()) + + var res3 = await fetch("json/produktyC.json") + data.push(await res3.json()) + + var dict = {}; + + for(var i = 0; i<3; i++){ + json = data[i]; + for (var key in json){ + if (dict[key] == undefined) + dict[key] = new Array; + for (var el in json[key]){ + if (!dict[key].includes(json[key][el])) + dict[key].push(json[key][el]); + } + } + } + return dict; +} + +function clickHandler(){ + showhideList(this.id); +} + +function categoryIndeterminate(categoryName){ + var checkboxes = document.querySelectorAll("#ucategory_" + categoryName + ">div>input"); + var category = document.querySelector("#category_main_" + categoryName ); + var cnt = checkboxes.length; + var cnt2 = 0; + for (var checkbox of checkboxes){ + if(checkbox.checked) + cnt2++; + + } + if (cnt==cnt2){ + category.checked = true; + category.indeterminate = false; + } + else if (cnt2>0 && cnt2div>input"); + if (this.checked){ + for (var box of checkboxes){ + if (box.checked) + continue + else{ + box.checked = true; + var item = box.id.split("_")[1]; + previewArray.push(item) + } + } + } + if (!this.checked){ + for (var box of checkboxes){ + if (!box.checked) + continue + else{ + box.checked = false; + var item = box.id.split("_")[1]; + const index = previewArray.indexOf(item); + if (index > -1) + previewArray.splice(index, 1); + } + } + } + updatePreview(); +} + +function checkboxHandler(){ + var item = this.id.split("_")[1]; + var categoryName = this.id.split("_")[0]; + categoryIndeterminate(categoryName); + if (item=="main"){ + document.querySelectorAll("#" + this.id.split("_")[2]) + + } + if (this.checked){ + previewArray.push(item); + } + else{ + const index = previewArray.indexOf(item); + if (index > -1) + previewArray.splice(index, 1); + } + updatePreview(); +} + +function updatePreview(){ + var preview = document.getElementById("preview_items"); + preview.textContent = ""; + previewArray.forEach(element => { + preview.textContent += element + ', ' + }); + preview.textContent = preview.textContent.substr(0,preview.textContent.length-2); +} + +async function loadSite(){ + data = await getData(); + Object.keys(data).forEach(function(key) { + buildCategory(data[key], key); + }); + hideUCategories(); + + var arrows = document.getElementsByClassName("hoverable"); + for (let arrow of arrows) + arrow.addEventListener("click", clickHandler); + + var checkboxesSingle = document.querySelectorAll("input[type='checkbox'].singleItem"); + for (let checkbox of checkboxesSingle) + checkbox.addEventListener('change',checkboxHandler); + + var checkboxesWhole = document.querySelectorAll("input[type='checkbox'].wholeCategory"); + for (let checkbox of checkboxesWhole) + checkbox.addEventListener('change',checkboxHandlerWhole); + +} + + + +function buildCategory(array, name){ + var category = document.createElement('div'); + category.classList.add('category'); + + var div1 = document.createElement('div'); + var category_show = document.createElement('span'); + category_show.classList.add('hoverable'); + category_show.textContent = "❯"; + category_show.setAttribute("id", "category_show_" + name); + + var input1 = document.createElement('input'); + input1.setAttribute("type", "checkbox"); + input1.setAttribute("id", "category_main_" + name); + input1.classList.add("wholeCategory") + + var category_name = document.createElement('span'); + category_name.textContent = name; + + div1.appendChild(category_show); + div1.appendChild(input1); + div1.appendChild(category_name); + + + var div2 = document.createElement('div'); + div2.classList.add("ucategory"); + div2.setAttribute("id", "ucategory" + "_" + name); + + array.forEach(element => { + var div3 = document.createElement('div'); + var input2 = document.createElement('input'); + input2.setAttribute("type", "checkbox"); + input2.setAttribute("id",name+"_"+element) + input2.classList.add("singleItem") + + var item_name = document.createElement('span'); + item_name.textContent = element; + + div3.appendChild(input2); + div3.appendChild(item_name); + div2.appendChild(div3); + }); + category.appendChild(div1); + category.appendChild(div2); + + document.querySelector("#left").appendChild(category); + + +} +function hideUCategories(){ + var ucategories = document.getElementsByClassName("ucategory"); + for (let el of ucategories) { + el.classList.add("hidden"); + } +} + +function showhideList(id){ + var id_name = id.substr(14,id.length) + var ucategory = document.getElementById("ucategory_" + id_name); + var arrow = document.getElementById("category_show_" + id_name); + if(ucategory.classList.contains("hidden")) + { + ucategory.classList.remove("hidden"); + arrow.classList.add("rotated"); + return + } + if (!ucategory.classList.contains("hidden")){ + ucategory.classList.add("hidden"); + arrow.classList.remove("rotated"); + return + } + +} + +loadSite(); + + diff --git a/lab3/zad10/style.css b/lab3/zad10/style.css new file mode 100644 index 0000000..514027f --- /dev/null +++ b/lab3/zad10/style.css @@ -0,0 +1,85 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); + +:root { + --darkBlue: hsl(233, 26%, 24%); +} + +*, *::before, *::after { + box-sizing: border-box; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-kerning: auto; + margin: 0; + padding:0; +} + +html { + font-family: 'Inter', sans-serif; +} +body{ + width:100vw; + display:flex; + justify-content: center; + background-color:gray; +} +.container{ + border:2px solid black; + width:50vw; + min-width:400px; + display:flex; + flex-direction: row; + background-color:white; +} + +#left, #right{ + display:flex; + flex-basis:50%; + flex-direction:column; + border:1px solid black; + padding:10px; +} + +span{ + display:inline-block; + margin:2px; + transition: 200ms ease all; + +} +input{ + margin:4px; +} + +span.hoverable:hover{ + cursor:pointer; + user-select: none; +} + +h3{ + text-align: center; + margin-bottom:10px; + border-bottom:2px solid gray; +} +.category{ + display:flex; + flex-direction: column; + transition: 200ms ease all; +} + +.ucategory{ + margin-left:30px; + display:flex; + flex-direction:column; + transition: 200ms ease all; + +} + +.hidden{ + visibility: hidden; + display:none; + transition: 200ms ease all; +} + +.rotated{ + transform: rotate(90deg); +} \ No newline at end of file diff --git a/lab3/Zadanie11/images/animacja-zombie.png b/lab3/zad11/images/animacja-zombie.png similarity index 100% rename from lab3/Zadanie11/images/animacja-zombie.png rename to lab3/zad11/images/animacja-zombie.png diff --git a/lab3/Zadanie11/images/board-bg.jpg b/lab3/zad11/images/board-bg.jpg similarity index 100% rename from lab3/Zadanie11/images/board-bg.jpg rename to lab3/zad11/images/board-bg.jpg diff --git a/lab3/Zadanie11/images/walkingdead.png b/lab3/zad11/images/walkingdead.png similarity index 100% rename from lab3/Zadanie11/images/walkingdead.png rename to lab3/zad11/images/walkingdead.png diff --git a/lab3/zad11/index.html b/lab3/zad11/index.html new file mode 100644 index 0000000..fcadc1f --- /dev/null +++ b/lab3/zad11/index.html @@ -0,0 +1,47 @@ + + + + + + + + Document + + +

+

+

+
+
+

Enter your username

+ + + +

Min 3 characters

+

Max 12 characters

+

Only letters and numbers

+
+
+ +
+
+

You were defeated!

+

Leaderboards

+
    +
+ +
+
+ +
+ +
+ + +
+
+
+ + + \ No newline at end of file diff --git a/lab3/zad11/script.js b/lab3/zad11/script.js new file mode 100644 index 0000000..007e320 --- /dev/null +++ b/lab3/zad11/script.js @@ -0,0 +1,221 @@ +// <--- ZOMBIE FUNCTIONS ---> +function animateZombie(el, speed){ + var offset = 200; //start position for the image slicer + var cur_bgpos = 0; + var cur_pos = 0; + var interval; + + switch(speed){ + case 1: + interval=50; + break; + case 2: + interval=40; + break; + case 3: + interval=30; + break; + case 4: + interval=20; + break; + case 5: + interval=15; + break; + default: + interval=50; + break; + } + + zombieRunTime[el.id] = setInterval ( () => { + el.style.backgroundPosition = cur_bgpos + offset +"px 0px"; + el.style.left = 101 - cur_pos + "vw"; + cur_bgpos -= offset + cur_pos++; + if (cur_bgpos==-1800) + cur_bgpos=0; + if(cur_pos==115){ + el.remove(); + score -= 6; + health -= 1; + updateScore(); + updateHealth(); + if(health <= 0) + gameEnd(); + clearInterval(zombieRunTime[el.id]); + } + } + , interval ); +} + +function spawnZombie(speed, top, size, start_pos){ + var elZombie = document.createElement("div"); + elZombie.classList.add("zombie"); + elZombie.setAttribute("id", idx); + elZombie.addEventListener("click", zombieShot); + elZombie.style.top = 40 + top + "vh"; + elZombie.style.left = 100 + start_pos + "vw"; + elZombie.style.transform = "scale(" + size + ")"; + board.appendChild(elZombie); + idx++; + animateZombie(elZombie, speed); +} + +function generateZombie(){ + var speed = Math.round(Math.random()*5) + var top = Math.round(Math.random()*30); + var size = Math.round(((Math.random()*7+7)/10)*100)/100 + var start_pos = Math.round(Math.random()*20); + spawnZombie(speed,top, size, start_pos); +} +// <--- ZOMBIE FUNCTIONS END ---> + + +// <--- UPDATERS ---> +function updateScore(){ + elScore.textContent=score; +} +function updateHealth(){ + elHealth.textContent = ""; + for(var i = 0; i + + +// <--- HANDLERS ---> +function boardShot(){ + score -= 6; + updateScore(); +} +function zombieShot(){ + score += 18; + updateScore(); + clearInterval(zombieRunTime[this.id]); + this.remove(); +} + +function startgameHandler(){ + var form = document.getElementById("username"); + var enteredUsername = form.value; + if(!form.checkValidity()) + return + elUserMenu.style.transform = "translateY(-200%)"; + elUserName.textContent= enteredUsername; + userName = enteredUsername; + gameStart(); +} +function startgame2Handler(){ + elHs.style.transform = "translateY(-200%)"; + gameStart(); +} + +function followcursor(e){ + mouseCursor.style.top = e.pageY + "px"; + mouseCursor.style.left = e.pageX + "px"; +} +// <--- HANDLERS END---> + +// <--- GAME ---> +function gameEnd(){ + clearInterval(gameRunning); + Object.keys(zombieRunTime).forEach(function(key) { + clearInterval(zombieRunTime[key]); + }); + board.removeEventListener("click", boardShot); + window.removeEventListener("mousemove", followcursor) + document.body.style.cursor="default"; + highscoresPrompt(); +} +function gameStart(){ + health = 3; + score = 0; + idx = 0; + updateHealth(); + updateScore(); + document.body.style.cursor="none"; + board.addEventListener("click", boardShot); + window.addEventListener("mousemove", followcursor) + var zombies = document.querySelectorAll("div.zombie"); + for (var i = 0; i < zombies.length; i++) + zombies[i].remove(); + gameRunning = setInterval ( () => { + generateZombie(); + } + , 500); +} + +function startGame(){ + elUserMenu.style.transform = "translateY(0%)"; + document.getElementById("startgame").addEventListener("click",startgameHandler); +} +// <--- GAME END---> + +// <--- UTILITY ---> +function cmpFn(a,b){ + if (a["score"] + +// <--- ASYNC FUNCTIONS ---> +async function highscoresPrompt(){ + elHs.style.transform = "translateY(0%)"; + var data = await fetch("https://jsonblob.com/api/jsonBlob/912090813069279232"); + var json = await data.json(); + updateHighscores(json); + document.getElementById("startgame2").addEventListener("click",startgame2Handler); +} + +async function updateHighscores(json){ + data = json["highscores"]; + data.push({"name": userName,"score":score}); + data = data.sort(cmpFn); + var entries = document.querySelectorAll("#hs-list>li"); + for (var i = 0; i < entries.length; i++) { + entries[i].remove(); + } + var hsList = document.querySelector("#hs-list"); + for (var i = 0; i < data.length; i++){ + if (i==7) + break; + var entry = document.createElement("li"); + entry.textContent = data[i]["name"] + " - " + data[i]["score"]; + hsList.appendChild(entry); + } + await sendScore("https://jsonblob.com/api/jsonBlob/912090813069279232", json); +} + +async function sendScore(url = '', data = {}) { + const response = await fetch(url, { + method: 'PUT', + mode: 'cors', + cache: 'no-cache', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + }); + return response.json(); +} +// <--- ASYNC FUNCTIONS END ---> + +// <--- GAME VARIABLES ---> +var idx = 0; +var board = document.querySelector("#board"); +var zombieRunTime = {}; +var elScore = document.querySelector("#score"); +var elHealth = document.querySelector("#health"); +var elUserMenu = document.querySelector("#usernameprompt-container"); +var elUserName = document.querySelector("#name"); +var elHs = document.querySelector("#hs-container"); +var userName = ""; +var score = 0; +var health = 3; +var gameRunning; +var mouseCursor = document.querySelector("#customcursor"); +// <--- GAME VARIABLES END ---> + +// <--- START GAME ---> +startGame(); \ No newline at end of file diff --git a/lab3/zad11/style.css b/lab3/zad11/style.css new file mode 100644 index 0000000..7b946a7 --- /dev/null +++ b/lab3/zad11/style.css @@ -0,0 +1,177 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); + +:root { + --darkBlue: hsl(233, 26%, 24%); +} + +*, *::before, *::after { + box-sizing: border-box; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-kerning: auto; + margin: 0; + padding:0; +} + +html { + font-family: 'Inter', sans-serif; + +} + +body{ + width:100%; + height:100%; + background-image: url(images/board-bg.jpg); + overflow:hidden; +} +#score-container, #name-container, #health-container{ + width:100%; + position:absolute; + top:0; + left:0; +} +p#score, p#name, p#health{ + color:white; + font-weight: bold; + font-size:72px; + user-select: none; +} + +p#score{ + text-align:right; +} + +p#name{ + text-align:center; +} + +p#health{ + text-align:left; +} + +#board{ + position:relative; + display:flex; + height:100vh; + min-height:800px; + overflow:hidden; +} + +.zombie{ + position:absolute; + width:200px; + height:312px; + background: url(images/walkingdead.png) 0px 0px; +} + + +#customcursor{ + position:absolute; + top:0; + width:5rem; + height:5rem; + border:4px solid rgba(255, 255, 255, 0.8); + border-radius:50%; + display:flex; + align-items: center; + justify-content: center; + transform: translate(-50%,-50%); + pointer-events: none; + top:-150%; +} + +#dot{ + position:absolute; + width:1rem; + height:1rem; + border-radius:50%; + background-color:red; + pointer-events: none; + +} + +.containerpurple{ + width:100%; + height:100%; + position:absolute; + top:0; + left:0; + display:flex; + justify-content: center; + align-items:center; + transform:translateY(-200%); + transition:500ms ease all; + z-index:2; +} + +.inner{ + position:absolute; + width:70vw; + background-color: rgba(105, 67, 150, 0.9); + border-radius: 10px; + border: 2px solid black; + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1{ + font-size:4rem; + text-align: center; + margin:1rem; +} + +h2{ + font-size:3rem; + text-align: center; + margin:1rem; + border-bottom:2px solid black; +} +input#username{ + font-size: 3rem; + text-align:center; +} + +button#startgame2{ + font-size:2rem; +} + +button{ + font-size:3rem; + background-color:rgb(0, 204, 102); + padding:2rem; + border-radius: 40px; + border: 0px; + margin:1rem; + transition:300ms ease all; + +} +button:hover{ + cursor:pointer; + background-color:rgb(0, 255, 128); + transition:300ms ease all; +} + +button:active{ + outline:5px solid green; + background-color:rgb(98, 253, 175); +} + + +@media screen and (max-width: 700px){ + h1{ + font-size:3rem; + } + + h2{ + font-size:2rem; + } + p#score, p#name, p#health{ + font-size:32px; + } + input#username{ + font-size: 1rem; + } +} \ No newline at end of file diff --git a/lab3/zad9/img/monkey1.jpg b/lab3/zad9/img/monkey1.jpg new file mode 100644 index 0000000..2cc6eaf Binary files /dev/null and b/lab3/zad9/img/monkey1.jpg differ diff --git a/lab3/zad9/img/monkey2.png b/lab3/zad9/img/monkey2.png new file mode 100644 index 0000000..b205e8a Binary files /dev/null and b/lab3/zad9/img/monkey2.png differ diff --git a/lab3/zad9/img/monkey3.png b/lab3/zad9/img/monkey3.png new file mode 100644 index 0000000..88571af Binary files /dev/null and b/lab3/zad9/img/monkey3.png differ diff --git a/lab3/zad9/img/monkey4.webp b/lab3/zad9/img/monkey4.webp new file mode 100644 index 0000000..7c318fb Binary files /dev/null and b/lab3/zad9/img/monkey4.webp differ diff --git a/lab3/zad9/img/monkey5.jpg b/lab3/zad9/img/monkey5.jpg new file mode 100644 index 0000000..601ee14 Binary files /dev/null and b/lab3/zad9/img/monkey5.jpg differ diff --git a/lab3/zad9/index.html b/lab3/zad9/index.html new file mode 100644 index 0000000..b8f24cb --- /dev/null +++ b/lab3/zad9/index.html @@ -0,0 +1,31 @@ + + + + + + + + Document + + + +
+

Wizytówki naszych pracowników

+
+ +

Małpa

+

Małpa

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero nam, dolorum magnam error non fugit. Deserunt beatae natus pariatur dolor facere quidem, eaque explicabo, exercitationem adipisci labore quas, rerum quia suscipit cumque. Vel laboriosam ad nobis commodi est aperiam natus veniam suscipit. A magni accusamus quibusdam dolores, eaque vel maiores similique id laudantium ab sapiente culpa iure consectetur corrupti fugiat, nam aliquid in quas corporis, minus hic aut recusandae? Accusantium ipsum et, soluta neque quo aliquid quas impedit autem maxime!

+
+ 🡸 + 🡺 +
+ +
+
+

+ + + + + diff --git a/lab3/zad9/pracownicy.json b/lab3/zad9/pracownicy.json new file mode 100644 index 0000000..a97c190 --- /dev/null +++ b/lab3/zad9/pracownicy.json @@ -0,0 +1,34 @@ +{ + "pracownicy":[ + { + "name": "1 Marcin Majkut", + "position": "Full Stack Web Developer", + "img": "monkey1.jpg", + "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nulla ad ipsam eveniet vitae ut modi officia autem odio ipsa, sequi dicta et iusto nisi, sapiente aperiam rerum obcaecati error, deleniti incidunt voluptate explicabo aliquid itaque! Consectetur, explicabo earum ducimus quia numquam nobis, quae corrupti, quam nisi voluptas illum vitae ipsa minima aliquam praesentium quo? Laboriosam, culpa, natus corporis nihil doloribus asperiores ipsa id impedit, repudiandae et a quos cumque perferendis aspernatur sequi reiciendis hic. Vitae veniam soluta nisi voluptatibus?" + }, + { + "name": "2 Robert Lewandowski", + "position": "Marketing Menager", + "img": "monkey2.png", + "description": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed obcaecati, maxime eligendi dolore consequatur facere odit ipsum eos iste ut in laborum quibusdam saepe iusto, nihil error asperiores unde corrupti recusandae consectetur veritatis eum, nemo enim non! Sed beatae exercitationem provident ex distinctio dicta officia et molestiae porro aliquid vel aperiam ducimus commodi ratione unde voluptatum obcaecati iure, vitae itaque earum quo. Dolore nesciunt deleniti iste ipsa recusandae possimus saepe, suscipit earum cum ea quae obcaecati sint ad consectetur voluptas!" + }, + { + "name": "3 Mikołaj Wielgos", + "position": "Full Time Clown", + "img": "monkey3.png", + "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, beatae cum eveniet ratione est ducimus numquam veniam vitae maiores fugiat explicabo dolores, repellendus, reiciendis voluptatem corporis quisquam odio error voluptates ut itaque repellat exercitationem! Recusandae fugiat, quos harum aspernatur voluptatem mollitia laborum sapiente illo sint asperiores assumenda vel impedit inventore quisquam, error illum facere repellat, architecto nostrum quis vitae? Pariatur blanditiis sed incidunt dolores ab, sapiente illum asperiores quae deserunt quos amet mollitia nulla optio minima, saepe aspernatur a labore." + }, + { + "name": "4 Andrzej Duda", + "position": "President", + "img": "monkey4.webp", + "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam natus accusantium quos exercitationem nihil quam quaerat iste, praesentium maiores laboriosam autem voluptatum ipsum labore tempora atque cumque inventore doloremque assumenda consequatur dolor maxime alias. Animi cumque quod vel corporis laborum repellat aliquid iste, aliquam, necessitatibus, delectus qui sapiente! Cum expedita nesciunt aperiam omnis voluptates ea consectetur optio, natus molestias perferendis! Et similique temporibus ipsam earum, voluptatibus quod unde dolores labore a error laboriosam, hic eius ipsum iure, minus porro distinctio." + }, + { + "name": "5 Felix Lengyel", + "position": "Streamer", + "img": "monkey5.jpg", + "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum, pariatur assumenda consequatur sapiente, veritatis id blanditiis aperiam adipisci, facere doloribus in necessitatibus. Nemo, accusamus incidunt! Nulla animi dolores libero delectus, nesciunt dicta assumenda aperiam quia corrupti voluptas, fugiat sequi? Adipisci nihil dignissimos quas blanditiis dolor cupiditate exercitationem. Cumque totam nam aliquam, accusantium officiis aperiam voluptates sapiente dicta. Magnam, fugit debitis! Aliquid incidunt, doloribus facere blanditiis possimus et veritatis, omnis odit non eum quaerat placeat neque, quo dignissimos nesciunt architecto officiis." + } + ] +} \ No newline at end of file diff --git a/lab3/zad9/script.js b/lab3/zad9/script.js new file mode 100644 index 0000000..f612ba3 --- /dev/null +++ b/lab3/zad9/script.js @@ -0,0 +1,50 @@ +async function getJson(){ + var res = await fetch("pracownicy.json"); + var json = await res.json(); + return json; +} + +function loadSlide(id, data){ + var elName = document.querySelector("#name"); + var elPos = document.querySelector("#position"); + var elDesc = document.querySelector("#info"); + var elImg = document.querySelector("#photo"); + + var name = data[id].name; + var pos = data[id].position; + var desc = data[id].description; + var img = data[id].img; + + elName.textContent = name; + elPos.textContent = pos; + elDesc.textContent = desc; + elImg.srcset = "img/" + img; + + +} +var data; +var id = 0; + +async function loadSite(){ + var data = await getJson(); + data = data.pracownicy; + loadSlide(0,data); + document.querySelector("#left").addEventListener('click', function(event) { + id--; + loadSlide(id%data.length, data); + } ) + + document.querySelector("#right").addEventListener('click', function(event) { + id++; + loadSlide(id%data.length, data); + } ) + + document.querySelector("#random").addEventListener('click', function(event) { + id = Math.round(Math.random()*data.length); + document.querySelector("#rolled").textContent="Psst! Wylosowałeś " + (id%data.length+1); + loadSlide(id%data.length,data); + }) +} + +loadSite(); + diff --git a/lab3/zad9/style.css b/lab3/zad9/style.css new file mode 100644 index 0000000..8dfcd7e --- /dev/null +++ b/lab3/zad9/style.css @@ -0,0 +1,150 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); + +:root { + --darkBlue: hsl(233, 26%, 24%); +} + +*, +*::before, +*::after { + box-sizing: border-box; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-kerning: auto; + margin: 0; + padding: 0; +} + +html { + font-family: 'Inter', sans-serif; +} + +body { + background-color: lightgray; + display: flex; + width: 100vw; + align-items: center; + justify-content: center; + flex-direction: column; +} + +h1 { + position: relative; + margin:30px; +} + +h1::after { + content: ''; + display: block; + position: absolute; + left: 25%; + top: 120%; + width: 240px; + height: 5px; + background-color: blue; + text-align: center; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + +} + +img { + border-radius: 50%; + height: 128px; + width: 128px; + margin: 20px; +} + +h3 { + letter-spacing: 2px; + margin-bottom: 5px; +} + +h4 { + color: lightskyblue; + font-size: 16px; + font-style: italic; +} + +p { + text-align: center; + margin: 20px; +} +p#rolled{ + color:gray; + +} +button#random { + margin: 20px; + margin-top: 5px; + background-color: lightskyblue; + border: 2px solid lightblue; + padding: 6px; + border-radius: 10px; + cursor: pointer; + transition: 0.3s ease all; + -webkit-user-select: none; + /* Safari */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* IE10+/Edge */ + user-select: none; + /* Standard */ +} + +button#random:active { + background-color: green; +} + +button#random:hover { + letter-spacing: 1.3px; + transition: 0.3s ease all; + border: 2px solid green; +} + +span { + display: inline-block; + color: lightskyblue; + transform: translateX(0px); + transition: 0.3s ease all; + font-size: 20px; + margin: 5px; + -webkit-user-select: none; + /* Safari */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* IE10+/Edge */ + user-select: none; + /* Standard */ +} + +span:hover { + cursor: pointer; +} + +span#left:hover { + transform: translateX(-5px); +} + +span#right:hover { + transform: translateX(5px); +} + +.slide-container { + display: flex; + flex-direction: column; + align-items: center; + min-width: 250px; + width: 30vw; + background-color: rgb(243, 243, 243); + border-radius: 5px; +} \ No newline at end of file diff --git a/preset.css b/preset.css index 0ab5b15..a89e715 100644 --- a/preset.css +++ b/preset.css @@ -1,19 +1,19 @@ -* { +@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); + +:root { + --darkBlue: hsl(233, 26%, 24%); +} + +*, *::before, *::after { box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; + margin: 0; + padding:0; } html { - font-size: 10pt; - line-height: 1.4; - font-weight: 400; - font-family: 'Source Sans Pro', sans-serif; - -webkit-text-size-adjust: 100%; + font-family: 'Inter', sans-serif; } - -body { - margin: 0; -} \ No newline at end of file