vikarti.anatra/main
1
0
Fork 0
mirror of https://github.com/manualdousuario/marreta.git synced 2025-09-01 02:00:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

versão mobile

Browse source
This commit is contained in:
Renan Bernordi 2025-02-06 01:37:20 -03:00
parent ff1e1bcc86
commit dc297cbff8
18 changed files with 339 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/icons/close.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 308 B

3
app/assets/icons/hamburguer.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 341 B

21
app/assets/js/scripts.js
View file

@ -64,4 +64,25 @@ document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('click', () => {
closeAllMenus();
});
// Remove toasty elements when clicked
document.addEventListener('click', (e) => {
const toastyElement = e.target.closest('.toasty');
if (toastyElement) {
toastyElement.remove();
}
});
// Toggle header open class when open-nav is clicked
document.addEventListener('click', (e) => {
const openNavElement = e.target.closest('.open-nav');
if (openNavElement) {
const header = document.querySelector('header');
if (header.classList.contains('open')) {
header.classList.remove('open');
} else {
header.classList.add('open');
}
}
});
});

1
app/assets/scss/_base.scss
View file

@ -26,6 +26,7 @@ a {
padding-left: var(--container_spacing);
margin-right: auto;
margin-left: auto;
overflow: hidden;
@include mixin.devices(desktop) {
max-width: 1248px;

5
app/assets/scss/_icons.scss
View file

@ -35,4 +35,7 @@
@include mixin.icon('refresh', 'invert(100%) sepia(32%) saturate(8%) hue-rotate(23deg) brightness(102%) contrast(100%)');
@include mixin.icon('error', 'invert(30%) sepia(58%) saturate(3703%) hue-rotate(336deg) brightness(90%) contrast(91%)');
@include mixin.icon('warning', 'invert(89%) sepia(25%) saturate(5861%) hue-rotate(353deg) brightness(101%) contrast(101%)');
@include mixin.icon('warning', 'invert(89%) sepia(25%) saturate(5861%) hue-rotate(353deg) brightness(101%) contrast(101%)');
@include mixin.icon('hamburguer', 'invert(0%) sepia(21%) saturate(7425%) hue-rotate(12deg) brightness(96%) contrast(96%)');
@include mixin.icon('close', 'invert(100%) sepia(32%) saturate(8%) hue-rotate(23deg) brightness(102%) contrast(100%)');

322
app/assets/scss/home.scss
View file

@ -1,22 +1,129 @@
@use "mixin";
body {
padding: 42px 0 52px 0;
padding: 42px 0 0 0;
@include mixin.devices(desktop) {
padding: 42px 0 52px 0;
}
}
.toasty {
border-radius: 8px;
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.04);
box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.1);
position: absolute;
top: 16px;
left: 16px;
right: 16px;
color: #fff;
z-index: 1000;
width: auto;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
.close {
.icon {
width: 14px;
height: 14px;
}
}
p {
padding: 0;
margin: 0;
font-size: 12px;
line-height: 1.3em;
}
@include mixin.devices(desktop) {
max-width: 480px;
left: 50%;
margin-left: -256px;
}
&--error {
background-color: rgb(247, 102, 97);
}
&--warning {
background-color: rgb(247, 152, 97);
}
}
header {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: auto 1fr 1fr;
align-items: center;
padding: 0 0 42px 0;
@include mixin.devices(desktop) {
grid-template-columns: 1fr 2fr 1fr;
}
&.open {
.extension {
&__toggle {
background-color: #000;
}
}
.open-nav {
.icon {
&--hamburguer {
display: none;
}
&--close {
display: block;
}
}
}
nav {
display: flex;
}
.integration__menu {
.icon {
filter: invert(100%) sepia(32%) saturate(8%) hue-rotate(23deg) brightness(102%) contrast(100%);
}
}
}
.open-nav {
cursor: pointer;
position: relative;
z-index: 501;
padding-right: 16px;
.icon {
width: 24px;
height: 24px;
&--hamburguer {
display: block;
}
&--close {
display: none;
}
}
@include mixin.devices(desktop) {
display: none;
}
}
.brand {
display: flex;
align-items: center;
.icon {
margin-right: 6px;
&--marreta {
width: 32px;
height: 32px;
}
}
h1 {
font-family: var(--font-family-unna);
color: #000;
@ -24,77 +131,172 @@ header {
}
nav {
display: flex;
justify-content: center;
gap: 48px;
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--marreta);
padding: var(--container_spacing) var(--container_spacing) calc(4*var(--container_spacing)) var(--container_spacing);
z-index: 500;
align-items: flex-end;
flex-direction: column;
justify-content: end;
&> * {
width: 100%;
@include mixin.devices(desktop) {
width: auto;
}
}
@include mixin.devices(desktop) {
opacity: 1;
display: flex;
position: relative;
left: initial;
right: initial;
bottom: initial;
top: initial;
background-color: transparent;
padding: 0;
justify-content: center;
align-items: normal;
flex-direction:initial;
gap: 48px;
}
a {
display: block;
font-size: 24px;
padding: 16px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
color: #fff;
text-decoration: none;
color: #333;
@include mixin.devices(desktop) {
color: #333;
font-size: initial;
padding: 0;
border-bottom: 0;
}
&:hover {
color: #007bff;
color: #fff;
@include mixin.devices(desktop) {
color: #007bff;
}
}
}
.integration {
position: relative;
padding-top: 32px;
@include mixin.devices(desktop) {
padding-top: 0;
}
&__toggle {
background: none;
border: none;
cursor: pointer;
color: #333;
color: rgba(255,255,255,0.5);
padding: 0;
@include mixin.devices(desktop) {
color: #333;
cursor: pointer;
}
&:hover {
color: #007bff;
color: rgba(255,255,255,0.5);
@include mixin.devices(desktop) {
color: #007bff;
}
}
}
&__menu {
position: absolute;
top: 110%;
left: 0;
border-radius: 16px;
background-color: #F4F4F5;
border: 4px solid #F4F4F5;
z-index: 10;
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.04);
box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.1);
transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
max-height: 0;
opacity: 0;
overflow: hidden;
@include mixin.devices(desktop) {
position: absolute;
top: 110%;
left: 0;
border-radius: 16px;
background-color: #F4F4F5;
border: 4px solid #F4F4F5;
z-index: 10;
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.04);
box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.1);
transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
max-height: 0;
opacity: 0;
overflow: hidden;
}
a {
margin-bottom: 4px;
font-size: 14px;
border-bottom: 0;
margin-top: 8px;
padding: 16px 0 0 0;
display: flex;
align-items: center;
color: #fff;
font-weight: 600;
@include mixin.devices(desktop) {
background-color: #fff;
margin-top: 0;
margin-bottom: 4px;
padding: 8px 16px;
font-size: var(--font-size);
color: var(--text);
}
&:first-child {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
&:last-child {
margin-bottom: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
color: var(--text);
font-weight: 600;
display: block;
padding: 8px 16px;
background-color: #fff;
display: flex;
align-items: center;
&:hover {
color: var(--marreta);
}
span {
display: inline-block;
}
}
.icon {
width: 22px;
height: 22px;
order: 1;
@include mixin.devices(desktop) {
order: 2;
width: 16px;
height: 16px;
}
}
.name {
width: 140px;
order: 2;
line-height: 1em;
padding-left: 12px;
@include mixin.devices(desktop) {
order: 1;
padding-left: 0;
width: 140px;
line-height: var(--line-height);
}
}
}
@ -111,10 +313,10 @@ header {
}
.arrow {
display: none;
position: relative;
top: -3px;
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-right: 2px solid black;
@ -122,6 +324,10 @@ header {
transform: rotate(135deg);
margin-right: 0;
margin-left: 16px;
@include mixin.devices(desktop) {
display: inline-block;
}
}
}
}
@ -130,6 +336,7 @@ header {
display: flex;
justify-content: flex-end;
position: relative;
z-index: 501;
&__toggle {
background-color: var(--marreta);
@ -140,6 +347,7 @@ header {
font-weight: 600;
padding: 12px 24px;
line-height: 1.3em;
&:hover {
background-color: var(--marreta-darken);
}
@ -164,15 +372,18 @@ header {
a {
margin-bottom: 4px;
&:first-child {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
&:last-child {
margin-bottom: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
color: var(--text);
font-weight: 600;
display: block;
@ -180,13 +391,16 @@ header {
background-color: #fff;
display: flex;
align-items: center;
&:hover {
color: var(--marreta);
}
span {
display: inline-block;
}
}
.name {
width: 140px;
}
@ -197,6 +411,7 @@ header {
background-color: #F4F4F5;
color: var(--textmuted);
}
.extension__menu {
max-height: 200px;
opacity: 1;
@ -325,13 +540,20 @@ main {
.plus {
z-index: 3;
position: relative;
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 1fr;
gap: 0px 38px;
align-items: start;
max-width: 900px;
margin: 62px auto 0 auto;
background-color: rgba(244, 244, 245, 1);
margin-left: calc(-1*var(--container_spacing));
margin-right: calc(-1*var(--container_spacing));
@include mixin.devices(desktop) {
background-color: transparent;
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 1fr 1fr;
gap: 0px 38px;
align-items: start;
max-width: 900px;
margin: 62px auto 0 auto;
}
h2 {
font-size: 16px;
@ -364,7 +586,23 @@ main {
}
}
.add_as_app {
margin-top: 62px;
padding: var(--container_spacing);
@include mixin.devices(desktop) {
padding: 0;
margin-top: 0;
}
}
.bookmarklet {
display: none;
@include mixin.devices(desktop) {
display: block;
}
a {
border: 2px solid var(--marreta);
color: var(--marreta);

2
app/dist/css/style.css vendored
View file

File diff suppressed because one or more lines are too long

2
app/dist/css/style.css.map vendored
View file

File diff suppressed because one or more lines are too long

1
app/dist/icons/close.svg vendored Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 284 B

1
app/dist/icons/hamburguer.svg vendored Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 317 B

2
app/dist/js/scripts.js vendored
View file

@ -1,2 +1,2 @@
"serviceWorker"in navigator&&window.addEventListener("load",()=>{navigator.serviceWorker.register("/service-worker.js").then(()=>{}).catch(()=>{})}),document.addEventListener("DOMContentLoaded",function(){let t=document.querySelector(".integration");var e=document.querySelector(".integration__toggle");let o=document.querySelector(".extension");var n=document.querySelector(".extension__toggle");let r=e=>{e!==t&&t.classList.remove("open"),e!==o&&o.classList.remove("open")};e.addEventListener("click",e=>{e.stopPropagation(),r(t),t.classList.toggle("open")}),n.addEventListener("click",e=>{e.stopPropagation(),r(o),o.classList.toggle("open")}),t.addEventListener("click",e=>{e.stopPropagation()}),o.addEventListener("click",e=>{e.stopPropagation()}),document.addEventListener("click",()=>{t.classList.remove("open"),o.classList.remove("open")})});
"serviceWorker"in navigator&&window.addEventListener("load",()=>{navigator.serviceWorker.register("/service-worker.js").then(()=>{}).catch(()=>{})}),document.addEventListener("DOMContentLoaded",function(){let t=document.querySelector(".integration");var e=document.querySelector(".integration__toggle");let o=document.querySelector(".extension");var n=document.querySelector(".extension__toggle");let s=e=>{e!==t&&t.classList.remove("open"),e!==o&&o.classList.remove("open")};e.addEventListener("click",e=>{e.stopPropagation(),s(t),t.classList.toggle("open")}),n.addEventListener("click",e=>{e.stopPropagation(),s(o),o.classList.toggle("open")}),t.addEventListener("click",e=>{e.stopPropagation()}),o.addEventListener("click",e=>{e.stopPropagation()}),document.addEventListener("click",()=>{t.classList.remove("open"),o.classList.remove("open")}),document.addEventListener("click",e=>{e=e.target.closest(".toasty");e&&e.remove()}),document.addEventListener("click",e=>{e.target.closest(".open-nav")&&((e=document.querySelector("header")).classList.contains("open")?e.classList.remove("open"):e.classList.add("open"))})});
//# sourceMappingURL=scripts.js.map

2
app/dist/js/scripts.js.map vendored
View file

@ -1 +1 @@
{"version":3,"sources":["scripts.js"],"names":["navigator","window","addEventListener","serviceWorker","register","then","catch","document","integration","querySelector","integrationToggle","extension","extensionToggle","closeOtherMenus","exceptMenu","classList","remove","e","stopPropagation","toggle"],"mappings":"AAIA,kBAAAA,WACAC,OAAAC,iBAAA,OAAA,KACAF,UAAAG,cAAAC,SAAA,oBAAA,EACAC,KAAA,MAEA,EACAC,MAAA,MAEA,CACA,CAAA,EAMAC,SAAAL,iBAAA,mBAAA,WACA,IAAAM,EAAAD,SAAAE,cAAA,cAAA,EACA,IAAAC,EAAAH,SAAAE,cAAA,sBAAA,EACA,IAAAE,EAAAJ,SAAAE,cAAA,YAAA,EACA,IAAAG,EAAAL,SAAAE,cAAA,oBAAA,EAGA,IAMAI,EAAA,IACAC,IAAAN,GACAA,EAAAO,UAAAC,OAAA,MAAA,EAEAF,IAAAH,GACAA,EAAAI,UAAAC,OAAA,MAAA,CAEA,EAEAN,EAAAR,iBAAA,QAAA,IACAe,EAAAC,gBAAA,EACAL,EAAAL,CAAA,EACAA,EAAAO,UAAAI,OAAA,MAAA,CACA,CAAA,EAEAP,EAAAV,iBAAA,QAAA,IACAe,EAAAC,gBAAA,EACAL,EAAAF,CAAA,EACAA,EAAAI,UAAAI,OAAA,MAAA,CACA,CAAA,EAGAX,EAAAN,iBAAA,QAAA,IACAe,EAAAC,gBAAA,CACA,CAAA,EAEAP,EAAAT,iBAAA,QAAA,IACAe,EAAAC,gBAAA,CACA,CAAA,EAGAX,SAAAL,iBAAA,QAAA,KApCAM,EAAAO,UAAAC,OAAA,MAAA,EACAL,EAAAI,UAAAC,OAAA,MAAA,CAqCA,CAAA,CACA,CAAA","file":"scripts.js","sourcesContent":["/**\r\n * Service Worker registration for PWA functionality\r\n * Registers a service worker to enable offline capabilities and PWA features\r\n */\r\nif ('serviceWorker' in navigator) {\r\n window.addEventListener('load', () => {\r\n navigator.serviceWorker.register('/service-worker.js')\r\n .then(() => {\r\n // Service Worker registered successfully\r\n })\r\n .catch(() => {\r\n // Service Worker registration failed\r\n });\r\n });\r\n}\r\n\r\n/**\r\n * Header toggle menus\r\n */\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n const integration = document.querySelector('.integration');\r\n const integrationToggle = document.querySelector('.integration__toggle');\r\n const extension = document.querySelector('.extension');\r\n const extensionToggle = document.querySelector('.extension__toggle');\r\n\r\n // Function to close all menus\r\n const closeAllMenus = () => {\r\n integration.classList.remove('open');\r\n extension.classList.remove('open');\r\n };\r\n\r\n // Function to close other menus except the one passed\r\n const closeOtherMenus = (exceptMenu) => {\r\n if (exceptMenu !== integration) {\r\n integration.classList.remove('open');\r\n }\r\n if (exceptMenu !== extension) {\r\n extension.classList.remove('open');\r\n }\r\n };\r\n\r\n integrationToggle.addEventListener('click', (e) => {\r\n e.stopPropagation(); // Prevent click from bubbling to document\r\n closeOtherMenus(integration);\r\n integration.classList.toggle('open');\r\n });\r\n\r\n extensionToggle.addEventListener('click', (e) => {\r\n e.stopPropagation(); // Prevent click from bubbling to document\r\n closeOtherMenus(extension);\r\n extension.classList.toggle('open');\r\n });\r\n\r\n // Prevent clicks inside menus from closing them\r\n integration.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n });\r\n\r\n extension.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n });\r\n\r\n // Close menus when clicking outside\r\n document.addEventListener('click', () => {\r\n closeAllMenus();\r\n });\r\n});"]}
{"version":3,"sources":["scripts.js"],"names":["navigator","window","addEventListener","serviceWorker","register","then","catch","document","integration","querySelector","integrationToggle","extension","extensionToggle","closeOtherMenus","exceptMenu","classList","remove","e","stopPropagation","toggle","toastyElement","target","closest","header","contains","add"],"mappings":"AAIA,kBAAAA,WACAC,OAAAC,iBAAA,OAAA,KACAF,UAAAG,cAAAC,SAAA,oBAAA,EACAC,KAAA,MAEA,EACAC,MAAA,MAEA,CACA,CAAA,EAMAC,SAAAL,iBAAA,mBAAA,WACA,IAAAM,EAAAD,SAAAE,cAAA,cAAA,EACA,IAAAC,EAAAH,SAAAE,cAAA,sBAAA,EACA,IAAAE,EAAAJ,SAAAE,cAAA,YAAA,EACA,IAAAG,EAAAL,SAAAE,cAAA,oBAAA,EAGA,IAMAI,EAAA,IACAC,IAAAN,GACAA,EAAAO,UAAAC,OAAA,MAAA,EAEAF,IAAAH,GACAA,EAAAI,UAAAC,OAAA,MAAA,CAEA,EAEAN,EAAAR,iBAAA,QAAA,IACAe,EAAAC,gBAAA,EACAL,EAAAL,CAAA,EACAA,EAAAO,UAAAI,OAAA,MAAA,CACA,CAAA,EAEAP,EAAAV,iBAAA,QAAA,IACAe,EAAAC,gBAAA,EACAL,EAAAF,CAAA,EACAA,EAAAI,UAAAI,OAAA,MAAA,CACA,CAAA,EAGAX,EAAAN,iBAAA,QAAA,IACAe,EAAAC,gBAAA,CACA,CAAA,EAEAP,EAAAT,iBAAA,QAAA,IACAe,EAAAC,gBAAA,CACA,CAAA,EAGAX,SAAAL,iBAAA,QAAA,KApCAM,EAAAO,UAAAC,OAAA,MAAA,EACAL,EAAAI,UAAAC,OAAA,MAAA,CAqCA,CAAA,EAGAT,SAAAL,iBAAA,QAAA,IACAkB,EAAAH,EAAAI,OAAAC,QAAA,SAAA,EACAF,GACAA,EAAAJ,OAAA,CAEA,CAAA,EAGAT,SAAAL,iBAAA,QAAA,IACAe,EAAAI,OAAAC,QAAA,WAAA,KAEAC,EAAAhB,SAAAE,cAAA,QAAA,GACAM,UAAAS,SAAA,MAAA,EACAD,EAAAR,UAAAC,OAAA,MAAA,EAEAO,EAAAR,UAAAU,IAAA,MAAA,EAGA,CAAA,CACA,CAAA","file":"scripts.js","sourcesContent":["/**\r\n * Service Worker registration for PWA functionality\r\n * Registers a service worker to enable offline capabilities and PWA features\r\n */\r\nif ('serviceWorker' in navigator) {\r\n window.addEventListener('load', () => {\r\n navigator.serviceWorker.register('/service-worker.js')\r\n .then(() => {\r\n // Service Worker registered successfully\r\n })\r\n .catch(() => {\r\n // Service Worker registration failed\r\n });\r\n });\r\n}\r\n\r\n/**\r\n * Header toggle menus\r\n */\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n const integration = document.querySelector('.integration');\r\n const integrationToggle = document.querySelector('.integration__toggle');\r\n const extension = document.querySelector('.extension');\r\n const extensionToggle = document.querySelector('.extension__toggle');\r\n\r\n // Function to close all menus\r\n const closeAllMenus = () => {\r\n integration.classList.remove('open');\r\n extension.classList.remove('open');\r\n };\r\n\r\n // Function to close other menus except the one passed\r\n const closeOtherMenus = (exceptMenu) => {\r\n if (exceptMenu !== integration) {\r\n integration.classList.remove('open');\r\n }\r\n if (exceptMenu !== extension) {\r\n extension.classList.remove('open');\r\n }\r\n };\r\n\r\n integrationToggle.addEventListener('click', (e) => {\r\n e.stopPropagation(); // Prevent click from bubbling to document\r\n closeOtherMenus(integration);\r\n integration.classList.toggle('open');\r\n });\r\n\r\n extensionToggle.addEventListener('click', (e) => {\r\n e.stopPropagation(); // Prevent click from bubbling to document\r\n closeOtherMenus(extension);\r\n extension.classList.toggle('open');\r\n });\r\n\r\n // Prevent clicks inside menus from closing them\r\n integration.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n });\r\n\r\n extension.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n });\r\n\r\n // Close menus when clicking outside\r\n document.addEventListener('click', () => {\r\n closeAllMenus();\r\n });\r\n\r\n // Remove toasty elements when clicked\r\n document.addEventListener('click', (e) => {\r\n const toastyElement = e.target.closest('.toasty');\r\n if (toastyElement) {\r\n toastyElement.remove();\r\n }\r\n });\r\n\r\n // Toggle header open class when open-nav is clicked\r\n document.addEventListener('click', (e) => {\r\n const openNavElement = e.target.closest('.open-nav');\r\n if (openNavElement) {\r\n const header = document.querySelector('header');\r\n if (header.classList.contains('open')) {\r\n header.classList.remove('open');\r\n } else {\r\n header.classList.add('open');\r\n }\r\n }\r\n });\r\n});"]}

2
app/languages/de-de.php
View file

@ -5,7 +5,7 @@ return [
'url_placeholder' => 'Adresse eingegeben (z.B., https://example.com)',
'analyze_button' => 'Analysiere',
'nav_integration' => 'Integrations',
'nav_extension' => 'Install the extension',
'nav_extension' => 'Install',
'bookmarklet_title' => 'Zu Lesezeichen hinzufügen',
'bookmarklet_description' => 'Ziehe Sie die Schaltfläche unten in Ihre Lesezeichenleiste, um schnell auf zuzugreifen:',
'open_in' => 'Öffne {site_name}',

2
app/languages/en.php
View file

@ -5,7 +5,7 @@ return [
'url_placeholder' => 'Enter URL (e.g., https://example.com)',
'analyze_button' => 'Analyze',
'nav_integration' => 'Integrations',
'nav_extension' => 'Install the extension',
'nav_extension' => 'Install',
'bookmarklet_title' => 'Add to Bookmarks',
'bookmarklet_description' => 'Drag the button below to your bookmarks bar to quickly access on any page:',
'open_in' => 'Open in {site_name}',

2
app/languages/es.php
View file

@ -5,7 +5,7 @@ return [
'url_placeholder' => 'Ingrese URL (ej: https://ejemplo.com)',
'analyze_button' => 'Analizar',
'nav_integration' => 'Integraciones',
'nav_extension' => 'Instalar la extensión',
'nav_extension' => 'Instalar',
'bookmarklet_title' => 'Agregar a Favoritos',
'bookmarklet_description' => 'Arrastra el botón a tu barra de favoritos para acceder rápidamente en cualquier página:',
'open_in' => 'Abrir en {site_name}',

2
app/languages/pt-br.php
View file

@ -5,7 +5,7 @@ return [
'url_placeholder' => 'Digite a URL (ex: https://exemplo.com)',
'analyze_button' => 'Analisar',
'nav_integration' => 'Integrações',
'nav_extension' => 'Instale a extensão',
'nav_extension' => 'Instale',
'bookmarklet_title' => 'Adicione aos Favoritos',
'bookmarklet_description' => 'Adicione aos favoritos arrastando o botão abaixo <strong>para sua barra de favoritos</strong>!',
'open_in' => 'Me arrasta',

2
app/languages/ru-ru.php
View file

@ -5,7 +5,7 @@ return [
'url_placeholder' => 'Введите URL (например, https://example.com)',
'analyze_button' => 'Анализировать',
'nav_integration' => 'Integrations',
'nav_extension' => 'Install the extension',
'nav_extension' => 'Install',
'bookmarklet_title' => 'Добавить в закладки',
'bookmarklet_description' => 'Перетащите кнопку ниже на панель закладок, чтобы быстро получить доступ к на любой странице:',
'open_in' => 'Открыть в {site_name}',

34
app/src/views/home.php
View file

@ -26,8 +26,24 @@
</head>
<body>
<?php if ($message): ?>
<div class="toasty toasty--<?php echo $message_type === 'error' ? 'error' : 'warning'; ?>">
<div>
<p>
<?php echo htmlspecialchars($message); ?>
</p>
</div>
<div>
<span class="icon icon--close"></span>
</div>
</div>
<?php endif; ?>
<div class="container">
<header>
<div class="open-nav">
<span class="icon icon--hamburguer"></span>
<span class="icon icon--close"></span>
</div>
<div class="brand">
<span class="icon icon--marreta"></span>
<h1><?php echo SITE_NAME; ?></h1>
@ -59,24 +75,6 @@
<strong><?php echo number_format($cache_folder, 0, ',', '.'); ?></strong> <span><?php echo \Inc\Language::get('walls_destroyed'); ?></span>
</p>
<form id="urlForm" method="POST" onsubmit="return validateForm()" class="space-y-6">
<?php if ($message): ?>
<div class="<?php echo $message_type === 'error' ? 'error' : 'warning'; ?>">
<div>
<div>
<?php if ($message_type === 'error'): ?>
<span class="icon icon--error"></span>
<?php else: ?>
<span class="icon icon--warning"></span>
<?php endif; ?>
</div>
<div>
<p class="<?php echo $message_type === 'error' ? 'error' : 'warning'; ?>">
<?php echo htmlspecialchars($message); ?>
</p>
</div>
</div>
</div>
<?php endif; ?>
<div class="fields">
<div class="input">
<span class="icon icon--link"></span>