-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (174 loc) · 13 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foclip - Folder Clipper</title>
<meta name="application-name" content="Foclip - Folder Clipper">
<meta name="description"
content="Tool sederhana untuk melakukan pencarian lanjutan dan mengambil file dalam folder.">
<meta name="author" content="Hayyi">
</head>
<body class="bg-gray-50">
<div class="max-w-lg mx-auto py-8 sm:py-12" x-data="main">
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="space-y-4">
<div>
<h1 class="text-lg leading-6 font-medium text-gray-900 mb-2">Foclip - Folder Clipper</h1>
<h2 class="text-sm text-gray-500">Tool sederhana untuk melakukan pencarian lanjutan dan
mengambil file dalam folder.</h2>
</div>
<div class="content">
<div x-show="!dirHandler">
<button type="button" x-on:click="openDir"
class="relative block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1"
stroke="currentColor" class="mx-auto h-12 w-12 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776" />
</svg>
<span class="mt-2 block text-sm font-medium text-gray-900"> Buka folder dan akses file
</span>
</button>
</div>
<div style="display: none;" class="space-y-3" x-show="dirHandler">
<div x-show="listFile.length" style="display: none;">
<div class="space-y-2 mb-3">
<div class="relative">
<textarea rows="3" x-model="orSearch" x-on:input="filterListFile"
placeholder="Type here to search... or search... or search..."
class="max-w-lg py-1.5 placeholder:text-gray-400 shadow-sm block w-full focus:ring-blue-500 focus:border-blue-500 sm:text-sm border border-gray-300 rounded-md"></textarea>
<div class="absolute top-2 right-0 pr-2 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm" id="price-currency">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 icon icon-tabler icon-tabler-search" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
<path d="M21 21l-6 -6"></path>
</svg>
</span>
</div>
</div>
<div class="relative">
<div
class="absolute inset-y-0 left-0 pl-2 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 icon icon-tabler icon-tabler-ampersand" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M19 20l-10.403 -10.972a2.948 2.948 0 0 1 0 -4.165a2.94 2.94 0 0 1 4.161 0a2.948 2.948 0 0 1 0 4.165l-4.68 4.687a3.685 3.685 0 0 0 0 5.207a3.675 3.675 0 0 0 5.2 0l5.722 -5.922">
</path>
</svg>
</span>
</div>
<input type="text" placeholder="Type here to search..." x-model="andSearch"
x-on:input="filterListFile"
class="pl-8 pr-8 placeholder:text-gray-400 max-w-lg py-1.5 shadow-sm block w-full focus:ring-blue-500 focus:border-blue-500 sm:text-sm border border-gray-300 rounded-md">
<div
class="absolute inset-y-0 right-0 pr-2 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm" id="price-currency">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 icon icon-tabler icon-tabler-search" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
<path d="M21 21l-6 -6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="border-y">
<template x-for="(filename, index) in listFileFiltered">
<div class="flex items-center py-2 border-b border-gray-200 last:border-b-0">
<div>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-gray-500 mr-2 icon icon-tabler icon-tabler-file-description"
width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path
d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z">
</path>
<path d="M9 17h6"></path>
<path d="M9 13h6"></path>
</svg>
</div>
<div class="text-sm">
<span x-text="filename" class="font-medium text-gray-700"></span>
</div>
</div>
</template>
<div x-show="!listFileFiltered.length" class="py-2 text-sm text-gray-500">
<p>Tidal ada file</p>
</div>
</div>
<div class="mt-3">
<button type="button" x-show="listFileFiltered.length" x-on:click="downloadZip"
class="mr-1 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<span
x-text="false ? 'Loading ...' : `Download zip ${listFileFiltered.length} files`"></span>
</button>
<button type="button" x-on:click="closeDir"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Kembali
</button>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-200"></div>
<div>
<h2 class="text-base leading-6 font-medium text-gray-900 mb-2">Bagaimana cara menggunakan
Foclip?</h2>
<div class="text-sm text-gray-500 space-y-2">
<div>
<ul class="list-disc pl-5">
<li>Klik buka folder dan buka folder yang berisi file-file yang ingin dicari</li>
<li>Beri akses untuk membaca file di dalam folder</li>
<li>Lengkapi pencarian lanjutan untuk memilah file</li>
<li>Tekan tombol download zip untuk mendownload file yang ditampilkan</li>
</ul>
</div>
<div>
<p class="mb-1">Apa itu pencarian lanjutan?</p>
<ul class="list-disc pl-5">
<li>Pencarian yang terdiri dari dua input</li>
<li>Nama file yang ditampilkan berisi salah satu baris input pertama</li>
<li>Nama file yang ditampilkan berisi input kedua</li>
</ul>
</div>
<div>
<p class="mb-1"><b>Nb</b>: Tool tidal dapak dapat membuka folder di system files,
pindahkan folder jika ingin membuka. Contoh folder system files <code
class="bg-yellow-50 rounded">`C:/Windows`</code>, <code
class="bg-yellow-50 rounded">`C:/Users`</code>, <code
class="bg-yellow-50 rounded">`%appdata%`</code>, dll.</p>
</div>
</div>
</div>
<div class="text-sm text-gray-500">
<p>Butuh lebih dari ini? <a href="https://m.me/hayyi02"
class="text-blue-700 hover:text-blue-800 hover:underline" target="_blank">Kontak
facebook →</a></p>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>