diff --git a/christmas.jpg b/christmas.jpg new file mode 100644 index 0000000..58b3c37 --- /dev/null +++ b/christmas.jpg Binary files differ diff --git a/index.html b/index.html index f9960dd..5a576c5 100644 --- a/index.html +++ b/index.html @@ -4,53 +4,62 @@ jsTrr + - +
+
+

: + + +

+

TEXT:

+

RANK: + + + + + + +

+ + + + + + + + +
TimeSTEP
MissTarget
RatioHigh Score
TypesTrr Trial
SpeedSTEP Trial
Score
Comment
-

TEAM: - NAME:

---> -

: - - -

-

TEXT:

-

RANK: - - - - - - -

- - - - - - - - -
TimeSTEP
MissTarget
RatioHigh Score
TypesTrr Trial
SpeedSTEP Trial
Score
Comment
-
- - +
+
+
+
+
+

jsTRR

+

Login + + + +

+
+
+ + diff --git a/jstrr.css b/jstrr.css index f103121..1fe5402 100644 --- a/jstrr.css +++ b/jstrr.css @@ -1,4 +1,65 @@ -body {background: azure;} +body:not(.secret) {/*background-color: rgb(142, 174, 235);*/ + background-color: #F7CA53; + background-image: url(newyear2.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + z-index: 0.1;} +.wrapper{ + text-align: center; + margin: 0 auto; + width: 100%; +} +.wrapper.snow-inner{ + position: relative; +} +/* .snow { + background-color: #fff; + border-radius: 50%; + position: absolute; + animation: animate-snow 10s linear; +} +@keyframes animate-snow { + 0% { + opacity: 0; + top: 0; + } + + 10% { + opacity: 1; + } + + 90% { + opacity: 1; + } + + 100% { + opacity: 0; + top: 100vh; + } +} */ +.pink{ + background-color: #FFBCFF; +} +body:not(.secret) table.summary tr:nth-child(2n+1) th { + background-color: #FFFFB2; +} +body:not(.secret) table.summary tr:nth-child(2n) th { + background-color: #C4FF89; +} +body:not(.secret) table.summary tr:last-child .blue { + background-color: #81d4fa; +} +.red{ + background-color: #FFB2D8; +} +table.summary {margin: 0 auto;} +body:not(.secret) table { + background-color: white; +} +i{ + margin-right: 4px; +} body.secret {background: black; color: white;} div#typing {margin: 1em 1ex; border-top: double cyan 5px;} div#typing pre { @@ -38,7 +99,29 @@ input[name="text"]+button {min-width: 10em;} input[name="text"]:checked+button {background: yellow;} -div.login, div.login2 {padding: 40% 0%;} +/*div.login, div.login2 {padding: 40% 0%;}*/ +div.login{ + /* background-color: rgb(142, 174, 235); */ + background-color: #F7CA53; + background-image: url(newyear.jpg); + background-position: 10% 80%; + background-repeat: no-repeat; + background-size: cover; + width: 100%; +} +div.login-item{ + position: absolute; + left: 50%; top: 50%; + width: 100%; + transform: translate(-50%, -50%); + text-align: center; +} +#loginhead{ + color: black; +} +#prompt{ + color: black; +} div.login2 { opacity: 0; transition: 0.5s; border-radius: 50%; diff --git a/newyear.jpg b/newyear.jpg new file mode 100644 index 0000000..bbf0dc8 --- /dev/null +++ b/newyear.jpg Binary files differ diff --git a/newyear2.jpg b/newyear2.jpg new file mode 100644 index 0000000..c92e33b --- /dev/null +++ b/newyear2.jpg Binary files differ diff --git a/normal.png b/normal.png new file mode 100644 index 0000000..86ad7ef --- /dev/null +++ b/normal.png Binary files differ diff --git a/snow.js b/snow.js new file mode 100644 index 0000000..058b636 --- /dev/null +++ b/snow.js @@ -0,0 +1,22 @@ +window.addEventListener('DOMContentLoaded', ()=> { + const container = document.querySelector('.wrapper'); + + const createSnow = () => { + const snowEl = document.createElement('span'); + snowEl.className = 'snow'; + const minSize = 5; + const maxSize = 10; + const size = Math.random() * (maxSize - minSize) + minSize; + snowEl.style.width = `${size}px`; + snowEl.style.height = `${size}px`; + snowEl.style.left = Math.random() * 100 + '%'; + container.appendChild(snowEl); + + setTimeout(() => { + snowEl.remove(); + }, 3000); + } + + setInterval(createSnow, 100); + }); + \ No newline at end of file diff --git a/snow.png b/snow.png new file mode 100644 index 0000000..b7862d1 --- /dev/null +++ b/snow.png Binary files differ diff --git a/xmas.png b/xmas.png new file mode 100644 index 0000000..83bb89c --- /dev/null +++ b/xmas.png Binary files differ