diff --git a/assets/B.mp3 b/assets/B.mp3 new file mode 100644 index 0000000..aee847a Binary files /dev/null and b/assets/B.mp3 differ diff --git a/assets/C.mp3 b/assets/C.mp3 new file mode 100644 index 0000000..5ab6156 Binary files /dev/null and b/assets/C.mp3 differ diff --git a/assets/D.mp3 b/assets/D.mp3 new file mode 100644 index 0000000..01cd62e Binary files /dev/null and b/assets/D.mp3 differ diff --git a/assets/E.mp3 b/assets/E.mp3 new file mode 100644 index 0000000..26670f2 Binary files /dev/null and b/assets/E.mp3 differ diff --git a/assets/F.mp3 b/assets/F.mp3 new file mode 100644 index 0000000..008c765 Binary files /dev/null and b/assets/F.mp3 differ diff --git a/assets/favicon-16x16.png b/assets/favicon-16x16.png new file mode 100644 index 0000000..d84c7cf Binary files /dev/null and b/assets/favicon-16x16.png differ diff --git a/assets/favicon-32x32.png b/assets/favicon-32x32.png new file mode 100644 index 0000000..eba961c Binary files /dev/null and b/assets/favicon-32x32.png differ diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 0000000..8b7b26e Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/jadoo.png b/assets/jadoo.png new file mode 100644 index 0000000..7caaad5 Binary files /dev/null and b/assets/jadoo.png differ diff --git a/assets/refresh.gif b/assets/refresh.gif new file mode 100644 index 0000000..c1f0a5b Binary files /dev/null and b/assets/refresh.gif differ diff --git a/assets/space.jpg b/assets/space.jpg new file mode 100644 index 0000000..7980b7a Binary files /dev/null and b/assets/space.jpg differ diff --git a/css/ellipse.css b/css/ellipse.css new file mode 100644 index 0000000..c48f8d2 --- /dev/null +++ b/css/ellipse.css @@ -0,0 +1,110 @@ +.wrap { + width: 50%; + height: 50%; + margin: 0; + position: absolute; + -webkit-perspective: 4000px; + perspective: 4000px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + top: 55vh; + left: 15vw; +} + +.circle { + -webkit-filter: blur(1px); + filter: blur(1px); + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + box-sizing: border-box; + opacity: 0; + width: 30vh; + height: 30vh; + border: 1vh solid green; + border-radius: 50%; + position: absolute; + top: 0; + left: 0; + -webkit-animation: spin 20s ease-in-out alternate infinite; + animation: spin 20s ease-in-out alternate infinite; +} + +.circle:nth-of-type(1) { + -webkit-animation-delay: 500ms; + animation-delay: 500ms; +} +.circle:nth-of-type(2) { + -webkit-animation-delay: 1000ms; + animation-delay: 1000ms; +} +.circle:nth-of-type(3) { + -webkit-animation-delay: 1500ms; + animation-delay: 1500ms; +} +.circle:nth-of-type(4) { + -webkit-animation-delay: 2000ms; + animation-delay: 2000ms; +} +.circle:nth-of-type(5) { + -webkit-animation-delay: 2500ms; + animation-delay: 2500ms; +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotateY(0deg) rotateX(0deg); + opacity: 1; + } + 25% { + -webkit-transform: rotateY(180deg) rotateX(360deg); + } + 50% { + -webkit-transform: rotateY(540deg) rotateX(540deg); + } + 75% { + -webkit-transform: rotateY(720deg) rotateX(900deg); + } + 100% { + -webkit-transform: rotateY(900deg) rotateX(1080deg); + opacity: 1; + } +} +@keyframes spin { + 0% { + -webkit-transform: rotateY(0deg) rotateX(0deg); + transform: rotateY(0deg) rotateX(0deg); + opacity: 1; + } + 25% { + -webkit-transform: rotateY(180deg) rotateX(360deg); + transform: rotateY(180deg) rotateX(360deg); + } + 50% { + -webkit-transform: rotateY(540deg) rotateX(540deg); + transform: rotateY(540deg) rotateX(540deg); + } + 75% { + -webkit-transform: rotateY(720deg) rotateX(900deg); + transform: rotateY(720deg) rotateX(900deg); + } + 100% { + -webkit-transform: rotateY(900deg) rotateX(1080deg); + transform: rotateY(900deg) rotateX(1080deg); + opacity: 1; + } +} + +.circle1 { + height: 40vh; + width: 20vh; +} + +.circle2 { + width: 45vh; + height: 25vh; +} + +.circle3 { + height: 10vh; + width: 10vh; +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..fa296de --- /dev/null +++ b/css/main.css @@ -0,0 +1,228 @@ +@import url('https://fonts.googleapis.com/css?family=VT323'); + +body { + pointer-events: none; + cursor: none; + padding: 0; + margin: 0; + text-align: center; + overflow: hidden; +} + +.crt { + letter-spacing: 1px; + font-family: 'VT323', monospace; + color: #95e208; + -webkit-filter: blur(0.5px); + filter: blur(0.5px); + text-transform: uppercase; + font-size: 3vw; +} + +#monitor { + z-index: 2; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + width: 100vw; + height: 100vh; +} + +.content { + white-space: nowrap; + text-align: center; + display: inline-block; +} + +.background { + pointer-events: none; + position: absolute; + left: 0; + top: 0; + display: block; + width: 100%; + height: 100%; +} + +.background { + opacity: .01; +} + +.enter-text { + -webkit-filter: blur(0.6px); + background: black; + padding: 10px 20px 10px 20px; + border: 5px double #95e208; + box-shadow: 1px 1px 1px #95e208; +} + +.background-image { + right: -10px; + bottom: -10px; + top: -10px; + left: -10px; + background-image: url(../assets/space.jpg), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px); + background-size: cover; + background-position: center; + background-blend-mode: overlay; + position: fixed; + -webkit-filter: blur(5px); + display: block; + z-index: 1; +} + +.content { + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + left: 0; + position: fixed; + right: 0; + z-index: 2; +} + +.line { + height: 0.9vh; + background: green; + position: fixed; + transform-origin: 50%; + -webkit-filter: blur(0.15vh); +} + +.vline { + transform: rotate(90deg); + width: 91vh; +} + +.hline { + width: 100vw; + top: 45vh; +} + +.hline1 { + width: 100vw; + top: 4%; +} + +.hline2 { + width: 100vw; + top: 95%; +} + +.prompt { + font-size: 4.5vh; + position: fixed; + bottom: -0.5vh; + left: 1vw; + filter: blur(0.15vh); + font-family: 'VT323', monospace; + animation:pulse 0.55s infinite alternate +} + +@keyframes pulse { + from { color: green; } + to { color: yellow; } +} + +.prompt-key { + color: red; + font-weight: 700; +} + +.sending, .receiving { + position: fixed; + top: 5vh; + filter: blur(0.15vh); +} + +.sending { + left: 5vw; +} + +.receiving { + left: 55vw; +} + +.sea { + position: fixed; + top: 5.5vh; +} + +.sea-left { + transform: rotateX(67deg) rotateZ(-223deg) rotateY(0deg); + left: 10vw; +} + +.sea-right { + transform: rotateX(67deg) rotateZ(-57deg) rotateY(0deg); + left: 60vw; +} + +.header { + position: fixed; + top: 0; + right: 1vh; + text-transform: none; + font-size: 4vh; + filter: blur(0.15vh); +} + +a { + text-decoration: none; + color: #95e208; + cursor: hand; + pointer-events: all; +} + +a:hover { + background-color: #95e208; + color: #161913; +} + +.radar { + width:50%; + height:6px; + background:green; + position: absolute; + top:50%; + transform-origin: 100%; + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); +} + +.radar1 { + transform: rotate(-30deg); +} + +.radar2 { + transform: rotate(90deg); +} + +.radar3 { + transform: rotate(210deg); +} + +.garbage { + filter: blur(0.15vh); + position: fixed; + top: 53vh; + text-align: justify; + margin: 0; +} + +.garbage-left { + left: 50vw; + font-size: 4.5vh; +} + +.garbage-right { + right: 0vw; + font-size: 5vh; +} + +pre { + font-family: 'VT323', monospace; +} + +.nodisplay { + display: none; +} diff --git a/css/wave.css b/css/wave.css new file mode 100644 index 0000000..f2c5951 --- /dev/null +++ b/css/wave.css @@ -0,0 +1,648 @@ + +.sea { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 25vw; + height: 25vw; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transform: rotateX(70deg) rotateZ(35deg); + transform: rotateX(70deg) rotateZ(35deg); +} + +.wave { + filter: blur(0.1vw); + width: 2.5vw; + height: 2.5vw; + background: green; + -webkit-transform: translateZ(0px) rotateX(90deg); + transform: translateZ(0px) rotateX(90deg); + -webkit-transform-origin: top; + transform-origin: top; + margin: -22px 3px; + -webkit-animation: wave 1s ease-in-out infinite alternate; + animation: wave 1s ease-in-out infinite alternate; + opacity: .7; + border-radius: 0 0 2px 2px; +} + +.wave:nth-child(121) { + -webkit-animation-delay: 1.694s; + animation-delay: 1.694s; +} + +.wave:nth-child(120) { + -webkit-animation-delay: 1.68s; + animation-delay: 1.68s; +} + +.wave:nth-child(119) { + -webkit-animation-delay: 1.666s; + animation-delay: 1.666s; +} + +.wave:nth-child(118) { + -webkit-animation-delay: 1.652s; + animation-delay: 1.652s; +} + +.wave:nth-child(117) { + -webkit-animation-delay: 1.638s; + animation-delay: 1.638s; +} + +.wave:nth-child(116) { + -webkit-animation-delay: 1.624s; + animation-delay: 1.624s; +} + +.wave:nth-child(115) { + -webkit-animation-delay: 1.61s; + animation-delay: 1.61s; +} + +.wave:nth-child(114) { + -webkit-animation-delay: 1.596s; + animation-delay: 1.596s; +} + +.wave:nth-child(113) { + -webkit-animation-delay: 1.582s; + animation-delay: 1.582s; +} + +.wave:nth-child(112) { + -webkit-animation-delay: 1.568s; + animation-delay: 1.568s; +} + +.wave:nth-child(111) { + -webkit-animation-delay: 1.554s; + animation-delay: 1.554s; +} + +.wave:nth-child(110) { + -webkit-animation-delay: 1.54s; + animation-delay: 1.54s; +} + +.wave:nth-child(109) { + -webkit-animation-delay: 1.526s; + animation-delay: 1.526s; +} + +.wave:nth-child(108) { + -webkit-animation-delay: 1.512s; + animation-delay: 1.512s; +} + +.wave:nth-child(107) { + -webkit-animation-delay: 1.498s; + animation-delay: 1.498s; +} + +.wave:nth-child(106) { + -webkit-animation-delay: 1.484s; + animation-delay: 1.484s; +} + +.wave:nth-child(105) { + -webkit-animation-delay: 1.47s; + animation-delay: 1.47s; +} + +.wave:nth-child(104) { + -webkit-animation-delay: 1.456s; + animation-delay: 1.456s; +} + +.wave:nth-child(103) { + -webkit-animation-delay: 1.442s; + animation-delay: 1.442s; +} + +.wave:nth-child(102) { + -webkit-animation-delay: 1.428s; + animation-delay: 1.428s; +} + +.wave:nth-child(101) { + -webkit-animation-delay: 1.414s; + animation-delay: 1.414s; +} + +.wave:nth-child(100) { + -webkit-animation-delay: 1.4s; + animation-delay: 1.4s; +} + +.wave:nth-child(99) { + -webkit-animation-delay: 1.386s; + animation-delay: 1.386s; +} + +.wave:nth-child(98) { + -webkit-animation-delay: 1.372s; + animation-delay: 1.372s; +} + +.wave:nth-child(97) { + -webkit-animation-delay: 1.358s; + animation-delay: 1.358s; +} + +.wave:nth-child(96) { + -webkit-animation-delay: 1.344s; + animation-delay: 1.344s; +} + +.wave:nth-child(95) { + -webkit-animation-delay: 1.33s; + animation-delay: 1.33s; +} + +.wave:nth-child(94) { + -webkit-animation-delay: 1.316s; + animation-delay: 1.316s; +} + +.wave:nth-child(93) { + -webkit-animation-delay: 1.302s; + animation-delay: 1.302s; +} + +.wave:nth-child(92) { + -webkit-animation-delay: 1.288s; + animation-delay: 1.288s; +} + +.wave:nth-child(91) { + -webkit-animation-delay: 1.274s; + animation-delay: 1.274s; +} + +.wave:nth-child(90) { + -webkit-animation-delay: 1.26s; + animation-delay: 1.26s; +} + +.wave:nth-child(89) { + -webkit-animation-delay: 1.246s; + animation-delay: 1.246s; +} + +.wave:nth-child(88) { + -webkit-animation-delay: 1.232s; + animation-delay: 1.232s; +} + +.wave:nth-child(87) { + -webkit-animation-delay: 1.218s; + animation-delay: 1.218s; +} + +.wave:nth-child(86) { + -webkit-animation-delay: 1.204s; + animation-delay: 1.204s; +} + +.wave:nth-child(85) { + -webkit-animation-delay: 1.19s; + animation-delay: 1.19s; +} + +.wave:nth-child(84) { + -webkit-animation-delay: 1.176s; + animation-delay: 1.176s; +} + +.wave:nth-child(83) { + -webkit-animation-delay: 1.162s; + animation-delay: 1.162s; +} + +.wave:nth-child(82) { + -webkit-animation-delay: 1.148s; + animation-delay: 1.148s; +} + +.wave:nth-child(81) { + -webkit-animation-delay: 1.134s; + animation-delay: 1.134s; +} + +.wave:nth-child(80) { + -webkit-animation-delay: 1.12s; + animation-delay: 1.12s; +} + +.wave:nth-child(79) { + -webkit-animation-delay: 1.106s; + animation-delay: 1.106s; +} + +.wave:nth-child(78) { + -webkit-animation-delay: 1.092s; + animation-delay: 1.092s; +} + +.wave:nth-child(77) { + -webkit-animation-delay: 1.078s; + animation-delay: 1.078s; +} + +.wave:nth-child(76) { + -webkit-animation-delay: 1.064s; + animation-delay: 1.064s; +} + +.wave:nth-child(75) { + -webkit-animation-delay: 1.05s; + animation-delay: 1.05s; +} + +.wave:nth-child(74) { + -webkit-animation-delay: 1.036s; + animation-delay: 1.036s; +} + +.wave:nth-child(73) { + -webkit-animation-delay: 1.022s; + animation-delay: 1.022s; +} + +.wave:nth-child(72) { + -webkit-animation-delay: 1.008s; + animation-delay: 1.008s; +} + +.wave:nth-child(71) { + -webkit-animation-delay: 0.994s; + animation-delay: 0.994s; +} + +.wave:nth-child(70) { + -webkit-animation-delay: 0.98s; + animation-delay: 0.98s; +} + +.wave:nth-child(69) { + -webkit-animation-delay: 0.966s; + animation-delay: 0.966s; +} + +.wave:nth-child(68) { + -webkit-animation-delay: 0.952s; + animation-delay: 0.952s; +} + +.wave:nth-child(67) { + -webkit-animation-delay: 0.938s; + animation-delay: 0.938s; +} + +.wave:nth-child(66) { + -webkit-animation-delay: 0.924s; + animation-delay: 0.924s; +} + +.wave:nth-child(65) { + -webkit-animation-delay: 0.91s; + animation-delay: 0.91s; +} + +.wave:nth-child(64) { + -webkit-animation-delay: 0.896s; + animation-delay: 0.896s; +} + +.wave:nth-child(63) { + -webkit-animation-delay: 0.882s; + animation-delay: 0.882s; +} + +.wave:nth-child(62) { + -webkit-animation-delay: 0.868s; + animation-delay: 0.868s; +} + +.wave:nth-child(61) { + -webkit-animation-delay: 0.854s; + animation-delay: 0.854s; +} + +.wave:nth-child(60) { + -webkit-animation-delay: 0.84s; + animation-delay: 0.84s; +} + +.wave:nth-child(59) { + -webkit-animation-delay: 0.826s; + animation-delay: 0.826s; +} + +.wave:nth-child(58) { + -webkit-animation-delay: 0.812s; + animation-delay: 0.812s; +} + +.wave:nth-child(57) { + -webkit-animation-delay: 0.798s; + animation-delay: 0.798s; +} + +.wave:nth-child(56) { + -webkit-animation-delay: 0.784s; + animation-delay: 0.784s; +} + +.wave:nth-child(55) { + -webkit-animation-delay: 0.77s; + animation-delay: 0.77s; +} + +.wave:nth-child(54) { + -webkit-animation-delay: 0.756s; + animation-delay: 0.756s; +} + +.wave:nth-child(53) { + -webkit-animation-delay: 0.742s; + animation-delay: 0.742s; +} + +.wave:nth-child(52) { + -webkit-animation-delay: 0.728s; + animation-delay: 0.728s; +} + +.wave:nth-child(51) { + -webkit-animation-delay: 0.714s; + animation-delay: 0.714s; +} + +.wave:nth-child(50) { + -webkit-animation-delay: 0.7s; + animation-delay: 0.7s; +} + +.wave:nth-child(49) { + -webkit-animation-delay: 0.686s; + animation-delay: 0.686s; +} + +.wave:nth-child(48) { + -webkit-animation-delay: 0.672s; + animation-delay: 0.672s; +} + +.wave:nth-child(47) { + -webkit-animation-delay: 0.658s; + animation-delay: 0.658s; +} + +.wave:nth-child(46) { + -webkit-animation-delay: 0.644s; + animation-delay: 0.644s; +} + +.wave:nth-child(45) { + -webkit-animation-delay: 0.63s; + animation-delay: 0.63s; +} + +.wave:nth-child(44) { + -webkit-animation-delay: 0.616s; + animation-delay: 0.616s; +} + +.wave:nth-child(43) { + -webkit-animation-delay: 0.602s; + animation-delay: 0.602s; +} + +.wave:nth-child(42) { + -webkit-animation-delay: 0.588s; + animation-delay: 0.588s; +} + +.wave:nth-child(41) { + -webkit-animation-delay: 0.574s; + animation-delay: 0.574s; +} + +.wave:nth-child(40) { + -webkit-animation-delay: 0.56s; + animation-delay: 0.56s; +} + +.wave:nth-child(39) { + -webkit-animation-delay: 0.546s; + animation-delay: 0.546s; +} + +.wave:nth-child(38) { + -webkit-animation-delay: 0.532s; + animation-delay: 0.532s; +} + +.wave:nth-child(37) { + -webkit-animation-delay: 0.518s; + animation-delay: 0.518s; +} + +.wave:nth-child(36) { + -webkit-animation-delay: 0.504s; + animation-delay: 0.504s; +} + +.wave:nth-child(35) { + -webkit-animation-delay: 0.49s; + animation-delay: 0.49s; +} + +.wave:nth-child(34) { + -webkit-animation-delay: 0.476s; + animation-delay: 0.476s; +} + +.wave:nth-child(33) { + -webkit-animation-delay: 0.462s; + animation-delay: 0.462s; +} + +.wave:nth-child(32) { + -webkit-animation-delay: 0.448s; + animation-delay: 0.448s; +} + +.wave:nth-child(31) { + -webkit-animation-delay: 0.434s; + animation-delay: 0.434s; +} + +.wave:nth-child(30) { + -webkit-animation-delay: 0.42s; + animation-delay: 0.42s; +} + +.wave:nth-child(29) { + -webkit-animation-delay: 0.406s; + animation-delay: 0.406s; +} + +.wave:nth-child(28) { + -webkit-animation-delay: 0.392s; + animation-delay: 0.392s; +} + +.wave:nth-child(27) { + -webkit-animation-delay: 0.378s; + animation-delay: 0.378s; +} + +.wave:nth-child(26) { + -webkit-animation-delay: 0.364s; + animation-delay: 0.364s; +} + +.wave:nth-child(25) { + -webkit-animation-delay: 0.35s; + animation-delay: 0.35s; +} + +.wave:nth-child(24) { + -webkit-animation-delay: 0.336s; + animation-delay: 0.336s; +} + +.wave:nth-child(23) { + -webkit-animation-delay: 0.322s; + animation-delay: 0.322s; +} + +.wave:nth-child(22) { + -webkit-animation-delay: 0.308s; + animation-delay: 0.308s; +} + +.wave:nth-child(21) { + -webkit-animation-delay: 0.294s; + animation-delay: 0.294s; +} + +.wave:nth-child(20) { + -webkit-animation-delay: 0.28s; + animation-delay: 0.28s; +} + +.wave:nth-child(19) { + -webkit-animation-delay: 0.266s; + animation-delay: 0.266s; +} + +.wave:nth-child(18) { + -webkit-animation-delay: 0.252s; + animation-delay: 0.252s; +} + +.wave:nth-child(17) { + -webkit-animation-delay: 0.238s; + animation-delay: 0.238s; +} + +.wave:nth-child(16) { + -webkit-animation-delay: 0.224s; + animation-delay: 0.224s; +} + +.wave:nth-child(15) { + -webkit-animation-delay: 0.21s; + animation-delay: 0.21s; +} + +.wave:nth-child(14) { + -webkit-animation-delay: 0.196s; + animation-delay: 0.196s; +} + +.wave:nth-child(13) { + -webkit-animation-delay: 0.182s; + animation-delay: 0.182s; +} + +.wave:nth-child(12) { + -webkit-animation-delay: 0.168s; + animation-delay: 0.168s; +} + +.wave:nth-child(11) { + -webkit-animation-delay: 0.154s; + animation-delay: 0.154s; +} + +.wave:nth-child(10) { + -webkit-animation-delay: 0.14s; + animation-delay: 0.14s; +} + +.wave:nth-child(9) { + -webkit-animation-delay: 0.126s; + animation-delay: 0.126s; +} + +.wave:nth-child(8) { + -webkit-animation-delay: 0.112s; + animation-delay: 0.112s; +} + +.wave:nth-child(7) { + -webkit-animation-delay: 0.098s; + animation-delay: 0.098s; +} + +.wave:nth-child(6) { + -webkit-animation-delay: 0.084s; + animation-delay: 0.084s; +} + +.wave:nth-child(5) { + -webkit-animation-delay: 0.07s; + animation-delay: 0.07s; +} + +.wave:nth-child(4) { + -webkit-animation-delay: 0.056s; + animation-delay: 0.056s; +} + +.wave:nth-child(3) { + -webkit-animation-delay: 0.042s; + animation-delay: 0.042s; +} + +.wave:nth-child(2) { + -webkit-animation-delay: 0.028s; + animation-delay: 0.028s; +} + +@-webkit-keyframes wave { + from { + height: 8px; + } + to { + height: 40px; + } +} + +@keyframes wave { + from { + height: 8px; + } + to { + height: 40px; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..c2af5dd --- /dev/null +++ b/index.html @@ -0,0 +1,345 @@ + + +
+ ++ uplink = yes + axis. = 40 + inc. = 48 pos + dec = 57 neg + + signal = 80 b ++
+ B:066 + C:067 + D:068 + E:069 + F:070 ++