Hugging Face's logo

Spaces:
thejagstudio
/
CloudStorage
Sleeping

App Files Community
CloudStorage
File size: 10,135 Bytes 
0a08d4d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44592f2
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
125
126
127
128
129
130
131
 
<!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>
            <button onclick="history.back()" class="bg-indigo-500 hover:bg-indigo-400 text-white mx-8 font-bold p-3 mb-3 rounded-lg inline-flex items-center">
                <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
                </svg>

                <span>Back</span>
            </button>
            <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">
                            <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>