diff --git a/README.md b/README.md index 817afdb..9f76f99 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ -SI16-VLTK -========== +# LEARNING HOW TO WALK WHILE CAT-WALKING -Change me. \ No newline at end of file +eheh diff --git a/index.html b/index.html index a3f58fa..6cd68b0 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,37 @@ - - - - - SI16 - - -hello world - - \ No newline at end of file + + + + + + Learning how to walk while cat-walking + + + + + + + +
+ + + + diff --git a/static/svg/etc_1b.svg b/static/svg/etc_1b.svg new file mode 100644 index 0000000..e15cde1 --- /dev/null +++ b/static/svg/etc_1b.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svg/function_2b.svg b/static/svg/function_2b.svg new file mode 100644 index 0000000..5246724 --- /dev/null +++ b/static/svg/function_2b.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svg/home_1b.svg b/static/svg/home_1b.svg new file mode 100644 index 0000000..0174bc5 --- /dev/null +++ b/static/svg/home_1b.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svg/replacement_2.svg b/static/svg/replacement_2.svg new file mode 100644 index 0000000..7ea05d3 --- /dev/null +++ b/static/svg/replacement_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svg/vernacular-map_sg5.svg b/static/svg/vernacular-map_sg5.svg new file mode 100644 index 0000000..67ffc60 --- /dev/null +++ b/static/svg/vernacular-map_sg5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sticker.js b/sticker.js new file mode 100644 index 0000000..05a12e2 --- /dev/null +++ b/sticker.js @@ -0,0 +1,57 @@ +const informations = document.getElementById("information-list"); +const stickerContainer = document.getElementById("sticker-container"); + +infoList = Array.from(informations.children); +loopIndex = 0; + +let windowWidth; +let windowHeight; + +let palette = ["#9EDAE2", "#9FD3A8", "#F7D8E8", "#F9F5B0", "#FFC496"]; + +window.addEventListener("load", () => { + getSize(); + let color = palette[(palette.length * Math.random()) | 0]; + document.documentElement.style.setProperty("--background", color); +}); + +window.addEventListener("resize", (e) => { + getSize(); +}); + +function getSize() { + windowWidth = stickerContainer.clientWidth; + windowHeight = stickerContainer.clientHeight; +} + +function percentagePosition(e, target) { + let targetRect = target.getBoundingClientRect(); + let x = e.clientX - targetRect.left; + let y = e.clientY - targetRect.top; + return { x: ((x / windowWidth) * 100).toFixed(2), y: ((y / windowHeight) * 100).toFixed(2) }; +} + +window.addEventListener("click", (e) => { + placeSticker(percentagePosition(e, stickerContainer), infoList[loopIndex]); + + // Cringe sorry + if (loopIndex < infoList.length - 1) { + loopIndex++; + } else { + loopIndex = 0; + } +}); + +function placeSticker(position, element) { + let sticker = element.cloneNode(true); + sticker.classList.add("sticker"); + sticker.style.left = position.x + "%"; + sticker.style.top = position.y + "%"; + + sticker.style.transform = ` + translate(-50%, -50%) + rotate(${Math.random() * 40 - 20}deg) + `; + + stickerContainer.appendChild(sticker); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..a70bede --- /dev/null +++ b/style.css @@ -0,0 +1,90 @@ +:root { + --thickness: 1px; + --background: #9fd3a8; + --font: Arial, Helvetica, sans-serif; +} + +html, +body { + margin: 0; + background-color: var(--background); + font-size: 24px; + font-family: var(--font); + height: 100vh; +} + +/* .container { + position: absolute; + left: 50%; + top: 50%; + width: 100%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + margin: 0 auto; + + justify-content: start; + align-items: center; +} + +.about-button { + width: 200px; + height: 200px; + border: var(--thickness) solid currentColor; + background-color: var(--background); + border-radius: 50%; + font-size: 48px; +} + +.about-button:hover { + background-color: white; + cursor: pointer; +} */ + +/* .title, */ + +.info { + display: inline-block; + padding: 8px; + background-color: var(--background); + border: var(--thickness) solid currentColor; + margin: 0; +} + +#sticker-container { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + + z-index: 100; +} + +.sticker { + position: absolute; + user-select: none; + border: var(--thickness) solid currentColor; + border-radius: 16px; + box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); +} + +.sticker.info { + background-color: white; +} + +.informations-list { + display: none; +} + +.sticker.deco { + background-color: white; + min-width: 64px; + min-height: 64px; + padding: 16px; +} + +li { + list-style: none; +}