File size: 9,530 Bytes
0a08d4d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>List</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <style>

            .issuu-embed-container {

                position: relative;

                padding-bottom: 56.25%; /* set the aspect ratio here as (height / width) * 100% */

                height: 0;

                overflow: hidden;

                max-width: 100%;

            }

            .issuu-embed-container iframe {

                position: absolute;

                top: 0;

                left: 0;

                width: 100%;

                height: 100%;

            }

        </style>
    </head>
    <body>
        <div class="bg-white">
            <header class="h-20 flex m-4 justify-between items-center mb-4">
                <!-- logo - start -->
                <a href="/" class="my-5 inline-flex items-center text-black-800 text-2xl md:text-3xl font-bold gap-2.5" aria-label="logo">
                    <svg class="w-[10%] text-indigo-500" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: none; transform-origin: 50% 50%; cursor: move; transition: none 0s ease 0s" viewBox="0 0 3500 3500">
                        <g id="l5TLm6F9JGem8YOQ8A41YML" fill="rgb(100,103,241)" style="transform: none">
                            <g><path id="pulsHdoRs" d="M1455 3470 c-164 -30 -323 -83 -480 -160 -487 -242 -829 -689 -935 -1226 -28 -139 -37 -389 -21 -534 64 -550 390 -1040 879 -1319 170 -98 440 -186 642 -211 203 -24 460 -7 658 45 609 160 1093 651 1246 1263 120 479 34 978 -238 1387 -258 387 -641 646 -1101 745 -149 33 -495 38 -650 10z m488 -574 c37 -7 70 -15 72 -18 3 -3 -39 -24 -92 -48 -214 -94 -369 -196 -520 -343 -336 -327 -433 -761 -242 -1084 19 -31 67 -89 107 -130 40 -40 70 -73 67 -73 -15 0 -143 54 -225 95 -221 111 -505 336 -517 410 -9 55 17 270 43 362 121 418 441 719 869 818 117 28 326 33 438 11z m360 -132 c271 -152 315 -279 149 -436 -70 -67 -94 -78 -165 -78 -46 0 -61 6 -127 51 -90 62 -156 92 -258 121 -65 17 -95 20 -187 15 -153 -7 -269 -48 -381 -133 -27 -21 -44 -31 -38 -23 110 147 205 237 364 343 100 67 296 166 395 199 l70 24 55 -23 c30 -12 85 -39 123 -60z m-1463 -1370 c262 -187 520 -287 807 -314 125 -12 210 -3 313 31 81 26 86 29 188 96 128 86 196 84 296 -8 59 -54 106 -135 106 -183 -1 -41 -30 -104 -66 -139 -47 -47 -187 -136 -271 -172 -299 -129 -612 -133 -916 -10 -250 102 -488 336 -599 590 -42 96 -74 194 -83 254 l-7 44 73 -64 c41 -36 112 -92 159 -125z"></path></g>
                        </g>
                    </svg>
                    Cloud Storage
                </a>
                <!-- logo - end -->

                <!-- nav - start -->
                <nav class="hidden lg:flex gap-12">
                    <a href="../" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
                    <a href="../list" class="text-indigo-500 text-lg font-semibold">List</a>
                    <a href="../upload" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
                    <a href="../logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
                </nav>
                <!-- nav - end -->

                <!-- buttons - start -->
                <div id="nav" onmouseout="outB()" onmouseover="inB()" class="overflow-visible z-10 mt-[150px] grid grid-cols-1 grid-rows-5">
                    <button type="button" class="shadow-xl inline-flex items-center lg:hidden bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold rounded-lg gap-2 px-2.5 py-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
                        </svg>
                        Menu
                    </button>
                    <a href="../" class="mt-2 hidden bg-white rounded-t-lg px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
                    <a href="../list" class="shadow-xl hidden bg-white px-2 text-indigo-500 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">List</a>
                    <a href="../upload" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
                    <a href="../logout" class="shadow-xl hidden bg-white px-2 text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100 rounded-b-lg">Logout</a>
                </div>
                <!-- buttons - end -->
            </header>
            <div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 md:gap-x-6 gap-y-8">
                    {% for file in folders%}
                    <!-- product - start -->
                    <div onclick="location.href = '{{ file.1 }}';">
                        <a class="shadow-lg h-60 group block bg-gray-100 rounded-lg overflow-hidden relative mb-2 lg:mb-3 cursor-pointer">
                            <img style="max-width: 100%; max-height: 80%; display: block; margin-left: auto; margin-right: auto" src="https://cdn.icon-icons.com/icons2/1379/PNG/512/folderblue_92960.png" />
                            <div class="flex flex-nowrap">
                                <h1 class="w-[80%] m-3 text-gray-600 font-bold hover:gray-800 lg:text-lg transition duration-100 mb-1 truncate">{{ file.0 }}</h1>
                                <svg class="m-4 bi bi-trash" onclick="deleteB(this)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                </svg>
                            </div>
                        </a>
                    </div>
                    <!-- product - end -->
                    {% endfor %} {% for file in files%}
                    <!-- product - start -->
                    <div>
                        <a class="shadow-lg h-60 group block bg-gray-100 rounded-lg overflow-hidden relative mb-2 lg:mb-3">
                            <iframe width="100%" height="80%" src="{{ file.1 }}" frameborder="0" seamless=""></iframe>
                            <div class="flex flex-nowrap">
                                <h1 class="w-[80%] m-3 text-gray-600 font-bold hover:gray-800 lg:text-lg transition duration-100 mb-1 truncate">{{ file.0 }}</h1>
                                <svg class="m-4 bi bi-trash" onclick="deleteB(this)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                </svg>
                            </div>
                        </a>
                    </div>
                    <!-- product - end -->
                    {% endfor %}
                </div>
            </div>
        </div>
        <script>

            function deleteB(element) {

                element.parentNode.parentNode.parentNode.remove();

                var id = element.parentNode.parentNode.children[0].src.split("/")[5];

                fetch("../deleteFile/", {

                    method: "POST",

                    body: JSON.stringify({ file_id: id }),

                });

            }

        </script>
        <script>

            function inB(event) {

                ass = document.getElementById("nav").getElementsByTagName("a");

                for (let i = 0; i < ass.length; i++) {

                    ass[i].classList.remove("hidden");

                }

            }

            function outB(event) {

                ass = document.getElementById("nav").getElementsByTagName("a");

                for (let i = 0; i < ass.length; i++) {

                    ass[i].classList.add("hidden");

                }

            }

        </script>
    </body>
</html>