{% extends 'base.html' %}

{% block title %} Изчакай малко! {% 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;
		}
	}

	.alert {
		padding: 20px;
		background-color: #f44336;
		color: white;
	}

	.closebtn {
		margin-left: 15px;
		color: white;
		font-weight: bold;
		float: right;
		font-size: 22px;
		line-height: 20px;
		cursor: pointer;
		transition: 0.3s;
	}

	.closebtn:hover {
	color: black;
	}

	.buttons{
	margin-top: 10%;
    background-color: #469330;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }

	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;
	}

	#page-wrap{
		padding: 10vh;
	}
</style>
{% endblock %}

{% block content %}
<div class="centered" id="page-wrap">
    <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>
    <h1>Изчакай малко, снимката/видеото ти е в процес на одобрение!</h1>
    <br>
    <p>Ако този процес отнема прекалено много време според теб, <a href="/#contact">свържи се с нас!</a></p>
		
{% endblock %}
