Created placeholder for website
This commit is contained in:
Boyan
parent
7e3d3cd189
commit
e13cc3f7a8
289
src/server/leaderboard/static/animations.css
Normal file
289
src/server/leaderboard/static/animations.css
Normal file
@ -0,0 +1,289 @@
|
||||
|
||||
@-webkit-keyframes text-flicker-in-glow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
10.1% {
|
||||
opacity: 1;
|
||||
text-shadow: none;
|
||||
}
|
||||
10.2% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
20% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
20.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
20.6% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
30% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
30.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
30.5% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
30.6% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
45% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
45.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
55% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
55.1% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
57% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
57.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
60.1% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
65% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
65.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
75.1% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
77% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
77.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
85% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
85.1% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
86% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
86.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
@keyframes text-flicker-in-glow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
10.1% {
|
||||
opacity: 1;
|
||||
text-shadow: none;
|
||||
}
|
||||
10.2% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
20% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
20.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
20.6% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
30% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
30.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
30.5% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
30.6% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
45% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
45.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
55% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
55.1% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
57% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
57.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
60.1% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
65% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
65.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
75.1% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
77% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
77.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
85% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
85.1% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
86% {
|
||||
opacity: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
86.1% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flicker-in {
|
||||
-webkit-animation: text-flicker-in-glow 2s ease-in both;
|
||||
animation: text-flicker-in-glow 2s ease-in both;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes tracking-in-expand {
|
||||
0% {
|
||||
letter-spacing: -0.5em;
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes tracking-in-expand {
|
||||
0% {
|
||||
letter-spacing: -0.5em;
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tracking-in {
|
||||
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2s both;
|
||||
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) 2s both;
|
||||
}
|
||||
|
||||
BIN
src/server/leaderboard/static/customm.png
Normal file
BIN
src/server/leaderboard/static/customm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/server/leaderboard/static/favicon.png
Normal file
BIN
src/server/leaderboard/static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -1,8 +1,50 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background-color: gray;
|
||||
|
||||
}
|
||||
|
||||
.body {
|
||||
/* Roboto for all text */
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes color-change-2x {
|
||||
0% {
|
||||
background: #2e3030;
|
||||
}
|
||||
100% {
|
||||
background: #5f6b32;
|
||||
}
|
||||
}
|
||||
@keyframes color-change-2x {
|
||||
0% {
|
||||
background: #2e3030;
|
||||
}
|
||||
100% {
|
||||
background: #5f6b32;
|
||||
}
|
||||
}
|
||||
|
||||
.color-change-2x {
|
||||
-webkit-animation: color-change-2x 10s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite alternate both;
|
||||
animation: color-change-2x 10s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite alternate both;
|
||||
}
|
||||
|
||||
#logo{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -6,18 +6,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>custoMM</title>
|
||||
{% load static %}
|
||||
<link rel="shortcut icon" href="{% static 'favicon.png' %}" type="image/x-icon">
|
||||
<link rel="stylesheet" href="{% static 'style.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'animations.css' %}">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Center container -->
|
||||
<div class="container color-change-2x">
|
||||
{% block content %}{% endblock %}
|
||||
<!-- Input field with text above it. -->
|
||||
<div class="container">
|
||||
<h1>custoMM</h1>
|
||||
<form action="/leaderboard" method="POST">
|
||||
<label for="name">Enter your name:</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,29 +1,11 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1>Leaderboard</h1>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Username</th>
|
||||
<th>Score</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in users %}
|
||||
<tr>
|
||||
<td>{{ user.rank }}</td>
|
||||
<td>{{ user.username }}</td>
|
||||
<td>{{ user.score }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logo flicker-in">
|
||||
<a href="https://github.com/confestim/custoMM"><img src="{% static 'customm.png' %}" alt="customm logo"></a>
|
||||
</div>
|
||||
|
||||
<h1 class= "flicker-in" style="animation-delay:1s;">Work in progress...</h1>
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user