-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (101 loc) · 6.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link rel="manifest" href="./manifest.json"> -->
<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>PicSponge</title>
<link rel="stylesheet" href="./app/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.event.move/2.0.1/jquery.event.move.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.twentytwenty.min.js"></script> -->
<script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
</head>
<body class="custom-body-bg-color">
<div class="container-lg">
<div class="d-flex justify-content-center">
<div class="frosted-glass" style="padding:2em 0">
<h1 class="text-center fw-bold" style="font-size: 4rem;">Free Bulk Compression for PNG, JPG</h1>
<h6 class="text-center container-lg" style="width:60%;">PicSponge helps optimize web/mobile app data, enhancing user experience; no limit on image quantity or size, local compression, no data upload, safeguarding user privacy.</h6>
<label for="inputImage" class="upload-label custom-file-upload dashed-border">
<span class="" id="tips">Drop your PNG or JPEG files here!</span>
<input type="file" id="inputImage" class="upload-input" multiple>
</label>
<!-- <a id="downloadApp" class="custom-link-color" href="./download/PicSqueeze-Setup-0.1.0.exe" style="line-height: 5em;">下载 Windows 桌面应用</a> -->
</div>
</div>
</div>
<div class="container-lg" id="main-card">
<template id="item-template">
<div class="p-1 my-1 container list-item w-100" data-link="{beforeSrc}">
<div class="row w-100 g-1 listhead" id="{itemName}">
<div class="col-4 d-flex align-items-center" id="displayName">
{displayName}
</div>
<div class="col-4 d-flex align-items-center text-center justify-content-center progressHead">
<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
</div>
</div>
<div class="col-3 text-end ">
<button type="button" class="btn btn-dark compare campareBox"><a id="compareButton">Compare</a></button>
</div>
<div class="col-1 text-end downloadBox">
<button type="button" class="btn btn-dark"><a class="downloadButton" href="{url}" download="{name}">Download</a></button>
</div>
</div>
</div>
</template>
<template id="percent-template">
<div class="col-4 d-flex align-items-center text-center justify-content-center"></div>
</template>
</div>
<div class="container-lg p-1 sticky-div" id="down_all" style="display: none;">
<div class="p-1 container w-100">
<div class="row w-100 g-1 justify-content-center">
<div class="col-3 text-center">
<button type="button" class="btn btn-dark"><a id="downloadAllButton" href="{url}" download="{name}">Download All</a></button>
</div>
</div>
</div>
</div>
<div class="container-lg" style="padding-top:4rem;">
<div class="row row-cols-1 row-cols-md-3 g-4 h-100">
<div class="col h-100">
<div class="card">
<img src="https://yipooo.com/X_lab/images/007_cloth_line.png" class="card-img-top" alt="..." style="height: 300px;">
<div class="card-body">
<h1 class="card-title fw-bold">Free</h5>
<p class="card-text" style="height: 7rem;">No limit on image quantity; no limit on image size; unrestricted devices, with offline desktop, mobile, and web versions available.</p>
</div>
</div>
</div>
<div class="col h-100">
<div class="card">
<img src="https://yipooo.com/X_lab/images/066_filmF.jpg" class="card-img-top" alt="..." style="height: 300px;">
<div class="card-body">
<h1 class="card-title fw-bold">Simple</h5>
<p class="card-text" style="height: 7rem;">Hides all advanced options, providing you with the most convenient compression solution for the best quality and size ratio.</p>
</div>
</div>
</div>
<div class="col h-100">
<div class="card">
<img src="https://yipooo.com/X_lab/images/033_jianying_01.png" class="card-img-top" alt="..." style="height: 300px;">
<div class="card-body">
<h1 class="card-title fw-bold">Safe</h5>
<p class="card-text" style="height: 7rem;">All image data is processed locally without uploading, relying on your device's speed, ensuring security and eliminating concerns about internet speed.</p>
</div>
</div>
</div>
</div>
</div>
<img id="displayImg" class="background-stretch" alt="Background image" class="img-fluid" style="display: none;">
<script src="./app/UPNG/UPNG.js"></script>
<script src="./index.js" type="module"></script>
</body>
</html>