diff --git a/AAAAAA EMOTIONAL DAMAGE/image1.jpg b/AAAAAA EMOTIONAL DAMAGE/image1.jpg new file mode 100644 index 0000000..abce7a7 Binary files /dev/null and b/AAAAAA EMOTIONAL DAMAGE/image1.jpg differ diff --git a/AAAAAA EMOTIONAL DAMAGE/index.html b/AAAAAA EMOTIONAL DAMAGE/index.html new file mode 100644 index 0000000..2ad78a2 --- /dev/null +++ b/AAAAAA EMOTIONAL DAMAGE/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + +
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/AAAAAA EMOTIONAL DAMAGE/inwalidacja ale to layout.png b/AAAAAA EMOTIONAL DAMAGE/inwalidacja ale to layout.png new file mode 100644 index 0000000..44b6cae Binary files /dev/null and b/AAAAAA EMOTIONAL DAMAGE/inwalidacja ale to layout.png differ diff --git a/AAAAAA EMOTIONAL DAMAGE/inwalidacja.odt b/AAAAAA EMOTIONAL DAMAGE/inwalidacja.odt new file mode 100644 index 0000000..ce2596a Binary files /dev/null and b/AAAAAA EMOTIONAL DAMAGE/inwalidacja.odt differ diff --git a/AAAAAA EMOTIONAL DAMAGE/script.js b/AAAAAA EMOTIONAL DAMAGE/script.js new file mode 100644 index 0000000..9e2266a --- /dev/null +++ b/AAAAAA EMOTIONAL DAMAGE/script.js @@ -0,0 +1,120 @@ +let card = document.querySelector('.card-container'); + let cardLeft = document.querySelector('.card-left'); + let cardRight = document.querySelector('.card-right'); + let cardLiked = document.querySelector('.card-liked'); + let cardDisliked = document.querySelector('.card-disliked'); + let startX; + let startY; + let currentX; + let currentY; + let dragging = false; + + card.addEventListener('mousedown', function(e) { + startX = e.clientX; + startY = e.clientY; + dragging = true; + card.classList.add('dragging'); + }); + + document.addEventListener('mousemove', function(e) { + if (dragging) { + currentX = e.clientX; + currentY = e.clientY; + let diffX = currentX - startX; + let diffY = currentY - startY; + card.style.transform = 'translate(' + diffX + 'px, ' + diffY + 'px)'; + let leftButton = document.querySelector('.button-dislike'); + let rightButton = document.querySelector('.button-like'); + if (diffX > 0) { + leftButton.style.opacity = 0; + rightButton.style.opacity = diffX / (window.innerWidth / 2); + } else if (diffX < 0) { + rightButton.style.opacity = 0; + leftButton.style.opacity = Math.abs(diffX) / (window.innerWidth / 2); + } + } + }); + + document.addEventListener('mouseup', function(e) { + if (dragging) { + dragging = false; + card.classList.remove('dragging'); + card.style.transform = ''; + let diffX = currentX - startX; + if (diffX > window.innerWidth / 3) { + card.classList.add('card-right'); + cardLiked.style.opacity = 1; + } else if (diffX < -window.innerWidth / 3) { + card.classList.add('card-left'); + cardDisliked.style.opacity = 1; + } else { + card.classList.add('card'); + } + setTimeout(function() { + card.remove(); + let newCard = document.createElement('div'); + newCard.classList.add('card-container'); + let randomNumber = Math.floor(Math.random() * 100); + newCard.innerHTML = ` +
+
+
+
+
+ `; + document.querySelector('#container').appendChild(newCard); + card = document.querySelector('.card-container'); + cardLeft = document.querySelector('.card-left'); + cardRight = document.querySelector('.card-right'); + cardLiked = document.querySelector('.card-liked'); + cardDisliked = document.querySelector('.card-disliked'); + }, 300); + } + }); + + document.querySelector('.button-like').addEventListener('click', function() { + card.classList.add('card-liked'); + setTimeout(function() { + card.remove(); + let newCard = document.createElement('div'); + newCard.classList.add('card-container'); + let randomNumber = Math.floor(Math.random() * 100); + newCard.innerHTML = ` +
+
+
+
+
+ `; + document.querySelector('#container').appendChild(newCard); + card = document.querySelector('.card-container'); + cardLeft = document.querySelector('.card-left'); + cardRight = document.querySelector('.card-right'); +cardLiked = document.querySelector('.card-liked'); +cardDisliked = document.querySelector('.card-disliked'); +}, 300); +}); +document.querySelector('.button-dislike').addEventListener('click', function() { + card.classList.add('card-disliked'); + setTimeout(function() { + card.remove(); + let newCard = document.createElement('div'); + newCard.classList.add('card-container'); + let randomNumber = Math.floor(Math.random() * 100); + newCard.innerHTML = ` +
+
+
+
+
+ `; + document.querySelector('#container').appendChild(newCard); + card = document.querySelector('.card-container'); + cardLeft = document.querySelector('.card-left'); + cardRight = document.querySelector('.card-right'); + cardLiked = document.querySelector('.card-liked'); + cardDisliked = document.querySelector('.card-disliked'); + }, 300); +}); + + diff --git a/AAAAAA EMOTIONAL DAMAGE/style.css b/AAAAAA EMOTIONAL DAMAGE/style.css new file mode 100644 index 0000000..59740e4 --- /dev/null +++ b/AAAAAA EMOTIONAL DAMAGE/style.css @@ -0,0 +1,94 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} + +#container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f0f0; +} + +.card-container { + position: relative; + width: 300px; + height: 400px; + background-color: #fff; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); + overflow: hidden; + cursor: grab; +} + +.card-container:hover { + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); +} + +.card-container:active { + cursor: grabbing; +} + +.card { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + transition: transform 0.3s ease-in-out; +} + +.card-left { + transform: translateX(-200%) rotate(-30deg); + opacity: 0; +} + +.card-right { + transform: translateX(200%) rotate(30deg); + opacity: 0; +} + +.card-liked { + transform: translateX(200%) rotate(30deg); + opacity: 0; +} + +.card-disliked { + transform: translateX(-200%) rotate(-30deg); + opacity: 0; +} + +.buttons { + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 10px; + background-color: rgba(0, 0, 0, 0.4); + color: #fff; + font-size: 24px; + font-weight: bold; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +.card-container:hover .buttons { + opacity: 1; +} + +.button-like { + color: #00ff00; +} + +.button-dislike { + color: #ff0000; +} \ No newline at end of file