-
Notifications
You must be signed in to change notification settings - Fork 1
/
popup.html
114 lines (107 loc) · 5.22 KB
/
popup.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
<html data-bs-theme="auto">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="functionality.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="libraries/bootstrap-5.3.2-dist/css/bootstrap.css">
<script src="libraries/bootstrap-5.3.2-dist/js/bootstrap.js"></script>
<!-- Tagify -->
<link rel="stylesheet" href="libraries/tagify/css/tagify.css">
<script src="libraries/tagify/js/tagify.js"></script>
<script src="libraries/tagify/js/tagify.polyfill.js"></script>
<link rel="stylesheet" href="libraries/dragsort/css/dragsort.css">
<link rel="stylesheet" href="css/tagify-custom.css">
<!-- qrious -->
<script src="libraries/qrious/js/qrious.js"></script>
<style>
main {
width: 500px !important;
height: 520px;
}
</style>
</head>
<body style="--bs-body-font-size: 0.85rem">
<br>
<main role="main" class="container">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-format-tab" data-bs-toggle="pill" data-bs-target="#pills-format"
type="button" role="tab" aria-controls="pills-home" aria-selected="true">Format Editor
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-url-tab" data-bs-toggle="pill" data-bs-target="#pills-url" type="button"
role="tab" aria-controls="pills-profile" aria-selected="false">URL Transformer
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-qr-tab" data-bs-toggle="pill" data-bs-target="#pills-qr" type="button"
role="tab" aria-controls="pills-profile" aria-selected="false">QR Code
</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-format" role="tabpanel" aria-labelledby="pills-format-tab">
<p class="lead">Format Editor Section:</p>
<input id="format-controller" class="form-control overflow-auto" type="text" placeholder="Default input">
<p>
Control the format on how you share your links here. Edit the current format and then
click the apply button. To add the TITLE and URL tags, simply type @ while editing and
pressing T for TITLE and U for URL
</p>
<p class="lead">Format Output:</p>
<input id="format-output" class="form-control" type="text" placeholder="Default output" readonly>
<p></p>
<input id="copyFormatOutputToClipboardBtn" class="btn btn-primary" type="button" value="Copy to Clipboard">
<input id="applyFormatBtn" class="btn btn-primary" type="button" value="Apply">
<input id="undoFormatBtn" class="btn btn-primary" type="button" value="Undo">
</div>
<div class="tab-pane fade" id="pills-url" role="tabpanel" aria-labelledby="pills-url-tab">
<p class="lead">URL Transformer Section [<abbr id="transformer-hostname"></abbr>]</p>
<input id="transformer-controller-regex" class="form-control" type="text" placeholder="Regex">
<p></p>
<input id="transformer-controller-output" class="form-control" type="text" placeholder="Output">
<p></p>
<input id="applyTransformerBtn" class="btn btn-primary" type="button" value="Apply">
<p></p>
<p>
Automatically transforms the URL base on the domain of the URL. Very helpful when trying to convert
links to a more approriate format such as converting YouTube shorts to their standard player format
or forcing the links you share to be always the desktop version.
</p>
</div>
<div class="tab-pane fade" id="pills-qr" role="tabpanel" aria-labelledby="pills-url-tab">
<p class="lead">QR Code</p>
<p></p>
<canvas id="qr"></canvas>
<p></p>
<p>
Share the link into QR Code fashion. Either save the image and attach it somewhere else, copy it on
Clipboard
</p>
<input id="copyQRImageToClipboardBtn" class="btn btn-primary" type="button" value="Copy QR to Clipboard">
</div>
</div>
</main>
<div class="modal" id="modalBox" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id='modal-title' class="modal-title">Modal title</h5>
</div>
<div id="modal-message" class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button id="modal-ok-btn" type="button" class="btn" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<script src="libraries/dragsort/js/dragsort.js"></script>
<script src="format.js"></script>
<script src="transformer.js"></script>
<script src="colors.js"></script>
<script src="qr.js"></script>
</body>
</html>