jakob/PairDrop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

increase seo with recommendations from PageSpeed Insights

Browse source
This commit is contained in:
schlagmichdoch 2023-03-08 15:18:22 +01:00
parent 4edc9c9b22
commit 7827a47d29
8 changed files with 66 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
public/index.html
View file

@ -45,45 +45,45 @@
</svg> </svg>
</a> </a>
<div id="theme-wrapper"> <div id="theme-wrapper">
<a id="theme-auto" class="icon-button selected" title="Adapt to System" > <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
<svg class="icon"> <svg class="icon">
<use xlink:href="#icon-theme-auto" /> <use xlink:href="#icon-theme-auto" />
</svg> </svg>
</a> </div>
<div> <div>
<a id="theme-light" class="icon-button" title="Always Light" > <div id="theme-light" class="icon-button" title="Always Light" >
<svg class="icon"> <svg class="icon">
<use xlink:href="#icon-theme-light" /> <use xlink:href="#icon-theme-light" />
</svg> </svg>
</a> </div>
<a id="theme-dark" class="icon-button" title="Always Dark" > <div id="theme-dark" class="icon-button" title="Always Dark" >
<svg class="icon"> <svg class="icon">
<use xlink:href="#icon-theme-dark" /> <use xlink:href="#icon-theme-dark" />
</svg> </svg>
</a>
</div> </div>
</div> </div>
<a id="notification" class="icon-button" title="Enable Notifications" hidden> </div>
<div id="notification" class="icon-button" title="Enable Notifications" hidden>
<svg class="icon"> <svg class="icon">
<use xlink:href="#notifications" /> <use xlink:href="#notifications" />
</svg> </svg>
</a> </div>
<a id="install" class="icon-button" title="Install PairDrop" hidden> <div id="install" class="icon-button" title="Install PairDrop" hidden>
<svg class="icon"> <svg class="icon">
<use xlink:href="#homescreen" /> <use xlink:href="#homescreen" />
</svg> </svg>
</a> </div>
<a id="pair-device" class="icon-button" title="Pair Device" hidden> <div id="pair-device" class="icon-button" title="Pair Device" hidden>
<svg class="icon"> <svg class="icon">
<use xlink:href="#pair-device-icon" /> <use xlink:href="#pair-device-icon" />
</svg> </svg>
</a> </div>
<a id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden> <div id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
<svg class="icon"> <svg class="icon">
<use xlink:href="#clear-pair-devices-icon" /> <use xlink:href="#clear-pair-devices-icon" />
</svg> </svg>
</a> </div>
<a id="cancel-paste-mode" class="button" hidden>Done</a> <div id="cancel-paste-mode" class="button" hidden>Done</div>
</header> </header>
<!-- Center --> <!-- Center -->
<div id="center"> <div id="center">
@ -126,12 +126,12 @@
<div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div> <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
<hr> <hr>
<div id="key-input-container"> <div id="key-input-container">
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-3" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-4" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-5" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-6" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
</div> </div>
<div class="font-subheading center text-center">Enter key from another device to continue.</div> <div class="font-subheading center text-center">Enter key from another device to continue.</div>
<div class="center row-reverse"> <div class="center row-reverse">
@ -220,7 +220,7 @@
<span class="display-name"></span> <span class="display-name"></span>
</div> </div>
<div class="row-separator"></div> <div class="row-separator"></div>
<div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div> <div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
<div class="center row-reverse"> <div class="center row-reverse">
<button class="button" type="submit" title="STR + ENTER" disabled close>Send</button> <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
<button class="button" type="button" title="ESCAPE" close>Cancel</button> <button class="button" type="button" title="ESCAPE" close>Cancel</button>
@ -365,11 +365,11 @@
</symbol> </symbol>
</svg> </svg>
<!-- Scripts --> <!-- Scripts -->
<script src="scripts/util.js"></script> <script src="scripts/theme.js"></script>
<script src="scripts/network.js"></script> <script src="scripts/network.js"></script>
<script src="scripts/ui.js"></script> <script src="scripts/ui.js"></script>
<script src="scripts/theme.js" async></script> <script src="scripts/util.js" async></script>
<script src="scripts/qrcode.js" async></script> <script src="scripts/QRCode.min.js" async></script>
<script src="scripts/zip.min.js" async></script> <script src="scripts/zip.min.js" async></script>
<script src="scripts/NoSleep.min.js" async></script> <script src="scripts/NoSleep.min.js" async></script>
<!-- Sounds --> <!-- Sounds -->

2
public/robots.txt Normal file
View file

@ -0,0 +1,2 @@
User-agent: *
Disallow:

0
public/scripts/qrcode.js → public/scripts/QRCode.min.js vendored
View file

11
public/styles.css
View file

@ -96,7 +96,8 @@ header > div {
align-self: flex-start; align-self: flex-start;
touch-action: manipulation; touch-action: manipulation;
} }
header > div a {
header > div .icon-button {
height: 40px; height: 40px;
transition: all 300ms; transition: all 300ms;
} }
@ -106,7 +107,7 @@ header > div > div {
flex-direction: column; flex-direction: column;
} }
header > div:not(:hover) a:not(.selected) { header > div:not(:hover) .icon-button:not(.selected) {
height: 0; height: 0;
opacity: 0; opacity: 0;
} }
@ -125,16 +126,16 @@ header > div:hover::before {
margin-bottom: 8px; margin-bottom: 8px;
} }
header > div:hover a.selected::before { header > div:hover .icon-button.selected::before {
opacity: 0.1; opacity: 0.1;
} }
@media (pointer: coarse) { @media (pointer: coarse) {
header > div:hover a.selected:hover::before { header > div:hover .icon-button.selected:hover::before {
opacity: 0.2; opacity: 0.2;
} }
header > div a:not(.selected) { header > div .icon-button:not(.selected) {
height: 0; height: 0;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;

50
public_included_ws_fallback/index.html
View file

@ -45,45 +45,45 @@
</svg> </svg>
</a> </a>
<div id="theme-wrapper"> <div id="theme-wrapper">
<a id="theme-auto" class="icon-button selected" title="Adapt to System" > <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
<svg class="icon"> <svg class="icon">
<use xlink:href="#icon-theme-auto" /> <use xlink:href="#icon-theme-auto" />
</svg> </svg>
</a> </div>
<div> <div>
<a id="theme-light" class="icon-button" title="Always Light" > <div id="theme-light" class="icon-button" title="Always Light" >
<svg class="icon"> <svg class="icon">
<use xlink:href="#icon-theme-light" /> <use xlink:href="#icon-theme-light" />
</svg> </svg>
</a> </div>
<a id="theme-dark" class="icon-button" title="Always Dark" > <div id="theme-dark" class="icon-button" title="Always Dark" >
<svg class="icon"> <svg class="icon">
<use xlink:href="#icon-theme-dark" /> <use xlink:href="#icon-theme-dark" />
</svg> </svg>
</a>
</div> </div>
</div> </div>
<a id="notification" class="icon-button" title="Enable Notifications" hidden> </div>
<div id="notification" class="icon-button" title="Enable Notifications" hidden>
<svg class="icon"> <svg class="icon">
<use xlink:href="#notifications" /> <use xlink:href="#notifications" />
</svg> </svg>
</a> </div>
<a id="install" class="icon-button" title="Install PairDrop" hidden> <div id="install" class="icon-button" title="Install PairDrop" hidden>
<svg class="icon"> <svg class="icon">
<use xlink:href="#homescreen" /> <use xlink:href="#homescreen" />
</svg> </svg>
</a> </div>
<a id="pair-device" class="icon-button" title="Pair Device" hidden> <div id="pair-device" class="icon-button" title="Pair Device" hidden>
<svg class="icon"> <svg class="icon">
<use xlink:href="#pair-device-icon" /> <use xlink:href="#pair-device-icon" />
</svg> </svg>
</a> </div>
<a id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden> <div id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
<svg class="icon"> <svg class="icon">
<use xlink:href="#clear-pair-devices-icon" /> <use xlink:href="#clear-pair-devices-icon" />
</svg> </svg>
</a> </div>
<a id="cancel-paste-mode" class="button" hidden>Done</a> <div id="cancel-paste-mode" class="button" hidden>Done</div>
</header> </header>
<!-- Center --> <!-- Center -->
<div id="center"> <div id="center">
@ -129,12 +129,12 @@
<div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div> <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
<hr> <hr>
<div id="key-input-container"> <div id="key-input-container">
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-3" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-4" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-5" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
<input type="tel" class="textarea center" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled> <input type="tel" class="textarea center" aria-label="pair-key-6" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
</div> </div>
<div class="font-subheading center text-center">Enter key from another device to continue.</div> <div class="font-subheading center text-center">Enter key from another device to continue.</div>
<div class="center row-reverse"> <div class="center row-reverse">
@ -223,7 +223,7 @@
<span class="display-name"></span> <span class="display-name"></span>
</div> </div>
<div class="row-separator"></div> <div class="row-separator"></div>
<div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div> <div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
<div class="center row-reverse"> <div class="center row-reverse">
<button class="button" type="submit" title="STR + ENTER" disabled close>Send</button> <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
<button class="button" type="button" title="ESCAPE" close>Cancel</button> <button class="button" type="button" title="ESCAPE" close>Cancel</button>
@ -368,11 +368,11 @@
</symbol> </symbol>
</svg> </svg>
<!-- Scripts --> <!-- Scripts -->
<script src="scripts/util.js"></script> <script src="scripts/theme.js"></script>
<script src="scripts/network.js"></script> <script src="scripts/network.js"></script>
<script src="scripts/ui.js"></script> <script src="scripts/ui.js"></script>
<script src="scripts/theme.js" async></script> <script src="scripts/util.js" async></script>
<script src="scripts/qrcode.js" async></script> <script src="scripts/QRCode.min.js" async></script>
<script src="scripts/zip.min.js" async></script> <script src="scripts/zip.min.js" async></script>
<script src="scripts/NoSleep.min.js" async></script> <script src="scripts/NoSleep.min.js" async></script>
<!-- Sounds --> <!-- Sounds -->

0
public_included_ws_fallback/scripts/qrcode.js → public_included_ws_fallback/scripts/QRCode.min.js vendored
View file

2
public_included_ws_fallback/scripts/robots.txt Normal file
View file

@ -0,0 +1,2 @@
User-agent: *
Disallow:

11
public_included_ws_fallback/styles.css
View file

@ -97,7 +97,8 @@ header > div {
align-self: flex-start; align-self: flex-start;
touch-action: manipulation; touch-action: manipulation;
} }
header > div a {
header > div .icon-button {
height: 40px; height: 40px;
transition: all 300ms; transition: all 300ms;
} }
@ -107,7 +108,7 @@ header > div > div {
flex-direction: column; flex-direction: column;
} }
header > div:not(:hover) a:not(.selected) { header > div:not(:hover) .icon-button:not(.selected) {
height: 0; height: 0;
opacity: 0; opacity: 0;
} }
@ -126,16 +127,16 @@ header > div:hover::before {
margin-bottom: 8px; margin-bottom: 8px;
} }
header > div:hover a.selected::before { header > div:hover .icon-button.selected::before {
opacity: 0.1; opacity: 0.1;
} }
@media (pointer: coarse) { @media (pointer: coarse) {
header > div:hover a.selected:hover::before { header > div:hover .icon-button.selected:hover::before {
opacity: 0.2; opacity: 0.2;
} }
header > div a:not(.selected) { header > div .icon-button:not(.selected) {
height: 0; height: 0;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;