From 6799af0572575f95c127276e380bba3ae40d7400 Mon Sep 17 00:00:00 2001
From: Rayan fernandes <37145078+Rayanfer32@users.noreply.github.com>
Date: Fri, 11 Jun 2021 23:36:14 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20=E2=9C=A8=20=F0=9F=92=84=20New?=
 =?UTF-8?q?=20Search=20bar,=20Download=20button=20for=20item?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/templates/index.html | 148 +++++++++++++++++++++++++--------------
 1 file changed, 96 insertions(+), 52 deletions(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index d728131..36607a2 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,59 +1,103 @@
 {% include 'header.html' %}
-            
-            <div class="block md:flex justify-between items-center px-4 text-center border-b-2">
-                <div class="m-2 block md:flex items-center justify-center md:justify-start text-2xl md:text-right font-bold text-blue-500">
-                    <img class="mx-auto md:ml-0 md:mr-1 my-2 w-16 h-16 rounded-full bg-black outline-none" src="{{logo}}">
-                    <h1> {{name}} </h1>
-                </div>
-                
-                <div class="m-2">
-                    <form class="">
-                        <input class="border rounded-full px-4 py-2 border-indigo-500 placeholder-indigo-500 text-indigo-500 outline-none" type="text" name="search" value="{% if search %}{{search}}{% endif %}" placeholder="search...">
-                    </form>
-                </div>
-                
-            </div>
-            
-            {% if item_list %}
 
-                <div class="mx-auto my-2 w-full px-4">
-                    <div class="block md:flex md:flex-wrap md:justify-center text-center break-all">
-                    {% for item in item_list %}
-                        <a title="{% if item.media %} {{item.mime_type}} | {{item.human_size}} {% else %} Text message {% endif %}" href="{{item.url}}" class="flex flex-col items-center justify-center w-full min-h-full md:w-1/5 lg:w-1/6 rounded my-4 md:mx-1 shadow-md hover:shadow-lg hover:bg-blue-100 hover:border hover:border-blue-200">
-                    
-                            {% if item.media %}
-                                <img src="{{item.thumbnail}}" class="w-full rounded">
-                                <div class="p-4 rounded">{{item.insight}}</div>
-                            {% else %}
-                                <div class="p-4 rounded">{{item.insight}}</div>
-                            {% endif %}
-                            
-                        </a>
-                    {% endfor %}
+<div class="block md:flex justify-between items-center px-4 text-center border-b-2">
+    <div
+        class="m-2 block md:flex items-center justify-center md:justify-start text-2xl md:text-right font-bold text-blue-500">
+        <img class="mx-auto md:ml-0 md:mr-1 my-2 w-16 h-16 rounded-full bg-black outline-none" src="{{logo}}">
+        <h1> {{name}} </h1>
+    </div>
+
+    <div class="m-2">
+        <form class="">
+            
+               <div class="p-0">
+                    <div class=" flex items-center rounded-full shadow">
+                      <input class=" rounded-l-full w-full py-1 px-6 text-gray-700 leading-tight focus:outline-none" name="search" id="search" value="{% if search %}{{search}}{% endif %}" type="text" placeholder="Search">
+                      <div class="p-1">
+                        <button class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-400 focus:outline-none w-12 h-12 flex items-center justify-center">
+                            <div><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                              </svg></div>
+                        </button>
+                        </div>
+                      </div>
                     </div>
-            
-                </div>
 
-                <p class="my-2 text-center font-semibold">
-                    {{item_list|length}} items
-                </p>
-                
-                <div class="mx-auto my-2 text-center flex text-white content-center justify-center">
-                    {% if prev_page %}
-                        <a title="Previous page" class="mx-2 p-2 border rounded bg-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white" href="{{prev_page.url}}">Page {{prev_page.no}}</a>
-                    {% endif %}
-                    <p class="mx-2 p-2 border rounded border-green-500 text-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white">Page {{cur_page}}</p>
-                    {% if next_page %}
-                        <a title="Next page" class="mx-2 p-2 border rounded bg-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white" href="{{next_page.url}}">Page {{next_page.no}}</a>
-                    {% endif %}
-                </div>
-                
+            </form>
+    </div>
+
+</div>
+
+{% if item_list %}
+
+<div class="mx-auto my-2 w-full px-4">
+    <div class="block md:flex md:flex-wrap md:justify-center text-center break-all">
+        {% for item in item_list %}
+
+        <div title="{% if item.media %} {{item.mime_type}} | {{item.human_size}} {% else %} Text message {% endif %}"
+            href="{{item.url}}"
+            class="flex flex-col items-center justify-center w-full min-h-full md:w-1/5 lg:w-1/6 rounded my-4 md:mx-1 shadow-md hover:shadow-lg hover:bg-blue-100 hover:border hover:border-blue-200">
+
+            <div class="bg-blue-500 rounded text-white my-1 py-0 px-1">{{item.file_id}}</div>
+
+
+            {% if item.media %}
+
+
+            <a href="{{item.url}}"><img src="{{item.thumbnail}}" class="w-full rounded"></a>
+
+            <div class="p-4 rounded bg-blue-100 rounded text-dark py-0 px-2 my-1">{{item.insight}}</div>
+
+            <span class="item-buttons my-1">
+
+                <a href="{{item.download}}"
+                    class=" hover:bg-blue-300 text-gray-900 font-semibold py-1 px-2 rounded inline-flex items-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" />
+                    </svg>
+                </a>
+
+            </span>
             {% else %}
-                
-                <p class="my-4 text-center text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
-                    No message to display!
-                </p>
-            
+            <a href={{item.url}}>
+                <div class="p-4 rounded bg-blue-100 rounded text-dark py-0 px-2">{{item.insight}}</div>
+            </a>
             {% endif %}
 
-{% include 'footer.html' %}
+        </div>
+
+
+        {% endfor %}
+    </div>
+
+</div>
+
+<p class="my-2 text-center font-semibold">
+    {{item_list|length}} items
+</p>
+
+<div class="mx-auto my-2 text-center flex text-white content-center justify-center">
+    {% if prev_page %}
+    <a title="Previous page"
+        class="mx-2 p-2 border rounded bg-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white"
+        href="{{prev_page.url}}">Page {{prev_page.no}}</a>
+    {% endif %}
+    <p
+        class="mx-2 p-2 border rounded border-green-500 text-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white">
+        Page {{cur_page}}</p>
+    {% if next_page %}
+    <a title="Next page"
+        class="mx-2 p-2 border rounded bg-green-500 hover:border-green-500 hover:text-green-500 hover:bg-white"
+        href="{{next_page.url}}">Page {{next_page.no}}</a>
+    {% endif %}
+</div>
+
+{% else %}
+
+<p class="my-4 text-center text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
+    No message to display!
+</p>
+
+{% endif %}
+
+{% include 'footer.html' %}
\ No newline at end of file