Spaces:
Runtime error
Runtime error
File size: 16,882 Bytes
0a08d4d 4151e10 0a08d4d 4151e10 0a08d4d 4151e10 0a08d4d 4151e10 0a08d4d 4151e10 0a08d4d 4151e10 0a08d4d 4151e10 0a08d4d 4151e10 0a08d4d 4151e10 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 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
<!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 relative ">
<div id="previewContainer" class="bg-[#313131] origin-center absolute flex flex-col scale-0 top-0 left-0 h-full w-full transition-all duration-500 z-50">
<svg onclick="preview('{{ file.2 }}')" width="32" height="32" class="top-5 right-20 fixed top-0 bg-red-500 p-1 hover:scale-110 transition-all cursor-pointer z-50 rounded-full" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.293 3.293a1 1 0 1 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z"/>
</svg>
<iframe id="previewIframe" src="" frameborder="0" seamless="" draggable="false" loading="lazy" decoding="async" data-nimg="1" class="fixed top-0 h-[100vh] w-full z-10 rounded-sm object-cover object-center" style="color: transparent"></iframe>
</div>
<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>
{% if back == True %}
<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>
{% endif %}
<div class="px-4 md:px-8 mx-auto">
<div class="w-full overflow-y-auto p-5">
{% if folders|length > 0 %}
<div class="mb-5 flex flex-col space-y-4">
<h2>Folders</h2>
<div class="flex flex-wrap justify-start gap-x-3 gap-y-5 text-[#444746]">
{% for folder in folders%}
<div title="{{ folder.0 }}" onclick="location.href = '{{ folder.1 }}';" class="relative flex w-64 cursor-pointer items-center justify-between rounded-xl bg-[#edf2fc] p-3 hover:bg-[#e1e5ea]">
<div class="flex items-center space-x-2">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 0 0-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32z"></path></svg><span class="w-32 truncate text-sm font-medium text-[#444746]">{{ folder.0 }}</span>
</div>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="h-6 w-6 cursor-pointer rounded-full p-1 hover:bg-[#ccc]" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path></svg>
</div>
{% endfor %}
</div>
</div>
{% endif %} {% if files|length > 0 %}
<div class="mb-5 flex flex-col space-y-4">
<h2>Files</h2>
<div class="flex flex-wrap justify-start gap-x-3 gap-y-5 text-[#444746]">
{% for file in files%}
<div class="relative">
<div class="flex w-full flex-col items-center justify-center overflow-hidden rounded-xl bg-[#edf2fc] px-2.5 hover:bg-[#e1e5ea]">
<div title="{{ file.0 }}" class="relative flex w-full items-center justify-between px-1 py-3">
<div class="flex items-center space-x-4">
<div class="h-6 w-6">
<img src="{{file.3}}" class="h-full w-full text-[#CA2E24]" height="1em" width="1em"/>
</div>
<span class="w-48 truncate text-sm font-medium text-[#444746]">{{ file.0 }}</span>
</div>
<svg onclick="menuOpener(this)" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="h-6 w-6 cursor-pointer rounded-full p-1 hover:bg-[#ccc]" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
</svg>
</div>
<div onclick="preview('{{ file.2 }}')" class="flex h-44 w-80 items-center justify-center pb-2.5 cursor-pointer">
<img src="https://drive.google.com/thumbnail?id={{ file.2 }}&sz=w1000" onerror="imageError(this,'{{file.3}}')" loading="lazy" class="h-full w-full rounded-sm object-cover object-center"></img>
</div>
</div>
<section class="absolute top-10 right-5 scale-y-0 origin-top transition-all z-10 h-fit w-48 rounded-md border bg-white shadow-sm shadow-[#777]">
<div onclick="preview('{{ file.2 }}')" class="my-2 flex items-center space-x-3 px-3 py-1.5 hover:cursor-pointer hover:bg-[#ddd]">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
</svg>
<span class="text-sm">Open File</span>
</div>
<a href="{{file.4}}" download="08.JPG" class="my-2 flex items-center space-x-3 px-3 py-1.5 hover:cursor-pointer hover:bg-[#ddd]">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
<path d="M7 11l5 5l5 -5"></path>
<path d="M12 4l0 12"></path>
</svg>
<span class="text-sm">Download</span>
</a>
<div onclick="renameFile(this,'{{ file.2 }}')" class="my-2 flex items-center space-x-3 px-3 py-1.5 hover:cursor-pointer hover:bg-[#ddd]">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M18.41 5.8L17.2 4.59c-.78-.78-2.05-.78-2.83 0l-2.68 2.68L3 15.96V20h4.04l8.74-8.74 2.63-2.63c.79-.78.79-2.05 0-2.83zM6.21 18H5v-1.21l8.66-8.66 1.21 1.21L6.21 18zM11 20l4-4h6v4H11z"></path>
</svg>
<span class="text-sm">Rename</span>
</div>
<div onclick="deleteFile(this,'{{ file.2 }}')" class="my-2 flex items-center space-x-3 px-3 py-1.5 hover:cursor-pointer hover:bg-[#ddd]">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="h-5 w-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
</svg>
<span class="text-sm">Move to bin</span>
</div>
</section>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
<script>
function deleteFile(element,id) {
element.parentNode.parentNode.remove();
fetch("/deleteFile/", {
method: "POST",
body: JSON.stringify({ file_id: id }),
});
}
function renameFile(element,id) {
let newName = prompt("Enter new name");
element.parentNode.parentNode.getElementsByTagName("span")[0].innerText = newName;
element.parentNode.parentNode.getElementsByTagName("div")[0].getElementsByTagName("div")[1].setAttribute("title",newName);
fetch("/renameFile/", {
method: "POST",
body: JSON.stringify({ file_id: id,new_name:newName }),
});
}
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");
}
}
function preview(id){
if(id !== "" && id != undefined && document.getElementById("previewIframe").src != "https://drive.google.com/file/d/"+id+"/preview"){
document.getElementById("previewIframe").src="https://drive.google.com/file/d/"+id+"/preview"
}
document.getElementById("previewContainer").classList.toggle("scale-0")
}
function imageError(img,icon){
img.src=icon.replace('/32/','/128/');
img.classList.remove('object-cover');
img.classList.remove('h-full');
img.classList.remove('w-full');
img.classList.add('object-contain');
}
function menuOpener(btn){
let menu = btn.parentNode.parentNode.parentNode.getElementsByTagName("section")[0];
menu.classList.toggle("scale-y-0")
}
</script>
</body>
</html>
|