Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-06-12 21:27:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

more ui enhancements

Browse Source 
new in this commit:
- rounded corners everywhere! cobalt is now safe for everyone who can't handle sharp objects.
- proper banner loading. no more jumping text!
- proper banner error handling. if banner wasn't loaded, it'll simply go grey instead of disappearing.
- links are no longer italic and are instead underlined.
- collapsible lists now have corresponding emoji.
- donate button is now highlighted with magenta instead of white.
- added a list of keyboard shortcuts to about tab.
- centered old changelog loader.
This commit is contained in:
wukko
2023-08-11 21:53:30 +06:00
parent 689bac83d5
commit 998ab635d3
17 changed files with 418 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/front/cobalt.css
View File

@ -8,7 +8,7 @@
--font-mono: 'Noto Sans Mono', 'Consolas', 'SF Mono', monospace;
--padding-1: 0.75rem;
--line-height: 1.65rem;
--red: rgb(255, 0, 61);
--red: rgb(249, 47, 96);
--gap: 0.5rem;
--gap-no-icon: 0.6rem;
}
@ -19,6 +19,7 @@
--accent-subtext: rgb(110, 110, 110);
--accent-hover: rgb(30, 30, 30);
--accent-hover-elevated: rgb(48, 48, 48);
--accent-hover-transparent: rgba(48, 48, 48, 0.5);
--accent-button: rgb(25, 25, 25);
--accent-button-elevated: rgb(42, 42, 42);
--glass: rgba(25, 25, 25, 0.85);
@ -34,6 +35,7 @@
--accent-subtext: rgb(110, 110, 110);
--accent-hover: rgb(230, 230, 230);
--accent-hover-elevated: rgb(215, 215, 215);
--accent-hover-transparent: rgba(215, 215, 215, 0.5);
--accent-button: rgb(225, 225, 225);
--accent-button-elevated: rgb(210, 210, 210);
--glass: rgba(230, 230, 230, 0.85);
@ -48,6 +50,7 @@
--accent-subtext: rgb(110, 110, 110);
--accent-hover: rgb(30, 30, 30);
--accent-hover-elevated: rgb(48, 48, 48);
--accent-hover-transparent: rgba(48, 48, 48, 0.5);
--accent-button: rgb(25, 25, 25);
--accent-button-elevated: rgb(42, 42, 42);
--glass: rgba(25, 25, 25, 0.85);
@ -61,6 +64,7 @@
--accent-subtext: rgb(110, 110, 110);
--accent-hover: rgb(230, 230, 230);
--accent-hover-elevated: rgb(215, 215, 215);
--accent-hover-transparent: rgba(215, 215, 215, 0.5);
--accent-button: rgb(225, 225, 225);
--accent-button-elevated: rgb(210, 210, 210);
--glass: rgba(230, 230, 230, 0.85);
@ -171,8 +175,7 @@ input[type="text"],
.desktop .switch:hover,
.desktop .checkbox:hover,
.desktop .text-to-copy:hover,
.desktop .collapse-header:hover,
.desktop #back-button:hover {
.desktop .collapse-header:hover {
background: var(--accent-hover);
box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset;
cursor: pointer;
@ -336,9 +339,10 @@ button:active,
.text-backdrop {
background: var(--accent);
color: var(--background);
padding: 0 0.2rem;
}
.italic {
font-style: italic;
.text-backdrop.link {
text-decoration: underline;
}
.cobalt-support-link {
display: flex;
@ -367,12 +371,13 @@ button:active,
max-height: 95%;
opacity: 0;
transform: translate(-50%,-48%)scale(.95);
box-shadow: 0 0 40px 0 var(--accent-hover-transparent);
}
.popup.visible {
visibility: visible;
opacity: 1;
transform: translate(-50%, -50%);
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
transition: transform 100ms ease-out, opacity 100ms ease-in-out;
}
#popup-backdrop {
visibility: hidden;
@ -388,7 +393,7 @@ button:active,
#popup-backdrop.visible {
visibility: visible;
opacity: 0.5;
transition: opacity 0.1s ease-in-out;
transition: opacity 130ms ease-in-out;
}
.popup.small {
width: 20%;
@ -411,7 +416,7 @@ button:active,
border: none;
}
.popup.small #popup-title {
margin-bottom: .2rem;
margin-bottom: 0.2rem;
}
.popup.small .explanation {
margin-bottom: 0.8rem;
@ -434,9 +439,11 @@ button:active,
position: relative;
width: 100%;
max-height: 300px;
min-height: 160px;
margin-bottom: 1rem;
min-height: 210px;
margin-bottom: 0.7rem;
float: left;
background: var(--accent-hover);
display: flex;
}
.changelog-img {
object-fit: cover;
@ -452,11 +459,11 @@ button:active,
}
.changelog-tag-version {
font-size: 1rem;
padding: 0.15rem 0.45rem;
padding: 0.15rem 0.7rem;
}
.changelog-tag-date {
color: var(--accent-subtext);
font-size: .8rem;
font-size: 0.8rem;
}
.nowrap {
white-space: nowrap;
@ -492,7 +499,7 @@ button:active,
font-size: 0.8rem;
}
#popup-content {
overflow-x: hidden;
overflow-x: scroll;
overflow-y: auto;
height: 100%;
scrollbar-width: none;
@ -589,12 +596,17 @@ button:active,
box-shadow: var(--inset-focus) inset;
}
#popup-tabs .switch {
background: unset;
background: none;
}
.desktop #popup-tabs .switch:hover,
#popup-tabs .switch:active {
background: var(--accent-hover-transparent);
box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset;
}
.switch[data-enabled="true"],
#popup-tabs .switch[data-enabled="true"] {
color: var(--background);
background: var(--accent);
background: var(--accent)!important;
cursor: default;
}
.switch[data-enabled="true"]:hover {
@ -628,7 +640,7 @@ button:active,
user-select: text;
-webkit-user-select: text;
background: var(--accent-button);
padding: var(--padding-1);
padding: var(--gap-no-icon);
overflow: auto;
}
#back-button {
@ -637,10 +649,11 @@ button:active,
max-width: 4rem;
font-size: 1rem;
}
#back-button svg path {
#back-button svg path,
.collapse-indicator svg path {
fill: var(--accent);
}
.popup-tab-content {
.popup-tab-content[data-enabled="false"] {
display: none;
}
#popup-tabs {
@ -657,7 +670,6 @@ button:active,
padding: 0 0.2rem;
}
.emoji, svg {
margin-right: 0.4rem;
user-select: none;
-webkit-user-select: none;
pointer-events: none;
@ -729,27 +741,36 @@ button:active,
user-select: none;
-webkit-user-select: none;
}
.collapse-list.last {
margin-bottom: 1rem;
}
.collapse-header {
padding: var(--padding-1);
font-size: 1rem;
padding: 0.5rem var(--padding-1);
font-size: 0.95rem;
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
background: var(--accent-button);
}
.collapse-indicator {
transform: rotate(180deg);
.collapse-header .emoji {
margin-right: var(--padding-1);
}
.expanded .collapse-indicator {
.collapse-indicator {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transform: none;
}
.collapse-list.expanded .collapse-indicator {
transform: rotate(180deg);
}
.collapse-title {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.8rem;
}
.collapse-body {
display: none;
@ -767,7 +788,8 @@ button:active,
display: none;
}
#about-donate-footer {
box-shadow: 0 0 0 0.1rem var(--accent) inset;
box-shadow: 0 0 0 .1rem var(--red) inset, 0 0 1rem 0 var(--red);
z-index: 1;
}
.popup-content-inner,
.tab-content-settings,
@ -823,6 +845,82 @@ button:active,
.popup-from-bottom.visible {
visibility: visible;
}
#keyboard-collapse {
display: none;
}
.desktop #keyboard-collapse {
display: block;
}
.text-backdrop.key {
color: var(--accent-hover-elevated);
}
#keyboard-shortcuts {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 1.5rem;
user-select: none;
color: var(--accent);
}
/* rounded corners */
#bottom #paste,
#footer .switch,
#audioMode,
#popup-content .switches,
.checkbox,
.changelog-img,
.changelog-banner,
#close-error,
.changelog-tag-version,
#download-switcher .switch,
#popup-about .switch,
#popup-tabs .switch,
.text-to-copy {
border-radius: 5px / 6px;
}
[type=checkbox] {
border-radius: 3px / 4px;
}
.popup {
border-radius: 8px / 9px;
}
#popup-header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#popup-tabs {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.switches .first {
border-top-left-radius: 5px 6px;
border-bottom-left-radius: 5px 6px;
}
.switches .last {
border-top-right-radius: 5px 6px;
border-bottom-right-radius: 5px 6px;
}
.text-backdrop {
border-radius: 3px / 4px;
}
.collapse-list.first,
.collapse-list.first .collapse-header {
border-top-left-radius: 7px 8px;
border-top-right-radius: 7px 8px;
}
.collapse-list.last,
.collapse-list.last .collapse-header {
border-bottom-left-radius: 7px 8px;
border-bottom-right-radius: 7px 8px;
}
.collapse-list.last.expanded .collapse-header {
border-radius: 0;
}
.loader {
text-align: center;
}
/* adapt the page according to screen size */
@media screen and (max-width: 1550px) {
.popup.small {
@ -918,7 +1016,7 @@ button:active,
.subtitle,
#popup-desc,
.collapse-title {
font-size: .7rem;
font-size: 0.7rem;
}
.collapse-header {
padding: 0.5rem;
@ -928,13 +1026,13 @@ button:active,
font-size: 0.6rem;
}
.explanation {
font-size: .6rem;
font-size: 0.6rem;
margin-top: 0.5rem;
line-height: 1rem!important;
}
#popup-desc {
line-height: 1.2rem;
font-size: .64rem;
font-size: 0.64rem;
}
.changelog-subtitle, #popup-subtitle {
font-size: 0.8rem!important;
@ -1005,6 +1103,16 @@ button:active,
.urgent-notice {
padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem);
}
.popup,
#popup-header,
#popup-tabs {
border-radius: 0;
}
.popup.center {
top: unset;
left: unset;
transform: unset;
}
.popup.small {
width: calc(100% - 1.7rem * 2);
height: auto;
@ -1016,15 +1124,18 @@ button:active,
border: none;
border-top: var(--accent-highlight) solid 0.15rem;
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.7rem);
transform: none;
transform: translateY(30rem);
}
.popup.small.visible {
transform: none;
transition: opacity 0.1s ease-in-out;
transition: transform 200ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 130ms ease-in-out;
}
.popup.small #popup-header {
background: none;
}
.no-animation .popup.small {
transition: none;
}
#close-error {
bottom: 3rem;
}
@ -1053,11 +1164,6 @@ button:active,
height: 100%;
max-height: 100%;
}
.popup.center {
top: unset;
left: unset;
transform: unset;
}
#popup-tabs {
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem);
}

26
src/front/cobalt.js
View File

@ -3,7 +3,7 @@ const isIOS = ua.match("iphone os");
const isMobile = ua.match("android") || ua.match("iphone os");
const isFirefox = ua.match("firefox/");
const isOldFirefox = ua.match("firefox/") && ua.split("firefox/")[1].split('.')[0] < 103;
const version = 32;
const version = 33;
const regex = new RegExp(/https:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/);
const notification = `<div class="notification-dot"></div>`;
@ -114,14 +114,17 @@ function detectColorScheme() {
function changeTab(evnt, tabId, tabClass) {
let tabcontent = document.getElementsByClassName(`tab-content-${tabClass}`);
let tablinks = document.getElementsByClassName(`tab-${tabClass}`);
for (let i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tabcontent[i].dataset.enabled = "false";
}
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].dataset.enabled = "false";
}
eid(tabId).style.display = "block";
evnt.currentTarget.dataset.enabled = "true";
eid(tabId).dataset.enabled = "true";
if (tabId === "tab-about-changelog" && sGet("changelogStatus") !== `${version}`) notificationCheck("changelog");
if (tabId === "tab-about-about" && !sGet("seenAbout")) notificationCheck("about");
}
@ -409,7 +412,12 @@ async function download(url) {
fetch(`${j.url}&p=1`).then(async (res) => {
let jp = await res.json();
if (jp.status === "continue") {
changeDownloadButton(2, '>>>'); window.location.href = j.url;
changeDownloadButton(2, '>>>');
if (sGet("downloadPopup") === "true") {
popup('download', 1, j.url)
} else {
window.open(j.url, '_blank')
}
setTimeout(() => { changeButton(1) }, 2500);
} else {
changeButton(0, jp.text);
@ -432,7 +440,7 @@ async function loadCelebrationsEmoji() {
try {
let j = await fetch(`/onDemand?blockId=1`).then((r) => { if (r.status === 200) { return r.json() } else { return false } }).catch(() => { return false });
if (j && j.status === "success" && j.text) {
eid("about-footer").innerHTML = eid("about-footer").innerHTML.replace('<img class="emoji" draggable="false" height="22" width="22" alt="🐲" src="emoji/dragon_face.svg">', j.text);
eid("about-footer").innerHTML = eid("about-footer").innerHTML.replace('<img class="emoji" draggable="false" height="22" width="22" alt="🐲" src="emoji/dragon_face.svg" loading="lazy">', j.text);
}
} catch (e) {
eid("about-footer").innerHTML = bac;
@ -441,7 +449,7 @@ async function loadCelebrationsEmoji() {
async function loadOnDemand(elementId, blockId) {
let j = {};
store.historyButton = eid(elementId).innerHTML;
eid(elementId).innerHTML = "...";
eid(elementId).innerHTML = `<div class="loader">...</div>`;
try {
if (store.historyContent) {
@ -477,7 +485,7 @@ window.onload = () => {
loadCelebrationsEmoji();
if (isIOS) {
sSet("downloadPopup", "true");
eid("downloadPopup-chkbx").style.pointerEvents = "none"; // wip, disables the checkbox without any signs
eid("downloadPopup-chkbx").style.display = "none";
}
let urlQuery = new URLSearchParams(window.location.search).get("u");
if (urlQuery !== null && regex.test(urlQuery)) {
@ -502,8 +510,8 @@ document.onkeydown = (e) => {
if (e.key === "L") changeSwitcher('audioMode', 'true');
// popups
if (e.key === "B") popup('about', 1);
if (e.key === "N") popup('about', 1, 'donate');
if (e.key === "B") popup('about', 1, 'about'); // open about
if (e.key === "N") popup('about', 1, 'changelog'); // open changelog
if (e.key === "M") popup('settings', 1);
} else {

4
src/front/emoji/keyboard.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 10C2 8.3431 3.34315 7 5 7H27C28.6569 7 30 8.3431 30 10V21.25C30 22.9069 28.6569 24.25 27 24.25H5C3.34315 24.25 2 22.9069 2 21.25V10Z" fill="#CDC4D6"/>
<path d="M4 9.5C4 9.2239 4.22386 9 4.5 9H5.5C5.77614 9 6 9.2239 6 9.5V10C6 10.2761 5.77614 10.5 5.5 10.5H4.5C4.22386 10.5 4 10.2761 4 10V9.5ZM4 13.5C4 13.2239 4.22386 13 4.5 13H5.5C5.77614 13 6 13.2239 6 13.5V14.5C6 14.7761 5.77614 15 5.5 15H4.5C4.22386 15 4 14.7761 4 14.5V13.5ZM6.5 16C6.22386 16 6 16.2239 6 16.5V17.5C6 17.7761 6.22386 18 6.5 18H7.5C7.77614 18 8 17.7761 8 17.5V16.5C8 16.2239 7.77614 16 7.5 16H6.5ZM7.5 19C7.22386 19 7 19.2239 7 19.5V20.5C7 20.7761 7.22386 21 7.5 21H8.5C8.77614 21 9 20.7761 9 20.5V19.5C9 19.2239 8.77614 19 8.5 19H7.5ZM23.5 19C23.2239 19 23 19.2239 23 19.5V20.5C23 20.7761 23.2239 21 23.5 21H24.5C24.7761 21 25 20.7761 25 20.5V19.5C25 19.2239 24.7761 19 24.5 19H23.5ZM10 19.5C10 19.2239 10.2239 19 10.5 19H21.5C21.7761 19 22 19.2239 22 19.5V20.5C22 20.7761 21.7761 21 21.5 21H10.5C10.2239 21 10 20.7761 10 20.5V19.5ZM9 16.5C9 16.2239 9.22386 16 9.5 16H10.5C10.7761 16 11 16.2239 11 16.5V17.5C11 17.7761 10.7761 18 10.5 18H9.5C9.22386 18 9 17.7761 9 17.5V16.5ZM12.5 16C12.2239 16 12 16.2239 12 16.5V17.5C12 17.7761 12.2239 18 12.5 18H13.5C13.7761 18 14 17.7761 14 17.5V16.5C14 16.2239 13.7761 16 13.5 16H12.5ZM15 16.5C15 16.2239 15.2239 16 15.5 16H16.5C16.7761 16 17 16.2239 17 16.5V17.5C17 17.7761 16.7761 18 16.5 18H15.5C15.2239 18 15 17.7761 15 17.5V16.5ZM18.5 16C18.2239 16 18 16.2239 18 16.5V17.5C18 17.7761 18.2239 18 18.5 18H19.5C19.7761 18 20 17.7761 20 17.5V16.5C20 16.2239 19.7761 16 19.5 16H18.5ZM21 16.5C21 16.2239 21.2239 16 21.5 16H22.5C22.7761 16 23 16.2239 23 16.5V17.5C23 17.7761 22.7761 18 22.5 18H21.5C21.2239 18 21 17.7761 21 17.5V16.5ZM24.5 16C24.2239 16 24 16.2239 24 16.5V17.5C24 17.7761 24.2239 18 24.5 18H25.5C25.7761 18 26 17.7761 26 17.5V16.5C26 16.2239 25.7761 16 25.5 16H24.5ZM7.5 13C7.22386 13 7 13.2239 7 13.5V14.5C7 14.7761 7.22386 15 7.5 15H8.5C8.77614 15 9 14.7761 9 14.5V13.5C9 13.2239 8.77614 13 8.5 13H7.5ZM10 13.5C10 13.2239 10.2239 13 10.5 13H11.5C11.7761 13 12 13.2239 12 13.5V14.5C12 14.7761 11.7761 15 11.5 15H10.5C10.2239 15 10 14.7761 10 14.5V13.5ZM13.5 13C13.2239 13 13 13.2239 13 13.5V14.5C13 14.7761 13.2239 15 13.5 15H14.5C14.7761 15 15 14.7761 15 14.5V13.5C15 13.2239 14.7761 13 14.5 13H13.5ZM16 13.5C16 13.2239 16.2239 13 16.5 13H17.5C17.7761 13 18 13.2239 18 13.5V14.5C18 14.7761 17.7761 15 17.5 15H16.5C16.2239 15 16 14.7761 16 14.5V13.5ZM19.5 13C19.2239 13 19 13.2239 19 13.5V14.5C19 14.7761 19.2239 15 19.5 15H20.5C20.7761 15 21 14.7761 21 14.5V13.5C21 13.2239 20.7761 13 20.5 13H19.5ZM22 13.5C22 13.2239 22.2239 13 22.5 13H23.5C23.7761 13 24 13.2239 24 13.5V14.5C24 14.7761 23.7761 15 23.5 15H22.5C22.2239 15 22 14.7761 22 14.5V13.5ZM25.5 13C25.2239 13 25 13.2239 25 13.5V14.5C25 14.7761 25.2239 15 25.5 15H26.5C26.7761 15 27 14.7761 27 14.5V13.5C27 13.2239 26.7761 13 26.5 13H25.5ZM10.5 9C10.2239 9 10 9.2239 10 9.5V10C10 10.2761 10.2239 10.5 10.5 10.5H11.5C11.7761 10.5 12 10.2761 12 10V9.5C12 9.2239 11.7761 9 11.5 9H10.5ZM13 9.5C13 9.2239 13.2239 9 13.5 9H14.5C14.7761 9 15 9.2239 15 9.5V10C15 10.2761 14.7761 10.5 14.5 10.5H13.5C13.2239 10.5 13 10.2761 13 10V9.5ZM16.5 9C16.2239 9 16 9.2239 16 9.5V10C16 10.2761 16.2239 10.5 16.5 10.5H17.5C17.7761 10.5 18 10.2761 18 10V9.5C18 9.2239 17.7761 9 17.5 9H16.5ZM19 9.5C19 9.2239 19.2239 9 19.5 9H20.5C20.7761 9 21 9.2239 21 9.5V10C21 10.2761 20.7761 10.5 20.5 10.5H19.5C19.2239 10.5 19 10.2761 19 10V9.5ZM22.5 9C22.2239 9 22 9.2239 22 9.5V10C22 10.2761 22.2239 10.5 22.5 10.5H23.5C23.7761 10.5 24 10.2761 24 10V9.5C24 9.2239 23.7761 9 23.5 9H22.5ZM25 9.5C25 9.2239 25.2239 9 25.5 9H26.5C26.7761 9 27 9.2239 27 9.5V10C27 10.2761 26.7761 10.5 26.5 10.5H25.5C25.2239 10.5 25 10.2761 25 10V9.5ZM2 23V21C2 22.6569 3.34315 24 5 24H27C28.6569 24 30 22.6569 30 21V23C30 24.6569 28.6569 26 27 26H5C3.34315 26 2 24.6569 2 23Z" fill="#998EA4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

4
src/front/emoji/link.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1475 21.1475C19.5275 20.7171 18.3006 21.0135 16.5275 21.7175L13.1175 25.1275C11.3475 26.8975 8.4775 26.8975 6.7175 25.1275C4.9475 23.3575 4.9475 20.4875 6.7175 18.7275L10.1275 15.3175H11.0489L13.4375 13.4475C14.7475 13.3075 16.1175 13.7175 17.1175 14.7275C18.1175 15.7375 18.5375 17.0975 18.3975 18.4075C19.1157 19.1907 20.0747 19.3579 20.8347 18.5979L21.7075 16.5375C21.4375 14.9975 20.7075 13.5175 19.5175 12.3275C18.3275 11.1375 16.8475 10.4075 15.3075 10.1375L13.1175 9.46387L10.6975 10.6975C9.8375 11.0775 9.0275 11.6175 8.3175 12.3275L4.3175 16.3275C1.2275 19.4175 1.2275 24.4475 4.3175 27.5375C7.4075 30.6275 12.4375 30.6275 15.5275 27.5375L19.5275 23.5375C20.2275 22.8275 20.7675 22.0175 21.1475 21.1475Z" fill="#9B9B9B" />
<path d="M27.5277 4.3175C24.4377 1.2275 19.4077 1.2275 16.3177 4.3175L12.3177 8.3175C11.6177 9.0275 11.0777 9.8375 10.6977 10.6975C12.1577 10.0475 13.7677 9.8575 15.3177 10.1275L18.7277 6.7175C20.4977 4.9475 23.3677 4.9475 25.1277 6.7175C26.8877 8.4875 26.8977 11.3575 25.1277 13.1175L21.7177 16.5275L21.1277 17.1175C20.3677 17.8775 19.3977 18.2875 18.4077 18.3975C17.0977 18.5375 15.7277 18.1275 14.7277 17.1175C13.7277 16.1075 13.3077 14.7475 13.4477 13.4375C12.4477 13.5475 11.4877 13.9575 10.7277 14.7175L10.1377 15.3075C10.4077 16.8475 11.1377 18.3275 12.3277 19.5175C13.5177 20.7075 14.9977 21.4375 16.5377 21.7075C18.0877 21.9775 19.6977 21.7875 21.1577 21.1375C22.0177 20.7575 22.8277 20.2175 23.5377 19.5075L27.5377 15.5075C30.6177 12.4375 30.6177 7.4075 27.5277 4.3175Z" fill="#BEBEBE" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

5
src/front/emoji/locked.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 2C12.6863 2 10 4.68629 10 8V11C10 14.3137 12.6863 17 16 17C19.3137 17 22 14.3137 22 11V8C22 4.68629 19.3137 2 16 2ZM16 4.5C17.933 4.5 19.5 6.067 19.5 8V11C19.5 12.933 17.933 14.5 16 14.5C14.067 14.5 12.5 12.933 12.5 11V8C12.5 6.067 14.067 4.5 16 4.5Z" fill="#D3D3D3" />
<path d="M5 14C5 12.3431 6.34315 11 8 11H24C25.6569 11 27 12.3431 27 14V27C27 28.6569 25.6569 30 24 30H8C6.34315 30 5 28.6569 5 27V14Z" fill="#F9C23C" />
<path d="M17.5 20.5002C18.1072 20.0441 18.5 19.3179 18.5 18.5C18.5 17.1193 17.3807 16 16 16C14.6193 16 13.5 17.1193 13.5 18.5C13.5 19.3179 13.8928 20.0441 14.5 20.5002V24C14.5 24.8284 15.1716 25.5 16 25.5C16.8284 25.5 17.5 24.8284 17.5 24V20.5002Z" fill="#433B6B" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 816 B

5
src/front/emoji/magnifying_glass.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 13C3 18.5228 7.47715 23 13 23C18.5228 23 23 18.5228 23 13C23 7.47715 18.5228 3 13 3C7.47715 3 3 7.47715 3 13Z" fill="#00A6ED" />
<path d="M18.3481 7.73205C18.9004 8.68864 18.7665 9.79989 18.049 10.2141C17.3316 10.6283 16.3023 10.1886 15.75 9.23205C15.1977 8.27547 15.3316 7.16421 16.049 6.75C16.7665 6.33579 17.7958 6.77547 18.3481 7.73205Z" fill="white" />
<path d="M2 13C2 19.0751 6.92487 24 13 24C15.2952 24 17.4262 23.2971 19.1895 22.0947C18.9147 23.3086 19.2498 24.6327 20.195 25.5779L23.3769 28.7599C24.8414 30.2243 27.2158 30.2243 28.6803 28.7599C30.1447 27.2954 30.1447 24.921 28.6803 23.4566L25.4983 20.2746C24.5607 19.3371 23.2503 18.9997 22.0445 19.2626C23.2774 17.4852 24 15.327 24 13C24 6.92487 19.0751 2 13 2C6.92487 2 2 6.92487 2 13ZM22 13C22 17.9706 17.9706 22 13 22C8.02944 22 4 17.9706 4 13C4 8.02944 8.02944 4 13 4C17.9706 4 22 8.02944 22 13Z" fill="#533566" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1005 B

5
src/front/emoji/mending_heart.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="100%" height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.0163 5.15966C19.1428 5.48746 17.5594 7.06018 16.6978 8.09396C16.3495 8.51195 15.6505 8.51195 15.3022 8.09396C14.4406 7.06018 12.8572 5.48746 10.9837 5.15966C6.26039 4.32908 3.40517 6.85743 2.40485 10.0008L5.60146 14.2955L6.09508 21.6282C9.14914 25.3465 13.0775 28.3459 14.9355 29.6684C15.577 30.125 16.4229 30.1248 17.0642 29.668C19.646 27.8288 26.2261 22.7486 28.9042 17.0021L27.3547 13.195L26.5453 5.99222C25.1352 5.13927 23.2927 4.75936 21.0163 5.15966Z" fill="#F92F60" />
<path d="M29.5949 10H2.40511C1.92106 11.5205 1.87107 13.185 2.25363 14.6829C2.45195 15.463 2.73767 16.2373 3.0923 17H28.9052C29.2605 16.2373 29.547 15.463 29.7464 14.6829C30.1289 13.185 30.0789 11.5205 29.5949 10Z" fill="#E6E6E6" />
<path d="M2.86942 16.4973L26.5285 5.98218C28.3793 7.09408 29.4886 9.01902 29.8599 11.0675L6.0959 21.6293C4.77942 20.0266 3.62532 18.2904 2.86942 16.4973Z" fill="#F4F4F4" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1007 B

0
src/front/updateBanners/developersdevelopersdevelopers.webp → src/front/updateBanners/developers.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 867 KiB

After

Width:  |  Height:  |  Size: 867 KiB