style: Emotion detection UI Update

Presently/presently/users/templates/users/emotionaudio.html

@@ -15,11 +15,11 @@
         <span class="lead">See what presently think about your presentation</span>
     </div> 
     <div class="d-flex">
-        <div class="col-auto">
+        <div class="col-5">
             <div id="modalVideo" class="" style="max-width: 700px; min-height:380px">
                 <div class="p-t-30 text-center">
                     {% for x in all %}
-                    <h2 class="m-b-0">Video Review</h2>
+                    <h2 class="mb-3">Video Review</h2>
                     <div class="video-wrap m-b-20">
                         <video id="video-js" class="video-js" controls loop preload="false"
                             poster="video/for-benny/for-benny.jpg">
@@ -31,11 +31,13 @@
                 </div>
             </div>
         </div> 
-        <div class="col-4 px-3"> 
-            <div class="p-t-30 text-center">
-                <h3 class="m-b-0 pb-4">Emotion detections Real time</h3>                   
+        <div class="col-7 px-3"> 
+            <div class="p-t-30 d-flex justify-content-center">
+                <div class="d-flex mb-3">
+                    <h3 class="m-b-0">Emotion detections Real time</h3> 
+                    <a type="button" href="{% url 'warningemotionaudio' %}" class="btn btn-warning mx-3">Warnings!</a>                  
+                </div>        
             </div>
-            <a type="button" href="{% url 'warningemotionaudio' %}" class="btn btn-warning">Warning!</a>
         </div>
     </div>        
     <hr/>

Presently/presently/users/templates/users/unusualemotionswarning.html

@@ -5,21 +5,93 @@
 <div class="container">
     <nav aria-label="breadcrumb mt-4">
         <ol class="breadcrumb">
-          <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
-          <li class="breadcrumb-item"><a href="{% url 'feedback' %}">Dashboard</a></li>
-          <li class="breadcrumb-item"><a href="{% url 'feedback' %}">Emotion-predictions(Audio)</a></li>
-          <li class="breadcrumb-item active" aria-current="page">Warning-emotions(Audio)</li>
+            <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'feedback' %}">Dashboard</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'emotionaudio' %}">Emotion-predictions(Audio)</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Warning-emotions(Audio)</li>
         </ol>
     </nav>
     <div class="heading-text heading-section text-center py-3">
         <h4>Unusual Emotion Detections - Audio</h4>
-    </div> 
-    
+    </div>
+
+    <div class="row pricing-table">
+        <div class="col-lg-3 col-md-12 col-12">
+            <div class="plan">
+                <div class="plan-header" style="background-color: #ffeb3b;">
+                    <h4>Disgust</h4>
+                    <div class="plan-price p-0">84<span>/percent</span> </div>
+                </div>
+                <div class="plan-list p-0" style="background-color: rgba(207, 207, 196, 0.692);">
+                    <ul>
+                        <li><i class="fa fa-signal"></i>Time period: 00:00</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-3 col-md-12 col-12">
+            <div class="plan">
+                <div class="plan-header" style="background-color: #ffeb3b;">
+                    <h4>Supprice</h4>
+                    <div class="plan-price p-0">88<span>/percent</span> </div>
+                </div>
+                <div class="plan-list p-0" style="background-color: rgba(207, 207, 196, 0.692);">
+                    <ul>
+                        <li><i class="fa fa-signal"></i>Time period: 00:00</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-3 col-md-12 col-12">
+            <div class="plan">
+                <div class="plan-header" style="background-color: #ffeb3b;">
+                    <h4>Fearful</h4>
+                    <div class="plan-price p-0">90<span>/percent</span> </div>
+                </div>
+                <div class="plan-list p-0" style="background-color: rgba(207, 207, 196, 0.692);">
+                    <ul>
+                        <li><i class="fa fa-signal"></i>Time period: 00:00</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-3 col-md-12 col-12">
+            <div class="plan">
+                <div class="plan-header" style="background-color: #ffeb3b;">
+                    <h4>Sad</h4>
+                    <div class="plan-price p-0">84<span>/percent</span> </div>
+                </div>
+                <div class="plan-list p-0" style="background-color: rgba(207, 207, 196, 0.692);">
+                    <ul>
+                        <li><i class="fa fa-signal"></i>Time period: 00:00</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-lg-3 col-md-12 col-12">
+            <div class="plan">
+                <div class="plan-header" style="background-color: #ffeb3b;">
+                    <h4>Suprice</h4>
+                    <div class="plan-price p-0">81<span>/percent</span> </div>
+                </div>
+                <div class="plan-list p-0" style="background-color: rgba(207, 207, 196, 0.692);">
+                    <ul>
+                        <li><i class="fa fa-signal"></i>Time period: 00:00</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        
+    </div>
 
     <div class="d-flex justify-content-center mb-5">
         <a class="btn btn-outline" href="{% url 'overallfeedback' %}" type="submit">View summery detail</a>
-    </div>    
+    </div>
 
 </div>
 
-{% endblock content %}
+{% endblock content %}
\ No newline at end of file