remade the leaderboard, changed up some of the base html, menu will now always show up
This commit is contained in:
Yamozha
parent
46256d328e
commit
bb221f7ee0
2
.gitignore
vendored
2
.gitignore
vendored
@ -1 +1,3 @@
|
|||||||
__django
|
__django
|
||||||
|
reValuate/db.sqlite3
|
||||||
|
*.sqlite3
|
||||||
|
|||||||
Binary file not shown.
@ -80,7 +80,7 @@ header {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 0;
|
width: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1;
|
z-index: 99;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: #469330;
|
background-color: #469330;
|
||||||
@ -192,3 +192,63 @@ footer{
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes text-shadow-pop-right {
|
||||||
|
0% {
|
||||||
|
text-shadow: 0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555;
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
transform: translateX(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
text-shadow: 1px 0 #555,2px 0 #555,3px 0 #555,4px 0 #555,5px 0 #555,6px 0 #555,7px 0 #555,8px 0 #555;
|
||||||
|
-webkit-transform: translateX(-8px);
|
||||||
|
transform: translateX(-8px)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes text-shadow-pop-right {
|
||||||
|
0% {
|
||||||
|
text-shadow: 0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555,0 0 #555;
|
||||||
|
-webkit-transform: translateX(0);
|
||||||
|
transform: translateX(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
text-shadow: 1px 0 #555,2px 0 #555,3px 0 #555,4px 0 #555,5px 0 #555,6px 0 #555,7px 0 #555,8px 0 #555;
|
||||||
|
-webkit-transform: translateX(-8px);
|
||||||
|
transform: translateX(-8px)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-shadow-pop-right{-webkit-animation:text-shadow-pop-right .6s both;animation:text-shadow-pop-right .6s both}
|
||||||
|
|
||||||
|
@-webkit-keyframes scale-in-center {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes scale-in-center {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(0);
|
||||||
|
transform: scale(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale-in-center {
|
||||||
|
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||||
|
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||||
|
}
|
||||||
|
|||||||
@ -10,15 +10,14 @@
|
|||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="{% static 'home/css/style.css' %}">
|
<link rel="stylesheet" href="{% static 'home/css/style.css' %}">
|
||||||
<link rel="shortcut icon" type="image/png" href="{% static 'home/css/logo.png' %}"/>
|
<link rel="shortcut icon" type="image/png" href="{% static 'home/img/logo.png' %}"/>
|
||||||
|
|
||||||
{% block optionalParams %} {% endblock %}
|
{% block optionalParams %} {% endblock %}
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% block aboveNav %} {% endblock %}
|
{% block aboveNav %} {% endblock %}
|
||||||
|
<header id="navbar">
|
||||||
<header>
|
|
||||||
<a class="logo" href="/"><img src="{% static 'home/img/logo.png' %}" style="max-height: 100px;" alt="logo"></a>
|
<a class="logo" href="/"><img src="{% static 'home/img/logo.png' %}" style="max-height: 100px;" alt="logo"></a>
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="nav__links">
|
<ul class="nav__links">
|
||||||
@ -48,6 +47,7 @@
|
|||||||
|
|
||||||
<p class="menu cta">Меню</p>
|
<p class="menu cta">Меню</p>
|
||||||
</header>
|
</header>
|
||||||
|
<div id="container">
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
<a class="close">×</a>
|
<a class="close">×</a>
|
||||||
<div class="overlay__content">
|
<div class="overlay__content">
|
||||||
@ -65,13 +65,12 @@
|
|||||||
<a href="{% url 'Image' %}">Качи</a>
|
<a href="{% url 'Image' %}">Качи</a>
|
||||||
<a href="{% url 'Media' %}">Прогрес</a>
|
<a href="{% url 'Media' %}">Прогрес</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="{% static 'home/js/mobile.js' %}"></script>
|
||||||
|
</div>
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
<script type="text/javascript" src="{% static 'home/js/mobile.js' %}"></script>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -4,159 +4,74 @@
|
|||||||
{% block optionalParams %}
|
{% block optionalParams %}
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
*,
|
html{
|
||||||
*:before,
|
background: linear-gradient(180deg, rgba(70,147,48,1) 33%, rgba(109,126,107,1) 100%) no-repeat center center fixed;
|
||||||
*:after {
|
-webkit-background-size: cover;
|
||||||
box-sizing: border-box;
|
-moz-background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
|
||||||
}
|
}
|
||||||
html,
|
.content{
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font: 16px/1.2 "Roboto", sans-serif;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
display: inline-block;
|
|
||||||
color: #333;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.blog {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 15px;
|
top:50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 500px;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: white;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 25%;
|
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 1;
|
}
|
||||||
overflow: hidden;
|
#one{
|
||||||
|
font-size: 64px;
|
||||||
|
color:#D7FFC2;
|
||||||
|
-webkit-text-stroke-width: 2px;
|
||||||
|
-webkit-text-stroke-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-2 {
|
#two{
|
||||||
width: 500px;
|
font-size: 48px;
|
||||||
height: auto;
|
color:#D7FFC2;
|
||||||
border-radius: 10px;
|
-webkit-text-stroke-width: 2px;
|
||||||
background-color: white;
|
-webkit-text-stroke-color: black;
|
||||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
}
|
||||||
position: absolute;
|
#three{
|
||||||
top: 50%;
|
font-size: 32px;
|
||||||
left: 75%;
|
color:#D7FFC2;
|
||||||
transform: translate(-50%, -50%);
|
-webkit-text-stroke-width: 1px;
|
||||||
z-index: 1;
|
-webkit-text-stroke-color: black;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1000px) {
|
.place{
|
||||||
|
font-size: 28px;
|
||||||
.container{
|
color:#D7FFC2;
|
||||||
width: fit-content;
|
-webkit-text-stroke-width: 1px;
|
||||||
top:40%;
|
-webkit-text-stroke-color: black;
|
||||||
left:50%;
|
|
||||||
}
|
|
||||||
.container-2{
|
|
||||||
width: fit-content;
|
|
||||||
top:80%;
|
|
||||||
left:50%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
ul{
|
||||||
|
list-style-type:none;
|
||||||
.leaderboard {
|
|
||||||
background: linear-gradient(180deg, rgba(70,147,48,1) 33%, rgba(109,126,107,1) 100%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.leaderboard .head {
|
|
||||||
padding: 20px 16px;
|
|
||||||
color: snow;
|
|
||||||
font-size: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.leaderboard .head h1 {
|
|
||||||
display: flex;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.leaderboard .body {
|
|
||||||
color: snow;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.leaderboard ol {
|
|
||||||
counter-reset: number;
|
|
||||||
}
|
|
||||||
.leaderboard li {
|
|
||||||
padding: 16px;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.leaderboard li mark {
|
|
||||||
flex-grow: 1;
|
|
||||||
color: snow;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.leaderboard li:before {
|
|
||||||
counter-increment: number;
|
|
||||||
content: counter(number) ".";
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<div class="container">
|
<div class="content">
|
||||||
<div class="leaderboard">
|
<div id="page-wrap">
|
||||||
<div class="head">
|
<h1>reCoins Класация</h1><hr><br>
|
||||||
<i class="fas fa-crown"></i>
|
<ul>
|
||||||
<h1>Най-много reCoins</h1>
|
{% for i, z in leaderboard.items %}
|
||||||
</div>
|
{% if forloop.counter == 1 %}
|
||||||
<div class="body">
|
<li id="one" class="scale-in-center">{{ forloop.counter }}. {{ i }} има {{ z }} </li><br>
|
||||||
<ol>
|
|
||||||
{% for i, z in leaderboard.items %}
|
|
||||||
<li>
|
|
||||||
<mark>{{ i }}</mark>
|
|
||||||
<small>{{z}} reCoins</small>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container-2">
|
|
||||||
<div class="leaderboard">
|
|
||||||
<div class="head">
|
|
||||||
<i class="fas fa-crown"></i>
|
|
||||||
<h1>Най-много качена медия</h1>
|
|
||||||
</div>
|
|
||||||
<div class="body">
|
|
||||||
<ol>
|
|
||||||
{% for i, z in user_media.items reversed %}
|
|
||||||
<li>
|
|
||||||
<mark>{{ i }}</mark>
|
|
||||||
<small>{{z}} снимки и видеа</small>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
{% elif forloop.counter == 2 %}
|
||||||
|
<li id="two" class="scale-in-center">{{ forloop.counter }}. {{ i }} има {{ z }} </li><br>
|
||||||
|
|
||||||
|
{% elif forloop.counter == 3 %}
|
||||||
|
<li id="three" class="scale-in-center">{{ forloop.counter }}. {{ i }} has {{ z }} </li> <br>
|
||||||
|
|
||||||
|
{% else %}
|
||||||
|
<li class="place">{{ forloop.counter }}. {{ i }} has {{ z }} </li> <br>
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user