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
|
||||
reValuate/db.sqlite3
|
||||
*.sqlite3
|
||||
|
||||
Binary file not shown.
@ -80,7 +80,7 @@ header {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
z-index: 99;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #469330;
|
||||
@ -192,3 +192,63 @@ footer{
|
||||
left: 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="viewport" content="width=device-width, initial-scale=1">
|
||||
<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 %}
|
||||
|
||||
</head>
|
||||
<body>
|
||||
{% block aboveNav %} {% endblock %}
|
||||
|
||||
<header>
|
||||
<header id="navbar">
|
||||
<a class="logo" href="/"><img src="{% static 'home/img/logo.png' %}" style="max-height: 100px;" alt="logo"></a>
|
||||
<nav>
|
||||
<ul class="nav__links">
|
||||
@ -48,6 +47,7 @@
|
||||
|
||||
<p class="menu cta">Меню</p>
|
||||
</header>
|
||||
<div id="container">
|
||||
<div class="overlay">
|
||||
<a class="close">×</a>
|
||||
<div class="overlay__content">
|
||||
@ -65,13 +65,12 @@
|
||||
<a href="{% url 'Image' %}">Качи</a>
|
||||
<a href="{% url 'Media' %}">Прогрес</a>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="{% static 'home/js/mobile.js' %}"></script>
|
||||
</div>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
<script type="text/javascript" src="{% static 'home/js/mobile.js' %}"></script>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -4,159 +4,74 @@
|
||||
{% block optionalParams %}
|
||||
<style>
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
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;
|
||||
bottom: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
html{
|
||||
background: linear-gradient(180deg, rgba(70,147,48,1) 33%, rgba(109,126,107,1) 100%) no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
|
||||
.container {
|
||||
width: 500px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
background-color: white;
|
||||
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
||||
}
|
||||
.content{
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left: 25%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.container-2 {
|
||||
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: 75%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
|
||||
.container{
|
||||
width: fit-content;
|
||||
top:40%;
|
||||
left:50%;
|
||||
}
|
||||
.container-2{
|
||||
width: fit-content;
|
||||
top:80%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
#one{
|
||||
font-size: 64px;
|
||||
color:#D7FFC2;
|
||||
-webkit-text-stroke-width: 2px;
|
||||
-webkit-text-stroke-color: black;
|
||||
}
|
||||
|
||||
|
||||
.leaderboard {
|
||||
background: linear-gradient(180deg, rgba(70,147,48,1) 33%, rgba(109,126,107,1) 100%);
|
||||
#two{
|
||||
font-size: 48px;
|
||||
color:#D7FFC2;
|
||||
-webkit-text-stroke-width: 2px;
|
||||
-webkit-text-stroke-color: black;
|
||||
}
|
||||
#three{
|
||||
font-size: 32px;
|
||||
color:#D7FFC2;
|
||||
-webkit-text-stroke-width: 1px;
|
||||
-webkit-text-stroke-color: black;
|
||||
}
|
||||
|
||||
|
||||
.leaderboard .head {
|
||||
padding: 20px 16px;
|
||||
color: snow;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
.place{
|
||||
font-size: 28px;
|
||||
color:#D7FFC2;
|
||||
-webkit-text-stroke-width: 1px;
|
||||
-webkit-text-stroke-color: black;
|
||||
}
|
||||
.leaderboard .head h1 {
|
||||
display: flex;
|
||||
margin-left: 4px;
|
||||
ul{
|
||||
list-style-type:none;
|
||||
}
|
||||
|
||||
|
||||
.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>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
<div class="container">
|
||||
<div class="leaderboard">
|
||||
<div class="head">
|
||||
<i class="fas fa-crown"></i>
|
||||
<h1>Най-много reCoins</h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ol>
|
||||
<div class="content">
|
||||
<div id="page-wrap">
|
||||
<h1>reCoins Класация</h1><hr><br>
|
||||
<ul>
|
||||
{% 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>
|
||||
{% if forloop.counter == 1 %}
|
||||
<li id="one" class="scale-in-center">{{ forloop.counter }}. {{ i }} има {{ z }} </li><br>
|
||||
|
||||
{% 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>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user