92 lines
2.3 KiB
HTML
92 lines
2.3 KiB
HTML
{% extends 'base.html' %}
|
||
|
||
{% block title %} Image Upload {% endblock %}
|
||
{% block optionalParams%}
|
||
<style>
|
||
.checkmark__circle {
|
||
stroke-dasharray: 166;
|
||
stroke-dashoffset: 166;
|
||
stroke-width: 2;
|
||
stroke-miterlimit: 10;
|
||
stroke: #7ac142;
|
||
fill: none;
|
||
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
|
||
}
|
||
|
||
.checkmark {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
display: block;
|
||
stroke-width: 2;
|
||
stroke: #fff;
|
||
stroke-miterlimit: 10;
|
||
margin: 10% auto;
|
||
box-shadow: inset 0px 0px 0px #7ac142;
|
||
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
|
||
}
|
||
|
||
.checkmark__check {
|
||
transform-origin: 50% 50%;
|
||
stroke-dasharray: 48;
|
||
stroke-dashoffset: 48;
|
||
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
|
||
}
|
||
|
||
@keyframes stroke {
|
||
100% {
|
||
stroke-dashoffset: 0;
|
||
}
|
||
}
|
||
@keyframes scale {
|
||
0%, 100% {
|
||
transform: none;
|
||
}
|
||
50% {
|
||
transform: scale3d(1.1, 1.1, 1);
|
||
}
|
||
}
|
||
@keyframes fill {
|
||
100% {
|
||
box-shadow: inset 0px 0px 0px 30px #7ac142;
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
{% if warning %}
|
||
<div class="alert alert alert-danger" role="alert">Ако злоупотребяваш с правата си за сайта ще бъдеш баннат. Big Brother is watching you.</div>
|
||
|
||
{% endif %}
|
||
|
||
<div class="centered" style="text-align: center;">
|
||
{% if user.is_authenticated %}
|
||
{% if img_obj %}
|
||
<h1 style="color:#7ac142;">Снимката ти е качена успешно!</h1>
|
||
Кликни <a style="color:#7ac142;"href="/view_media/">тук</a>, ако искаш да я видиш!
|
||
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
|
||
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
|
||
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
|
||
</svg>
|
||
{% else %}
|
||
<form method="post" enctype="multipart/form-data">
|
||
{% csrf_token %}
|
||
<label for="image" style="font-size: 32px;">Качи снимка! </label><br><br><br>
|
||
<input id="image" style="margin: 0 auto;" type="file" name="image" required><br>
|
||
<br>
|
||
<button class="Buttons" type="submit">Качи!</button>
|
||
</form>
|
||
<br><br>
|
||
{% endif %}
|
||
|
||
{% else %}
|
||
<p>You are not logged in</p>
|
||
<a href="{% url 'login' %}">Log In</a>
|
||
{% endif %}
|
||
</div>
|
||
{% endblock %}
|