From 6167e1a38769414d9ffc1a8ea7fb45fe3c13f01e Mon Sep 17 00:00:00 2001 From: pexemo <67392584+pexemo@users.noreply.github.com> Date: Tue, 18 May 2021 13:51:19 +0430 Subject: [PATCH] Add files via upload --- index.html | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ main.js | 30 ++++++++++++++++++++ style.css | 42 ++++++++++++++++++++++++++++ 3 files changed, 152 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..b965544 --- /dev/null +++ b/index.html @@ -0,0 +1,80 @@ + + + + + + + صفحه اتللو + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..804dd2a --- /dev/null +++ b/main.js @@ -0,0 +1,30 @@ +const container = document.querySelector('.container'); +const blocks = document.querySelectorAll('.block'); +const nobat = document.querySelector('#nobat'); +let turnblack = false; + +if (window.matchMedia("(orientation: portrait)").matches) { + // you're in PORTRAIT mode + container.style.height = getComputedStyle(container).width; +} else if (matchMedia("(orientation: landscape)").matches) { + // you're in LANDSCAPE mode + container.style.width = getComputedStyle(container).height; +} + +blocks.forEach(e => { + e.addEventListener("click", () => { + if (e.classList.length === 1) { + if (turnblack === true) { + e.classList.add("black"); + turnblack = false; + } else { + e.classList.add("white"); + turnblack = true; + } + nobat.classList.toggle("black"); + } else { + e.classList.toggle("black"); + e.classList.toggle("white"); + } + }) +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c02115d --- /dev/null +++ b/style.css @@ -0,0 +1,42 @@ +html { + background-color: #222; +} +#nobat { + position: fixed; + width: 10px; + height: 10px; + transition: background-color .5s; +} +.container { + display: grid; + background: #b17300; + grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%; + box-sizing: border-box; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.block { + border: 2px solid #ffa500; + box-sizing: border-box; + transition: background-color .5s; +} +@media screen and (orientation:portrait) { + .container { + width: 100%; + height: 100%; + } +} +@media screen and (orientation:landscape) { + .container { + width: auto; + height: 96vh; + } +} +.white { + background-color: #fff; +} +.black { + background-color: #000; +} \ No newline at end of file