mirror of https://github.com/coddrago/Heroku
Move stylesheets from web to static, replace avatar, fix some shit
hikari.ftg
parent
c5e7cff689
commit
6b96d4334f
|
|
@ -52,7 +52,7 @@ logger = logging.getLogger(__name__)
|
|||
|
||||
photo = io.BytesIO(
|
||||
requests.get(
|
||||
"https://github.com/hikariatama/Hikka/raw/master/hikka/bot_avatar.png"
|
||||
"https://github.com/hikariatama/Hikka/raw/master/assets/bot_pfp.png"
|
||||
).content
|
||||
)
|
||||
photo.name = "avatar.png"
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@ logger = logging.getLogger(__name__)
|
|||
|
||||
|
||||
@loader.tds
|
||||
class HikaiInfoMod(loader.Module):
|
||||
class HikkaInfoMod(loader.Module):
|
||||
"""Show userbot info"""
|
||||
|
||||
strings = {"name": "HikariInfo"}
|
||||
strings = {"name": "HikkaInfo"}
|
||||
|
||||
def get(self, *args) -> dict:
|
||||
return self._db.get(self.strings["name"], *args)
|
||||
|
|
@ -100,7 +100,7 @@ class HikaiInfoMod(loader.Module):
|
|||
"HTML",
|
||||
disable_web_page_preview=True,
|
||||
),
|
||||
thumb_url="https://github.com/hikariatama/Hikka/raw/master/hikka/bot_avatar.png",
|
||||
thumb_url="https://github.com/hikariatama/Hikka/raw/master/assets/hikka_pfp.png",
|
||||
thumb_width=128,
|
||||
thumb_height=128,
|
||||
reply_markup=self.markup,
|
||||
|
|
|
|||
|
|
@ -41,8 +41,11 @@ class Web(initial_setup.Web, root.Web):
|
|||
filters={"getdoc": inspect.getdoc, "ascii": ascii},
|
||||
loader=jinja2.FileSystemLoader("web-resources"),
|
||||
)
|
||||
self.app["static_root_url"] = "/static"
|
||||
|
||||
super().__init__(**kwargs)
|
||||
self.app.router.add_get("/favicon.ico", self.favicon)
|
||||
self.app.router.add_static("/static/", "web-resources/static")
|
||||
|
||||
async def start_if_ready(self, total_count, port):
|
||||
if total_count <= len(self.client_data):
|
||||
|
|
|
|||
|
|
@ -27,153 +27,12 @@
|
|||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
|
||||
<title>Hikka</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.light_blue-deep_purple.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
|
||||
|
||||
* {
|
||||
--menuMargin: 10px;
|
||||
--hamburgerSize: 40px;
|
||||
--accent: #46753a;
|
||||
}
|
||||
|
||||
.padded {
|
||||
padding: 16px;
|
||||
}
|
||||
.scroll-to-top {
|
||||
display: block;
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
z-index: 99;
|
||||
}
|
||||
body {
|
||||
background: #121212;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 180px;
|
||||
/*min-height: 30vh;*/
|
||||
padding: 15px 10px 15px 15px;
|
||||
border-radius: 28px;
|
||||
background: #181818;
|
||||
border-radius: 15px;
|
||||
box-sizing: border-box;
|
||||
margin: var(--menuMargin);
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
/*left: -180px;*/
|
||||
margin-left: calc(-180px - var(--menuMargin));
|
||||
margin-top: calc(var(--menuMargin) * 2 + 32px);
|
||||
transition: margin .3s cubic-bezier(.26,.46,.69,1.06);
|
||||
}
|
||||
|
||||
.menu.toggled {
|
||||
margin-left: var(--menuMargin);
|
||||
}
|
||||
|
||||
.menu_item {
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background .1s ease;
|
||||
background: transparent;
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menu_item:hover {
|
||||
background: #202020;
|
||||
}
|
||||
|
||||
.menu_item:active, .menu_item.toggled {
|
||||
background: #262626;
|
||||
}
|
||||
|
||||
.menu_item a {
|
||||
color: var(--accent);
|
||||
font-size: 15px;
|
||||
text-decoration: none;
|
||||
font-family: 'Open Sans';
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.menu_item i {
|
||||
line-height: 32px;
|
||||
color: #7b7b7b;
|
||||
font-size: 20px;
|
||||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
width: var(--hamburgerSize);
|
||||
height: var(--hamburgerSize);
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
margin: var(--menuMargin);
|
||||
background: #181818;
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hamburger i {
|
||||
line-height: var(--hamburgerSize);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.main_content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
padding-top: calc(var(--hamburgerSize) + var(--menuMargin) * 2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 736px) {
|
||||
.main_content {
|
||||
padding: 15px;
|
||||
padding-top: calc(var(--hamburgerSize) + var(--menuMargin) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
#menu_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<link rel="icon" href="https://github.com/hikariatama/Hikka/raw/master/hikka/bot_avatar.png">
|
||||
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
||||
<link rel="icon" href="https://github.com/hikariatama/Hikka/raw/master/assets/hikka_pfp.png">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="hamburger">
|
||||
<img src="https://github.com/hikariatama/Hikka/raw/master/hikka/bot_avatar.png" id="menu_img">
|
||||
</div>
|
||||
<div class="menu">
|
||||
<div class="menu_item" id="modules">
|
||||
<i class="material-icons">extension</i> <a href="/">Modules</a>
|
||||
</div>
|
||||
<div class="menu_item" id="team">
|
||||
<i class="material-icons">groups</i> <a href="/team">Admins</a>
|
||||
</div>
|
||||
<div class="menu_item" id="chat">
|
||||
<i class="material-icons">textsms</i> <a href="tg://resolve?domain=chat_ftg">Chat</a>
|
||||
</div>
|
||||
<div class="menu_item" id="settings">
|
||||
<i class="material-icons">toggle_on</i> <a href="/settings">Permissions</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_content">
|
||||
{% block content %}
|
||||
<p><b>An internal error occured.</b></p>
|
||||
|
|
@ -184,25 +43,5 @@
|
|||
|
||||
{% endblock %}
|
||||
|
||||
<script>
|
||||
document.querySelector('.hamburger').onclick = () => {
|
||||
document.querySelector('.menu').classList.toggle('toggled');
|
||||
}
|
||||
|
||||
document.querySelectorAll('.menu_item').forEach((elem) => {
|
||||
elem.onclick = (e) => {
|
||||
document.querySelector('.menu').classList.remove('toggled');
|
||||
e.currentTarget.querySelector('a').click();
|
||||
}
|
||||
})
|
||||
|
||||
path = window.location.href.split('/')[window.location.href.split('/').length - 1]
|
||||
if(document.getElementById(path)) {
|
||||
document.getElementById(path).classList.add('toggled');
|
||||
} else {
|
||||
document.querySelector('#modules').classList.add('toggled');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,282 +12,8 @@
|
|||
<script src="https://cdn.jsdelivr.net/npm/scrypt-async@2.0.1/scrypt-async.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Open+Sans:wght@300&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Hubballi&display=swap');
|
||||
.button {
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
color: #eee;
|
||||
margin: 5px 0;
|
||||
background: transparent;
|
||||
border: 2px solid #aaa;
|
||||
cursor: pointer;
|
||||
transition: box-shadow .2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
box-shadow: inset 5px 5px 3px rgba(255, 255, 255, .1),
|
||||
inset -5px -5px 3px rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.signin_block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.signin_block ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.signin_block li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signin_block h1 {
|
||||
margin: 0;
|
||||
color: #eee;
|
||||
font-size: 22px;
|
||||
padding: 10px;
|
||||
font-family: "Open Sans";
|
||||
}
|
||||
|
||||
.hamburger, .menu {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style type="text/css">
|
||||
body, html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
transition: all 2s ease;
|
||||
background: #16181d;
|
||||
}
|
||||
|
||||
#sky {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#shootingstars {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 150vh;
|
||||
height: 100vw;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
transform: translatex(calc(50vw - 50%)) translatey(calc(50vh - 50%))
|
||||
rotate(120deg);
|
||||
}
|
||||
|
||||
.wish {
|
||||
height: 2px;
|
||||
top: 300px;
|
||||
width: 100px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
background: linear-gradient(-45deg, white, rgba(0, 0, 255, 0));
|
||||
filter: drop-shadow(0 0 6px white);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 50px;
|
||||
font-family: Hubballi;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 24px;
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
line-height: 1.3;
|
||||
font-family: Hubballi;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#root {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.darken {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.main_content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.blur {
|
||||
padding: 4rem 8rem;
|
||||
border-radius: 0.375rem;
|
||||
background-color: rgba(22, 24, 29, .5);
|
||||
border: 1px solid rgba(42, 46, 55, 1);
|
||||
backdrop-filter: blur(6px);
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.bg {
|
||||
background: url(https://github.com/hikariatama/assets/raw/master/bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 80vw;
|
||||
height: 60vh;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-position: center;
|
||||
display: none;
|
||||
filter: hue-rotate(155deg);
|
||||
transition: .3s;
|
||||
animation: floating 5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes floating {
|
||||
from {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 736px) {
|
||||
.blur {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vh;
|
||||
height: 100vw;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 1px solid #eee;
|
||||
outline: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
label {
|
||||
margin: 0 10px;
|
||||
color: #eee;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#continue_btn {
|
||||
padding: 10px 15px;
|
||||
background: #0d47a1;
|
||||
border-radius: 10px;
|
||||
user-select: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border: 1px solid #1a237e;
|
||||
margin: 10px 0;
|
||||
transition: all .3s ease;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#continue_btn:hover {
|
||||
background-color: #1a237e;
|
||||
}
|
||||
|
||||
#continue_btn:active {
|
||||
background-color: #311b92;
|
||||
}
|
||||
|
||||
#continue_btn.error {
|
||||
background-color: #c62828;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
#continue_btn, #block_api_id, #block_api_hash, #block_phone, #block_2fa {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.red_state {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
|
||||
.blue_state {
|
||||
filter: hue-rotate(203deg);
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ static("base.css") }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
@ -305,15 +31,15 @@
|
|||
<div class="button" id="get_started">Get started</div>
|
||||
<span id="block_api_id">
|
||||
<label class="api_id" for="api_id">Telegram API ID: </label>
|
||||
<input class="api_id" id="api_id" placeholder="xxxx" style="width: 4em;">
|
||||
<input class="api_id" id="api_id" placeholder="••••" style="width: 4em;">
|
||||
</span>
|
||||
<span id="block_api_hash">
|
||||
<label class="api_hash" for="api_hash">Telegram API hash: </label>
|
||||
<input class="api_hash" id="api_hash" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" style="width: 24em;">
|
||||
<input class="api_hash" id="api_hash" placeholder="••••••••••••••••••••••••••••••••" style="width: 24em;">
|
||||
</span>
|
||||
<span id="block_phone">
|
||||
<label class="phone" for="phone">Phone: </label>
|
||||
<input class="phone" id="phone" placeholder="xxxxxxxxxxx" style="width: 12em;">
|
||||
<input class="phone" id="phone" placeholder="••••••••••••" style="width: 12em;">
|
||||
</span>
|
||||
<span id="block_2fa">
|
||||
<label class="_2fa" for="_2fa">2FA Password: </label>
|
||||
|
|
@ -333,6 +59,7 @@
|
|||
$(document).ready(function() {
|
||||
$('.bg').hide().delay(2000).fadeIn(500);
|
||||
});
|
||||
|
||||
$("#get_started").click(() => {
|
||||
$("#get_started").fadeOut(500, () => {
|
||||
cnt_btn.setAttribute('current-step', 'api_id');
|
||||
|
|
|
|||
|
|
@ -12,245 +12,8 @@
|
|||
<script src="https://cdn.jsdelivr.net/npm/scrypt-async@2.0.1/scrypt-async.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Open+Sans:wght@300&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Hubballi&display=swap');
|
||||
.button {
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
color: #eee;
|
||||
margin: 5px 0;
|
||||
background: transparent;
|
||||
border: 2px solid #aaa;
|
||||
cursor: pointer;
|
||||
transition: box-shadow .2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.button:hover {
|
||||
box-shadow: inset 5px 5px 3px rgba(255, 255, 255, .1),
|
||||
inset -5px -5px 3px rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.signin_block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.signin_block ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.signin_block li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signin_block h1 {
|
||||
margin: 0;
|
||||
color: #eee;
|
||||
font-size: 22px;
|
||||
padding: 10px;
|
||||
font-family: "Open Sans";
|
||||
}
|
||||
|
||||
.hamburger, .menu {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style type="text/css">
|
||||
body, html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
transition: all 2s ease;
|
||||
background: #16181d;
|
||||
}
|
||||
|
||||
#sky {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#shootingstars {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 150vh;
|
||||
height: 100vw;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
transform: translatex(calc(50vw - 50%)) translatey(calc(50vh - 50%))
|
||||
rotate(120deg);
|
||||
}
|
||||
|
||||
.wish {
|
||||
height: 2px;
|
||||
top: 300px;
|
||||
width: 100px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
background: linear-gradient(-45deg, white, rgba(0, 0, 255, 0));
|
||||
filter: drop-shadow(0 0 6px white);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 50px;
|
||||
font-family: Hubballi;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 24px;
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
line-height: 1.3;
|
||||
font-family: Hubballi;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#root {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.darken {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.main_content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.blur {
|
||||
padding: 4rem 8rem;
|
||||
border-radius: 0.375rem;
|
||||
background-color: rgba(22, 24, 29, .5);
|
||||
border: 1px solid rgba(42, 46, 55, 1);
|
||||
backdrop-filter: blur(6px);
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.bg {
|
||||
background: url(https://github.com/hikariatama/assets/raw/master/bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 80vw;
|
||||
height: 60vh;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-position: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 736px) {
|
||||
.blur {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vh;
|
||||
height: 100vw;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.invert {
|
||||
animation: hue_rot 50s infinite ease, floating 5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes hue_rot {
|
||||
from {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
filter: hue-rotate(180deg)
|
||||
}
|
||||
|
||||
100% {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floating {
|
||||
from {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ static("base.css") }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,262 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Open+Sans:wght@300&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Hubballi&display=swap');
|
||||
|
||||
body,
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #16181d;
|
||||
font-family: Hubballi;
|
||||
}
|
||||
|
||||
#sky {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#shootingstars {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 150vh;
|
||||
height: 100vw;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
transform: translatex(calc(50vw - 50%)) translatey(calc(50vh - 50%)) rotate(120deg);
|
||||
}
|
||||
|
||||
.wish {
|
||||
height: 2px;
|
||||
top: 300px;
|
||||
width: 100px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
background: linear-gradient(-45deg, white, rgba(0, 0, 255, 0));
|
||||
filter: drop-shadow(0 0 6px white);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 50px;
|
||||
font-family: Hubballi;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 24px;
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
line-height: 1.3;
|
||||
font-family: Hubballi;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#root {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.darken {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.main_content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.blur {
|
||||
padding: 4rem 8rem;
|
||||
border-radius: 0.375rem;
|
||||
background-color: rgba(22, 24, 29, .5);
|
||||
border: 1px solid rgba(42, 46, 55, 1);
|
||||
backdrop-filter: blur(6px);
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.bg {
|
||||
background: url(https://github.com/hikariatama/assets/raw/master/bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 80vw;
|
||||
height: 60vh;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-position: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 736px) {
|
||||
.blur {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bg {
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
height: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
.invert {
|
||||
animation: hue_rot 50s infinite ease, floating 5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes hue_rot {
|
||||
from {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
filter: hue-rotate(180deg)
|
||||
}
|
||||
100% {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floating {
|
||||
from {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
color: #eee;
|
||||
margin: 5px 0;
|
||||
background: transparent;
|
||||
border: 2px solid #aaa;
|
||||
cursor: pointer;
|
||||
transition: box-shadow .2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
box-shadow: inset 5px 5px 3px rgba(255, 255, 255, .1), inset -5px -5px 3px rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 1px solid #eee;
|
||||
outline: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0 10px;
|
||||
color: #eee;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#continue_btn {
|
||||
padding: 10px 15px;
|
||||
background: #0d47a1;
|
||||
border-radius: 10px;
|
||||
user-select: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border: 1px solid #1a237e;
|
||||
margin: 10px 0;
|
||||
transition: all .3s ease;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#continue_btn:hover {
|
||||
background-color: #1a237e;
|
||||
}
|
||||
|
||||
#continue_btn:active {
|
||||
background-color: #311b92;
|
||||
}
|
||||
|
||||
#continue_btn.error {
|
||||
background-color: #c62828;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
#continue_btn,
|
||||
#block_api_id,
|
||||
#block_api_hash,
|
||||
#block_phone,
|
||||
#block_2fa {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.red_state {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
|
||||
.blue_state {
|
||||
filter: hue-rotate(203deg);
|
||||
}
|
||||
Loading…
Reference in New Issue