-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
441 lines (367 loc) · 17.1 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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>
My Web Shortcuts - Open Source Browser Extension for productivity &
accessibility
</title>
<script src="https://kit.fontawesome.com/0617272442.js"
crossorigin="anonymous"></script>
<link rel="shortcut icon"
href="assets/media/myWebShortcutsLogo_transparent.webp"
type="image/x-icon" />
<!-- Meta Tags for SEO -->
<meta name="description"
content="Create custom shortcuts for the web" />
<meta name="keywords"
content="create shortcuts in a website, custom keyboard shortcuts in chrome, custom keyboard shortcuts in browser, custom keyboard shortcuts in firefox, click on elements using keyboard, , click button using keyboard keys, click links using keyboard keys, chrome extension for shortcuts, , best chrome extensions for productivity, accessibility chrome extensions, my web shortcuts, web shortcuts, prakhar tiwari, prakhartiwari0, web developer, prakashh technologies" />
<meta name="author"
content="Prakhar Tiwari" />
<!-- Open Graph Meta Tags for Social Media -->
<meta property="og:title" content="My Web Shortcuts - Open Source Browser Extension for productivity & accessibility" />
<meta property="og:description" content="Introducing My Web Shortcuts 🌏💻 — your new best friend for browsing!
A cool free & open-source extension that lets you create your own keyboard shortcuts for any website. No more endless clicking around; now you can do actions or click things using simple keyboard strokes." />
<meta property="og:image" content="https://www.mywebshortcuts.xyz/assets/media/social_banner.png" />
<meta property="og:image:alt" content="My Web Shortcuts Preview Image" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="og:url" content="https://www.mywebshortcuts.xyz" />
<meta property="og:type" content="website" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Web Shortcuts - Open Source Browser Extension for productivity & accessibility" />
<meta name="twitter:description" content="Introducing My Web Shortcuts 🌏💻 — your new best friend for browsing!
A cool free & open-source extension that lets you create your own keyboard shortcuts for any website. No more endless clicking around; now you can do actions or click things using simple keyboard strokes." />
<meta name="twitter:image" content="https://www.mywebshortcuts.xyz/assets/media/social_banner.png" />
<!-- CSS Files links -->
<link rel="stylesheet"
href="assets/styles/root.css" />
<link rel="stylesheet"
href="assets/styles/homepage/index.css" />
<link rel="stylesheet"
href="assets/styles/homepage/topArea.css" />
<link rel="stylesheet"
href="assets/styles/homepage/heroSection.css" />
<link rel="stylesheet"
href="assets/styles/homepage/aboutSection.css" />
<link rel="stylesheet"
href="assets/styles/homepage/faqSection.css" />
<link rel="stylesheet"
href="assets/styles/homepage/reviewSection.css" />
<link rel="stylesheet"
href="assets/styles/homepage/sponsorSection.css" />
<link rel="stylesheet"
href="assets/styles/homepage/communitySection.css" />
<link rel="stylesheet"
href="assets/styles/homepage/footer.css" />
</head>
<body>
<div class="bgImage-wrapper animeBoyKeyboardImage-wrapper">
<img src="assets/media/oil_painted_keyboard_hand.webp"
alt=""
class="bgImage animeBoyKeyboardImage" />
</div>
<div class="topArea">
<div class="topLogoImg-wrapper">
<!-- <img src="assets/media/mws-headerImageWithLogoName-transparent.webp" -->
<img src="assets/media/myWebShortcutsLogo_transparent.webp"
alt=""
class="topLogoImg" />
</div>
</div>
<div class="quickAccess-wrapper">
<details class="quickAccess-details"
title="Quick Links">
<summary class="quickAccess-summary"
title="Quick Links">
<i class="fa-compass fa-solid"></i>
</summary>
<ul class="quickAccess-ul">
<li class="quickAccess-li">
<a href="#about"
class="aboutLink" title="About My Web Shorcuts"><i class="fa-info-circle fa-solid"></i>About</a>
</li>
<li class="quickAccess-li">
<a href="#faqs"
class="faqsLink" title="Frequently Asked Questions"><i class="fa-question fa-solid"></i>FAQs</a>
</li>
<!-- <li class="quickAccess-li">
<a href="https://mywebshortcuts.xyz/guide"
class="usageGuideLink" title="Usage Guide"><i class="fa-book fa-solid"></i>Usage Guide</a>
</li> -->
<li class="quickAccess-li">
<a href="https://www.youtube.com/playlist?list=PLfgTGKHKRdmg9jobp2McX4d_4Q7Nka3TX"
class="youtubeTutsLink" title="YouTube Tutorials" target="_blank"><i class="fa-youtube fa-brands"></i>YouTube Tutorials</a>
</li>
<li class="quickAccess-li">
<a href="#reviews"
class="reviewsLink" title="Reviews"><i class="fa-comments fa-solid"></i>Reviews</a>
</li>
<li class="quickAccess-li">
<a href="http://github.mywebshortcuts.xyz"
class="gitHubLink"
target="_blank" title="GitHub Repository"><i class="fa-github fa-brands"></i>GitHub Repo</a>
</li>
<li class="quickAccess-li sponsorLinkListItem">
<a href="http://sponsor.mywebshortcuts.xyz"
class="sponsorLink"
target="_blank" title="Sponsor My Web Shorcuts"><i class="fa-hand-holding-dollar fa-solid"></i>Sponsor Project</a>
</li>
<li class="quickAccess-li">
<a href="http://discord.mywebshortcuts.xyz"
class="discordLink"
target="_blank" title="Discord Server"><i class="fa-discord fa-brands"></i>Discord</a>
</li>
<li class="quickAccess-li">
<a href="https://twitter.com/mywebshortcuts"
class="twitterLink"
target="_blank" title="Twitter Profile"><i class="fa-twitter fa-brands"></i>Twitter</a>
</li>
<li class="quickAccess-li">
<a href="https://prakashh.substack.com"
class="substackLink"
target="_blank" title="Flashes of Prakashh Substack Newsletter"><i class="fa-newspaper fa-solid"></i>Newsletter</a>
</li>
</ul>
</details>
</div>
<button class="switchMode greenButtonFilled" title="Switch Dark/Light Mode">
<span class="darkOn">
<i class="fa-circle-half-stroke fa-solid"></i>Light Mode
</span>
<span class="darkOff">
<i class="fa-circle-half-stroke fa-solid"></i>Dark Mode
</span>
</button>
<button class="starRepoButton"><i class="fa-star fa-solid"></i> STAR ME!</button>
<div class="hero-wrapper">
<h1 class="taglineHeading">
create shortcuts <br />
that <span>you</span> need
</h1>
<div class="installationLinks-wrapper">
<div class="chromeWebstore-wrapper">
<a href="https://chromewebstore.google.com/detail/eieokkopejddkfnfioklcjabmhpbmgke"
target="_blank"
class="chromeWebstoreLink links">
<div class="browserLogo-wrapper">
<img src="assets/media/chromeWebstore.svg"
alt="" />
</div>
<span class="chromeWebstoreLinkSpan linksSpan">Install Extension</span>
</a>
</div>
<div class="firefoxAddon-wrapper">
<a href="#"
class="firefoxLink links">
<div class="browserLogo-wrapper">
<img src="assets/media/firefoxLogo.webp"
alt="" />
</div>
<span class="chromeWebstoreLinkSpan linksSpan">Firefox Addon</span>
</a>
</div>
<!-- <div class="productHunt-wrapper">
<a class="productHuntLink links"
href="https://www.producthunt.com/posts/my-web-shortcuts?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-my-web-shortcuts" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=427145&theme=light" alt="My Web Shortcuts - Create custom shortcuts for the Web | Product Hunt"/></a>
</div> -->
</div>
</div>
<dialog class="subscribeDialog">
<div class="leftSideDiv"></div>
<div class="rightSideDiv">
<h2>
Stay informed about <a href="https://prakashh.substack.com" target="_blank">My Web Shortcuts</a>—subscribe to get updates
</h2>
<button class="closeSubscribeDialogButton actionButton">
<i class="fa-close fa-solid"></i>
</button>
<iframe src="https://prakashh.substack.com/embed"
id="prakashhTechSubtackIframe"
frameborder="0"
scrolling="no"></iframe>
</div>
</dialog>
<div class="topBgCircle bgCircle-wrapper green"></div>
<div class="leftBgCircle bgCircle-wrapper blue"></div>
<div id="about"
class="aboutSection sections">
<div class="iframe-wrapper">
<iframe
src="https://www.youtube-nocookie.com/embed/d-yDutLQxGU?si=pcuVftATiQOG1suq&controls=1&loop=1&hd=1&rel=0 "
title="YouTube video player"
class="youtubeVideoIframe"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="aboutText-wrapper">
<span class="aboutTextSpan">
Meet <strong>My Web Shortcuts</strong> - Your tool for personalized browsing! This <strong>free, open-source browser extension</strong> lets you <strong>create custom keyboard shortcuts to click on elements in any website</strong>, boosting productivity by enabling swift actions without constant cursor movement. Enjoy a more personalized and efficient browsing experience!
</span>
<div class="productHunt-wrapper">
<a class="productHuntLink links"
href="https://www.producthunt.com/posts/my-web-shortcuts?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-my-web-shortcuts" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=427145&theme=light" alt="My Web Shortcuts - Create custom shortcuts for the Web | Product Hunt"/></a>
</div>
</div>
</div>
<div id="faqs"
class="faqSection sections">
<h2>Frequently Asked Questions</h2>
<div class="animatedLogo-wrapper">
<img src="assets/media/globe.webp"
alt=""
class="animatedLogo globe" />
<img src="assets/media/keyboard.webp"
alt=""
class="animatedLogo keyboard" />
</div>
<div class="faqs-wrapper">
<div class="detsAndSums-wrapper">
<details class="questionAndAnswerDetails">
<summary class="questionSummary">
First of all, what is My Web Shortcuts?
</summary>
<div class="answer-wrapper">
<span class="answerSpan">
Good First Question! <br>
My Web Shortcuts is a browser extension built for <strong>clicking (& more) on elements in a website using keyboard keys</strong>. It let's you select any element (button, link, etc.) on a website, and asks you for the shortcut key you want to use to click on it. Now, whenever you press on the key,
that element will be clicked.
</span>
</div>
</details>
</div>
</div>
<div class="faqs-wrapper">
<div class="detsAndSums-wrapper">
<details class="questionAndAnswerDetails">
<summary class="questionSummary">
What are some possible use cases of this?
</summary>
<div class="answer-wrapper">
<span class="answerSpan">
(Watch <a href="#about">this video</a> to get a better idea)<br>
Well, it depends on you. There are numerous scenarios where it can be used. Navigating and accessing the web will be much faster with this tool. Most of the times, you will be creating shortcuts for the websites you often go to. <br>
For example, on <strong>youtube.com</strong>, you can set a shortcut to
<strong>click on Skip Ad, show/hide video description, open a playlist, voice search, open notifications box, show/hide live chat,</strong> etc.
</span>
</div>
</details>
</div>
</div>
<div class="faqs-wrapper">
<div class="detsAndSums-wrapper">
<details class="questionAndAnswerDetails">
<summary class="questionSummary">
Is it paid?
</summary>
<div class="answer-wrapper">
<span class="answerSpan">
My Web Shortcuts is 100% free & open source. But we need your support to keep working on it, if you are capable, please consider <a href="#sponsors">supporting us.</a> <br>
</span>
</div>
</details>
</div>
</div>
<div class="faqs-wrapper">
<div class="detsAndSums-wrapper">
<details class="questionAndAnswerDetails">
<summary class="questionSummary">
Can I sync the shortcuts on my other browsers and computers?
</summary>
<div class="answer-wrapper">
<span class="answerSpan">
We're currently in the beginning of it's development, so syncing feature is not available. However, we will be adding an option to import/export shortcuts. <br>
Please note that the syncing feature will require us to pay for the recurring cloud bills, and therefore, we would need to make that feature a paid one. If we're able to get a lot of support from the community, we can make it free upto a limit.
</span>
</div>
</details>
</div>
</div>
<div class="faqs-wrapper">
<div class="detsAndSums-wrapper">
<details class="questionAndAnswerDetails">
<summary class="questionSummary">
I'm facing some issues, how can I get support?
</summary>
<div class="answer-wrapper">
<span class="answerSpan">
Please join our <a href="http://discord.mywebshortcuts.xyz" target="_blank">Discord server</a> or <a href="https://twitter.com/mywebshortcuts" target="_blank">tag us on Twitter</a> and share your issue with us.
</span>
</div>
</details>
</div>
</div>
<div class="faqs-wrapper">
<div class="detsAndSums-wrapper">
<details class="questionAndAnswerDetails">
<summary class="questionSummary">
I'm a developer, interested in contributing to this project.
</summary>
<div class="answer-wrapper">
<span class="answerSpan">
We're pleased to know that! Please go to <a href="https://github.com/mywebshortcuts">github.com/mywebshortcuts</a> to know how you can contribute.
</span>
</div>
</details>
</div>
</div>
</div>
<div id="reviews"
class="reviewSection sections">
<h2 class="reviewsHeading">What are people saying?</h2>
<span class="reviewsNote"><a href="https://chromewebstore.google.com/detail/my-web-shortcuts/eieokkopejddkfnfioklcjabmhpbmgke/reviews" target="_blank"> Read more Chrome Webstore Reviews</a></span>
<div class="image-container">
<div>
<img src="/assets/media/reviewImages/review9.png"
alt="" />
</div>
</div>
</div>
<div class="communitySection" id="community">
<h2>Join <a href="https://browsergadgets.io/" target="_blank">Browser Gadgets</a> Discord Community</h2>
<span class="joinCommunitySpan">For those who need support, and be updated about the latest developments</span>
<a href="http://discord.mywebshortcuts.xyz"
class="discordLink links"
target="_blank"><i class="fa-discord fa-brands"></i> <span>Join Discord</span></a>
</div>
<div class="sponsorSection" id="sponsors">
<h2>Sponsor <span>My Web Shortcuts</span> ♥</h2>
<span class="sponsorRequestSpan">My Web Shortcuts is 100% free and open source. If you love this tool and want to support it's development, kindly sponsor us.</span>
<a href="http://sponsor.mywebshortcuts.xyz"
class="sponsorLink links"
target="_blank"><i class="fa-hand-holding-dollar fa-solid"></i> <span>Sponsor Project</span></a>
</div>
<footer>
<div class="footerLinks-wrapper">
<div>
<a href="/pages/privacy.html" class="footerLinks" target="_blank"><i class="fa-file fa-solid"></i>Privacy Policy</a>
<a href="mailto:[email protected]" class="footerLinks" target="_blank"><i class="fa-envelope fa-solid"></i>Email us</a>
</div>
<div>
<a href="https://twitter.com/mywebshortcuts" class="footerLinks" target="_blank"><i class="fa-twitter fa-brands"></i>Twitter</a>
<a href="https://github.com/mywebshortcuts" class="footerLinks" target="_blank"><i class="fa-github fa-brands"></i>GitHub</a>
</div>
</div>
<div class="subscribeNewsletter-wrapper">
<a href="https://prakashh.substack.com" target="_blank">Subscribe to get updates</a>
<iframe src="https://prakashh.substack.com/embed"
id=""
frameborder="0"
scrolling="no"></iframe>
</div>
<span class="creationText">A Creation of <a href="https://www.heyprakhar.com/" target="_blank" class="prakharLink">Prakhar</a> & Contributors</span>
<span class="copyrightText">
© 2024 <a href="https://browsergadgets.io/" class="prakashhTechLink" target="_blank">BrowserGadgets.io</a>
</span>
</footer>
<button class="scrollToTopButton">
<i class="fa-angle-up fa-solid"></i>
</button>
</body>
<script src="script.js"
defer></script>
</html>