-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
37 lines (37 loc) · 10.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webhook Handler</title>
<style>
#ajerez{position:absolute;top:5px;right:5px;z-index:9999}#ajerez img{-webkit-box-sizing:border-box;box-sizing:border-box;width:45px;height:45px;border-radius:50%;border:2px solid #7482a5;-webkit-transition:border-radius .2s ease-in-out;-o-transition:border-radius .2s ease-in-out;transition:border-radius .2s ease-in-out}#ajerez img:hover{border-radius:30%}body{background-color:#306d85}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}.sea{overflow:hidden}.sea .title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.sea .title p{font-size:smaller;background-color:#275a6e;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:5px 10px;border-radius:25px}.sea .bubble{position:absolute;width:7px;height:7px;border-radius:50%;background-color:#6bafca;opacity:.9;-webkit-animation:bubble1-h-movement 1s ease-in infinite,bubble1-v-movement .3s ease-in-out infinite alternate,bubble-scale-movement .3s ease-in-out infinite alternate;animation:bubble1-h-movement 1s ease-in infinite,bubble1-v-movement .3s ease-in-out infinite alternate,bubble-scale-movement .3s ease-in-out infinite alternate}.sea .bubble:after{position:absolute;content:"";width:7px;height:7px;border-radius:50%;background-color:#6bafca;opacity:.9}.sea .bubble:after{top:-20;left:100px;width:9px;height:9px}.sea .circle-wrapper{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:-webkit-gradient(linear,left top,left bottom,from(#2c647a),to(#204858));background:-o-linear-gradient(#2c647a,#204858);background:linear-gradient(#2c647a,#204858);width:300px;height:300px;overflow:hidden;z-index:0;border-radius:50%;padding:0 50px 0 50px;border:6px solid #3e8caa}.sea .submarine-wrapper{height:300px;width:300px;padding:30px 50px 30px 150px;margin:0 auto 0 auto;-webkit-animation:diving 3s ease-in-out infinite,diving-rotate 3s ease-in-out infinite;animation:diving 3s ease-in-out infinite,diving-rotate 3s ease-in-out infinite}.sea .submarine-wrapper .submarine-body{width:150px;height:80px;position:absolute;margin-top:50px;left:25px;background-color:#d93a54;border-radius:40px;background:-webkit-gradient(linear,left top,left bottom,from(#d93a54),to(#bc243d));background:-o-linear-gradient(#d93a54,#bc243d);background:linear-gradient(#d93a54,#bc243d)}.sea .submarine-wrapper .submarine-body .light{position:absolute;width:0;height:0;border-style:solid;border-width:0 40px 150px 40px;border-color:transparent transparent #377c98 transparent;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg);top:40px;left:99%}.sea .submarine-wrapper .submarine-body .light:after{content:"";position:absolute;width:20px;height:13px;border-radius:5px;background-color:#d12844;margin-left:-10px}.sea .submarine-wrapper .submarine-body .window{width:37px;height:37px;position:absolute;margin-top:23px;right:18px;background:-webkit-gradient(linear,left top,left bottom,from(#1e4554),to(#183642));background:-o-linear-gradient(#1e4554,#183642);background:linear-gradient(#1e4554,#183642);border-radius:50%;border:3px solid #d93a54}.sea .submarine-wrapper .submarine-body .window:after{content:"";position:absolute;margin-top:3px;margin-left:3px;width:25px;height:25px;border-radius:50%;background-color:transparent;opacity:.8;border-top:3px solid #fff;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.sea .submarine-wrapper .submarine-body .engine{width:30px;height:30px;position:absolute;margin-top:32px;left:53px;background-color:#bc243d;border-radius:50%;border:5px solid #d93a54}.sea .submarine-wrapper .submarine-body .engine:after,.sea .submarine-wrapper .submarine-body .engine:before{position:absolute;content:"";border-radius:2px;background-color:#fff;-webkit-animation:spin .9s linear infinite;animation:spin .9s linear infinite;opacity:.8}.sea .submarine-wrapper .submarine-body .engine:after{top:8px;width:20px;height:4px}.sea .submarine-wrapper .submarine-body .engine:before{left:8px;width:4px;height:20px}.sea .submarine-wrapper .helix{width:30px;height:70px;position:absolute;margin-top:55px;left:0;background-color:#d93a54;border-radius:7px;background:-webkit-gradient(linear,left top,left bottom,from(#d93a54),to(#bc243d));background:-o-linear-gradient(#d93a54,#bc243d);background:linear-gradient(#d93a54,#bc243d)}.sea .submarine-wrapper .helix:after{content:"";position:absolute;margin-top:5px;margin-left:7px;width:17px;height:60px;border-radius:3px;background-color:transparent;opacity:.8;background:-webkit-gradient(linear,left top,left bottom,from(#d93a54),color-stop(50%,#d93a54),color-stop(50%,#e57a8c),to(#e57a8c));background:-o-linear-gradient(top,#d93a54,#d93a54 50%,#e57a8c 50%,#e57a8c);background:linear-gradient(to bottom,#d93a54,#d93a54 50%,#e57a8c 50%,#e57a8c);background-size:100% 20px;-webkit-animation:helix-movement 110ms linear infinite;animation:helix-movement 110ms linear infinite}.sea .submarine-wrapper .hat{width:65px;height:25px;position:absolute;margin-top:26px;left:70px;background-color:#d93a54;border-radius:10px 10px 0 0;background:-webkit-gradient(linear,left top,left bottom,from(#d93a54),to(#d72d49));background:-o-linear-gradient(#d93a54,#d72d49);background:linear-gradient(#d93a54,#d72d49)}.sea .submarine-wrapper .hat .periscope{position:absolute;width:7px;height:20px;background-color:#d93a54;margin-top:-27px;margin-left:32px;border-radius:5px 5px 0 0}.sea .submarine-wrapper .hat .periscope:after,.sea .submarine-wrapper .hat .periscope:before{content:"";position:absolute;width:15px;height:7px;border-radius:5px;background-color:#d93a54}.sea .submarine-wrapper .hat .leds-wrapper{width:53px;height:13px;position:relative;top:7px;left:7px;background-color:#d93a54;border-radius:10px;background:-webkit-gradient(linear,left top,left bottom,from(#b3233a),to(#a21f35));background:-o-linear-gradient(#b3233a,#a21f35);background:linear-gradient(#b3233a,#a21f35)}.sea .submarine-wrapper .hat .leds-wrapper .leds{position:absolute;margin-top:4px;margin-left:7px;width:5px;height:5px;border-radius:50%;background-color:#fff;-webkit-animation:leds-off .5s linear infinite;animation:leds-off .5s linear infinite}.sea .submarine-wrapper .hat .leds-wrapper .leds:after,.sea .submarine-wrapper .hat .leds-wrapper .leds:before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background-color:#fff}.sea .submarine-wrapper .hat .leds-wrapper .leds:after{margin-top:0;margin-left:17px}.sea .submarine-wrapper .hat .leds-wrapper .leds:before{margin-top:0;margin-left:34px}@-webkit-keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes leds-off{100%{opacity:.3}}@keyframes leds-off{100%{opacity:.3}}@-webkit-keyframes helix-movement{100%{background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,#e57a8c),color-stop(#e57a8c),color-stop(#d93a54),color-stop(50%,#d93a54));background:linear-gradient(to bottom,#e57a8c 50%,#e57a8c,#d93a54,#d93a54 50%);background-size:100% 20px}}@keyframes helix-movement{100%{background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,#e57a8c),color-stop(#e57a8c),color-stop(#d93a54),color-stop(50%,#d93a54));background:-o-linear-gradient(top,#e57a8c 50%,#e57a8c,#d93a54,#d93a54 50%);background:linear-gradient(to bottom,#e57a8c 50%,#e57a8c,#d93a54,#d93a54 50%);background-size:100% 20px}}@-webkit-keyframes diving{0%{margin-top:5px}50%{margin-top:15px}100%{margin-top:5px}}@keyframes diving{0%{margin-top:5px}50%{margin-top:15px}100%{margin-top:5px}}@-webkit-keyframes diving-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}75%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes diving-rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}75%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@-webkit-keyframes bubble1-h-movement{0%{margin-left:80%}100%{margin-left:-100%}}@keyframes bubble1-h-movement{0%{margin-left:80%}100%{margin-left:-100%}}@-webkit-keyframes bubble2-h-movement{0%{margin-left:65%}100%{margin-left:-5%}}@keyframes bubble2-h-movement{0%{margin-left:65%}100%{margin-left:-5%}}@-webkit-keyframes bubble1-v-movement{0%{margin-top:115px}100%{margin-top:160px}}@keyframes bubble1-v-movement{0%{margin-top:115px}100%{margin-top:160px}}@-webkit-keyframes bubble2-v-movement{0%{margin-top:115px}100%{margin-top:90px}}@keyframes bubble2-v-movement{0%{margin-top:115px}100%{margin-top:90px}}@-webkit-keyframes bubble-scale-movement{0%{-webkit-transform:scale(1.4);transform:scale(1.4)}100%{-webkit-transform:scale(.9);transform:scale(.9)}}@keyframes bubble-scale-movement{0%{-webkit-transform:scale(1.4);transform:scale(1.4)}100%{-webkit-transform:scale(.9);transform:scale(.9)}}@-webkit-keyframes light-movement{0%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}50%{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}100%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}}@keyframes light-movement{0%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}50%{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}100%{-webkit-transform:rotate(-40deg);transform:rotate(-40deg)}}
</style>
</head>
<body>
<div class="sea">
<div class="title">
<h2>Handler is running</h2>
<p>Send your requests to `/hook`</p>
</div>
<div class="circle-wrapper">
<div class="bubble"></div>
<div class="submarine-wrapper">
<div class="submarine-body">
<div class="window"></div>
<div class="engine"></div>
<div class="light"></div>
</div>
<div class="helix"></div>
<div class="hat">
<div class="leds-wrapper">
<div class="periscope"></div>
<div class="leds"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>