-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (110 loc) · 4.01 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dash PDF</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-[#FFF5F5] dark:bg-[#4B3A3A] min-h-screen w-screen text-black dark:text-white" x-data="{
isBottomSheetOpen: true,
openBottomSheet: function() {
console.log('open', this.isBottomSheetOpen);
this.isBottomSheetOpen = true;
},
closeBottomSheet: function() {
this.isBottomSheetOpen = false;
},
options: [
{
'title': 'Merge',
'icon': '/assets/images/merge.png',
},
{
'title': 'Compress',
'icon': '/assets/images/compress.png',
'dark_icon': '/assets/images/dark/compress.png',
}
]
}">
<!-- Header -->
<div class="w-full h-full p-5 flex flex-col items-center gap-20">
<div class="w-fit h-fit flex-col flex">
<picture>
<source srcset="/assets/images/dark/header.svg" media="(prefers-color-scheme: dark)">
<img src="/assets/images/header.svg" class="max-w-80 max-h-80 w-[85vw] h-80">
</picture>
</div>
<div>
<h3>tmp</h3>
<form>
<button id="buttonSubmitForm" class="bg-red-500 p-2 rounded-lg">go</button>
</form>
</div>
<!-- Cards -->
<div class="w-full h-fit flex flex-wrap justify-center gap-5">
<template x-for="(option, index) in options" :key="index">
<button @click.stop="openBottomSheet()"
class="h-[16rem] w-[16rem] border-2 rounded-lg p-2 flex flex-col gap-5 items-center justify-center cursor-pointer">
<picture>
<template x-if="option.dark_icon">
<source :srcset="option.dark_icon" media="(prefers-color-scheme: dark)">
</template>
<img :src="option.icon" class="max-w-40 max-h-40 w-40 h-40">
</picture>
<h3 class="text-xl font-semibold" x-text="option.title"></h3>
</button>
</template>
</div>
<!-- Bottom Sheet -->
<template x-if="isBottomSheetOpen">
<div id="bottomsheet" @click="closeBottomSheet()"
class="fixed inset-0 bg-black/50 z-50 flex items-end justify-center transition-all duration-1000"
:class="isBottomSheetOpen ? 'opacity-100' : 'opacity-0'">
<div class="bg-[#FFF5F5] dark:bg-[#4B3A3A] w-full h-48 max-w-[38rem] p-5
transition-transform duration-300 transform translate-y-0
pt-2 flex flex-col items-center gap-5 rounded-t-2xl justify-start"
:class="isBottomSheetOpen ? 'translate-y-0' : 'translate-y-full'">
<div class="h-1 w-24 rounded-full bg-black"></div>
<h3 class="text-3xl font-semibold">Compress PDF</h3>
<p>etstest</p>
</div>
</div>
</template>
</div>
</body>
</html>
<script>
// access the pre-bundled global API functions
const { invoke } = window.__TAURI__.tauri
const {open} = window.__TAURI__.dialog;
const buttonSubmitForm = document.querySelector('#buttonSubmitForm');
async function selectFile() {
try {
const result = await open( { multiple: false, filters: [{ name: 'PDF', extensions: ['pdf'] }] }); //only pdf
if (!result) {
console.error("No file selected");
return null;
}
return result;
} catch (error) {
console.error("Error while selecting file:", error);
return null;
}
}
buttonSubmitForm.addEventListener('click', async (e) => {
e.preventDefault();
const filePath = await selectFile();
if (!filePath) return;
const fileName = "tmp.pdf";
console.log('File selected:', filePath, typeof filePath);
const fileData = { name: fileName, path: filePath }; // Ensure the correct structure
const response = await invoke('compress', { fileData: fileData });
if (response.ok) {
console.log('File compressed successfully');
} else {
console.error('Failed to compress file:', response.error);
}
});
</script>