changed the whole idea around the media viewing

reValuate/home/static/home/css/style.css

@@ -187,10 +187,7 @@ footer{
 }
 
 .centered{
-  position: absolute;
+  display:flex;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 }
 
 @-webkit-keyframes text-shadow-pop-right {

reValuate/static/home/css/style.css

@@ -80,7 +80,7 @@ header {
   height: 100%;
   width: 0;
   position: fixed;
-  z-index: 1;
+  z-index: 99;
   left: 0;
   top: 0;
   background-color:   #469330;
@@ -130,7 +130,7 @@ header {
   }
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 800px) {
   .nav__links,
   .cta {
     display: none;
@@ -142,11 +142,6 @@ header {
 }
 
 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;
 
 }
@@ -190,3 +185,80 @@ footer{
   text-align: center;
   left:50%;
 }
+
+.centered{
+  display: flex;
+}
+
+@-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;
+}
+
+.buttons{
+  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;
+}

reValuate/templates/home.html

@@ -55,7 +55,7 @@
 	<hr>
 	<br>
 	<h1>Имате въпроси?<br><h2>Свържете се с нас!</h2></h1><br>
-	<p>
+	<p id="contact">
 		<a href="https://discord.gg/twDtbKeVXV"><img src="{% static 'home/img/Discord-Logo.png' %}" style="max-width:100px;"></a>
 		<a href="mailto://boyan+revaluate@bobokara.com"><img src="{% static 'home/img/mail.png' %}" style="max-width:100px;"></a>
 		<a href="https://www.youtube.com/channel/UCIWblGtjXAxwbTMUbhZ_PDQ"><img src="{% static 'home/img/youtube.png' %}" style="max-width:100px;" ></a>

reValuate/templates/leaderboard.html

@@ -14,10 +14,9 @@ html{
 		
 }
 .content{
-	position: absolute;
+
-	top:50%;
+
-	left: 50%;
+	display: flex;
-	transform: translate(-50%, -50%);
 }
 #one{
 	font-size: 64px;

reValuate/templates/showAllImage.html

@@ -2,84 +2,68 @@
 {% load static %}
 {% block title %} My Images {% endblock %}
 {% block optionalParams %}
-<link rel="stylesheet" href="{% static 'home/css/gallery.css' %}">
 <style>
-  header{
+
-    width: 100%;
+html{
-  }
+		background: linear-gradient(180deg, rgba(70,147,48,1) 33%, rgba(109,126,107,1) 100%) no-repeat center center fixed;
-  container{
+		-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;
     display: flex;    
-    align-items: center;
+    
+	}
+
+  #approved{
+    flex: 1;
   }
-</style>
+  #declined{
+    flex: 1;
+  }
+  #processing{
+    flex: 1;
+  }
+  @media only screen and (max-width: 600px) {
+    #page-wrap{
+      display: block;
+    }
+  }
+
+  </style>
 {% endblock %}
 {% block content %}
 {% if user.is_authenticated %}
 
-<p class="heading">Твоята медия</p>
+<div id="page-wrap">
-  <div class="container">
-  {% for i in get_status reversed %}
-  {% if i.is_video %}
-  <div class="gallery-image popup">
-    <div class="img-box">
-      <video style="display: block; margin: 0 auto; max-width:500px; max-height: 500px;" width="500" controls/>
-      <source src="/media/{{ i.image }}" type="video/mp4"/>
-      </video>
-     <div class="transparent-box">
-      <div class="caption">
-        {% if i.reason %}
-        <p> ❌ Видеото ти е маркирана като невалидно.</p> 
-        <p class="opacity-low">Ако мислиш че има грешка ни изпратете <a href="mailto:boyan+revaluate@bobokara.com">имейл.</a></p>
 
-        {% elif i.tokenized  %}
+  {% if approved %}
-        <p > ✅ Видеото ти е валидно!</p>
+  <div id="approved">
-        <p class="opacity-low">Провери баланса си!</p>
+    <img src="{% static 'home/img/approved.png' %}" width="128px">
-      
+<br><br><br>
-        {% else %}
+  <h2>Имаш <span style="color:green">{{ approved }}</span> одобрена медия!</h2>
-        <p> ⏳ Видеото ти очаква обработка!</p>
+</div><br><br>
-       
-        {% endif %}
-        </div>
-      </div> 
-    </div>
-    
-  {% else %}
-    <div class="gallery-image popup">
-    <div class="img-box">
-     <img src="/media/{{ i.image }}"/>
-     <div class="transparent-box">
-      <div class="caption">
-        {% if i.reason %}
-        <p> ❌ Снимката ти е маркирана като невалидна.</p> 
-        <p class="opacity-low">Ако мислиш че има грешка ни изпратете <a href="mailto:boyan+revaluate@bobokara.com">имейл.</a></p>
-        
-        {% elif i.tokenized  %}
-        <p > ✅ Снимката ти е валидна!</p>
-        <p class="opacity-low">Провери баланса си!</p>
-      
-        {% else %}
-        <p> ⏳ Снимката ти очаква обработка!</p>
-        {% endif %}  
-        </div>
-      </div> 
-    </div>
-    <!-- 
-    <p style="text-shadow: 0 0 2px #28a745; float: left;">{{forloop.counter}}/{{img_number}}  <p style="text-shadow: 0 0 2px #28a745; float: right;">{{i.date}}</p></p> -->
-  <!-- <br><br>
-   -->
   {% endif %}
-  {% endfor %}
-</div>
-</div>
-<div class="show">
-  <div class="overlay"></div>
-  <div class="img-show">
-    <span>X</span>
-    <img src="">
-  </div>
-</div>
 
-{% else %}
+  {% if processing %}
+  <div id="processing">
+  <img src="{% static 'home/img/loading.png' %}" width="128px"><br><br><br>
+  <h2>Имаш <span style="color:yellow">{{ processing }}</span> медия, очакваща одобрение!</h2><br><br>
+  </div>
+  {% endif %}
+
+  {% if declined %}
+  <div id="declined">
+  <img src="{% static 'home/img/cross.png' %}" width="128px"><br><br><br>
+  <h2 >Имаш <span style="color:red">{{ declined }}</span> отказана медия, ако мислиш, че това е грешка, <a href="/#contact"> свържи се с нас</a>!</h2>
+  {% endif %}
+</div>
+</div>
+  {% else %}
   <p>You are not logged in</p>
   <a href="{% url 'login' %}">Log In</a>
 {% endif %}

reValuate/templates/wait.html

@@ -0,0 +1,116 @@
+{% 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 %}

reValuate/upload/migrations/0025_auto_20210831_1639.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.1.6 on 2021-08-31 13:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('upload', '0024_media_managed_by'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='media',
+            name='tokenized',
+            field=models.BooleanField(blank=True, default=False, max_length=3, null=True),
+        ),
+    ]

reValuate/upload/migrations/0026_auto_20210831_1640.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.1.6 on 2021-08-31 13:40
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('upload', '0025_auto_20210831_1639'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='media',
+            name='tokenized',
+            field=models.BooleanField(blank=True, default=None, max_length=3, null=True),
+        ),
+    ]

reValuate/upload/views.py

@@ -30,6 +30,11 @@ def imageUpload(request):
     else:
         warning = False
     
+    media = Media.objects.filter(user_id=request.user.id).last()
+    print(media.tokenized)
+    if media.tokenized is None:
+        return render(request, "wait.html")
+
     print(request.user.id)
     if request.method == 'POST':
 
@@ -79,13 +84,23 @@ def imageUpload(request):
 
 def viewMedia(request):
     get_status = Media.objects.filter(user_id=request.user.id)
-    img_list = os.listdir(settings.MEDIA_ROOT + f"{request.user.id}/")
+    approved = []
+    declined = []
+    processing = []
+    for i in get_status:
+        if i.tokenized:
+            approved.append(i)
+        if not i.tokenized:
+            declined.append(i)
+        if i.tokenized is None:
+            processing.append(i)
         
 
-    context = {
+    context={
-        "id":request.user.id,
+        "approved":len(approved),
-        "get_status":get_status,
+        "declined":len(declined),
-        "img_number": len(img_list),
+        "processing":len(processing),
+
     }
     return render (request, 'showAllImage.html', context)
 

reValuate/website/settings.py

@@ -26,7 +26,7 @@ BASE_DIR = Path(__file__).resolve().parent.parent
 SECRET_KEY = '&(v*@m-bz2n9kki!2y)qo5ipp-v+!vfpb4cj=l6n93y&18jht*'
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = False
+DEBUG = True
 
 ALLOWED_HOSTS = [
     "cleener.xyz",