Hugging Face's logo

Spaces:
thejagstudio
/
CloudStorage
Runtime error

App Files Community
thejagstudio commited on
Commit
4151e10
·
verified ·
1 Parent(s): 41fef54

Upload 7 files

Browse files
Files changed (1) hide show
  1. templates/list.html +120 -41
templates/list.html CHANGED
@@ -22,7 +22,14 @@
22
  </style>
23
  </head>
24
  <body>
25
- <div class="bg-white">
 
 
 
 
 
 
 
26
  <header class="h-20 flex m-4 justify-between items-center mb-4">
27
  <!-- logo - start -->
28
  <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">
@@ -37,10 +44,10 @@
37
 
38
  <!-- nav - start -->
39
  <nav class="hidden lg:flex gap-12">
40
- <a href="../" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
41
- <a href="../list" class="text-indigo-500 text-lg font-semibold">List</a>
42
- <a href="../upload" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
43
- <a href="../logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
44
  </nav>
45
  <!-- nav - end -->
46
 
@@ -59,53 +66,108 @@
59
  </div>
60
  <!-- buttons - end -->
61
  </header>
62
- <div class="max-w-screen-2xl px-4 md:px-8 mx-auto">
63
- <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">
64
- {% for file in folders%}
65
- <!-- product - start -->
66
- <div onclick="location.href = '{{ file.1 }}';">
67
- <a class="shadow-lg h-60 group block bg-gray-100 rounded-lg overflow-hidden relative mb-2 lg:mb-3 cursor-pointer">
68
- <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" />
69
- <div class="flex flex-nowrap">
70
- <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>
71
- <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">
72
- <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" />
73
- <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" />
74
- </svg>
 
 
 
 
 
 
 
 
75
  </div>
76
- </a>
 
77
  </div>
78
- <!-- product - end -->
79
- {% endfor %} {% for file in files%}
80
- <!-- product - start -->
81
- <div>
82
- <a class="shadow-lg h-60 group block bg-gray-100 rounded-lg overflow-hidden relative mb-2 lg:mb-3">
83
- <iframe width="100%" height="80%" src="{{ file.1 }}" frameborder="0" seamless=""></iframe>
84
- <div class="flex flex-nowrap">
85
- <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>
86
- <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">
87
- <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" />
88
- <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" />
89
- </svg>
90
- </div>
91
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </div>
93
- <!-- product - end -->
94
- {% endfor %}
95
  </div>
96
  </div>
97
  </div>
98
  <script>
99
- function deleteB(element) {
100
- element.parentNode.parentNode.parentNode.remove();
101
- var id = element.parentNode.parentNode.children[0].src.split("/")[5];
102
- fetch("../deleteFile/", {
103
  method: "POST",
104
  body: JSON.stringify({ file_id: id }),
105
  });
106
  }
107
- </script>
108
- <script>
 
 
 
 
 
 
 
109
  function inB(event) {
110
  ass = document.getElementById("nav").getElementsByTagName("a");
111
  for (let i = 0; i < ass.length; i++) {
@@ -118,6 +180,23 @@
118
  ass[i].classList.add("hidden");
119
  }
120
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  </script>
122
  </body>
123
  </html>
 
22
  </style>
23
  </head>
24
  <body>
25
+ <div class="bg-white relative ">
26
+ <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">
27
+ <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">
28
+ <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"/>
29
+ </svg>
30
+
31
+ <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>
32
+ </div>
33
  <header class="h-20 flex m-4 justify-between items-center mb-4">
34
  <!-- logo - start -->
35
  <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">
 
44
 
45
  <!-- nav - start -->
46
  <nav class="hidden lg:flex gap-12">
47
+ <a href="/" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Home</a>
48
+ <a href="/list" class="text-indigo-500 text-lg font-semibold">List</a>
49
+ <a href="/upload" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Upload</a>
50
+ <a href="/logout" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Logout</a>
51
  </nav>
52
  <!-- nav - end -->
53
 
 
66
  </div>
67
  <!-- buttons - end -->
68
  </header>
69
+ {% if back == True %}
70
+ <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">
71
+ <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">
72
+ <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" />
73
+ </svg>
74
+
75
+ <span>Back</span>
76
+ </button>
77
+ {% endif %}
78
+ <div class="px-4 md:px-8 mx-auto">
79
+ <div class="w-full overflow-y-auto p-5">
80
+ {% if folders|length > 0 %}
81
+ <div class="mb-5 flex flex-col space-y-4">
82
+ <h2>Folders</h2>
83
+ <div class="flex flex-wrap justify-start gap-x-3 gap-y-5 text-[#444746]">
84
+ {% for folder in folders%}
85
+ <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]">
86
+ <div class="flex items-center space-x-2">
87
+ <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>
88
+ </div>
89
+ <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>
90
  </div>
91
+ {% endfor %}
92
+ </div>
93
  </div>
94
+ {% endif %} {% if files|length > 0 %}
95
+ <div class="mb-5 flex flex-col space-y-4">
96
+ <h2>Files</h2>
97
+ <div class="flex flex-wrap justify-start gap-x-3 gap-y-5 text-[#444746]">
98
+ {% for file in files%}
99
+ <div class="relative">
100
+ <div class="flex w-full flex-col items-center justify-center overflow-hidden rounded-xl bg-[#edf2fc] px-2.5 hover:bg-[#e1e5ea]">
101
+ <div title="{{ file.0 }}" class="relative flex w-full items-center justify-between px-1 py-3">
102
+ <div class="flex items-center space-x-4">
103
+ <div class="h-6 w-6">
104
+ <img src="{{file.3}}" class="h-full w-full text-[#CA2E24]" height="1em" width="1em"/>
105
+ </div>
106
+ <span class="w-48 truncate text-sm font-medium text-[#444746]">{{ file.0 }}</span>
107
+ </div>
108
+ <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">
109
+ <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>
110
+ </svg>
111
+ </div>
112
+ <div onclick="preview('{{ file.2 }}')" class="flex h-44 w-80 items-center justify-center pb-2.5 cursor-pointer">
113
+ <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>
114
+ </div>
115
+ </div>
116
+ <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]">
117
+ <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]">
118
+ <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">
119
+ <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>
120
+ </svg>
121
+ <span class="text-sm">Open File</span>
122
+ </div>
123
+ <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]">
124
+ <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">
125
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
126
+ <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
127
+ <path d="M7 11l5 5l5 -5"></path>
128
+ <path d="M12 4l0 12"></path>
129
+ </svg>
130
+ <span class="text-sm">Download</span>
131
+ </a>
132
+ <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]">
133
+ <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">
134
+ <path fill="none" d="M0 0h24v24H0z"></path>
135
+ <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>
136
+ </svg>
137
+ <span class="text-sm">Rename</span>
138
+ </div>
139
+ <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]">
140
+ <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">
141
+ <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
142
+ </svg>
143
+ <span class="text-sm">Move to bin</span>
144
+ </div>
145
+ </section>
146
+ </div>
147
+ {% endfor %}
148
+ </div>
149
  </div>
150
+ {% endif %}
 
151
  </div>
152
  </div>
153
  </div>
154
  <script>
155
+ function deleteFile(element,id) {
156
+ element.parentNode.parentNode.remove();
157
+ fetch("/deleteFile/", {
 
158
  method: "POST",
159
  body: JSON.stringify({ file_id: id }),
160
  });
161
  }
162
+ function renameFile(element,id) {
163
+ let newName = prompt("Enter new name");
164
+ element.parentNode.parentNode.getElementsByTagName("span")[0].innerText = newName;
165
+ element.parentNode.parentNode.getElementsByTagName("div")[0].getElementsByTagName("div")[1].setAttribute("title",newName);
166
+ fetch("/renameFile/", {
167
+ method: "POST",
168
+ body: JSON.stringify({ file_id: id,new_name:newName }),
169
+ });
170
+ }
171
  function inB(event) {
172
  ass = document.getElementById("nav").getElementsByTagName("a");
173
  for (let i = 0; i < ass.length; i++) {
 
180
  ass[i].classList.add("hidden");
181
  }
182
  }
183
+ function preview(id){
184
+ if(id !== "" && id != undefined && document.getElementById("previewIframe").src != "https://drive.google.com/file/d/"+id+"/preview"){
185
+ document.getElementById("previewIframe").src="https://drive.google.com/file/d/"+id+"/preview"
186
+ }
187
+ document.getElementById("previewContainer").classList.toggle("scale-0")
188
+ }
189
+ function imageError(img,icon){
190
+ img.src=icon.replace('/32/','/128/');
191
+ img.classList.remove('object-cover');
192
+ img.classList.remove('h-full');
193
+ img.classList.remove('w-full');
194
+ img.classList.add('object-contain');
195
+ }
196
+ function menuOpener(btn){
197
+ let menu = btn.parentNode.parentNode.parentNode.getElementsByTagName("section")[0];
198
+ menu.classList.toggle("scale-y-0")
199
+ }
200
  </script>
201
  </body>
202
  </html>