tandem
/
camper
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a controlled layer group for the zones on the map 

It seems that we have to highlight the map zones too.  On the previous
website, they had a mouseover effect that displayed a tooltip, but here
we can not do that because we use the mouse to select accommodations.

This is just a test to see whether Oriol likes how it is shown, thus the
red is likely to change to something else more pleasant to look at.
This commit is contained in:
jordi fita mas 2024-01-31 15:12:11 +01:00
parent 8c9308f1d3
commit d198bad91b
6 changed files with 207 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -1,4 +1,4 @@
HTML_FILES := $(shell find web -name *.gohtml)
HTML_FILES := $(shell find web -name *.gohtml -o -name *.svg)
GO_FILES := $(shell find . -name *.go)
DEFAULT_DOMAIN = camper
POT_FILE = po/$(DEFAULT_DOMAIN).pot

42
po/ca.po
View File

@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: camper\n"
"Report-Msgid-Bugs-To: jordi@tandem.blog\n"
"POT-Creation-Date: 2024-01-29 14:22+0100\n"
"POT-Creation-Date: 2024-01-31 15:05+0100\n"
"PO-Revision-Date: 2023-07-22 23:45+0200\n"
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
"Language-Team: Catalan <ca@dodds.net>\n"
@ -18,6 +18,46 @@ msgstr ""
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
#: web/templates/campground_map.svg:1598
msgctxt "title"
msgid "Zones"
msgstr "Zones"
#: web/templates/campground_map.svg:1599
msgctxt "tooltip"
msgid "Zone 7"
msgstr "Zona 7"
#: web/templates/campground_map.svg:1600
msgctxt "tooltip"
msgid "Zone 6"
msgstr "Zona 6"
#: web/templates/campground_map.svg:1601
msgctxt "tooltip"
msgid "Zone 5"
msgstr "Zona 5"
#: web/templates/campground_map.svg:1602
msgctxt "tooltip"
msgid "Zone 4"
msgstr "Zona 4"
#: web/templates/campground_map.svg:1603
msgctxt "tooltip"
msgid "Zone 3"
msgstr "Zona 3"
#: web/templates/campground_map.svg:1604
msgctxt "tooltip"
msgid "Zone 2"
msgstr "Zona 2"
#: web/templates/campground_map.svg:1605
msgctxt "tooltip"
msgid "Zone 1"
msgstr "Zona 1"
#: web/templates/public/payment/success.gohtml:6
#: web/templates/public/payment/success.gohtml:11
msgctxt "title"

42
po/es.po
View File

@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: camper\n"
"Report-Msgid-Bugs-To: jordi@tandem.blog\n"
"POT-Creation-Date: 2024-01-29 14:22+0100\n"
"POT-Creation-Date: 2024-01-31 15:06+0100\n"
"PO-Revision-Date: 2023-07-22 23:46+0200\n"
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
"Language-Team: Spanish <es@tp.org.es>\n"
@ -18,6 +18,46 @@ msgstr ""
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"
#: web/templates/campground_map.svg:1598
msgctxt "title"
msgid "Zones"
msgstr "Zonas"
#: web/templates/campground_map.svg:1599
msgctxt "tooltip"
msgid "Zone 7"
msgstr "Zona 7"
#: web/templates/campground_map.svg:1600
msgctxt "tooltip"
msgid "Zone 6"
msgstr "Zona 6"
#: web/templates/campground_map.svg:1601
msgctxt "tooltip"
msgid "Zone 5"
msgstr "Zona 6"
#: web/templates/campground_map.svg:1602
msgctxt "tooltip"
msgid "Zone 4"
msgstr "Zona 4"
#: web/templates/campground_map.svg:1603
msgctxt "tooltip"
msgid "Zone 3"
msgstr "Zona 3"
#: web/templates/campground_map.svg:1604
msgctxt "tooltip"
msgid "Zone 2"
msgstr "Zona 2"
#: web/templates/campground_map.svg:1605
msgctxt "tooltip"
msgid "Zone 1"
msgstr "Zona 1"
#: web/templates/public/payment/success.gohtml:6
#: web/templates/public/payment/success.gohtml:11
msgctxt "title"

42
po/fr.po
View File

@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: camper\n"
"Report-Msgid-Bugs-To: jordi@tandem.blog\n"
"POT-Creation-Date: 2024-01-29 14:22+0100\n"
"POT-Creation-Date: 2024-01-31 15:06+0100\n"
"PO-Revision-Date: 2023-12-20 10:13+0100\n"
"Last-Translator: Oriol Carbonell <info@oriolcarbonell.cat>\n"
"Language-Team: French <traduc@traduc.org>\n"
@ -19,6 +19,46 @@ msgstr ""
"Plural-Forms: nplurals=2; plural=(n > 1);\n"
"X-Generator: Poedit 3.4.1\n"
#: web/templates/campground_map.svg:1598
msgctxt "title"
msgid "Zones"
msgstr "Zones"
#: web/templates/campground_map.svg:1599
msgctxt "tooltip"
msgid "Zone 7"
msgstr "Zone 7"
#: web/templates/campground_map.svg:1600
msgctxt "tooltip"
msgid "Zone 6"
msgstr "Zone 6"
#: web/templates/campground_map.svg:1601
msgctxt "tooltip"
msgid "Zone 5"
msgstr "Zone 5"
#: web/templates/campground_map.svg:1602
msgctxt "tooltip"
msgid "Zone 4"
msgstr "Zone 4"
#: web/templates/campground_map.svg:1603
msgctxt "tooltip"
msgid "Zone 3"
msgstr "Zone 3"
#: web/templates/campground_map.svg:1604
msgctxt "tooltip"
msgid "Zone 2"
msgstr "Zone 2"
#: web/templates/campground_map.svg:1605
msgctxt "tooltip"
msgid "Zone 1"
msgstr "Zone 1"
#: web/templates/public/payment/success.gohtml:6
#: web/templates/public/payment/success.gohtml:11
msgctxt "title"

129
web/static/map.js
View File

@ -105,6 +105,63 @@
return getCTM(matrix.multiply(ctm), el.parentElement);
}
function convertToPoints(path) {
const ctm = getCTM(new DOMMatrix([1, 0, 0, 1, 0, 0]), path);
const points = [];
const p0 = new DOMPoint();
function setP0(x, y) {
p0.x = x;
p0.y = y;
const p1 = p0.matrixTransform(ctm);
p0.x = p1.x;
p0.y = latLngBounds.getNorth() - p1.y;
}
switch (path.localName) {
case 'rect':
const x = parseFloat(path.getAttribute('x'));
const y = parseFloat(path.getAttribute('y'));
const w = parseFloat(path.getAttribute('width'));
const h = parseFloat(path.getAttribute('height'));
setP0(x, y);
points.push([p0.y, p0.x]);
setP0(x + w, y);
points.push([p0.y, p0.x]);
setP0(x + w, y + h);
points.push([p0.y, p0.x]);
setP0(x, y + h);
points.push([p0.y, p0.x]);
break;
case 'path':
const commands = parse(path.getAttribute('d'));
for (const cmd of commands) {
switch (cmd[0]) {
case 'M':
case 'L':
setP0(cmd[1], cmd[2]);
break;
case 'm':
case 'l':
p0.x += cmd[1];
p0.y -= cmd[2];
break;
case 'C':
setP0(cmd[5], cmd[6]);
break;
case 'Z':
case 'z':
continue;
default:
console.error(cmd);
}
points.push([p0.y, p0.x]);
}
break;
}
return points;
}
function setupFeatures(prefix, baseURI) {
for (const campsite of Array.from(container.querySelectorAll(`[id^="${prefix}"]`))) {
const label = campsite.id.substring(prefix.length);
@ -116,59 +173,8 @@
console.warn(campsite, 'has no path');
continue;
}
const ctm = getCTM(new DOMMatrix([1, 0, 0, 1, 0, 0]), path);
const points = [];
const p0 = new DOMPoint();
function setP0(x, y) {
p0.x = x;
p0.y = y;
const p1 = p0.matrixTransform(ctm);
p0.x = p1.x;
p0.y = latLngBounds.getNorth() - p1.y;
}
switch (path.localName) {
case 'rect':
const x = parseFloat(path.getAttribute('x'));
const y = parseFloat(path.getAttribute('y'));
const w = parseFloat(path.getAttribute('width'));
const h = parseFloat(path.getAttribute('height'));
setP0(x, y);
points.push([p0.y, p0.x]);
setP0(x + w, y);
points.push([p0.y, p0.x]);
setP0(x + w, y + h);
points.push([p0.y, p0.x]);
setP0(x, y + h);
points.push([p0.y, p0.x]);
break;
case 'path':
const commands = parse(path.getAttribute('d'));
for (const cmd of commands) {
switch (cmd[0]) {
case 'M':
case 'L':
setP0(cmd[1], cmd[2]);
break;
case 'm':
case 'l':
p0.x += cmd[1];
p0.y -= cmd[2];
break;
case 'C':
setP0(cmd[5], cmd[6]);
break;
case 'Z':
case 'z':
continue;
default:
console.error(cmd);
}
points.push([p0.y, p0.x]);
}
break;
}
const points = convertToPoints(path);
const feature = L.polygon(points, {color: 'transparent'}).addTo(map);
feature.on({
mouseover: highlightAccommodation,
@ -181,6 +187,21 @@
}
const language = document.documentElement.getAttribute('lang');
setupFeatures('cp_', `/${language}/campsites`)
setupFeatures('cr_', `/${language}/amenities`)
setupFeatures('cp_', `/${language}/campsites`);
setupFeatures('cr_', `/${language}/amenities`);
const zones = container.querySelector('#zones');
const zonesOverlay = L.layerGroup();
for (const path of Array.from(zones.querySelectorAll('path'))) {
const points = convertToPoints(path);
const zone = L
.polygon(points, {color: 'red'})
.bindTooltip(path.getAttribute('aria-label'), {permanent: true})
;
zonesOverlay.addLayer(zone);
}
L.control.layers(null, null, {collapsed: false})
.addOverlay(zonesOverlay, zones.getAttribute('aria-label'))
.addTo(map)
;
})();

16
web/templates/campground_map.svg
View File

@ -1595,13 +1595,13 @@
<circle cx="421.606" cy="646.55" r="11.594" style="fill:rgb(128,222,128);"/>
<circle cx="931.816" cy="622.937" r="11.594" style="fill:rgb(128,222,128);"/>
</g>
<g id="zones">
<path id="zona-7" d="M541.642,137.124C515.284,141.168 498.423,138.81 471.842,140.935C450.749,142.622 428.97,140.312 408.553,145.869C338.883,164.833 349.183,186.503 282.178,213.433C261.828,221.612 239.315,222.832 217.692,226.507C189.141,231.36 151.994,218.333 131.714,239.008C117.595,253.403 132.812,284.361 148.399,297.153C197.288,337.277 268.061,349.656 329.217,351.891C350.216,352.658 373.194,340.492 392.208,349.436C403.151,354.584 394.044,374.193 399.533,384.969C403.104,391.978 410.166,398.246 417.874,399.819C449.449,406.262 482.134,411.818 514.174,408.362C525.014,407.193 536.544,397.459 538.754,386.783C546.165,350.982 540.243,313.678 541.338,277.135C542.251,246.708 542.598,216.24 544.777,185.877C546.015,168.624 557.452,134.699 541.642,137.124Z" style="fill:rgb(255,183,126);stroke:rgb(82,84,83);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-6" d="M121.374,329.874C126.923,321.993 137.078,320.965 144.96,323.137C213.883,342.132 213.332,343.726 283.089,359.149C287.16,360.05 289.102,369.961 285.218,371.475C259.68,381.427 230.982,380.821 205.01,389.577C196.109,392.578 186.71,397.923 182.247,406.188C178.133,413.808 177.798,424.603 182.016,432.165C192.672,451.268 235.094,481.513 238.109,511.55C239.918,529.567 235.324,547.694 232.535,565.585C224.728,615.668 215.545,665.531 206.337,715.377C202.989,733.503 193.968,751.063 194.87,769.474C196.566,804.11 210.733,837.21 213.995,871.734C214.62,878.348 211.181,885.635 206.267,890.106C200.224,895.604 191.607,897.834 183.588,899.399C166.043,902.823 147.513,900.311 130.247,904.942C118.779,908.018 110.864,921.232 99.021,922.081C92.985,922.514 88.262,914.013 87.561,908.002C72.716,780.77 79.998,779.75 118.531,657.498C131.438,616.548 152.913,575.518 150.272,532.664C148.584,505.278 120.898,486.31 106.539,462.929C100.445,453.006 87.629,444.337 88.919,432.764C92.905,397.023 101.845,357.609 121.374,329.874Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-5" d="M505.085,519.04C506.317,527.744 479.629,536.05 459.016,537.538C450.539,538.15 458.745,518.173 451.978,513.031C445.845,508.371 421.067,514.571 413.369,514.315C347.187,512.108 314.471,516.008 245.194,517.465C233.272,517.715 245.309,493.023 240.879,481.951C230.155,455.144 216.739,465.411 200.339,444.982C194.626,437.865 182.177,414.713 193.406,403.672C209.736,387.616 262.09,389.719 272.45,389.114C356.341,384.215 355.344,394.896 448.975,419.044C459.56,421.774 475.298,418.734 480.408,428.398C496.237,458.332 500.34,485.513 505.085,519.04Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-4" d="M246.246,524.789C307.577,518.894 367.119,516.165 431.002,517.003C440.188,517.123 434.544,536.358 441.324,542.557C445.444,546.324 452.522,542.503 458.051,541.736C470.705,539.981 483.737,530.743 495.781,535.003C504.121,537.953 502.288,551.568 507.005,559.051C513.57,569.465 521.74,578.783 529.436,588.393C531.916,591.489 533.182,600.06 527.506,603.657C513.128,612.769 513.269,613.26 500.607,622.747C494.75,627.135 488.57,631.647 481.558,633.744C425.669,650.451 387.039,635.819 323.876,646.343C318.705,647.205 322.02,657.051 318.897,661.262C315.531,665.802 310.508,669.195 305.302,671.394C277.685,683.058 258.359,696.898 235.165,716.084C229.126,721.08 211.625,720.556 211.895,712.723C213.606,662.96 231.472,615.076 240.325,566.077C242.925,551.683 244.587,539.321 246.246,524.789Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-3" d="M912.192,620.954C916.224,624.5 920.744,628.476 926.074,629.126C964.803,633.843 1004.44,630.129 1042.86,636.872C1052.12,638.495 1063.11,644.524 1065.55,653.597C1071.22,674.725 1067.03,697.443 1064.97,719.222C1063.61,733.706 1057.5,747.404 1055.35,761.791C1054.75,765.776 1057.15,769.777 1056.81,773.792C1056.53,776.978 1056.72,782.881 1053.53,782.809C1023.92,782.138 994.971,772.627 965.367,771.719C941.832,770.996 918.526,776.869 895.005,777.943C892.644,778.05 889.107,776.765 889.491,774.433C893.046,752.857 895.253,734.687 897.762,713.643C901.227,684.581 903.781,657.726 906.259,627.137C906.453,624.741 909.912,621.713 912.192,620.954Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-2" d="M450.743,668.938C454.141,659.657 473.269,645.426 484.324,636.812C502.981,622.273 528.906,604.104 539.574,599.714C569.364,587.455 772.249,596.754 888.587,597.523C902.051,597.612 904.915,614.799 904.413,627.166C903.578,647.744 896.873,727.261 885.498,782.859C884.914,785.712 861.945,788.945 850.405,791.451C820.954,797.846 792.468,809.048 762.582,812.939C706.434,820.249 649.315,817.825 593.143,824.943C589.673,825.382 548.337,846.073 546.125,839.557C538.522,817.154 536.68,801.458 528.441,783.475C524.418,774.694 510.615,778.999 501.095,777.369C481.637,774.038 460.506,774.783 443.064,765.537C434.96,761.241 430.864,749.669 431.591,740.526C433.548,715.902 442.25,692.134 450.743,668.938Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-1" d="M418.073,661.097C397.86,658.619 377.163,653.716 357.103,657.224C311.276,665.237 220.533,726.479 203.105,745.401C192.157,757.287 201.273,777.836 203.208,793.879C206.247,819.079 209.713,844.578 217.958,868.584C219.439,872.894 226.629,875.898 230.629,873.716C287.589,842.633 362.358,806.747 410.055,743.843C422.698,727.17 423.149,703.808 426.204,683.107C427.345,675.37 422.334,667.656 418.073,661.097Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<g id="zones" aria-label='{{( pgettext "Zones" "title" )}}'>
<path id="zona-7" aria-label='{{( pgettext "Zone 7" "tooltip" )}}' d="M541.642,137.124C515.284,141.168 498.423,138.81 471.842,140.935C450.749,142.622 428.97,140.312 408.553,145.869C338.883,164.833 349.183,186.503 282.178,213.433C261.828,221.612 239.315,222.832 217.692,226.507C189.141,231.36 151.994,218.333 131.714,239.008C117.595,253.403 132.812,284.361 148.399,297.153C197.288,337.277 268.061,349.656 329.217,351.891C350.216,352.658 373.194,340.492 392.208,349.436C403.151,354.584 394.044,374.193 399.533,384.969C403.104,391.978 410.166,398.246 417.874,399.819C449.449,406.262 482.134,411.818 514.174,408.362C525.014,407.193 536.544,397.459 538.754,386.783C546.165,350.982 540.243,313.678 541.338,277.135C542.251,246.708 542.598,216.24 544.777,185.877C546.015,168.624 557.452,134.699 541.642,137.124Z" style="fill:rgb(255,183,126);stroke:rgb(82,84,83);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-6" aria-label='{{( pgettext "Zone 6" "tooltip" )}}' d="M121.374,329.874C126.923,321.993 137.078,320.965 144.96,323.137C213.883,342.132 213.332,343.726 283.089,359.149C287.16,360.05 289.102,369.961 285.218,371.475C259.68,381.427 230.982,380.821 205.01,389.577C196.109,392.578 186.71,397.923 182.247,406.188C178.133,413.808 177.798,424.603 182.016,432.165C192.672,451.268 235.094,481.513 238.109,511.55C239.918,529.567 235.324,547.694 232.535,565.585C224.728,615.668 215.545,665.531 206.337,715.377C202.989,733.503 193.968,751.063 194.87,769.474C196.566,804.11 210.733,837.21 213.995,871.734C214.62,878.348 211.181,885.635 206.267,890.106C200.224,895.604 191.607,897.834 183.588,899.399C166.043,902.823 147.513,900.311 130.247,904.942C118.779,908.018 110.864,921.232 99.021,922.081C92.985,922.514 88.262,914.013 87.561,908.002C72.716,780.77 79.998,779.75 118.531,657.498C131.438,616.548 152.913,575.518 150.272,532.664C148.584,505.278 120.898,486.31 106.539,462.929C100.445,453.006 87.629,444.337 88.919,432.764C92.905,397.023 101.845,357.609 121.374,329.874Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-5" aria-label='{{( pgettext "Zone 5" "tooltip" )}}' d="M505.085,519.04C506.317,527.744 479.629,536.05 459.016,537.538C450.539,538.15 458.745,518.173 451.978,513.031C445.845,508.371 421.067,514.571 413.369,514.315C347.187,512.108 314.471,516.008 245.194,517.465C233.272,517.715 245.309,493.023 240.879,481.951C230.155,455.144 216.739,465.411 200.339,444.982C194.626,437.865 182.177,414.713 193.406,403.672C209.736,387.616 262.09,389.719 272.45,389.114C356.341,384.215 355.344,394.896 448.975,419.044C459.56,421.774 475.298,418.734 480.408,428.398C496.237,458.332 500.34,485.513 505.085,519.04Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-4" aria-label='{{( pgettext "Zone 4" "tooltip" )}}' d="M246.246,524.789C307.577,518.894 367.119,516.165 431.002,517.003C440.188,517.123 434.544,536.358 441.324,542.557C445.444,546.324 452.522,542.503 458.051,541.736C470.705,539.981 483.737,530.743 495.781,535.003C504.121,537.953 502.288,551.568 507.005,559.051C513.57,569.465 521.74,578.783 529.436,588.393C531.916,591.489 533.182,600.06 527.506,603.657C513.128,612.769 513.269,613.26 500.607,622.747C494.75,627.135 488.57,631.647 481.558,633.744C425.669,650.451 387.039,635.819 323.876,646.343C318.705,647.205 322.02,657.051 318.897,661.262C315.531,665.802 310.508,669.195 305.302,671.394C277.685,683.058 258.359,696.898 235.165,716.084C229.126,721.08 211.625,720.556 211.895,712.723C213.606,662.96 231.472,615.076 240.325,566.077C242.925,551.683 244.587,539.321 246.246,524.789Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-3" aria-label='{{( pgettext "Zone 3" "tooltip" )}}' d="M912.192,620.954C916.224,624.5 920.744,628.476 926.074,629.126C964.803,633.843 1004.44,630.129 1042.86,636.872C1052.12,638.495 1063.11,644.524 1065.55,653.597C1071.22,674.725 1067.03,697.443 1064.97,719.222C1063.61,733.706 1057.5,747.404 1055.35,761.791C1054.75,765.776 1057.15,769.777 1056.81,773.792C1056.53,776.978 1056.72,782.881 1053.53,782.809C1023.92,782.138 994.971,772.627 965.367,771.719C941.832,770.996 918.526,776.869 895.005,777.943C892.644,778.05 889.107,776.765 889.491,774.433C893.046,752.857 895.253,734.687 897.762,713.643C901.227,684.581 903.781,657.726 906.259,627.137C906.453,624.741 909.912,621.713 912.192,620.954Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-2" aria-label='{{( pgettext "Zone 2" "tooltip" )}}' d="M450.743,668.938C454.141,659.657 473.269,645.426 484.324,636.812C502.981,622.273 528.906,604.104 539.574,599.714C569.364,587.455 772.249,596.754 888.587,597.523C902.051,597.612 904.915,614.799 904.413,627.166C903.578,647.744 896.873,727.261 885.498,782.859C884.914,785.712 861.945,788.945 850.405,791.451C820.954,797.846 792.468,809.048 762.582,812.939C706.434,820.249 649.315,817.825 593.143,824.943C589.673,825.382 548.337,846.073 546.125,839.557C538.522,817.154 536.68,801.458 528.441,783.475C524.418,774.694 510.615,778.999 501.095,777.369C481.637,774.038 460.506,774.783 443.064,765.537C434.96,761.241 430.864,749.669 431.591,740.526C433.548,715.902 442.25,692.134 450.743,668.938Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
<path id="zona-1" aria-label='{{( pgettext "Zone 1" "tooltip" )}}' d="M418.073,661.097C397.86,658.619 377.163,653.716 357.103,657.224C311.276,665.237 220.533,726.479 203.105,745.401C192.157,757.287 201.273,777.836 203.208,793.879C206.247,819.079 209.713,844.578 217.958,868.584C219.439,872.894 226.629,875.898 230.629,873.716C287.589,842.633 362.358,806.747 410.055,743.843C422.698,727.17 423.149,703.808 426.204,683.107C427.345,675.37 422.334,667.656 418.073,661.097Z" style="fill:rgb(255,183,126);stroke:rgb(128,222,128);stroke-opacity:0;stroke-width:2px;stroke-miterlimit:1.5;"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 328 KiB

After

Width:  |  Height:  |  Size: 328 KiB