-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (142 loc) · 9.86 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
<!DOCTYPE html>
<html>
<head>
<title>FiliPDF</title>
<link rel="icon" type="image/png" href="res/img/favicon.png" />
<link href="res/styles.css" rel="stylesheet">
<script type="text/javascript" src="res/font/font.js"></script>
<script type="text/javascript" src="res/dep/fontkit/fontkit.umd.min.js"></script>
<script type="text/javascript" src="res/dep/pdf-lib/pdf-lib.min.js"></script>
<script type="module" src="res/dep/pdfjs/pdf.mjs"></script>
<link href="res/dep/bootstrap/bootstrap.min.css" rel="stylesheet">
<script src="res/dep/jquery/jquery.slim.min.js"></script>
<script src="res/dep/bootstrap/bootstrap.bundle.min.js"></script>
<link href="res/dep/bootstrap-icons/bootstrap-icons.min.css" rel="stylesheet">
<script src="res/scripts.js"></script>
</head>
<body>
<!-- Notifications -->
<div class="toast-container position-fixed m-3 p-3">
</div>
<!-- Navbar -->
<nav class="navbar bg-body-tertiary border-bottom border-body">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">
<img src="res/img/favicon.png" width="28" height="32" class="d-inline-block align-text-top mx-3">
FiliPDF
</span>
<span class="navbar-text mx-3">
<span class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover"><a class="lnk_github" href="https://github.com/PhilJbt/FiliPDF" target="_blank"><i class="bi bi-github"></i></a></span>
</span>
</div>
</nav>
<!-- Container -->
<div class="m-3">
<!-- Title and descriptions -->
<div class="d-flex flex-column mb-5">
<h1 id="bdy_ttl" class="trans-txc"></h1>
<h5 id="bdy_dsc" class="trans-txc"></h5>
<h6 id="bdy_add" class="trans-txc"></h6>
</div>
<!-- Container -->
<div class="d-flex flex-row">
<div class="p-0 m-0">
<div class="d-flex flex-column gap-3 ms-5 bar_sticky mnu_bar">
<!-- Input -->
<div class="mb-5">
<input class="form-control" type="file" id="inp_filPck" name="inp_filPck" accept=".pdf"/>
<label class="trans-txc" for="inp_filPck" id="inp_filPck_lbl"></label>
</div>
<!-- Text lines -->
<div class="form-floating mb-1">
<textarea class="form-control" id="inp_txtLin" style="height: 100px" placeholder=""></textarea>
<label class="trans-txc" for="inp_txtLin" id="inp_txtLin_lbl" data-content=""></label>
<p id="inp_txtLin_dsc" class="txt_dsc trans-inh link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover fw-light"></p>
</div>
<!-- Date -->
<div>
<input class="form-control" class="lbl_cnt" type="date" id="inp_date" />
<label class="trans-txc" for="inp_date" id="inp_date_lbl" data-content=""></label>
</div>
<!-- Font size -->
<div>
<input class="form-control" class="lbl_cnt" type="range" id="inp_fntSiz" min="10" max="200" step="5" value="15" />
<label class="trans-txc lbl_cnt" for="inp_fntSiz" id="inp_fntSiz_lbl" data-content=""></label>
</div>
<!-- Line spacing -->
<div>
<input class="form-control" class="lbl_cnt" type="range" id="inp_linSpc" min="0.5" max="3" step="0.1" value="1" />
<label class="trans-txc lbl_cnt" for="inp_linSpc" id="inp_linSpc_lbl" data-content=""></label>
</div>
<!-- Image resolution -->
<div id="tltp_imgQly" class="trans-dat" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="">
<input class="form-control" class="lbl_cnt" type="range" id="inp_imgQly" min="1" max="5" step="1" value="2" />
<label class="trans-txc lbl_cnt" for="inp_imgQly" id="inp_imgQly_lbl" data-content=""></label>
</div>
<!-- Preview / Save -->
<div class="btn-group btn-group-lg flex-row justify-content-center mt-5" role="group">
<button type="button" onclick="processing(true)" id="inp_prvw" class="btn btn-primary trans-dat trans-txc" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="" disabled></button>
<button type="button" onclick="processing(false)" id="inp_save" class="btn btn-success trans-dat trans-txc" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="" disabled></button>
</div>
<!-- Progress bar -->
<div class="d-flex flex-column">
<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height: 30px">
<div class="progress-bar" id="bar_progress" style="width: 0%"></div>
</div>
</div>
<!-- Presets -->
<div class="btn-group flex-row justify-content-center mt-5 mb-2">
<div class="input-group">
<div class="input-group-text trans-txc" id="btn_presets"></div>
<button type="button" class="btn btn-outline-secondary trans-dat trans-txc" onclick="setOptionsPreset(0)" id="prset0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title=""></button>
<button type="button" class="btn btn-outline-secondary trans-dat" onclick="setOptionsPreset(1)" id="prset1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="">1</button>
<button type="button" class="btn btn-outline-secondary trans-dat" onclick="setOptionsPreset(2)" id="prset2" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="">2</button>
<button type="button" class="btn btn-outline-secondary trans-dat" onclick="setOptionsPreset(3)" id="prset3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="">3</button>
<button type="button" class="btn btn-outline-secondary trans-dat" onclick="setOptionsPreset(4)" id="prset4" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="">4</button>
<button type="button" class="btn btn-outline-secondary trans-dat" onclick="setOptionsPreset(5)" id="prset5" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="">5</button>
</div>
</div>
<!-- Text color -->
<div>
<input class="form-control" class="lbl_cnt" type="color" id="inp_fntClr" name="inp_fntClr" value="#00ff00" />
<label class="trans-txc lbl_cnt" for="inp_fntClr" id="inp_fntClr_lbl" data-content=""></label>
</div>
<!-- Blend modes -->
<div class="form-floating">
<select class="form-select" id="inp_texBld">
<option id="slc_nrml" class="trans-txc" value="0"></option>
<option id="slc_diff" class="trans-txc" value="1" selected></option>
<option id="slc_xclu" class="trans-txc" value="2"></option>
<option id="slc_mlti" class="trans-txc" value="3"></option>
<option id="slc_ovrl" class="trans-txc" value="4"></option>
<option id="slc_scrn" class="trans-txc" value="5"></option>
<option id="slc_clrb" class="trans-txc" value="6"></option>
<option id="slc_clrd" class="trans-txc" value="7"></option>
<option id="slc_drkn" class="trans-txc" value="8"></option>
<option id="slc_ligh" class="trans-txc" value="9"></option>
<option id="slc_ligt" class="trans-txc" value="10"></option>
<option id="slc_ligs" class="trans-txc" value="11"></option>
</select>
<label class="trans-txc" for="inp_texBld" id="inp_texBld_lbl"></label>
<p class="txt_dsc"><a id="inp_texBld_dsc" class="trans-inh link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover fw-light" target="_blank" href="https://github.com/PhilJbt/FiliPDF/blob/main/docs/options/blendmode.md"></a></p>
</div>
<!-- Text opacity -->
<div>
<input class="form-control" class="lbl_cnt" type="range" id="inp_texOpa" min="0" max="1" step="0.1" value="0.3" />
<label class="trans-txc lbl_cnt mb-5" for="inp_texOpa" id="inp_texOpa_lbl" data-content=""></label><p class="txt_dsc"><a id="inp_texBld_dsc" class="trans-inh link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover fw-light" target="_blank" href="https://github.com/PhilJbt/FiliPDF/blob/main/docs/options/opacity.md"></a></p>
</div>
</div>
</div>
<!-- Image preview -->
<div class="flex-shrink-1 p-0 m-0">
<div class="d-flex flex-column mx-3 ms-5 bar_sticky">
<p class="lead mb-3 trans-txc" id="txt_prvw"></p>
<div id="canvas-container">
<img id="img_example" class="trans-src" src="" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>