From ac3999186135b16af3d21bd6da554315100b889a Mon Sep 17 00:00:00 2001 From: Parsa Date: Tue, 14 Sep 2021 20:09:36 +0430 Subject: [PATCH] Add files via upload --- index.html | 53 +++++++++++--------- script.js | 145 +++++++++++++++++++++++++++++++++++++++++++++++------ style.css | 60 ++++++++++++++-------- 3 files changed, 199 insertions(+), 59 deletions(-) diff --git a/index.html b/index.html index 892d730..5e0eb6c 100644 --- a/index.html +++ b/index.html @@ -14,35 +14,40 @@ - + +
-
-

Player 1

-

43

-
-

Current

-

0

-
-
- -
-

Player 2

-

24

-
-

Current

-

0

-
-
- - Playing dice - - - - +
+

بازیکن اول

+

0

+
+

امتیاز

+

0

+
+
+ +
+

بازیکن دوم

+

0

+
+

امتیاز

+

0

+
+
+ + Playing dice + + + +
+ + + + diff --git a/script.js b/script.js index 9a08006..7eb04d8 100644 --- a/script.js +++ b/script.js @@ -1,19 +1,24 @@ 'use strict'; // Selecting elements -const player0El = document.querySelector('.player--0'); -const player1El = document.querySelector('.player--1'); -const score0El = document.querySelector('#score--0'); -const score1El = document.getElementById('score--1'); -const current0El = document.getElementById('current--0'); -const current1El = document.getElementById('current--1'); +const + player0El = document.querySelector('.player--0'), + player1El = document.querySelector('.player--1'), + score0El = document.querySelector('#score--0'), + score1El = document.getElementById('score--1'), + current0El = document.getElementById('current--0'), + current1El = document.getElementById('current--1'), -const diceEl = document.querySelector('.dice'); -const btnNew = document.querySelector('.btn--new'); -const btnRoll = document.querySelector('.btn--roll'); -const btnHold = document.querySelector('.btn--hold'); + diceEl = document.querySelector('.dice'), + btnNew = document.querySelector('.btn--new'), + btnRoll = document.querySelector('.btn--roll'), + btnHold = document.querySelector('.btn--hold'); -let scores, currentScore, activePlayer, playing; +let + scores, + currentScore, + activePlayer, + playing; // Starting conditions const init = function () @@ -62,9 +67,7 @@ btnRoll.addEventListener('click', function () { // Add dice to current score currentScore += dice; - document.getElementById( - `current--${activePlayer}` - ).textContent = currentScore; + document.getElementById(`current--${activePlayer}`).textContent = currentScore; } else // Switch to next player @@ -87,8 +90,8 @@ btnHold.addEventListener('click', function () if (scores[activePlayer] >= 100) { // Finish the game - playing = false; diceEl.classList.add('hidden'); + playing = false; document .querySelector(`.player--${activePlayer}`) @@ -104,3 +107,115 @@ btnHold.addEventListener('click', function () }); btnNew.addEventListener('click', init); + + +const divParticlesJS = document.querySelector('#particles-js'); + +if (divParticlesJS) + particlesJS("particles-js", + { + "particles": { + "number": { + "value": 100, + "density": { + "enable": true, + "value_area": 1200 + } + }, + "color": { + "value": "#ffffff" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#000000" + }, + "polygon": { + "nb_sides": 5 + }, + }, + "opacity": { + "value": 0.3, + "random": false, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 3, + "random": true, + "anim": { + "enable": false, + "speed": 40, + "size_min": 0.1, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 150, + "color": "#ffffff", + "opacity": 0.4, + "width": 1 + }, + "move": { + "enable": true, + "speed": 6, + "direction": "none", + "random": false, + "straight": false, + "out_mode": "out", + "bounce": false, + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": true, + "mode": "grab" + }, + "onclick": { + "enable": true, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 180, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 200, + "duration": 0.4 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true + } + ); \ No newline at end of file diff --git a/style.css b/style.css index 01fbe08..f9ea3cf 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap'); * { @@ -15,11 +15,11 @@ html body { - font-family: 'Nunito', sans-serif; + font-family: 'Lalezar', sans-serif; font-weight: 400; height: 100vh; color: #333; - background-image: linear-gradient(to top left, #48aeff 0%, #2e41bf 100%); + background-image: linear-gradient(to top left, #033c93 0%, #2e41bf 100%); display: flex; align-items: center; justify-content: center; @@ -28,19 +28,39 @@ body /* LAYOUT */ main { - position: relative; - width: 100rem; + background: rgba( 255, 255, 255, 0.6 ); + box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); + backdrop-filter: blur( 4px ); + -webkit-backdrop-filter: blur( 4px ); + position: absolute; + width: 110rem; height: 60rem; - background-color: rgba(255, 255, 255, 0.35); - backdrop-filter: blur(200px); - filter: blur(); - box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25); - border-radius: 9px; + border-radius: 25px; overflow: hidden; display: flex; transform: scale(1.2); } +.my-link +{ + border-radius: 50rem; + width: 70px; + height: 70px; + background: white; + box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.3 ); + display: flex; + justify-items: center; + align-items: center; + justify-content: center; + margin: auto; + color: #2e41bf; + font-size: 22px; + text-decoration: none; + position: absolute; + bottom: 20px; + right: 20px; +} + .player { flex: 50%; @@ -57,7 +77,6 @@ main position: relative; font-size: 4rem; text-transform: uppercase; - letter-spacing: 1px; word-spacing: 2px; font-weight: 300; margin-bottom: 1rem; @@ -69,6 +88,9 @@ main font-weight: 300; color: #3a73dc; margin-bottom: auto; + background: -webkit-linear-gradient(50deg, #3c6fcf, #183d81); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } .player--active @@ -91,9 +113,9 @@ main .current { - background-color: #48aeff; + background-color: rgba(0, 0, 0, 0.055); opacity: 0.8; - border-radius: 9px; + border-radius: 25px; color: #fff; width: 65%; padding: 2rem; @@ -106,7 +128,7 @@ main text-transform: uppercase; margin-bottom: 1rem; font-size: 1.7rem; - color: #ddd; + color: #f1f1f1; } .current-score @@ -121,7 +143,6 @@ main left: 50%; transform: translateX(-50%); color: #444; - background: none; border: none; font-family: inherit; font-size: 1.8rem; @@ -129,17 +150,16 @@ main cursor: pointer; font-weight: 400; transition: all 0.2s; - background-color: white; - background-color: rgba(255, 255, 255, 0.6); + background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(10px); - padding: 0.7rem 2.5rem; - border-radius: 50rem; + padding: 0.7rem 1.2rem; + border-radius: 1.5rem; box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1); } .btn:hover { - background-color: rgba(255, 255, 255, 0.75); + background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.2); }