kar/phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: kar:570a12dc5c2af977cbc125ffa108913010db7457
Branches Tags
kar:fetch2 kar:staging kar:dev kar:master kar:prod kar:newb2 kar:newb kar:b4 kar:b3 kar:b2
..
compare: kar:b2
Branches Tags
kar:staging kar:dev kar:master kar:prod kar:newb2 kar:newb kar:b4 kar:fetch2 kar:b3 kar:b2

24 Commits
570a12dc5c ... b2

Author SHA1 Message Date
Suvodip
94cfda779c new desgine for mobile 2024-06-20 22:04:02 +05:30
Suvodip
6bd0c1c23b drawing currect version 2024-06-19 13:56:55 +05:30
Suvodip
5ed1ee1e6c t1 2024-06-17 18:41:11 +05:30
Suvodip
d82e6fcb9d s2 2024-06-15 20:33:43 +05:30
Suvodip
2d6dbbf2b7 s2 2024-06-15 19:29:27 +05:30
Suvodip
a8277e9aad s2 2024-06-15 18:08:20 +05:30
Suvodip
71c5f88b9a s2 2024-06-14 21:40:22 +05:30
Suvodip
a49742e607 s1 2024-06-13 13:36:23 +05:30
Suvodip
1be005a089 s1 2024-06-12 22:03:40 +05:30
Suvodip
495079802c change d 2024-06-12 11:15:20 +05:30
Suvodip
41cce45848 replace d 2024-06-11 21:01:51 +05:30
Suvodip
6be6583ffc b2 2024-06-11 16:39:33 +05:30
Suvodip
edc53bc976 s1 2024-06-07 16:36:13 +05:30
Suvodip
84b5b1747f s1 2024-06-07 15:08:13 +05:30
Suvodip
42afce4bb0 c 2024-06-03 21:34:54 +05:30
Suvodip
a84ed5b61f change border opacity drag v4 2024-05-25 19:29:42 +05:30
Suvodip
a287126bcd c 2024-05-21 13:02:04 +05:30
Suvodip
5c797000d5 c 2024-05-21 12:04:09 +05:30
Suvodip
0240755b03 c 2024-05-21 11:57:28 +05:30
Suvodip
17538eb91c post base 64 with submitUserData function 2024-05-16 21:22:07 +05:30
Suvodip
04500f43d6 post base 64 with submitUserData function 2024-05-16 21:20:55 +05:30
Subhodip Ghosh
9ffa31a285 Merge pull request 'wss15' (#6) from wss15 into master 
Reviewed-on: #6
 2024-04-23 12:52:15 +00:00
dev sp
bee95a0ee8 change image scale 2024-04-17 07:31:17 +00:00
dev sp
bbf2b3c814 cross_phonics_v1 2024-03-29 08:36:32 +00:00
140 changed files with 4255 additions and 4184 deletions
Expand all files Collapse all files

BIN
public/assets/animated-letter/small_b.mp4 Executable file → Normal file
View File

Binary file not shown.

BIN
public/assets/animated-letter/small_d.mp4 Executable file → Normal file
View File

Binary file not shown.

BIN
public/assets/animated-letter/small_e.mp4 Executable file → Normal file
View File

Binary file not shown.

BIN
public/assets/animated-letter/small_f.mp4 Executable file → Normal file
View File

Binary file not shown.

BIN
public/assets/animated-letter/small_h.mp4 Executable file → Normal file
View File

Binary file not shown.

BIN
public/assets/animated-letter/small_k.mp4 Executable file → Normal file
View File

Binary file not shown.

BIN
public/assets/animated-letter/small_m.mp4 Executable file → Normal file
View File

Binary file not shown.

BIN
public/assets/animated-letter/small_n.mp4 Executable file → Normal file
View File

Binary file not shown.

BIN
public/assets/animated-letter/small_t.mp4
View File

Binary file not shown.

BIN
public/assets/color_button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

113
public/assets/small-letter/bs.svg
View File

@@ -7,92 +7,13 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="bs.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-1" id="Arrow2-1-7"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
@@ -104,11 +25,11 @@
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-9" /> id="arrow2L-9-9" />
</marker> </marker>
<marker <marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-3-6" id="Arrow2-3-6-2"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
@@ -120,35 +41,35 @@
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6-9" /> id="arrow2L-6-9-0" />
</marker> </marker>
</defs> </defs>
<path <path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.925961,62.66356 c -0.03846,-3.805681 0.179081,-49.892837 0.179081,-49.892837" d="m 33.49094,71.100673 c -0.03821,-4.62453 0.177952,-60.628037 0.177952,-60.628037"
id="path1236-3" /> id="path1236-3" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.480829;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1-7);paint-order:stroke fill markers"
d="m 33.933962,27.117519 c -0.02456,-2.146424 -0.04485,-10.408377 -0.04485,-10.408377" d="M 33.846126,34.230178 C 33.821526,32.089494 33.801206,23.84963 33.801206,23.84963"
id="path1246-3" /> id="path1246-3" />
<g <g
id="g2746" id="g2746-62"
transform="matrix(1.4072602,0,0,1.4072602,-35.010064,-11.673817)" transform="matrix(1.409452,0,0,1.4034978,-35.734447,-4.457449)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404" x="48.182404"
y="19.336451" y="19.336451"
id="text2742" id="text2742-6"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740" id="tspan2740-1"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404" x="48.182404"
y="19.336451">1</tspan></text> y="19.336451">1</tspan></text>
<circle <circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744" id="circle2744-8"
cx="-49.550514" cx="-49.550514"
cy="-16.824097" cy="-16.824097"
r="1.2760839" r="1.2760839"
@@ -157,14 +78,14 @@
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-8" id="path4236-8"
d="M 34.600138,56.458062 A 12.639366,13.687705 8.4373572 0 0 48.801897,63.170337 12.639366,13.687705 8.4373572 0 0 58.534998,49.719213 12.639366,13.687705 8.4373572 0 0 48.952634,36.622942 12.639366,13.687705 8.4373572 0 0 34.671678,43.858484" /> d="m 33.896172,63.647843 a 13.174543,14.063217 10.380298 0 0 14.809049,6.89365 13.174543,14.063217 10.380298 0 0 10.149305,-13.81459 13.174543,14.063217 10.380298 0 0 -9.992122,-13.450145 13.174543,14.063217 10.380298 0 0 -14.891633,7.431054" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-6-2);paint-order:stroke fill markers"
d="m 50.597819,38.356547 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778814" d="m 50.509565,45.367091 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
id="path13743-5-0" /> id="path13743-5-0" />
<g <g
id="g1244-5" id="g1244-5"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.751263,80.474842)" transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.839517,87.485383)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

117
public/assets/small-letter/bs_l1.svg
View File

@@ -7,92 +7,13 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="bs.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-1" id="Arrow2-1-7"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
@@ -104,11 +25,11 @@
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-9" /> id="arrow2L-9-9" />
</marker> </marker>
<marker <marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-3-6" id="Arrow2-3-6-2"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
@@ -120,37 +41,37 @@
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6-9" /> id="arrow2L-6-9-0" />
</marker> </marker>
</defs> </defs>
<g <g
id="g56231"> id="g2">
<path <path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.925961,62.66356 c -0.03846,-3.805681 0.179081,-49.892837 0.179081,-49.892837" d="m 33.49094,71.100673 c -0.03821,-4.62453 0.177952,-60.628037 0.177952,-60.628037"
id="path1236-3" /> id="path1236-3" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.480829;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1-7);paint-order:stroke fill markers"
d="m 33.933962,27.117519 c -0.02456,-2.146424 -0.04485,-10.408377 -0.04485,-10.408377" d="M 33.846126,34.230178 C 33.821526,32.089494 33.801206,23.84963 33.801206,23.84963"
id="path1246-3" /> id="path1246-3" />
<g <g
id="g2746" id="g2746-62"
transform="matrix(1.4072602,0,0,1.4072602,-35.010064,-11.673817)" transform="matrix(1.409452,0,0,1.4034978,-35.734447,-4.457449)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404" x="48.182404"
y="19.336451" y="19.336451"
id="text2742" id="text2742-6"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740" id="tspan2740-1"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404" x="48.182404"
y="19.336451">1</tspan></text> y="19.336451">1</tspan></text>
<circle <circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744" id="circle2744-8"
cx="-49.550514" cx="-49.550514"
cy="-16.824097" cy="-16.824097"
r="1.2760839" r="1.2760839"
@@ -158,19 +79,19 @@
</g> </g>
</g> </g>
<g <g
id="g56281" id="g1"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-8" id="path4236-8"
d="M 34.600138,56.458062 A 12.639366,13.687705 8.4373572 0 0 48.801897,63.170337 12.639366,13.687705 8.4373572 0 0 58.534998,49.719213 12.639366,13.687705 8.4373572 0 0 48.952634,36.622942 12.639366,13.687705 8.4373572 0 0 34.671678,43.858484" /> d="m 33.896172,63.647843 a 13.174543,14.063217 10.380298 0 0 14.809049,6.89365 13.174543,14.063217 10.380298 0 0 10.149305,-13.81459 13.174543,14.063217 10.380298 0 0 -9.992122,-13.450145 13.174543,14.063217 10.380298 0 0 -14.891633,7.431054" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-6-2);paint-order:stroke fill markers"
d="m 50.597819,38.356547 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778814" d="m 50.509565,45.367091 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
id="path13743-5-0" /> id="path13743-5-0" />
<g <g
id="g1244-5" id="g1244-5"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.751263,80.474842)" transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.839517,87.485383)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

117
public/assets/small-letter/bs_l2.svg
View File

@@ -7,92 +7,13 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="bs_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-1" id="Arrow2-1-7"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
@@ -104,11 +25,11 @@
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-9" /> id="arrow2L-9-9" />
</marker> </marker>
<marker <marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-3-6" id="Arrow2-3-6-2"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
@@ -120,38 +41,38 @@
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6-9" /> id="arrow2L-6-9-0" />
</marker> </marker>
</defs> </defs>
<g <g
id="g56231" id="g2"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.925961,62.66356 c -0.03846,-3.805681 0.179081,-49.892837 0.179081,-49.892837" d="m 33.49094,71.100673 c -0.03821,-4.62453 0.177952,-60.628037 0.177952,-60.628037"
id="path1236-3" /> id="path1236-3" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.480829;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1-7);paint-order:stroke fill markers"
d="m 33.933962,27.117519 c -0.02456,-2.146424 -0.04485,-10.408377 -0.04485,-10.408377" d="M 33.846126,34.230178 C 33.821526,32.089494 33.801206,23.84963 33.801206,23.84963"
id="path1246-3" /> id="path1246-3" />
<g <g
id="g2746" id="g2746-62"
transform="matrix(1.4072602,0,0,1.4072602,-35.010064,-11.673817)" transform="matrix(1.409452,0,0,1.4034978,-35.734447,-4.457449)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404" x="48.182404"
y="19.336451" y="19.336451"
id="text2742" id="text2742-6"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740" id="tspan2740-1"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404" x="48.182404"
y="19.336451">1</tspan></text> y="19.336451">1</tspan></text>
<circle <circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744" id="circle2744-8"
cx="-49.550514" cx="-49.550514"
cy="-16.824097" cy="-16.824097"
r="1.2760839" r="1.2760839"
@@ -159,19 +80,19 @@
</g> </g>
</g> </g>
<g <g
id="g56281" id="g1"
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-8" id="path4236-8"
d="M 34.600138,56.458062 A 12.639366,13.687705 8.4373572 0 0 48.801897,63.170337 12.639366,13.687705 8.4373572 0 0 58.534998,49.719213 12.639366,13.687705 8.4373572 0 0 48.952634,36.622942 12.639366,13.687705 8.4373572 0 0 34.671678,43.858484" /> d="m 33.896172,63.647843 a 13.174543,14.063217 10.380298 0 0 14.809049,6.89365 13.174543,14.063217 10.380298 0 0 10.149305,-13.81459 13.174543,14.063217 10.380298 0 0 -9.992122,-13.450145 13.174543,14.063217 10.380298 0 0 -14.891633,7.431054" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-6-2);paint-order:stroke fill markers"
d="m 50.597819,38.356547 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778814" d="m 50.509565,45.367091 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
id="path13743-5-0" /> id="path13743-5-0" />
<g <g
id="g1244-5" id="g1244-5"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.751263,80.474842)" transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.839517,87.485383)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

331
public/assets/small-letter/ds.svg
View File

@@ -7,90 +7,49 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg" xml:space="preserve"
inkscape:export-filename="cs.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg"><defs
<sodipodi:namedview id="defs2"><marker
id="namedview51242" style="overflow:visible"
pagecolor="#ffffff" id="Arrow2-36"
bordercolor="#000000" refX="0"
borderopacity="0.25" refY="0"
inkscape:showpageshadow="2" orient="auto-start-reverse"
inkscape:pageopacity="0.0" markerWidth="7.6999998"
inkscape:pagecheckerboard="0" markerHeight="5.5999999"
inkscape:deskcolor="#d1d1d1" viewBox="0 0 7.7 5.6"
inkscape:document-units="mm" preserveAspectRatio="xMidYMid"><path
showgrid="false" transform="scale(0.7)"
showguides="true"> d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
<sodipodi:guide style="fill:context-stroke;fill-rule:evenodd;stroke:none"
position="107.64909,49.99107" id="arrow2L-0" /></marker><marker
orientation="0,-1" style="overflow:visible"
id="guide51373" id="Arrow2-3-62"
inkscape:locked="false" /> refX="0"
<sodipodi:guide refY="0"
position="114.63086,74.995535" orient="auto-start-reverse"
orientation="0,-1" markerWidth="7.6999998"
id="guide51375" markerHeight="5.5999999"
inkscape:locked="false" /> viewBox="0 0 7.7 5.6"
<sodipodi:guide preserveAspectRatio="xMidYMid"><path
position="49.846563,90.7451" transform="scale(0.7)"
orientation="1,0" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
id="guide51379" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
inkscape:locked="false" /> id="arrow2L-6-6" /></marker><marker
<sodipodi:guide style="overflow:visible"
position="30.037831,109.742" id="Arrow2-6"
orientation="1,0" refX="0"
id="guide51381" refY="0"
inkscape:locked="false" /> orient="auto-start-reverse"
<sodipodi:guide markerWidth="7.6999998"
position="114.14376,25.148972" markerHeight="5.5999999"
orientation="0,-1" viewBox="0 0 7.7 5.6"
id="guide51383" preserveAspectRatio="xMidYMid"><path
inkscape:locked="false" /> transform="scale(0.7)"
<sodipodi:guide d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
position="121.77499,67.526669" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
orientation="0,-1" id="arrow2L-7" /></marker><marker
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
<sodipodi:guide
position="69.596984,81.852399"
orientation="1,0"
id="guide58546"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-3" id="Arrow2-3"
refX="0" refX="0"
@@ -99,99 +58,191 @@
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid"><path
<path
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6" /> id="arrow2L-6" /></marker><marker
</marker>
<marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-6" id="Arrow2-1"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true" preserveAspectRatio="xMidYMid"><path
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-7" /> id="arrow2L-9" /></marker><marker
</marker> style="overflow:visible"
</defs> id="Arrow2-3-6"
<path refX="0"
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:6.46094;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" refY="0"
d="m 66.046726,63.742318 c -0.04959,-4.073392 0.230883,-53.402544 0.230883,-53.402544" orient="auto-start-reverse"
id="path1236-9" markerWidth="7.6999998"
sodipodi:nodetypes="cc" /> markerHeight="5.5999999"
<path viewBox="0 0 7.7 5.6"
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" preserveAspectRatio="xMidYMid"><path
d="M 66.380273,26.571294 C 66.348609,24.27388 66.322449,15.430741 66.322449,15.430741" transform="scale(0.7)"
id="path1246-8" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
sodipodi:nodetypes="cc" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
inkscape:transform-center-x="0.0088349" id="arrow2L-6-9" /></marker></defs><g
inkscape:transform-center-y="5.1277257" /> id="g4"
<g style="display:none"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 75.184854,71.482044 c -0.03647,-4.052143 0.184035,-60.657513 0.184035,-60.657513"
id="path1236-1" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481786;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 75.254826,31.391094 c -0.02604,-2.031242 -0.04755,-9.849843 -0.04755,-9.849843"
id="path1246-8" /><g
id="g2746" id="g2746"
transform="matrix(1.2849761,0,0,1.2223535,3.1447033,-9.2588114)" transform="matrix(1.4909448,0,0,1.3647474,1.9112848,-5.5868929)"
style="display:inline"> style="display:inline"><text
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404" x="48.182404"
y="19.336451" y="19.336451"
id="text2742" id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740" id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404" x="48.182404"
y="19.336451">1</tspan></text> y="19.336451">1</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744" id="circle2744"
cx="-49.550514" cx="-49.550514"
cy="-16.824097" cy="-16.824097"
r="1.2760839" r="1.2760839"
transform="rotate(-178.67073)" /> transform="rotate(-178.67073)" /></g><g
</g> id="g1"
<path style="display:inline"
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" transform="translate(41.504681,0.06850035)"><path
id="path57645" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 65.607616,56.63065 A 14.04826,13.298772 83.189707 0 1 50.675313,63.676123 14.04826,13.298772 83.189707 0 1 40.454804,49.958726 14.04826,13.298772 83.189707 0 1 50.536389,36.402878 14.04826,13.298772 83.189707 0 1 65.54168,43.686577" /> d="m 54.168067,71.384868 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 C 53.722805,43.23683 39.906985,36.421333 33.766311,54.15169"
<path id="path385" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers"
d="m 49.207097,36.810781 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097" d="m 46.26788,44.378094 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
id="path57655" /> id="path1118" /><g
<g id="g1126"
id="g58394" transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.741712,89.250482)"
transform="matrix(1.2571663,-0.87051125,0.78952664,1.2406297,-23.391278,79.81556)" style="display:inline"><text
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479" x="55.705479"
y="-25.081388" y="-25.081388"
id="text58390" id="text1122"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line" id="tspan1120"
id="tspan58388"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479" x="55.705479"
y="-25.081388">2</tspan></text> y="-25.081388">2</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle58392" id="circle1124"
cx="-55.559937" cx="-55.559937"
cy="27.578447" cy="27.578447"
r="1.2760839" r="1.2760839"
transform="rotate(-144.24458)" /> transform="rotate(-144.24458)" /></g></g></g><g
</g> id="g5"
</svg> style="display:none"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 7.7385535,71.396922 C 7.70034,66.772391 7.9165054,10.768881 7.9165054,10.768881"
id="path1236-3" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.480829;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="M 8.093739,34.526423 C 8.069141,32.385739 8.048819,24.145875 8.048819,24.145875"
id="path1246-3" /><g
id="g2746-62"
transform="matrix(1.409452,0,0,1.4034978,-61.486834,-4.1612037)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742-6"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740-1"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744-8"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g><path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-8"
d="M 8.1437852,63.944087 A 13.174543,14.063217 10.380298 0 0 22.952834,70.837734 13.174543,14.063217 10.380298 0 0 33.102139,57.023148 13.174543,14.063217 10.380298 0 0 23.110017,43.573003 13.174543,14.063217 10.380298 0 0 8.2183837,51.004057" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-6);paint-order:stroke fill markers"
d="m 24.757178,45.663336 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
id="path13743-5-0" /><g
id="g1244-5"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-82.591904,87.781631)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479"
y="-25.081388"
id="text1240-6"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1238-6"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479"
y="-25.081388">2</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle1242-4"
cx="-55.559937"
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" /></g></g><g
id="g8"><path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path57645"
d="M 66.345062,63.884771 A 14.04826,13.298772 83.189707 0 1 51.412762,70.930244 14.04826,13.298772 83.189707 0 1 41.192253,57.212847 14.04826,13.298772 83.189707 0 1 51.273838,43.656999 14.04826,13.298772 83.189707 0 1 66.279132,50.940698" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="m 49.415379,44.064902 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" /><g
id="g2"
transform="matrix(1.5730821,0,0,1.5086122,-17.02496,17.771258)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g></g><g
id="g7"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855383,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/assets/small-letter/ds_.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

339
public/assets/small-letter/ds_l1.svg
View File

@@ -7,90 +7,49 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg" xml:space="preserve"
inkscape:export-filename="ds_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg"><defs
<sodipodi:namedview id="defs2"><marker
id="namedview51242" style="overflow:visible"
pagecolor="#ffffff" id="Arrow2-36"
bordercolor="#000000" refX="0"
borderopacity="0.25" refY="0"
inkscape:showpageshadow="2" orient="auto-start-reverse"
inkscape:pageopacity="0.0" markerWidth="7.6999998"
inkscape:pagecheckerboard="0" markerHeight="5.5999999"
inkscape:deskcolor="#d1d1d1" viewBox="0 0 7.7 5.6"
inkscape:document-units="mm" preserveAspectRatio="xMidYMid"><path
showgrid="false" transform="scale(0.7)"
showguides="true"> d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
<sodipodi:guide style="fill:context-stroke;fill-rule:evenodd;stroke:none"
position="107.64909,49.99107" id="arrow2L-0" /></marker><marker
orientation="0,-1" style="overflow:visible"
id="guide51373" id="Arrow2-3-62"
inkscape:locked="false" /> refX="0"
<sodipodi:guide refY="0"
position="114.63086,74.995535" orient="auto-start-reverse"
orientation="0,-1" markerWidth="7.6999998"
id="guide51375" markerHeight="5.5999999"
inkscape:locked="false" /> viewBox="0 0 7.7 5.6"
<sodipodi:guide preserveAspectRatio="xMidYMid"><path
position="49.846563,90.7451" transform="scale(0.7)"
orientation="1,0" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
id="guide51379" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
inkscape:locked="false" /> id="arrow2L-6-6" /></marker><marker
<sodipodi:guide style="overflow:visible"
position="30.037831,109.742" id="Arrow2-6"
orientation="1,0" refX="0"
id="guide51381" refY="0"
inkscape:locked="false" /> orient="auto-start-reverse"
<sodipodi:guide markerWidth="7.6999998"
position="114.14376,25.148972" markerHeight="5.5999999"
orientation="0,-1" viewBox="0 0 7.7 5.6"
id="guide51383" preserveAspectRatio="xMidYMid"><path
inkscape:locked="false" /> transform="scale(0.7)"
<sodipodi:guide d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
position="121.77499,67.526669" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
orientation="0,-1" id="arrow2L-7" /></marker><marker
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
<sodipodi:guide
position="69.596984,81.852399"
orientation="1,0"
id="guide58546"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-3" id="Arrow2-3"
refX="0" refX="0"
@@ -99,106 +58,192 @@
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid"><path
<path
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6" /> id="arrow2L-6" /></marker><marker
</marker>
<marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-6" id="Arrow2-1"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true" preserveAspectRatio="xMidYMid"><path
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-7" /> id="arrow2L-9" /></marker><marker
</marker> style="overflow:visible"
</defs> id="Arrow2-3-6"
<g refX="0"
id="g58761"> refY="0"
<path orient="auto-start-reverse"
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:6.46094;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" markerWidth="7.6999998"
d="m 66.046726,63.742318 c -0.04959,-4.073392 0.230883,-53.402544 0.230883,-53.402544" markerHeight="5.5999999"
id="path1236-9" viewBox="0 0 7.7 5.6"
sodipodi:nodetypes="cc" /> preserveAspectRatio="xMidYMid"><path
<path transform="scale(0.7)"
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
d="M 66.380273,26.571294 C 66.348609,24.27388 66.322449,15.430741 66.322449,15.430741" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="path1246-8" id="arrow2L-6-9" /></marker></defs><g
sodipodi:nodetypes="cc" id="g4"
inkscape:transform-center-x="0.0088349" style="display:none"><path
inkscape:transform-center-y="5.1277257" /> style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
<g d="m 75.184854,71.482044 c -0.03647,-4.052143 0.184035,-60.657513 0.184035,-60.657513"
id="path1236-1" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481786;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 75.254826,31.391094 c -0.02604,-2.031242 -0.04755,-9.849843 -0.04755,-9.849843"
id="path1246-8" /><g
id="g2746" id="g2746"
transform="matrix(1.2849761,0,0,1.2223535,3.1447033,-9.2588114)" transform="matrix(1.4909448,0,0,1.3647474,1.9112848,-5.5868929)"
style="display:inline"> style="display:inline"><text
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404" x="48.182404"
y="19.336451" y="19.336451"
id="text2742" id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740" id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404" x="48.182404"
y="19.336451">1</tspan></text> y="19.336451">1</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744" id="circle2744"
cx="-49.550514" cx="-49.550514"
cy="-16.824097" cy="-16.824097"
r="1.2760839" r="1.2760839"
transform="rotate(-178.67073)" /> transform="rotate(-178.67073)" /></g><g
</g> id="g1"
</g> style="display:inline"
<g transform="translate(41.504681,0.06850035)"><path
id="g58705" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="display:none"> d="m 54.168067,71.384868 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 C 53.722805,43.23683 39.906985,36.421333 33.766311,54.15169"
<path id="path385" /><path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers"
id="path57645" d="m 46.26788,44.378094 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
d="M 65.607616,56.63065 A 14.04826,13.298772 83.189707 0 1 50.675313,63.676123 14.04826,13.298772 83.189707 0 1 40.454804,49.958726 14.04826,13.298772 83.189707 0 1 50.536389,36.402878 14.04826,13.298772 83.189707 0 1 65.54168,43.686577" /> id="path1118" /><g
<path id="g1126"
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers" transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.741712,89.250482)"
d="m 49.207097,36.810781 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097" style="display:inline"><text
id="path57655" />
<g
id="g58394"
transform="matrix(1.2571663,-0.87051125,0.78952664,1.2406297,-23.391278,79.81556)"
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479" x="55.705479"
y="-25.081388" y="-25.081388"
id="text58390" id="text1122"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line" id="tspan1120"
id="tspan58388"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479" x="55.705479"
y="-25.081388">2</tspan></text> y="-25.081388">2</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle58392" id="circle1124"
cx="-55.559937" cx="-55.559937"
cy="27.578447" cy="27.578447"
r="1.2760839" r="1.2760839"
transform="rotate(-144.24458)" /> transform="rotate(-144.24458)" /></g></g></g><g
</g> id="g5"
</g> style="display:none"><path
</svg> style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 7.7385535,71.396922 C 7.70034,66.772391 7.9165054,10.768881 7.9165054,10.768881"
id="path1236-3" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.480829;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="M 8.093739,34.526423 C 8.069141,32.385739 8.048819,24.145875 8.048819,24.145875"
id="path1246-3" /><g
id="g2746-62"
transform="matrix(1.409452,0,0,1.4034978,-61.486834,-4.1612037)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742-6"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740-1"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744-8"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g><path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-8"
d="M 8.1437852,63.944087 A 13.174543,14.063217 10.380298 0 0 22.952834,70.837734 13.174543,14.063217 10.380298 0 0 33.102139,57.023148 13.174543,14.063217 10.380298 0 0 23.110017,43.573003 13.174543,14.063217 10.380298 0 0 8.2183837,51.004057" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-6);paint-order:stroke fill markers"
d="m 24.757178,45.663336 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
id="path13743-5-0" /><g
id="g1244-5"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-82.591904,87.781631)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479"
y="-25.081388"
id="text1240-6"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1238-6"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479"
y="-25.081388">2</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle1242-4"
cx="-55.559937"
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" /></g></g><g
id="g8"><path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path57645"
d="M 66.345062,63.884771 A 14.04826,13.298772 83.189707 0 1 51.412762,70.930244 14.04826,13.298772 83.189707 0 1 41.192253,57.212847 14.04826,13.298772 83.189707 0 1 51.273838,43.656999 14.04826,13.298772 83.189707 0 1 66.279132,50.940698" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="m 49.415379,44.064902 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" /><g
id="g2"
transform="matrix(1.5730821,0,0,1.5086122,-17.02496,17.771258)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g></g><g
id="g7"
style="display:none"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855383,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 15 KiB

341
public/assets/small-letter/ds_l2.svg
View File

@@ -7,90 +7,49 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg" xml:space="preserve"
inkscape:export-filename="ds_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg"><defs
<sodipodi:namedview id="defs2"><marker
id="namedview51242" style="overflow:visible"
pagecolor="#ffffff" id="Arrow2-36"
bordercolor="#000000" refX="0"
borderopacity="0.25" refY="0"
inkscape:showpageshadow="2" orient="auto-start-reverse"
inkscape:pageopacity="0.0" markerWidth="7.6999998"
inkscape:pagecheckerboard="0" markerHeight="5.5999999"
inkscape:deskcolor="#d1d1d1" viewBox="0 0 7.7 5.6"
inkscape:document-units="mm" preserveAspectRatio="xMidYMid"><path
showgrid="false" transform="scale(0.7)"
showguides="true"> d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
<sodipodi:guide style="fill:context-stroke;fill-rule:evenodd;stroke:none"
position="107.64909,49.99107" id="arrow2L-0" /></marker><marker
orientation="0,-1" style="overflow:visible"
id="guide51373" id="Arrow2-3-62"
inkscape:locked="false" /> refX="0"
<sodipodi:guide refY="0"
position="114.63086,74.995535" orient="auto-start-reverse"
orientation="0,-1" markerWidth="7.6999998"
id="guide51375" markerHeight="5.5999999"
inkscape:locked="false" /> viewBox="0 0 7.7 5.6"
<sodipodi:guide preserveAspectRatio="xMidYMid"><path
position="49.846563,90.7451" transform="scale(0.7)"
orientation="1,0" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
id="guide51379" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
inkscape:locked="false" /> id="arrow2L-6-6" /></marker><marker
<sodipodi:guide style="overflow:visible"
position="30.037831,109.742" id="Arrow2-6"
orientation="1,0" refX="0"
id="guide51381" refY="0"
inkscape:locked="false" /> orient="auto-start-reverse"
<sodipodi:guide markerWidth="7.6999998"
position="114.14376,25.148972" markerHeight="5.5999999"
orientation="0,-1" viewBox="0 0 7.7 5.6"
id="guide51383" preserveAspectRatio="xMidYMid"><path
inkscape:locked="false" /> transform="scale(0.7)"
<sodipodi:guide d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
position="121.77499,67.526669" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
orientation="0,-1" id="arrow2L-7" /></marker><marker
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
<sodipodi:guide
position="69.596984,81.852399"
orientation="1,0"
id="guide58546"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-3" id="Arrow2-3"
refX="0" refX="0"
@@ -99,107 +58,193 @@
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid"><path
<path
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6" /> id="arrow2L-6" /></marker><marker
</marker>
<marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-6" id="Arrow2-1"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true" preserveAspectRatio="xMidYMid"><path
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-7" /> id="arrow2L-9" /></marker><marker
</marker> style="overflow:visible"
</defs> id="Arrow2-3-6"
<g refX="0"
id="g58761" refY="0"
style="display:none"> orient="auto-start-reverse"
<path markerWidth="7.6999998"
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:6.46094;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" markerHeight="5.5999999"
d="m 66.046726,63.742318 c -0.04959,-4.073392 0.230883,-53.402544 0.230883,-53.402544" viewBox="0 0 7.7 5.6"
id="path1236-9" preserveAspectRatio="xMidYMid"><path
sodipodi:nodetypes="cc" /> transform="scale(0.7)"
<path d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
d="M 66.380273,26.571294 C 66.348609,24.27388 66.322449,15.430741 66.322449,15.430741" id="arrow2L-6-9" /></marker></defs><g
id="path1246-8" id="g4"
sodipodi:nodetypes="cc" style="display:none"><path
inkscape:transform-center-x="0.0088349" style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
inkscape:transform-center-y="5.1277257" /> d="m 75.184854,71.482044 c -0.03647,-4.052143 0.184035,-60.657513 0.184035,-60.657513"
<g id="path1236-1" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481786;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 75.254826,31.391094 c -0.02604,-2.031242 -0.04755,-9.849843 -0.04755,-9.849843"
id="path1246-8" /><g
id="g2746" id="g2746"
transform="matrix(1.2849761,0,0,1.2223535,3.1447033,-9.2588114)" transform="matrix(1.4909448,0,0,1.3647474,1.9112848,-5.5868929)"
style="display:inline"> style="display:inline"><text
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404" x="48.182404"
y="19.336451" y="19.336451"
id="text2742" id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740" id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404" x="48.182404"
y="19.336451">1</tspan></text> y="19.336451">1</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744" id="circle2744"
cx="-49.550514" cx="-49.550514"
cy="-16.824097" cy="-16.824097"
r="1.2760839" r="1.2760839"
transform="rotate(-178.67073)" /> transform="rotate(-178.67073)" /></g><g
</g> id="g1"
</g> style="display:inline"
<g transform="translate(41.504681,0.06850035)"><path
id="g58705" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="display:inline"> d="m 54.168067,71.384868 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 C 53.722805,43.23683 39.906985,36.421333 33.766311,54.15169"
<path id="path385" /><path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers"
id="path57645" d="m 46.26788,44.378094 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
d="M 65.607616,56.63065 A 14.04826,13.298772 83.189707 0 1 50.675313,63.676123 14.04826,13.298772 83.189707 0 1 40.454804,49.958726 14.04826,13.298772 83.189707 0 1 50.536389,36.402878 14.04826,13.298772 83.189707 0 1 65.54168,43.686577" /> id="path1118" /><g
<path id="g1126"
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers" transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.741712,89.250482)"
d="m 49.207097,36.810781 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097" style="display:inline"><text
id="path57655" />
<g
id="g58394"
transform="matrix(1.2571663,-0.87051125,0.78952664,1.2406297,-23.391278,79.81556)"
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479" x="55.705479"
y="-25.081388" y="-25.081388"
id="text58390" id="text1122"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line" id="tspan1120"
id="tspan58388"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479" x="55.705479"
y="-25.081388">2</tspan></text> y="-25.081388">2</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle58392" id="circle1124"
cx="-55.559937" cx="-55.559937"
cy="27.578447" cy="27.578447"
r="1.2760839" r="1.2760839"
transform="rotate(-144.24458)" /> transform="rotate(-144.24458)" /></g></g></g><g
</g> id="g5"
</g> style="display:none"><path
</svg> style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 7.7385535,71.396922 C 7.70034,66.772391 7.9165054,10.768881 7.9165054,10.768881"
id="path1236-3" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.480829;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-1);paint-order:stroke fill markers"
d="M 8.093739,34.526423 C 8.069141,32.385739 8.048819,24.145875 8.048819,24.145875"
id="path1246-3" /><g
id="g2746-62"
transform="matrix(1.409452,0,0,1.4034978,-61.486834,-4.1612037)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742-6"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740-1"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744-8"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g><path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-8"
d="M 8.1437852,63.944087 A 13.174543,14.063217 10.380298 0 0 22.952834,70.837734 13.174543,14.063217 10.380298 0 0 33.102139,57.023148 13.174543,14.063217 10.380298 0 0 23.110017,43.573003 13.174543,14.063217 10.380298 0 0 8.2183837,51.004057" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-6);paint-order:stroke fill markers"
d="m 24.757178,45.663336 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
id="path13743-5-0" /><g
id="g1244-5"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-82.591904,87.781631)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479"
y="-25.081388"
id="text1240-6"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1238-6"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479"
y="-25.081388">2</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle1242-4"
cx="-55.559937"
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" /></g></g><g
id="g8"
style="display:none"><path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path57645"
d="M 66.345062,63.884771 A 14.04826,13.298772 83.189707 0 1 51.412762,70.930244 14.04826,13.298772 83.189707 0 1 41.192253,57.212847 14.04826,13.298772 83.189707 0 1 51.273838,43.656999 14.04826,13.298772 83.189707 0 1 66.279132,50.940698" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="m 49.415379,44.064902 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" /><g
id="g2"
transform="matrix(1.5730821,0,0,1.5086122,-17.02496,17.771258)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g></g><g
id="g7"
style="display:inline"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855383,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 15 KiB

6
public/assets/small-letter/es.svg
View File

@@ -7,7 +7,7 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg" sodipodi:docname="es.svg"
inkscape:export-filename="ds_l2.svg" inkscape:export-filename="ds_l2.svg"
inkscape:export-xdpi="96" inkscape:export-xdpi="96"
inkscape:export-ydpi="96" inkscape:export-ydpi="96"
@@ -159,7 +159,7 @@
id="path1236-1" /> id="path1236-1" />
<g <g
id="g1244-4" id="g1244-4"
transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-6.1635281,72.543754)" transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-28.786873,73.145439)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -182,6 +182,6 @@
</g> </g>
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.37715;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.37715;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
d="m 54.779931,44.658047 c 1.974412,-0.0072 9.573823,0.01486 9.573823,0.01486" d="M 56.028776,45.18763 C 54.054458,45.16698 46.456114,45.037749 46.456114,45.037749"
id="path1246-7" /> id="path1246-7" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
public/assets/small-letter/es_.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

88
public/assets/small-letter/es_l1.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="es.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
<sodipodi:guide
position="69.596984,81.852399"
orientation="1,0"
id="guide58546"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -123,6 +44,8 @@
id="arrow2L-61" /> id="arrow2L-61" />
</marker> </marker>
</defs> </defs>
<g
id="g2">
<path <path
style="fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" style="fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path4236-3" id="path4236-3"
@@ -153,8 +76,9 @@
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.37715;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-60);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.37715;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-60);paint-order:stroke fill markers"
d="m 54.294694,35.212851 c 3.917178,-0.127434 6.38033,1.239312 7.660073,3.277869" d="m 54.294694,35.212851 c 3.917178,-0.127434 6.38033,1.239312 7.660073,3.277869"
id="path13743-5-9" /> id="path13743-5-9" />
</g>
<g <g
id="g61662" id="g1"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
@@ -162,7 +86,7 @@
id="path1236-1" /> id="path1236-1" />
<g <g
id="g1244-4" id="g1244-4"
transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-6.1635281,72.543754)" transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-28.786873,73.145439)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -185,7 +109,7 @@
</g> </g>
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.37715;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.37715;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
d="m 54.779931,44.658047 c 1.974412,-0.0072 9.573823,0.01486 9.573823,0.01486" d="M 56.028776,45.18763 C 54.054458,45.16698 46.456114,45.037749 46.456114,45.037749"
id="path1246-7" /> id="path1246-7" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

87
public/assets/small-letter/es_l2.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="es_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
<sodipodi:guide
position="69.596984,81.852399"
orientation="1,0"
id="guide58546"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -124,7 +45,7 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g61882" id="g2"
style="display:none"> style="display:none">
<path <path
style="fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers" style="fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
@@ -158,7 +79,7 @@
id="path13743-5-9" /> id="path13743-5-9" />
</g> </g>
<g <g
id="g61662" id="g1"
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
@@ -166,7 +87,7 @@
id="path1236-1" /> id="path1236-1" />
<g <g
id="g1244-4" id="g1244-4"
transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-6.1635281,72.543754)" transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-28.786873,73.145439)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -189,7 +110,7 @@
</g> </g>
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.37715;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.37715;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-7);paint-order:stroke fill markers"
d="m 54.779931,44.658047 c 1.974412,-0.0072 9.573823,0.01486 9.573823,0.01486" d="M 56.028776,45.18763 C 54.054458,45.16698 46.456114,45.037749 46.456114,45.037749"
id="path1246-7" /> id="path1246-7" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

100
public/assets/small-letter/fs.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="es_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
<sodipodi:guide
position="69.596984,81.852399"
orientation="1,0"
id="guide58546"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -123,10 +44,15 @@
id="arrow2L-6-8" /> id="arrow2L-6-8" />
</marker> </marker>
</defs> </defs>
<g
id="g4">
<g
id="g2">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 40.987557,89.148649 C 40.880435,87.700565 40.760964,58.387914 40.819142,45.235628 40.881098,31.228446 60.900498,32.941912 59.37793,46.216072" d="M 40.987557,89.148649 C 40.880435,87.700565 40.760964,58.387914 40.819142,45.235628 40.881098,31.228446 60.900498,32.941912 59.37793,46.216072"
id="path1236-7" /> id="path1236-7" />
</g>
<g <g
id="g2746" id="g2746"
transform="matrix(1.353893,0,0,1.3502686,-6.9726516,20.293638)" transform="matrix(1.353893,0,0,1.3502686,-6.9726516,20.293638)"
@@ -150,13 +76,20 @@
r="1.2760839" r="1.2760839"
transform="rotate(-178.67073)" /> transform="rotate(-178.67073)" />
</g> </g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-5);paint-order:stroke fill markers"
d="m 51.741347,36.394533 c 3.846292,0.268023 6.157268,2.347049 7.259149,5.181348"
id="path13743-5-4" />
</g>
<g
id="g3">
<path <path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 47.275855,59.874526 c -1.084812,0.124987 -14.223247,0.279337 -14.223247,0.279337" d="m 47.275855,59.874526 c -1.084812,0.124987 -14.223247,0.279337 -14.223247,0.279337"
id="path1236-9" /> id="path1236-9" />
<g <g
id="g1244-0" id="g1244-0"
transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-11.897872,86.152612)" transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-26.338305,86.272949)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -179,10 +112,7 @@
</g> </g>
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 35.778518,59.825204 c 1.922394,-0.0095 9.321594,0.01986 9.321594,0.01986" d="m 44.720865,59.777257 c -1.922132,0.03315 -9.321133,0.09483 -9.321133,0.09483"
id="path1246-1" /> id="path1246-1" />
<path </g>
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-5);paint-order:stroke fill markers"
d="m 51.741347,36.394533 c 3.846292,0.268023 6.157268,2.347049 7.259149,5.181348"
id="path13743-5-4" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
public/assets/small-letter/fs_.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

83
public/assets/small-letter/fs_l1.svg
View File

@@ -7,8 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="fs.svg.2023_10_04_14_53_13.0.svg" sodipodi:docname="fs.svg"
inkscape:export-filename="fs_l2.svg" inkscape:export-filename="..\Desktop\LATTER\fs_l2.svg"
inkscape:export-xdpi="96" inkscape:export-xdpi="96"
inkscape:export-ydpi="96" inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
@@ -124,40 +124,7 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g380"> id="g1"
<g
id="g440"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 40.987557,89.148649 C 40.880435,87.700565 40.760964,58.387914 40.819142,45.235628 40.881098,31.228446 60.900498,32.941912 59.37793,46.216072"
id="path1236-7" />
<text
xml:space="preserve"
style="font-size:3.77392px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.189291;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="58.02462"
y="46.403316"
id="text2742"
transform="matrix(1.0009199,-0.00766023,0.0076868,0.9990221,0,0)"><tspan
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.189291;stroke-dasharray:none;stroke-opacity:1"
x="58.02462"
y="46.403316">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.189291;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-60.587273"
cy="-43.166607"
transform="matrix(-0.99973233,-0.02313599,0.02326029,-0.99972944,0,0)"
rx="1.7276787"
ry="1.7230586" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-5);paint-order:stroke fill markers"
d="m 51.741347,36.394533 c 3.846292,0.268023 6.157268,2.347049 7.259149,5.181348"
id="path13743-5-4" />
</g>
<g
id="g306"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
@@ -165,7 +132,7 @@
id="path1236-9" /> id="path1236-9" />
<g <g
id="g1244-0" id="g1244-0"
transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-11.897872,86.152612)" transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-26.338305,86.272949)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -188,8 +155,48 @@
</g> </g>
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 35.778518,59.825204 c 1.922394,-0.0095 9.321594,0.01986 9.321594,0.01986" d="m 44.720865,59.777257 c -1.922132,0.03315 -9.321133,0.09483 -9.321133,0.09483"
id="path1246-1" /> id="path1246-1" />
</g> </g>
<g
id="g3"
style="display:inline">
<g
id="g2">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 40.987557,89.148649 C 40.880435,87.700565 40.760964,58.387914 40.819142,45.235628 40.881098,31.228446 60.900498,32.941912 59.37793,46.216072"
id="path1236-7"
inkscape:export-filename="path1236-7.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</g>
<g
id="g2746"
transform="matrix(1.353893,0,0,1.3502686,-6.9726516,20.293638)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-5);paint-order:stroke fill markers"
d="m 51.741347,36.394533 c 3.846292,0.268023 6.157268,2.347049 7.259149,5.181348"
id="path13743-5-4" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

83
public/assets/small-letter/fs_l2.svg
View File

@@ -7,8 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="fs.svg.2023_10_04_14_53_13.0.svg" sodipodi:docname="fs.svg"
inkscape:export-filename="es_l2.svg" inkscape:export-filename="..\Desktop\LATTER\es.svg"
inkscape:export-xdpi="96" inkscape:export-xdpi="96"
inkscape:export-ydpi="96" inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
@@ -124,40 +124,7 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g380"> id="g1"
<g
id="g440"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 40.987557,89.148649 C 40.880435,87.700565 40.760964,58.387914 40.819142,45.235628 40.881098,31.228446 60.900498,32.941912 59.37793,46.216072"
id="path1236-7" />
<text
xml:space="preserve"
style="font-size:3.77392px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.189291;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="58.02462"
y="46.403316"
id="text2742"
transform="matrix(1.0009199,-0.00766023,0.0076868,0.9990221,0,0)"><tspan
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.189291;stroke-dasharray:none;stroke-opacity:1"
x="58.02462"
y="46.403316">1</tspan></text>
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.189291;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-60.587273"
cy="-43.166607"
transform="matrix(-0.99973233,-0.02313599,0.02326029,-0.99972944,0,0)"
rx="1.7276787"
ry="1.7230586" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-5);paint-order:stroke fill markers"
d="m 51.741347,36.394533 c 3.846292,0.268023 6.157268,2.347049 7.259149,5.181348"
id="path13743-5-4" />
</g>
<g
id="g306"
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
@@ -165,7 +132,7 @@
id="path1236-9" /> id="path1236-9" />
<g <g
id="g1244-0" id="g1244-0"
transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-11.897872,86.152612)" transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-26.338305,86.272949)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -188,8 +155,48 @@
</g> </g>
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 35.778518,59.825204 c 1.922394,-0.0095 9.321594,0.01986 9.321594,0.01986" d="m 44.720865,59.777257 c -1.922132,0.03315 -9.321133,0.09483 -9.321133,0.09483"
id="path1246-1" /> id="path1246-1" />
</g> </g>
<g
id="g3"
style="display:none">
<g
id="g2">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 40.987557,89.148649 C 40.880435,87.700565 40.760964,58.387914 40.819142,45.235628 40.881098,31.228446 60.900498,32.941912 59.37793,46.216072"
id="path1236-7"
inkscape:export-filename="path1236-7.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</g>
<g
id="g2746"
transform="matrix(1.353893,0,0,1.3502686,-6.9726516,20.293638)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-5);paint-order:stroke fill markers"
d="m 51.741347,36.394533 c 3.846292,0.268023 6.157268,2.347049 7.259149,5.181348"
id="path13743-5-4" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

125
public/assets/small-letter/hs.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="hs_l2.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -96,12 +17,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -115,12 +33,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -129,21 +44,20 @@
id="arrow2L-6-6" /> id="arrow2L-6-6" />
</marker> </marker>
</defs> </defs>
<g
id="g2"
style="display:inline">
<path <path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.02239;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.545293,63.643729 c -0.04107,-3.551071 0.207234,-53.15685 0.207234,-53.15685" d="M 33.679525,71.437205 C 33.642787,67.441756 33.86489,11.628361 33.86489,11.628361"
id="path1236-1" id="path1236-1" />
sodipodi:nodetypes="cc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.48013;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.48013;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="M 33.62642,24.102526 C 33.60019,22.099703 33.57853,14.390494 33.57853,14.390494" d="m 33.750003,31.907174 c -0.02623,-2.002823 -0.04789,-9.712032 -0.04789,-9.712032"
id="path1246-8" id="path1246-8" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.0094338882"
inkscape:transform-center-y="4.7846689" />
<g <g
id="g2746" id="g2746"
transform="matrix(1.5017246,0,0,1.345653,-40.24741,-12.358096)" transform="matrix(1.5017246,0,0,1.345653,-40.123827,-4.5534477)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -152,7 +66,6 @@
y="19.336451" y="19.336451"
id="text2742" id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740" id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404" x="48.182404"
@@ -165,21 +78,21 @@
r="1.2760839" r="1.2760839"
transform="rotate(-178.67073)" /> transform="rotate(-178.67073)" />
</g> </g>
</g>
<g
id="g1"
style="display:inline">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 54.044484,63.58022 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 -0.29842,-11.609329 -14.11424,-18.424826 -20.254914,-0.694469" d="m 54.168067,71.384868 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 C 53.722805,43.23683 39.906985,36.421333 33.766311,54.15169"
id="path385" id="path385" />
sodipodi:nodetypes="csc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers"
d="m 46.144297,36.573446 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196" d="m 46.26788,44.378094 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
id="path1118" id="path1118" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.9534769"
inkscape:transform-center-y="-2.6843876" />
<g <g
id="g1126" id="g1126"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.865295,81.445834)" transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.741712,89.250482)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -188,7 +101,6 @@
y="-25.081388" y="-25.081388"
id="text1122" id="text1122"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan1120" id="tspan1120"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479" x="55.705479"
@@ -201,4 +113,5 @@
r="1.2760839" r="1.2760839"
transform="rotate(-144.24458)" /> transform="rotate(-144.24458)" />
</g> </g>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

117
public/assets/small-letter/hs__l1.svg Normal file
View File

@@ -0,0 +1,117 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-36"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-3-62"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6-6" />
</marker>
</defs>
<g
id="g2"
style="display:inline">
<path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.0233;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 33.556375,63.632101 C 33.519816,59.616326 33.740851,3.5189636 33.740851,3.5189636"
id="path1236-1" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.48013;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 33.867094,19.650059 c -0.02623,-2.002823 -0.04789,-9.7120319 -0.04789,-9.7120319"
id="path1246-8" />
<g
id="g2746"
transform="matrix(1.4967131,0,0,1.5298001,-39.880775,-20.721196)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
</g>
<g
id="g1"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 54.044484,63.58022 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 -0.29842,-11.609329 -14.11424,-18.424826 -20.254914,-0.694469"
id="path385" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers"
d="m 46.144297,36.573446 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
id="path1118" />
<g
id="g1126"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.865295,81.445834)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479"
y="-25.081388"
id="text1122"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1120"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479"
y="-25.081388">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle1124"
cx="-55.559937"
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

117
public/assets/small-letter/hs__l2.svg Normal file
View File

@@ -0,0 +1,117 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-36"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-3-62"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6-6" />
</marker>
</defs>
<g
id="g2"
style="display:none">
<path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.0233;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 33.556375,63.632101 C 33.519816,59.616326 33.740851,3.5189636 33.740851,3.5189636"
id="path1236-1" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.48013;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 33.867094,19.650059 c -0.02623,-2.002823 -0.04789,-9.7120319 -0.04789,-9.7120319"
id="path1246-8" />
<g
id="g2746"
transform="matrix(1.4967131,0,0,1.5298001,-39.880775,-20.721196)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
</g>
<g
id="g1"
style="display:inline">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 54.044484,63.58022 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 -0.29842,-11.609329 -14.11424,-18.424826 -20.254914,-0.694469"
id="path385" />
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers"
d="m 46.144297,36.573446 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
id="path1118" />
<g
id="g1126"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.865295,81.445834)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479"
y="-25.081388"
id="text1122"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1120"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479"
y="-25.081388">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle1124"
cx="-55.559937"
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

122
public/assets/small-letter/hs_l1.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="hs.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -96,12 +17,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -115,12 +33,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -130,23 +45,18 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g1851" id="g2">
style="display:inline">
<path <path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.02239;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.545293,63.643729 c -0.04107,-3.551071 0.207234,-53.15685 0.207234,-53.15685" d="M 33.679525,71.437205 C 33.642787,67.441756 33.86489,11.628361 33.86489,11.628361"
id="path1236-1" id="path1236-1" />
sodipodi:nodetypes="cc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.48013;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.48013;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="M 33.62642,24.102526 C 33.60019,22.099703 33.57853,14.390494 33.57853,14.390494" d="m 33.750003,31.907174 c -0.02623,-2.002823 -0.04789,-9.712032 -0.04789,-9.712032"
id="path1246-8" id="path1246-8" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.0094338882"
inkscape:transform-center-y="4.7846689" />
<g <g
id="g2746" id="g2746"
transform="matrix(1.5017246,0,0,1.345653,-40.24741,-12.358096)" transform="matrix(1.5017246,0,0,1.345653,-40.123827,-4.5534477)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -155,7 +65,6 @@
y="19.336451" y="19.336451"
id="text2742" id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740" id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404" x="48.182404"
@@ -170,23 +79,19 @@
</g> </g>
</g> </g>
<g <g
id="g1807" id="g1"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 54.044484,63.58022 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 -0.29842,-11.609329 -14.11424,-18.424826 -20.254914,-0.694469" d="m 54.168067,71.384868 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 C 53.722805,43.23683 39.906985,36.421333 33.766311,54.15169"
id="path385" id="path385" />
sodipodi:nodetypes="csc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers"
d="m 46.144297,36.573446 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196" d="m 46.26788,44.378094 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
id="path1118" id="path1118" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.9534769"
inkscape:transform-center-y="-2.6843876" />
<g <g
id="g1126" id="g1126"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.865295,81.445834)" transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.741712,89.250482)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -195,7 +100,6 @@
y="-25.081388" y="-25.081388"
id="text1122" id="text1122"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan1120" id="tspan1120"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479" x="55.705479"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.0 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

121
public/assets/small-letter/hs_l2.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="hs_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -96,12 +17,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -115,12 +33,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -130,23 +45,19 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g1851" id="g2"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.02239;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.545293,63.643729 c -0.04107,-3.551071 0.207234,-53.15685 0.207234,-53.15685" d="M 33.679525,71.437205 C 33.642787,67.441756 33.86489,11.628361 33.86489,11.628361"
id="path1236-1" id="path1236-1" />
sodipodi:nodetypes="cc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.48013;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.48013;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="M 33.62642,24.102526 C 33.60019,22.099703 33.57853,14.390494 33.57853,14.390494" d="m 33.750003,31.907174 c -0.02623,-2.002823 -0.04789,-9.712032 -0.04789,-9.712032"
id="path1246-8" id="path1246-8" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.0094338882"
inkscape:transform-center-y="4.7846689" />
<g <g
id="g2746" id="g2746"
transform="matrix(1.5017246,0,0,1.345653,-40.24741,-12.358096)" transform="matrix(1.5017246,0,0,1.345653,-40.123827,-4.5534477)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -155,7 +66,6 @@
y="19.336451" y="19.336451"
id="text2742" id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740" id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404" x="48.182404"
@@ -170,23 +80,19 @@
</g> </g>
</g> </g>
<g <g
id="g1807" id="g1"
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 54.044484,63.58022 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 -0.29842,-11.609329 -14.11424,-18.424826 -20.254914,-0.694469" d="m 54.168067,71.384868 c 0.0263,-2.113555 0.09996,-6.93742 -0.146842,-16.538709 C 53.722805,43.23683 39.906985,36.421333 33.766311,54.15169"
id="path385" id="path385" />
sodipodi:nodetypes="csc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.48023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-62);paint-order:stroke fill markers"
d="m 46.144297,36.573446 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196" d="m 46.26788,44.378094 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
id="path1118" id="path1118" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.9534769"
inkscape:transform-center-y="-2.6843876" />
<g <g
id="g1126" id="g1126"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.865295,81.445834)" transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.741712,89.250482)"
style="display:inline"> style="display:inline">
<text <text
xml:space="preserve" xml:space="preserve"
@@ -195,7 +101,6 @@
y="-25.081388" y="-25.081388"
id="text1122" id="text1122"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan1120" id="tspan1120"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479" x="55.705479"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.0 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

222
public/assets/small-letter/ks.svg
View File

@@ -7,214 +7,106 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg" xml:space="preserve"
inkscape:export-filename="js_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg"><defs
<sodipodi:namedview id="defs2"><linearGradient
id="namedview51242" id="swatch6"><stop
pagecolor="#ffffff" style="stop-color:#808080;stop-opacity:1;"
bordercolor="#000000" offset="0"
borderopacity="0.25" id="stop6" /></linearGradient><marker
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-36" id="Arrow2-36-3"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true" preserveAspectRatio="xMidYMid"><path
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" /> id="arrow2L-0-6" /></marker></defs><g
</marker> id="g9"
</defs> style="display:inline"><path
<path style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7.023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 33.897256,10.914479 C 33.616971,9.8851391 33.786514,71.343218 33.786514,71.343218"
d="m 33.921393,11.147309 c -0.314864,-0.910336 -0.124404,53.44247 -0.124404,53.44247" id="path127-7" /><g
id="path127" id="g4983-5"
sodipodi:nodetypes="cc" /> transform="matrix(1.5341872,0,0,1.4840821,-18.065036,-1.352247)"
<g style="display:inline"><text
id="g4983"
transform="matrix(1.3106705,0,0,1.3612996,-10.525636,-3.5362715)"
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="32.887978" x="32.887978"
y="12.794106" y="12.794106"
id="text9342" id="text9342-3"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line" id="tspan9340-5"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="32.887978" x="32.887978"
y="12.794106">1</tspan></text> y="12.794106">1</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448-6"
cx="-34.067326" cx="-34.067326"
cy="-10.754245" cy="-10.754245"
transform="rotate(-178.67073)" transform="rotate(-178.67073)"
r="1.2760839" /> r="1.2760839" /></g><path
</g> style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:stroke fill markers"
<path d="m 33.859011,29.420135 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" id="path13743-2" /></g><g
d="m 33.887502,25.269364 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471" id="g10"
id="path13743" style="display:inline"><path
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 53.121566,28.128633 C 52.980692,28.306461 34.558514,54.770101 34.558514,54.770101" d="M 58.816429,43.133531 C 56.694269,44.70809 37.161399,59.276133 35.853105,60.460409"
id="path15674" id="path15674-9" /><g
sodipodi:nodetypes="cc" /> id="g21551-1"
<g transform="matrix(1.0493551,-0.80462172,0.75631798,1.1250384,-11.344737,78.798908)"
id="g21551" style="display:inline"><text
transform="matrix(1.0709125,-0.77569872,0.72534851,1.1452501,-18.674442,63.55512)"
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="54.113926" x="54.113926"
y="-23.497944" y="-23.497944"
id="text15678" id="text15678-2"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line" id="tspan15676-7"
id="tspan15676"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926" x="54.113926"
y="-23.497944">2</tspan></text> y="-23.497944">2</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680" id="circle15680-0"
cx="-54.018658" cx="-54.018658"
cy="25.946033" cy="25.946033"
r="1.2760839" r="1.2760839"
transform="rotate(-144.24458)" /> transform="rotate(-144.24458)" /></g><path
</g> style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.411819;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:stroke fill markers"
<path d="m 48.976421,50.160424 c 1.491381,-1.085308 7.26986,-5.212171 7.26986,-5.212171"
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" id="path15682-9" /></g><g
d="m 44.081818,40.087032 c 1.269428,-1.730977 6.21501,-8.34923 6.21501,-8.34923" id="g11"
id="path15682" style="display:inline"><path
sodipodi:nodetypes="cc" style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.88793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
inkscape:transform-center-x="3.0865939" d="M 44.011809,54.273077 59.185821,71.265479"
inkscape:transform-center-y="4.0947028" /> id="path1108-3" /><path
<path style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:normal"
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.90976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 53.607403,65.037959 47.429246,58.315175"
d="M 40.051918,47.333345 55.451943,64.62565" id="path9576-6" /><g
id="path1108" id="g21538-0"
sodipodi:nodetypes="cc" /> transform="matrix(1.2270494,0,0,1.2270494,-27.438185,-36.914981)"
<path style="display:inline"><ellipse
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:normal"
d="M 48.935982,58.682648 43.108673,51.653571"
id="path9576"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-2.7683077"
inkscape:transform-center-y="3.9580734" />
<g
id="g21538"
transform="matrix(1.2270494,0,0,1.2270494,-30.897128,-43.158996)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="circle9582" id="circle9582-6"
cx="-74.661598" cx="-74.661598"
cy="60.70055" cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)" transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922" rx="1.2146922"
ry="1.1834064" /> ry="1.1834064" /><text
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
y="75.579971" y="75.579971"
id="text9714" id="text9714-2"
transform="scale(0.98702867,1.0131418)"><tspan transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line" id="tspan9712-6"
id="tspan9712"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
y="75.579971">3</tspan></text> y="75.579971">3</tspan></text></g></g></svg>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

233
public/assets/small-letter/ks_l1.svg
View File

@@ -7,225 +7,106 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg" xml:space="preserve"
inkscape:export-filename="ks.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg"><defs
<sodipodi:namedview id="defs2"><linearGradient
id="namedview51242" id="swatch6"><stop
pagecolor="#ffffff" style="stop-color:#808080;stop-opacity:1;"
bordercolor="#000000" offset="0"
borderopacity="0.25" id="stop6" /></linearGradient><marker
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-36" id="Arrow2-36-3"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true" preserveAspectRatio="xMidYMid"><path
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" /> id="arrow2L-0-6" /></marker></defs><g
</marker> id="g9"
</defs> style="display:inline"><path
<g style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7.023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="g5482"> d="M 33.897256,10.914479 C 33.616971,9.8851391 33.786514,71.343218 33.786514,71.343218"
<path id="path127-7" /><g
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" id="g4983-5"
d="m 33.921393,11.147309 c -0.314864,-0.910336 -0.124404,53.44247 -0.124404,53.44247" transform="matrix(1.5341872,0,0,1.4840821,-18.065036,-1.352247)"
id="path127" style="display:inline"><text
sodipodi:nodetypes="cc" />
<g
id="g4983"
transform="matrix(1.3106705,0,0,1.3612996,-10.525636,-3.5362715)"
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="32.887978" x="32.887978"
y="12.794106" y="12.794106"
id="text9342" id="text9342-3"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line" id="tspan9340-5"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="32.887978" x="32.887978"
y="12.794106">1</tspan></text> y="12.794106">1</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448-6"
cx="-34.067326" cx="-34.067326"
cy="-10.754245" cy="-10.754245"
transform="rotate(-178.67073)" transform="rotate(-178.67073)"
r="1.2760839" /> r="1.2760839" /></g><path
</g> style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:stroke fill markers"
<path d="m 33.859011,29.420135 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" id="path13743-2" /></g><g
d="m 33.887502,25.269364 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471" id="g10"
id="path13743" style="display:none"><path
sodipodi:nodetypes="cc" />
</g>
<g
id="g5444"
style="display:none">
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 53.121566,28.128633 C 52.980692,28.306461 34.558514,54.770101 34.558514,54.770101" d="M 58.816429,43.133531 C 56.694269,44.70809 37.161399,59.276133 35.853105,60.460409"
id="path15674" id="path15674-9" /><g
sodipodi:nodetypes="cc" /> id="g21551-1"
<g transform="matrix(1.0493551,-0.80462172,0.75631798,1.1250384,-11.344737,78.798908)"
id="g21551" style="display:inline"><text
transform="matrix(1.0709125,-0.77569872,0.72534851,1.1452501,-18.674442,63.55512)"
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="54.113926" x="54.113926"
y="-23.497944" y="-23.497944"
id="text15678" id="text15678-2"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line" id="tspan15676-7"
id="tspan15676"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926" x="54.113926"
y="-23.497944">2</tspan></text> y="-23.497944">2</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680" id="circle15680-0"
cx="-54.018658" cx="-54.018658"
cy="25.946033" cy="25.946033"
r="1.2760839" r="1.2760839"
transform="rotate(-144.24458)" /> transform="rotate(-144.24458)" /></g><path
</g> style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.411819;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:stroke fill markers"
<path d="m 48.976421,50.160424 c 1.491381,-1.085308 7.26986,-5.212171 7.26986,-5.212171"
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" id="path15682-9" /></g><g
d="m 44.081818,40.087032 c 1.269428,-1.730977 6.21501,-8.34923 6.21501,-8.34923" id="g11"
id="path15682" style="display:none"><path
sodipodi:nodetypes="cc" style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.88793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
inkscape:transform-center-x="3.0865939" d="M 44.011809,54.273077 59.185821,71.265479"
inkscape:transform-center-y="4.0947028" /> id="path1108-3" /><path
</g> style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:normal"
<g d="M 53.607403,65.037959 47.429246,58.315175"
id="g5406" id="path9576-6" /><g
style="display:none"> id="g21538-0"
<path transform="matrix(1.2270494,0,0,1.2270494,-27.438185,-36.914981)"
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.90976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline"><ellipse
d="M 40.051918,47.333345 55.451943,64.62565"
id="path1108"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:normal"
d="M 48.935982,58.682648 43.108673,51.653571"
id="path9576"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-2.7683077"
inkscape:transform-center-y="3.9580734" />
<g
id="g21538"
transform="matrix(1.2270494,0,0,1.2270494,-30.897128,-43.158996)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="circle9582" id="circle9582-6"
cx="-74.661598" cx="-74.661598"
cy="60.70055" cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)" transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922" rx="1.2146922"
ry="1.1834064" /> ry="1.1834064" /><text
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
y="75.579971" y="75.579971"
id="text9714" id="text9714-2"
transform="scale(0.98702867,1.0131418)"><tspan transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line" id="tspan9712-6"
id="tspan9712"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
y="75.579971">3</tspan></text> y="75.579971">3</tspan></text></g></g></svg>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

234
public/assets/small-letter/ks_l2.svg
View File

@@ -7,226 +7,106 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg" xml:space="preserve"
inkscape:export-filename="ks_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg"><defs
<sodipodi:namedview id="defs2"><linearGradient
id="namedview51242" id="swatch6"><stop
pagecolor="#ffffff" style="stop-color:#808080;stop-opacity:1;"
bordercolor="#000000" offset="0"
borderopacity="0.25" id="stop6" /></linearGradient><marker
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-36" id="Arrow2-36-3"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true" preserveAspectRatio="xMidYMid"><path
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" /> id="arrow2L-0-6" /></marker></defs><g
</marker> id="g9"
</defs> style="display:none"><path
<g style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7.023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="g5482" d="M 33.897256,10.914479 C 33.616971,9.8851391 33.786514,71.343218 33.786514,71.343218"
style="display:none"> id="path127-7" /><g
<path id="g4983-5"
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.5341872,0,0,1.4840821,-18.065036,-1.352247)"
d="m 33.921393,11.147309 c -0.314864,-0.910336 -0.124404,53.44247 -0.124404,53.44247" style="display:inline"><text
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g4983"
transform="matrix(1.3106705,0,0,1.3612996,-10.525636,-3.5362715)"
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="32.887978" x="32.887978"
y="12.794106" y="12.794106"
id="text9342" id="text9342-3"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line" id="tspan9340-5"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="32.887978" x="32.887978"
y="12.794106">1</tspan></text> y="12.794106">1</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448-6"
cx="-34.067326" cx="-34.067326"
cy="-10.754245" cy="-10.754245"
transform="rotate(-178.67073)" transform="rotate(-178.67073)"
r="1.2760839" /> r="1.2760839" /></g><path
</g> style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:stroke fill markers"
<path d="m 33.859011,29.420135 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" id="path13743-2" /></g><g
d="m 33.887502,25.269364 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471" id="g10"
id="path13743" style="display:inline"><path
sodipodi:nodetypes="cc" />
</g>
<g
id="g5444"
style="display:inline">
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 53.121566,28.128633 C 52.980692,28.306461 34.558514,54.770101 34.558514,54.770101" d="M 58.816429,43.133531 C 56.694269,44.70809 37.161399,59.276133 35.853105,60.460409"
id="path15674" id="path15674-9" /><g
sodipodi:nodetypes="cc" /> id="g21551-1"
<g transform="matrix(1.0493551,-0.80462172,0.75631798,1.1250384,-11.344737,78.798908)"
id="g21551" style="display:inline"><text
transform="matrix(1.0709125,-0.77569872,0.72534851,1.1452501,-18.674442,63.55512)"
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="54.113926" x="54.113926"
y="-23.497944" y="-23.497944"
id="text15678" id="text15678-2"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line" id="tspan15676-7"
id="tspan15676"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926" x="54.113926"
y="-23.497944">2</tspan></text> y="-23.497944">2</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680" id="circle15680-0"
cx="-54.018658" cx="-54.018658"
cy="25.946033" cy="25.946033"
r="1.2760839" r="1.2760839"
transform="rotate(-144.24458)" /> transform="rotate(-144.24458)" /></g><path
</g> style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.411819;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:stroke fill markers"
<path d="m 48.976421,50.160424 c 1.491381,-1.085308 7.26986,-5.212171 7.26986,-5.212171"
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" id="path15682-9" /></g><g
d="m 44.081818,40.087032 c 1.269428,-1.730977 6.21501,-8.34923 6.21501,-8.34923" id="g11"
id="path15682" style="display:none"><path
sodipodi:nodetypes="cc" style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.88793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
inkscape:transform-center-x="3.0865939" d="M 44.011809,54.273077 59.185821,71.265479"
inkscape:transform-center-y="4.0947028" /> id="path1108-3" /><path
</g> style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:normal"
<g d="M 53.607403,65.037959 47.429246,58.315175"
id="g5406" id="path9576-6" /><g
style="display:none"> id="g21538-0"
<path transform="matrix(1.2270494,0,0,1.2270494,-27.438185,-36.914981)"
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.90976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline"><ellipse
d="M 40.051918,47.333345 55.451943,64.62565"
id="path1108"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:normal"
d="M 48.935982,58.682648 43.108673,51.653571"
id="path9576"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-2.7683077"
inkscape:transform-center-y="3.9580734" />
<g
id="g21538"
transform="matrix(1.2270494,0,0,1.2270494,-30.897128,-43.158996)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="circle9582" id="circle9582-6"
cx="-74.661598" cx="-74.661598"
cy="60.70055" cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)" transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922" rx="1.2146922"
ry="1.1834064" /> ry="1.1834064" /><text
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
y="75.579971" y="75.579971"
id="text9714" id="text9714-2"
transform="scale(0.98702867,1.0131418)"><tspan transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line" id="tspan9712-6"
id="tspan9712"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
y="75.579971">3</tspan></text> y="75.579971">3</tspan></text></g></g></svg>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

234
public/assets/small-letter/ks_l3.svg
View File

@@ -7,226 +7,106 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg" xml:space="preserve"
inkscape:export-filename="ks_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg"><defs
<sodipodi:namedview id="defs2"><linearGradient
id="namedview51242" id="swatch6"><stop
pagecolor="#ffffff" style="stop-color:#808080;stop-opacity:1;"
bordercolor="#000000" offset="0"
borderopacity="0.25" id="stop6" /></linearGradient><marker
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
<marker
style="overflow:visible" style="overflow:visible"
id="Arrow2-36" id="Arrow2-36-3"
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true" preserveAspectRatio="xMidYMid"><path
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)" transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z" d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-0" /> id="arrow2L-0-6" /></marker></defs><g
</marker> id="g9"
</defs> style="display:none"><path
<g style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7.023;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
id="g5482" d="M 33.897256,10.914479 C 33.616971,9.8851391 33.786514,71.343218 33.786514,71.343218"
style="display:none"> id="path127-7" /><g
<path id="g4983-5"
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.5341872,0,0,1.4840821,-18.065036,-1.352247)"
d="m 33.921393,11.147309 c -0.314864,-0.910336 -0.124404,53.44247 -0.124404,53.44247" style="display:inline"><text
id="path127"
sodipodi:nodetypes="cc" />
<g
id="g4983"
transform="matrix(1.3106705,0,0,1.3612996,-10.525636,-3.5362715)"
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="32.887978" x="32.887978"
y="12.794106" y="12.794106"
id="text9342" id="text9342-3"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line" id="tspan9340-5"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="32.887978" x="32.887978"
y="12.794106">1</tspan></text> y="12.794106">1</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448-6"
cx="-34.067326" cx="-34.067326"
cy="-10.754245" cy="-10.754245"
transform="rotate(-178.67073)" transform="rotate(-178.67073)"
r="1.2760839" /> r="1.2760839" /></g><path
</g> style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:stroke fill markers"
<path d="m 33.859011,29.420135 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" id="path13743-2" /></g><g
d="m 33.887502,25.269364 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471" id="g10"
id="path13743" style="display:none"><path
sodipodi:nodetypes="cc" />
</g>
<g
id="g5444"
style="display:none">
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 53.121566,28.128633 C 52.980692,28.306461 34.558514,54.770101 34.558514,54.770101" d="M 58.816429,43.133531 C 56.694269,44.70809 37.161399,59.276133 35.853105,60.460409"
id="path15674" id="path15674-9" /><g
sodipodi:nodetypes="cc" /> id="g21551-1"
<g transform="matrix(1.0493551,-0.80462172,0.75631798,1.1250384,-11.344737,78.798908)"
id="g21551" style="display:inline"><text
transform="matrix(1.0709125,-0.77569872,0.72534851,1.1452501,-18.674442,63.55512)"
style="display:inline">
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="54.113926" x="54.113926"
y="-23.497944" y="-23.497944"
id="text15678" id="text15678-2"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line" id="tspan15676-7"
id="tspan15676"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926" x="54.113926"
y="-23.497944">2</tspan></text> y="-23.497944">2</tspan></text><circle
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle15680" id="circle15680-0"
cx="-54.018658" cx="-54.018658"
cy="25.946033" cy="25.946033"
r="1.2760839" r="1.2760839"
transform="rotate(-144.24458)" /> transform="rotate(-144.24458)" /></g><path
</g> style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.411819;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:stroke fill markers"
<path d="m 48.976421,50.160424 c 1.491381,-1.085308 7.26986,-5.212171 7.26986,-5.212171"
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers" id="path15682-9" /></g><g
d="m 44.081818,40.087032 c 1.269428,-1.730977 6.21501,-8.34923 6.21501,-8.34923" id="g11"
id="path15682" style="display:inline"><path
sodipodi:nodetypes="cc" style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.88793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
inkscape:transform-center-x="3.0865939" d="M 44.011809,54.273077 59.185821,71.265479"
inkscape:transform-center-y="4.0947028" /> id="path1108-3" /><path
</g> style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36-3);paint-order:normal"
<g d="M 53.607403,65.037959 47.429246,58.315175"
id="g5406" id="path9576-6" /><g
style="display:inline"> id="g21538-0"
<path transform="matrix(1.2270494,0,0,1.2270494,-27.438185,-36.914981)"
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.90976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline"><ellipse
d="M 40.051918,47.333345 55.451943,64.62565"
id="path1108"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:#fffcfc;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.452017;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:normal"
d="M 48.935982,58.682648 43.108673,51.653571"
id="path9576"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-2.7683077"
inkscape:transform-center-y="3.9580734" />
<g
id="g21538"
transform="matrix(1.2270494,0,0,1.2270494,-30.897128,-43.158996)"
style="display:inline">
<ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131538;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="circle9582" id="circle9582-6"
cx="-74.661598" cx="-74.661598"
cy="60.70055" cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)" transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922" rx="1.2146922"
ry="1.1834064" /> ry="1.1834064" /><text
<text
xml:space="preserve" xml:space="preserve"
style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" style="font-size:2.14253px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.131537;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
y="75.579971" y="75.579971"
id="text9714" id="text9714-2"
transform="scale(0.98702867,1.0131418)"><tspan transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line" id="tspan9712-6"
id="tspan9712"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
y="75.579971">3</tspan></text> y="75.579971">3</tspan></text></g></g></svg>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

27
public/assets/small-letter/ms.svg
View File

@@ -7,8 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg" sodipodi:docname="ms.svg"
inkscape:export-filename="ks_l3.svg" inkscape:export-filename="ms_.png"
inkscape:export-xdpi="96" inkscape:export-xdpi="96"
inkscape:export-ydpi="96" inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
@@ -87,6 +87,11 @@
orientation="1,0" orientation="1,0"
id="guide53860" id="guide53860"
inkscape:locked="false" /> inkscape:locked="false" />
<sodipodi:guide
position="49.699157,65.944645"
orientation="0,-1"
id="guide1"
inkscape:locked="false" />
</sodipodi:namedview> </sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
@@ -111,33 +116,33 @@
</marker> </marker>
</defs> </defs>
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.9633;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283" d="m 33.827168,37.661031 c 0.160276,0.905134 -0.09202,26.213044 -0.09202,26.213044"
id="path127" id="path127"
sodipodi:nodetypes="cc" /> sodipodi:nodetypes="cc" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="33.553684" x="33.126442"
y="29.776054" y="37.159477"
id="text9342" id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line" sodipodi:role="line"
id="tspan9340" id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.553684" x="33.126442"
y="29.776054">1</tspan></text> y="37.159477">1</tspan></text>
<ellipse <ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448"
cx="-34.556458" cx="-34.242313"
cy="-28.180008" cy="-35.770748"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)" transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091" rx="1.5434091"
ry="1.624505" /> ry="1.624505" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 33.89306,38.744499 C 33.86234,37.38988 33.88022,32.175886 33.88022,32.175886" d="m 33.772723,58.600095 c -0.03072,-1.354619 -0.01284,-6.568613 -0.01284,-6.568613"
id="path13743" id="path13743"
sodipodi:nodetypes="cc" /> sodipodi:nodetypes="cc" />
<path <path
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

137
public/assets/small-letter/ms_l1.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="ms_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -96,12 +17,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -111,46 +29,42 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g6916"> id="g3">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.9633;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283" d="m 33.827168,37.661031 c 0.160276,0.905134 -0.09202,26.213044 -0.09202,26.213044"
id="path127" id="path127" />
sodipodi:nodetypes="cc" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="33.553684" x="33.126442"
y="29.776054" y="37.159477"
id="text9342" id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340" id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.553684" x="33.126442"
y="29.776054">1</tspan></text> y="37.159477">1</tspan></text>
<ellipse <ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448"
cx="-34.556458" cx="-34.242313"
cy="-28.180008" cy="-35.770748"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)" transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091" rx="1.5434091"
ry="1.624505" /> ry="1.624505" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 33.89306,38.744499 C 33.86234,37.38988 33.88022,32.175886 33.88022,32.175886" d="m 33.772723,58.600095 c -0.03072,-1.354619 -0.01284,-6.568613 -0.01284,-6.568613"
id="path13743" id="path13743" />
sodipodi:nodetypes="cc" />
</g> </g>
<g <g
id="g6879" id="g2"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.98157;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.92979;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 49.665646,64.144399 C 49.406983,56.924836 50.688044,48.315235 48.328053,42.472951 45.638263,35.814232 33.132956,34.6236 33.835003,52.488456" d="m 49.725065,64.043076 c -0.259489,-7.328875 1.025659,-16.068837 -1.34186,-21.999579 -2.698371,-6.759541 -15.24357,-7.9682 -14.539283,10.167151"
id="path6285" id="path6285" />
sodipodi:nodetypes="csc" />
<g <g
id="g6313" id="g6313"
transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)" transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)"
@@ -162,7 +76,6 @@
y="-23.497944" y="-23.497944"
id="text6309" id="text6309"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan6307" id="tspan6307"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926" x="54.113926"
@@ -177,27 +90,20 @@
</g> </g>
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 38.349052,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318" d="m 37.819885,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315" id="path6315" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
</g> </g>
<g <g
id="g6841" id="g1"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#de0029;stroke-width:6.94498;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#de0029;stroke-width:6.94498;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 66.256418,64.14057 C 65.825166,56.796699 67.320273,48.051958 64.864587,42.113916 62.06573,35.346057 49.053349,34.135911 49.783864,52.29358" d="M 66.256418,64.14057 C 65.825166,56.796699 67.320273,48.051958 64.864587,42.113916 62.06573,35.346057 49.053349,34.135911 49.783864,52.29358"
id="path6287" id="path6287" />
sodipodi:nodetypes="csc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 55.811563,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318" d="m 55.811563,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6317" id="path6317" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
<g <g
id="g6325" id="g6325"
transform="matrix(1.2912359,0,0,1.2912359,-26.452174,-46.397985)" transform="matrix(1.2912359,0,0,1.2912359,-26.452174,-46.397985)"
@@ -217,7 +123,6 @@
y="75.579971" y="75.579971"
id="text6323" id="text6323"
transform="scale(0.98702867,1.0131418)"><tspan transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan6321" id="tspan6321"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

137
public/assets/small-letter/ms_l2.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="ms_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -96,12 +17,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -111,47 +29,43 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g6916" id="g3"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.9633;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283" d="m 33.827168,37.661031 c 0.160276,0.905134 -0.09202,26.213044 -0.09202,26.213044"
id="path127" id="path127" />
sodipodi:nodetypes="cc" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="33.553684" x="33.126442"
y="29.776054" y="37.159477"
id="text9342" id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340" id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.553684" x="33.126442"
y="29.776054">1</tspan></text> y="37.159477">1</tspan></text>
<ellipse <ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448"
cx="-34.556458" cx="-34.242313"
cy="-28.180008" cy="-35.770748"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)" transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091" rx="1.5434091"
ry="1.624505" /> ry="1.624505" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 33.89306,38.744499 C 33.86234,37.38988 33.88022,32.175886 33.88022,32.175886" d="m 33.772723,58.600095 c -0.03072,-1.354619 -0.01284,-6.568613 -0.01284,-6.568613"
id="path13743" id="path13743" />
sodipodi:nodetypes="cc" />
</g> </g>
<g <g
id="g6879" id="g2"
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.98157;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.92979;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 49.665646,64.144399 C 49.406983,56.924836 50.688044,48.315235 48.328053,42.472951 45.638263,35.814232 33.132956,34.6236 33.835003,52.488456" d="m 49.725065,64.043076 c -0.259489,-7.328875 1.025659,-16.068837 -1.34186,-21.999579 -2.698371,-6.759541 -15.24357,-7.9682 -14.539283,10.167151"
id="path6285" id="path6285" />
sodipodi:nodetypes="csc" />
<g <g
id="g6313" id="g6313"
transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)" transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)"
@@ -163,7 +77,6 @@
y="-23.497944" y="-23.497944"
id="text6309" id="text6309"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan6307" id="tspan6307"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926" x="54.113926"
@@ -178,27 +91,20 @@
</g> </g>
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 38.349052,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318" d="m 37.819885,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315" id="path6315" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
</g> </g>
<g <g
id="g6841" id="g1"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#de0029;stroke-width:6.94498;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#de0029;stroke-width:6.94498;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 66.256418,64.14057 C 65.825166,56.796699 67.320273,48.051958 64.864587,42.113916 62.06573,35.346057 49.053349,34.135911 49.783864,52.29358" d="M 66.256418,64.14057 C 65.825166,56.796699 67.320273,48.051958 64.864587,42.113916 62.06573,35.346057 49.053349,34.135911 49.783864,52.29358"
id="path6287" id="path6287" />
sodipodi:nodetypes="csc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 55.811563,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318" d="m 55.811563,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6317" id="path6317" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
<g <g
id="g6325" id="g6325"
transform="matrix(1.2912359,0,0,1.2912359,-26.452174,-46.397985)" transform="matrix(1.2912359,0,0,1.2912359,-26.452174,-46.397985)"
@@ -218,7 +124,6 @@
y="75.579971" y="75.579971"
id="text6323" id="text6323"
transform="scale(0.98702867,1.0131418)"><tspan transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan6321" id="tspan6321"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

137
public/assets/small-letter/ms_l3.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="ms_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -96,12 +17,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -111,47 +29,43 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g6916" id="g3"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.9633;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283" d="m 33.827168,37.661031 c 0.160276,0.905134 -0.09202,26.213044 -0.09202,26.213044"
id="path127" id="path127" />
sodipodi:nodetypes="cc" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="33.553684" x="33.126442"
y="29.776054" y="37.159477"
id="text9342" id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340" id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.553684" x="33.126442"
y="29.776054">1</tspan></text> y="37.159477">1</tspan></text>
<ellipse <ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448"
cx="-34.556458" cx="-34.242313"
cy="-28.180008" cy="-35.770748"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)" transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091" rx="1.5434091"
ry="1.624505" /> ry="1.624505" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 33.89306,38.744499 C 33.86234,37.38988 33.88022,32.175886 33.88022,32.175886" d="m 33.772723,58.600095 c -0.03072,-1.354619 -0.01284,-6.568613 -0.01284,-6.568613"
id="path13743" id="path13743" />
sodipodi:nodetypes="cc" />
</g> </g>
<g <g
id="g6879" id="g2"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.98157;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.92979;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 49.665646,64.144399 C 49.406983,56.924836 50.688044,48.315235 48.328053,42.472951 45.638263,35.814232 33.132956,34.6236 33.835003,52.488456" d="m 49.725065,64.043076 c -0.259489,-7.328875 1.025659,-16.068837 -1.34186,-21.999579 -2.698371,-6.759541 -15.24357,-7.9682 -14.539283,10.167151"
id="path6285" id="path6285" />
sodipodi:nodetypes="csc" />
<g <g
id="g6313" id="g6313"
transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)" transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)"
@@ -163,7 +77,6 @@
y="-23.497944" y="-23.497944"
id="text6309" id="text6309"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan6307" id="tspan6307"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926" x="54.113926"
@@ -178,27 +91,20 @@
</g> </g>
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 38.349052,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318" d="m 37.819885,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315" id="path6315" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
</g> </g>
<g <g
id="g6841" id="g1"
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#de0029;stroke-width:6.94498;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#de0029;stroke-width:6.94498;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 66.256418,64.14057 C 65.825166,56.796699 67.320273,48.051958 64.864587,42.113916 62.06573,35.346057 49.053349,34.135911 49.783864,52.29358" d="M 66.256418,64.14057 C 65.825166,56.796699 67.320273,48.051958 64.864587,42.113916 62.06573,35.346057 49.053349,34.135911 49.783864,52.29358"
id="path6287" id="path6287" />
sodipodi:nodetypes="csc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 55.811563,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318" d="m 55.811563,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6317" id="path6317" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
<g <g
id="g6325" id="g6325"
transform="matrix(1.2912359,0,0,1.2912359,-26.452174,-46.397985)" transform="matrix(1.2912359,0,0,1.2912359,-26.452174,-46.397985)"
@@ -218,7 +124,6 @@
y="75.579971" y="75.579971"
id="text6323" id="text6323"
transform="scale(0.98702867,1.0131418)"><tspan transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan6321" id="tspan6321"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094" x="59.531094"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

29
public/assets/small-letter/ns.svg
View File

@@ -7,7 +7,7 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg" sodipodi:docname="ns.svg"
inkscape:export-filename="ms_l3.svg" inkscape:export-filename="ms_l3.svg"
inkscape:export-xdpi="96" inkscape:export-xdpi="96"
inkscape:export-ydpi="96" inkscape:export-ydpi="96"
@@ -87,6 +87,11 @@
orientation="1,0" orientation="1,0"
id="guide53860" id="guide53860"
inkscape:locked="false" /> inkscape:locked="false" />
<sodipodi:guide
position="47.172081,65.583634"
orientation="0,-1"
id="guide1"
inkscape:locked="false" />
</sodipodi:namedview> </sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
@@ -110,40 +115,36 @@
id="arrow2L-2" /> id="arrow2L-2" />
</marker> </marker>
</defs> </defs>
<g
id="g6916"
style="display:inline">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.96393;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283" d="m 33.827084,37.541011 c 0.159576,0.909267 -0.09162,26.332747 -0.09162,26.332747"
id="path127" id="path127"
sodipodi:nodetypes="cc" /> sodipodi:nodetypes="cc" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="33.553684" x="33.249947"
y="29.776054" y="37.160423"
id="text9342" id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line" sodipodi:role="line"
id="tspan9340" id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.553684" x="33.249947"
y="29.776054">1</tspan></text> y="37.160423">1</tspan></text>
<ellipse <ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448"
cx="-34.556458" cx="-34.482925"
cy="-28.180008" cy="-35.764874"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)" transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091" rx="1.5434091"
ry="1.624505" /> ry="1.624505" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 33.89306,38.744499 C 33.86234,37.38988 33.88022,32.175886 33.88022,32.175886" d="M 33.89306,58.323678 C 33.86234,56.969059 33.88022,51.755065 33.88022,51.755065"
id="path13743" id="path13743"
sodipodi:nodetypes="cc" /> sodipodi:nodetypes="cc" />
</g>
<g <g
id="g6879" id="g6879"
style="display:inline"> style="display:inline">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

129
public/assets/small-letter/ns_l1.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="ns.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -96,12 +17,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -110,48 +28,40 @@
id="arrow2L-2" /> id="arrow2L-2" />
</marker> </marker>
</defs> </defs>
<g
id="g6916"
style="display:inline">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.96393;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283" d="m 33.827084,37.541011 c 0.159576,0.909267 -0.09162,26.332747 -0.09162,26.332747"
id="path127" id="path127" />
sodipodi:nodetypes="cc" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="33.553684" x="33.249947"
y="29.776054" y="37.160423"
id="text9342" id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340" id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.553684" x="33.249947"
y="29.776054">1</tspan></text> y="37.160423">1</tspan></text>
<ellipse <ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448"
cx="-34.556458" cx="-34.482925"
cy="-28.180008" cy="-35.764874"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)" transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091" rx="1.5434091"
ry="1.624505" /> ry="1.624505" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 33.89306,38.744499 C 33.86234,37.38988 33.88022,32.175886 33.88022,32.175886" d="M 33.89306,58.323678 C 33.86234,56.969059 33.88022,51.755065 33.88022,51.755065"
id="path13743" id="path13743" />
sodipodi:nodetypes="cc" />
</g>
<g <g
id="g6879" id="g6879"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.98157;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.98157;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 49.665646,64.144399 C 49.406983,56.924836 50.688044,48.315235 48.328053,42.472951 45.638263,35.814232 33.132956,34.6236 33.835003,52.488456" d="M 49.665646,64.144399 C 49.406983,56.924836 50.688044,48.315235 48.328053,42.472951 45.638263,35.814232 33.132956,34.6236 33.835003,52.488456"
id="path6285" id="path6285" />
sodipodi:nodetypes="csc" />
<g <g
id="g6313" id="g6313"
transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)" transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)"
@@ -163,7 +73,6 @@
y="-23.497944" y="-23.497944"
id="text6309" id="text6309"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan6307" id="tspan6307"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926" x="54.113926"
@@ -179,10 +88,7 @@
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 38.349052,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318" d="m 38.349052,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315" id="path6315" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
</g> </g>
<g <g
id="g6841" id="g6841"
@@ -190,15 +96,11 @@
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#de0029;stroke-width:6.94498;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#de0029;stroke-width:6.94498;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 66.256418,64.14057 C 65.825166,56.796699 67.320273,48.051958 64.864587,42.113916 62.06573,35.346057 49.053349,34.135911 49.783864,52.29358" d="M 66.256418,64.14057 C 65.825166,56.796699 67.320273,48.051958 64.864587,42.113916 62.06573,35.346057 49.053349,34.135911 49.783864,52.29358"
id="path6287" id="path6287" />
sodipodi:nodetypes="csc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 55.811563,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318" d="m 55.811563,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6317" id="path6317" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
<ellipse <ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.169847;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.169847;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="ellipse6319" id="ellipse6319"
@@ -214,7 +116,6 @@
y="51.795433" y="51.795433"
id="text6323" id="text6323"
transform="scale(0.98702867,1.0131418)"><tspan transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan6321" id="tspan6321"
style="stroke:#f9f6f6;stroke-width:0.169845;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" style="stroke:#f9f6f6;stroke-width:0.169845;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="50.068886" x="50.068886"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

127
public/assets/small-letter/ns_l2.svg
View File

@@ -7,87 +7,8 @@
viewBox="0 0 100 100" viewBox="0 0 100 100"
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="as.svg"
inkscape:export-filename="ns_l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview51242"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
showguides="true">
<sodipodi:guide
position="107.64909,49.99107"
orientation="0,-1"
id="guide51373"
inkscape:locked="false" />
<sodipodi:guide
position="114.63086,74.995535"
orientation="0,-1"
id="guide51375"
inkscape:locked="false" />
<sodipodi:guide
position="69.817661,104.871"
orientation="1,0"
id="guide51377"
inkscape:locked="false" />
<sodipodi:guide
position="49.846563,90.7451"
orientation="1,0"
id="guide51379"
inkscape:locked="false" />
<sodipodi:guide
position="30.037831,109.742"
orientation="1,0"
id="guide51381"
inkscape:locked="false" />
<sodipodi:guide
position="114.14376,25.148972"
orientation="0,-1"
id="guide51383"
inkscape:locked="false" />
<sodipodi:guide
position="121.77499,67.526669"
orientation="0,-1"
id="guide51385"
inkscape:locked="false" />
<sodipodi:guide
position="-62.511162,32.455471"
orientation="0,-1"
id="guide51387"
inkscape:locked="false" />
<sodipodi:guide
position="79.722027,92.531133"
orientation="0,-1"
id="guide51389"
inkscape:locked="false" />
<sodipodi:guide
position="75.500494,7.6133734"
orientation="0,-1"
id="guide51391"
inkscape:locked="false" />
<sodipodi:guide
position="62.674703,108.2319"
orientation="1,0"
id="guide53858"
inkscape:locked="false" />
<sodipodi:guide
position="37.604822,110.66405"
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
</sodipodi:namedview>
<defs <defs
id="defs2"> id="defs2">
<marker <marker
@@ -96,12 +17,9 @@
refX="0" refX="0"
refY="0" refY="0"
orient="auto-start-reverse" orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998" markerWidth="7.6999998"
markerHeight="5.5999999" markerHeight="5.5999999"
viewBox="0 0 7.7 5.6" viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid"> preserveAspectRatio="xMidYMid">
<path <path
transform="scale(0.7)" transform="scale(0.7)"
@@ -111,38 +29,35 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g6916" id="g1"
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:6.96393;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283" d="m 33.827084,37.541011 c 0.159576,0.909267 -0.09162,26.332747 -0.09162,26.332747"
id="path127" id="path127" />
sodipodi:nodetypes="cc" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:3.46348px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="33.553684" x="33.249947"
y="29.776054" y="37.160423"
id="text9342" id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340" id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.553684" x="33.249947"
y="29.776054">1</tspan></text> y="37.160423">1</tspan></text>
<ellipse <ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.17372;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="path9448" id="path9448"
cx="-34.556458" cx="-34.482925"
cy="-28.180008" cy="-35.764874"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)" transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091" rx="1.5434091"
ry="1.624505" /> ry="1.624505" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.517543;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="M 33.89306,38.744499 C 33.86234,37.38988 33.88022,32.175886 33.88022,32.175886" d="M 33.89306,58.323678 C 33.86234,56.969059 33.88022,51.755065 33.88022,51.755065"
id="path13743" id="path13743" />
sodipodi:nodetypes="cc" />
</g> </g>
<g <g
id="g6879" id="g6879"
@@ -150,8 +65,7 @@
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.98157;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:6.98157;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 49.665646,64.144399 C 49.406983,56.924836 50.688044,48.315235 48.328053,42.472951 45.638263,35.814232 33.132956,34.6236 33.835003,52.488456" d="M 49.665646,64.144399 C 49.406983,56.924836 50.688044,48.315235 48.328053,42.472951 45.638263,35.814232 33.132956,34.6236 33.835003,52.488456"
id="path6285" id="path6285" />
sodipodi:nodetypes="csc" />
<g <g
id="g6313" id="g6313"
transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)" transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)"
@@ -163,7 +77,6 @@
y="-23.497944" y="-23.497944"
id="text6309" id="text6309"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan6307" id="tspan6307"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926" x="54.113926"
@@ -179,10 +92,7 @@
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 38.349052,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318" d="m 38.349052,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315" id="path6315" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
</g> </g>
<g <g
id="g6841" id="g6841"
@@ -190,15 +100,11 @@
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#de0029;stroke-width:6.94498;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#de0029;stroke-width:6.94498;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 66.256418,64.14057 C 65.825166,56.796699 67.320273,48.051958 64.864587,42.113916 62.06573,35.346057 49.053349,34.135911 49.783864,52.29358" d="M 66.256418,64.14057 C 65.825166,56.796699 67.320273,48.051958 64.864587,42.113916 62.06573,35.346057 49.053349,34.135911 49.783864,52.29358"
id="path6287" id="path6287" />
sodipodi:nodetypes="csc" />
<path <path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers" style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 55.811563,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318" d="m 55.811563,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6317" id="path6317" />
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
<ellipse <ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.169847;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.169847;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
id="ellipse6319" id="ellipse6319"
@@ -214,7 +120,6 @@
y="51.795433" y="51.795433"
id="text6323" id="text6323"
transform="scale(0.98702867,1.0131418)"><tspan transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan6321" id="tspan6321"
style="stroke:#f9f6f6;stroke-width:0.169845;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" style="stroke:#f9f6f6;stroke-width:0.169845;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="50.068886" x="50.068886"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

13
public/assets/small-letter/ts.svg
View File

@@ -8,7 +8,7 @@
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="ts_l2.svg" sodipodi:docname="ts_l2.svg"
inkscape:export-filename="ts_l2.svg" inkscape:export-filename="ts-l3.svg"
inkscape:export-xdpi="96" inkscape:export-xdpi="96"
inkscape:export-ydpi="96" inkscape:export-ydpi="96"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
@@ -138,9 +138,9 @@
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 50.08549,24.331693 c 0.276649,8.508821 -0.204874,28.733484 -0.204874,37.237207 0,4.994314 10.537236,5.173737 10.111561,-3.778473" d="m 49.923123,20.759627 c 0.276649,8.508821 -0.04251,41.885183 -0.04251,50.388906"
id="path127" id="path127"
sodipodi:nodetypes="ccc" /> sodipodi:nodetypes="cc" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:3.62443px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:3.62443px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
@@ -166,12 +166,13 @@
</g> </g>
<g <g
id="g18551" id="g18551"
transform="translate(-1.0583333,-0.52916667)" transform="translate(-1.0583333,-3.9071252)"
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 63.698073,36.333523 c -2.013851,0.08758 -26.404088,0.195734 -26.404088,0.195734" d="m 62.074406,36.333523 c -2.013851,0.08758 -21.695455,0.03337 -21.695455,0.03337"
id="path1236-5" /> id="path1236-5"
sodipodi:nodetypes="cc" />
<g <g
id="g1301" id="g1301"
transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)" transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

70
public/assets/small-letter/ts_l1.svg
View File

@@ -8,9 +8,10 @@
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="ts_l2.svg" sodipodi:docname="ts_l2.svg"
inkscape:export-filename="ts-l1.svg" inkscape:export-filename="..\Desktop\LATTER\ts_l1.png"
inkscape:export-xdpi="96" inkscape:export-xdpi="96"
inkscape:export-ydpi="96" inkscape:export-ydpi="96"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -28,12 +29,12 @@
showgrid="false" showgrid="false"
showguides="true" showguides="true"
inkscape:zoom="1.6295423" inkscape:zoom="1.6295423"
inkscape:cx="47.252532" inkscape:cx="125.49536"
inkscape:cy="206.19287" inkscape:cy="151.88314"
inkscape:window-width="1920" inkscape:window-width="1920"
inkscape:window-height="1007" inkscape:window-height="1027"
inkscape:window-x="0" inkscape:window-x="-8"
inkscape:window-y="0" inkscape:window-y="-8"
inkscape:window-maximized="1" inkscape:window-maximized="1"
inkscape:current-layer="svg5"> inkscape:current-layer="svg5">
<sodipodi:guide <sodipodi:guide
@@ -115,15 +116,31 @@
style="fill:context-stroke;fill-rule:evenodd;stroke:none" style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-54" /> id="arrow2L-54" />
</marker> </marker>
<marker
style="overflow:visible"
id="Arrow2-3-7"
refX="0"
refY="0"
orient="auto-start-reverse"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-6-6" />
</marker>
</defs> </defs>
<g <g
id="g18882" id="g18882"
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 50.08549,24.331693 c 0.276649,8.508821 -0.204874,28.733484 -0.204874,37.237207 0,4.994314 10.537236,5.173737 10.111561,-3.778473" d="m 49.923123,20.759627 c 0.276649,8.508821 -0.04251,41.885183 -0.04251,50.388906"
id="path127" id="path127"
sodipodi:nodetypes="ccc" /> sodipodi:nodetypes="cc" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:3.62443px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:3.62443px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
@@ -147,4 +164,41 @@
d="m 50.181312,42.781753 c -0.01038,-3.228056 -0.0043,-15.652996 -0.0043,-15.652996" d="m 50.181312,42.781753 c -0.01038,-3.228056 -0.0043,-15.652996 -0.0043,-15.652996"
id="path13743" /> id="path13743" />
</g> </g>
<g
id="g18551"
transform="translate(-1.0583333,-3.9071252)"
style="display:none">
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 62.074406,36.333523 c -2.013851,0.08758 -21.695455,0.03337 -21.695455,0.03337"
id="path1236-5"
sodipodi:nodetypes="cc" />
<g
id="g1301"
transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="54.113926"
y="-23.497944"
id="text1240-6"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1238-9"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926"
y="-23.497944">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle1242-3"
cx="-54.018658"
cy="25.946033"
r="1.2760839"
transform="rotate(-144.24458)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-7);paint-order:stroke fill markers"
d="m 53.475324,36.181898 c -2.146558,0.0055 -10.407988,0.100872 -10.407988,0.100872"
id="path1246-7" />
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

13
public/assets/small-letter/ts_l2.svg
View File

@@ -8,7 +8,7 @@
version="1.1" version="1.1"
id="svg5" id="svg5"
sodipodi:docname="ts_l2.svg" sodipodi:docname="ts_l2.svg"
inkscape:export-filename="ts-l3.svg" inkscape:export-filename="..\Desktop\LATTER\ts_l1.svg"
inkscape:export-xdpi="96" inkscape:export-xdpi="96"
inkscape:export-ydpi="96" inkscape:export-ydpi="96"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
@@ -138,9 +138,9 @@
style="display:none"> style="display:none">
<path <path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 50.08549,24.331693 c 0.276649,8.508821 -0.204874,28.733484 -0.204874,37.237207 0,4.994314 10.537236,5.173737 10.111561,-3.778473" d="m 49.923123,20.759627 c 0.276649,8.508821 -0.04251,41.885183 -0.04251,50.388906"
id="path127" id="path127"
sodipodi:nodetypes="ccc" /> sodipodi:nodetypes="cc" />
<text <text
xml:space="preserve" xml:space="preserve"
style="font-size:3.62443px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers" style="font-size:3.62443px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.181793;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
@@ -166,12 +166,13 @@
</g> </g>
<g <g
id="g18551" id="g18551"
transform="translate(-1.0583333,-0.52916667)" transform="translate(-1.0583333,-3.9071252)"
style="display:inline"> style="display:inline">
<path <path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 63.698073,36.333523 c -2.013851,0.08758 -26.404088,0.195734 -26.404088,0.195734" d="m 62.074406,36.333523 c -2.013851,0.08758 -21.695455,0.03337 -21.695455,0.03337"
id="path1236-5" /> id="path1236-5"
sodipodi:nodetypes="cc" />
<g <g
id="g1301" id="g1301"
transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)" transform="matrix(1.0751203,-0.72819851,0.72819851,1.0751203,-30.931124,68.289741)"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

3
public/assets/svg/border.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="119" height="119" rx="7.5" fill="#E6FDFE" stroke="#60C6CB"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 197 B

2
public/assets/svg/button-icon.svg
View File

@@ -1 +1 @@
<svg width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#eceaea" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#ff0000" stroke-width="0.048"></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#0000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> <svg width="50px" height="50px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="2" stroke-width=""></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#BB4D6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 698 B

After

Width:  |  Height:  |  Size: 683 B

4
public/assets/svg/cancel.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.5" fill="white" stroke="#BB4D6A"/>
<path d="M26.3002 13.71C26.1134 13.5227 25.8597 13.4175 25.5952 13.4175C25.3307 13.4175 25.077 13.5227 24.8902 13.71L20.0002 18.59L15.1102 13.7C14.9234 13.5127 14.6697 13.4075 14.4052 13.4075C14.1407 13.4075 13.887 13.5127 13.7002 13.7C13.3102 14.09 13.3102 14.72 13.7002 15.11L18.5902 20L13.7002 24.89C13.3102 25.28 13.3102 25.91 13.7002 26.3C14.0902 26.69 14.7202 26.69 15.1102 26.3L20.0002 21.41L24.8902 26.3C25.2802 26.69 25.9102 26.69 26.3002 26.3C26.6902 25.91 26.6902 25.28 26.3002 24.89L21.4102 20L26.3002 15.11C26.6802 14.73 26.6802 14.09 26.3002 13.71Z" fill="#BB4D6A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

4
public/assets/svg/clear.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#F5F5F5"/>
<path d="M13.0528 5.25134C9.23531 5.14634 6.10781 8.21384 6.10781 12.0013H4.76531C4.42781 12.0013 4.26281 12.4063 4.50281 12.6388L6.59531 14.7313C6.74531 14.8813 6.97781 14.8813 7.12781 14.7313L9.22031 12.6388C9.45281 12.4063 9.28781 12.0013 8.95031 12.0013H7.60781C7.60781 9.07634 9.99281 6.71384 12.9328 6.75134C15.7228 6.78884 18.0703 9.13634 18.1078 11.9263C18.1453 14.8588 15.7828 17.2513 12.8578 17.2513C11.9203 17.2513 11.0428 16.9963 10.2778 16.5688C9.98531 16.4038 9.62531 16.4638 9.39281 16.7038C9.04781 17.0488 9.11531 17.6413 9.54281 17.8813C10.5253 18.4288 11.6503 18.7513 12.8578 18.7513C16.6453 18.7513 19.7128 15.6238 19.6078 11.8063C19.5103 8.28884 16.5703 5.34884 13.0528 5.25134Z" fill="#8D8D8D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 868 B

5
public/assets/svg/mute.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" fill="#49B76E"/>
<path d="M23.5669 27.4035C26.3366 26.1887 28.2778 23.5486 28.2778 20.3361C28.2778 17.1235 26.3366 14.4834 23.5669 13.2686V14.8391C25.4414 15.9275 26.7072 18.0171 26.7072 20.3361C26.7072 22.655 25.4414 24.7446 23.5669 25.833V27.4035Z" fill="white"/>
<path d="M23.5671 16.4096V24.2624C24.5291 23.3986 25.1377 21.7268 25.1377 20.336C25.1377 18.9453 24.5291 17.2734 23.5671 16.4096ZM14.1438 24.2624H16.2617L21.9966 28.0851V12.5869L16.2617 16.4096H14.1438C13.2776 16.4096 12.5732 17.114 12.5732 17.9802V22.6919C12.5732 23.558 13.2776 24.2624 14.1438 24.2624Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 721 B

3
public/assets/svg/pointer.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#D9D9D9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 151 B

4
public/assets/svg/reset.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="19.5" fill="#F59D17" stroke="#F59D17"/>
<path d="M19.9619 13.6426V10.8526C19.9619 10.4026 19.4219 10.1826 19.1119 10.5026L15.3119 14.2926C15.1119 14.4926 15.1119 14.8026 15.3119 15.0026L19.1019 18.7926C19.4219 19.1026 19.9619 18.8826 19.9619 18.4326V15.6426C23.6919 15.6426 26.6419 19.0626 25.8219 22.9326C25.3519 25.2026 23.5119 27.0326 21.2519 27.5026C17.6819 28.2526 14.5019 25.8026 14.0219 22.4926C13.9519 22.0126 13.5319 21.6426 13.0419 21.6426C12.4419 21.6426 11.9619 22.1726 12.0419 22.7726C12.6619 27.1626 16.8419 30.4126 21.5719 29.4926C24.6919 28.8826 27.2019 26.3726 27.8119 23.2526C28.8019 18.1226 24.9019 13.6426 19.9619 13.6426Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 789 B

4
public/assets/svg/tick2.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" fill="#004AAD"/>
<path d="M16.7999 23.9049L13.2999 20.4049C13.1151 20.2177 12.863 20.1124 12.5999 20.1124C12.3369 20.1124 12.0848 20.2177 11.8999 20.4049C11.5099 20.7949 11.5099 21.4149 11.8999 21.8049L16.0899 25.9949C16.4799 26.3849 17.1099 26.3849 17.4999 25.9949L28.0999 15.4049C28.4899 15.0149 28.4899 14.3949 28.0999 14.0049C27.9151 13.8177 27.663 13.7124 27.3999 13.7124C27.1369 13.7124 26.8848 13.8177 26.6999 14.0049L16.7999 23.9049Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 592 B

85
public/saveGameData.js Normal file
View File

@@ -0,0 +1,85 @@
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('userid');
const gameId = urlParams.get('id');
let startTime = Date.now();
const url = window.location.href;
const gameName = url.split('/');
const gameType = gameName[3].split('?id=');
const gameVersion = gameType[0] + '-' + gameName[4];
function submitUserData(drawingZone) {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
let imageCode;
let gameScore;
let scoreTotal=0;
if(scoreTotal){
gameScore = scoreTotal;
}else{
gameScore = 0;
}
// console.log('This is from main point', scoreTotal);
drawingZone.renderer.snapshot((image) => {
if(gameType[0] == 'drawing'){
submitButton.setVisible(true);
snapshotButton.setVisible(true);
customCursor.setVisible(true);
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
document.body.appendChild(image);
// Download the snapshot as an image
const link = document.createElement('a');
link.href = image.src;
link.download = 'my_drawing.png';
link.click();
document.body.removeChild(image);
imageCode = image.src;
}
let userData = {
'gameName': gameVersion,
'gameID': gameId,
'screenShot': imageCode,
'userId' : userId,
'gameTime' : timeDifferenceInSeconds,
'score' : scoreTotal
// 'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
console.log(userData);
fetch(`http://192.168.0.166:3000/save-data`, {
method: 'POST',
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if(response.ok){
console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
// Clear the drawing
// graphics.clear();
});
};

285
src/pages/cross/cross_phonics_v1.astro Normal file
View File

@@ -0,0 +1,285 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="">
<main>
<div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="shadow-md">
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col">
<p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p>
</div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
<form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p>
</label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p>
</label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p>
</label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p>
</label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div>
<div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p>
</label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p>
</label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div>
</div>
<div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
</form>
</div>
</section>
</div>
</main>
</Layout>
<script is:inline>
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json())
.then(data => {
gameData = data.data;
// console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){
document.getElementById("label1").innerHTML = gameData.label1;
}
if(gameData.label2){
document.getElementById("label2").innerHTML = gameData.label2;
}
if(gameData.label3){
document.getElementById("label3").innerHTML = gameData.label3;
}
if(gameData.label4){
document.getElementById("label4").innerHTML = gameData.label4;
}
if(gameData.label5){
document.getElementById("label5").innerHTML = gameData.label5;
}
if(gameData.label6){
document.getElementById("label6").innerHTML = gameData.label6;
}
// document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
// document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
for (let i = 1; i <= 6; i++) {
const imageId = `image${i}`;
document.getElementById(imageId).src = assetsURL + gameData[imageId];
}
});
function checkResult2(id) {
const checkbox = document.getElementById('a' + id.slice(-1));
const element = document.getElementById(id);
if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
}
} else {
element.classList.remove('redBorder', 'greenBorder');
}
}
let url = window.location.href;
let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() {
// Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
const checkboxValues = checkboxes.map(id => {
const checkbox = document.getElementById(id);
const element = document.getElementById('image' + id.slice(-1));
return {
id: id,
checked: checkbox.checked,
element: element
};
});
// Count points based on checkbox values and "greenBorder" class
let totalPoints = 0;
checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
totalPoints += 1;
}
});
// Move the userData object creation inside the saveUserData function if needed
let userData = {
'user': 'tick-v1@beanstalkedu.com',
'game_name': gameName,
'starts': formatedDateTime,
'score': totalPoints, // Include the totalPoints in the userData
};
// console.log(userData);
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if (response.ok) {
document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
} else {
// console.log('Something Wrong', response);
}
})
.catch(error => {
console.error('An error occurred', error);
});
}
document.addEventListener('DOMContentLoaded', function () {
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', async function (event) {
event.preventDefault();
});
});
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
input[type="checkbox"]{
-webkit-appearance: initial;
appearance: initial;
border: 1px solid rgb(128, 128, 128);
border-radius: 5px;
/* background: gray; */
width: 40px;
height: 40px;
position: relative;
}
input[type="checkbox"]:checked {
background: #FF0000;
}
input[type="checkbox"]:checked:after {
content: "X";
color: #fff;
border: none;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
/*
* If you want to fully change the check appearance, use the following:
* content: " ";
* width: 100%;
* height: 100%;
* background: blue;
* top: 0;
* left: 0;
*/
}
body{
font-family: Quicksand;
}
input.largerCheckbox {
width: 40px;
height: 40px;
cursor: pointer;
}
.greenBorder{
border: 4px solid #008000;
border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
}
.redBorder{
border: 4px solid red;
border-radius: 10%;
transition: border 0.5s, border-color 0.3s, transform 6s;
}
#image1, #image2, #image3, #image4, #image5, #image6{
width: 150px;
}
#label1, #label2, #label3, #label4, #label5, #label6{
text-align: center;
font-weight: bold;
color: #7C4C23;
font-size: 20px;
padding-top: 10px;
}
#LearningArea, #LearningSubArea_copy{
font-size: 20px;
color: #7C4C23;
font-weight: bold;
}
.round-checkbox-label {
display: inline-block;
cursor: pointer;
position: relative;
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}
.round-checkbox-input:checked + .round-checkbox-label {
border-radius: 30%;
}
.round-checkbox-input:checked + .round-checkbox-label::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
display: block;
}
</style>

18
src/pages/cross/cross_phonics_v2.astro
View File

@@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
@@ -77,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col justify-center place-items-center pt-8"> <div class="flex flex-col justify-center place-items-center pt-8">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div> </div>
</form> </form>
</div> </div>

18
src/pages/cross/v1.astro
View File

@@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>
@@ -59,7 +69,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-8"> <div class="flex flex-col place-items-center justify-center pt-8">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div> </div>
</form> </form>
</div> </div>

16
src/pages/cross/v2.astro
View File

@@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div> <div>
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-6"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<!-- <div class="flex flex-col"> <!-- <div class="flex flex-col">
<p id="LearningArea"></p> <p id="LearningArea"></p>
<p id="LearningSubArea_copy"></p> <p id="LearningSubArea_copy"></p>

18
src/pages/cross/v3.astro
View File

@@ -6,11 +6,21 @@ import Layout from "../../layouts/Layout.astro";
<main> <main>
<div class=""> <div class="">
<section class="bg-white bg-center bg-no-repeat bg-cover h-screen"> <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
<div class="container mx-auto px-4"> <div class="shadow-md">
<div class="flex flex-row place-content-between pt-2"> <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
<p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p> <div>
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none"> <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
</div> </div>
<div class="flex flex-row space-x-2 pb-2">
<button><img src="/assets/svg/mute.svg" alt=""></button>
<button><img src="/assets/svg/reset.svg" alt=""></button>
<button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
<button><img src="/assets/svg/cancel.svg" alt=""></button>
</div>
</div>
<!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div>
<div class="container mx-auto px-4">
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p> <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
@@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
</div> </div>
<div class="flex flex-col place-items-center justify-center pt-4"> <div class="flex flex-col place-items-center justify-center pt-4">
<p id="savedMessage"></p> <p id="savedMessage"></p>
<input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
</div> </div>
</form> </form>
</div> </div>

232
src/pages/drag/dragdrop_phonics.astro
View File

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -57,7 +58,24 @@ import Layout from '../../layouts/Layout.astro';
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
let retryButton;
let blockMatches;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@@ -67,6 +85,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40; rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@@ -76,13 +99,6 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172; rightTargetZoneW = window.innerWidth * 0.9 - 172;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -131,7 +147,7 @@ import Layout from '../../layouts/Layout.astro';
.then(({data}) => { .then(({data}) => {
const {image1, image2, image3, image4, image5, image6, image7, image8} = data; const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){ if(isMobile){
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=80";
} else{ } else{
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=100";
} }
@@ -228,8 +244,11 @@ import Layout from '../../layouts/Layout.astro';
} }
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image("retryIcon", "/assets/svg/retry.svg") this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.image("border", '/assets/squar.png'); this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
@@ -326,135 +345,168 @@ import Layout from '../../layouts/Layout.astro';
} }
]; ];
// console.log(data) // console.log(data)
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){ if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 55, data.label1, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 55, data.label2, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 15, window.innerHeight - 55, data.label3, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 55, data.label4, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 185, data.label5, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 185, data.label6, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 20, window.innerHeight - 185, data.label7, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 185, data.label8, {font:`15px`, fill: `#7c4c23`})
} }
if(isMobile){ if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`}); this.add.text(leftTargetZoneW - 20, window.innerHeight / 4.5, data.left_label, {font:`10px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`}); this.add.text(rightTargetZoneW - 100, window.innerHeight / 4.5, data.right_label, {font:`10px`, fill: `#60C6CB`});
} else{ } else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`}); this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`}); this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
} }
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 24;
const baseFontSize = 22; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 95, data.description, { const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const url = window.location.href;
const gameName = URL.split('/'); // const gameName = url.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false); // submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); // submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
if(isMobile){
blocks1Width1 = 180;
blocks1Width2 = 90;
blocks1Width3 = 2;
blocks1Width4 = 90;
blocks1Width5 = 180;
blocks1Width6 = 90;
blocks1Width7 = 2;
blocks1Width8 = 90;
} else{
blocks1Width1 = 200;
blocks1Width2 = 100;
blocks1Width3 = 2;
blocks1Width4 = 100;
blocks1Width5 = 200;
blocks1Width6 = 100;
blocks1Width7 = 2;
blocks1Width8 = 100;
}
const blocks = [ const blocks = [
{ {
x: displayW / 2 - 200, x: displayW / 2 - blocks1Width1,
y: window.innerHeight - 250, y: window.innerHeight - 290,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
}, },
{ {
x: displayW / 2-100, x: displayW / 2 - blocks1Width2,
y: window.innerHeight - 250, y: window.innerHeight - 290,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
}, },
{ {
x: displayW / 2, x: displayW / blocks1Width3,
y: window.innerHeight - 250, y: window.innerHeight - 290,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
}, },
{ {
x: displayW / 2+100, x: displayW / 2 + blocks1Width4,
y: window.innerHeight - 250, y: window.innerHeight - 290,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
}, },
{ {
x: displayW / 2-200, x: displayW / 2 - blocks1Width5,
y: window.innerHeight - 120, y: window.innerHeight - 160,
textureKey: "blocks5", textureKey: "blocks5",
id: "block5", id: "block5",
}, },
{ {
x: displayW / 2-100, x: displayW / 2 - blocks1Width6,
y: window.innerHeight - 120, y: window.innerHeight - 160,
textureKey: "blocks6", textureKey: "blocks6",
id: "block6", id: "block6",
}, },
{ {
x: displayW / 2, x: displayW / blocks1Width7,
y: window.innerHeight - 120, y: window.innerHeight - 160,
textureKey: "blocks7", textureKey: "blocks7",
id: "block7", id: "block7",
}, },
{ {
x: displayW / 2+100, x: displayW / 2 + blocks1Width8,
y: window.innerHeight - 120, y: window.innerHeight - 160,
textureKey: "blocks8", textureKey: "blocks8",
id: "block8", id: "block8",
}, },
@@ -465,7 +517,7 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0).setScale(borderScale); const targetBorder = this.add.image(targetZone.x, targetZone.y-20, "border").setAlpha(0.05).setScale(borderScale);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
@@ -486,7 +538,7 @@ import Layout from '../../layouts/Layout.astro';
if ( if (
Phaser.Geom.Intersects.RectangleToRectangle( Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(), newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100) new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 100, 50)
) )
) { ) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
@@ -505,7 +557,7 @@ import Layout from '../../layouts/Layout.astro';
droppedOnTargetZone = true; droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true); targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(0); targetZoneBorders[targetIndex].setAlpha(0.5);
return; return;
} }
}); });
@@ -524,11 +576,11 @@ import Layout from '../../layouts/Layout.astro';
}); });
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false); // retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;
const isMatch = (blockName, targetName) => { const isMatch = (blockName, targetName) => {

246
src/pages/drag/index.astro
View File

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -57,7 +58,23 @@ import Layout from '../../layouts/Layout.astro';
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@@ -65,6 +82,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@@ -72,11 +94,7 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -248,13 +266,11 @@ import Layout from '../../layouts/Layout.astro';
} }
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
// this.load.image("bg", '/assets/bgwhite.jpg'); this.load.image("muteIcon", '/assets/svg/mute.svg');
// this.load.image("target1", assetsList.right_image1); this.load.image("cancelIcon", '/assets/svg/cancel.svg');
// this.load.image("target2", '/assets/hay.png'); this.load.image("resetIcon", '/assets/svg/reset.svg');
// this.load.image("target3", '/assets/mat.png'); this.load.image("border", '/assets/svg/border.svg');
// this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("target1", assetsList.right_image1,{ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@@ -297,14 +313,11 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data) // console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 24;
const baseFontSize = 30; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 76, data.description, { const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
blockMatches = [ blockMatches = [
{ {
blockName: "blocks1", blockName: "blocks1",
@@ -341,66 +354,70 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
// console.log('Clicked'); this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
submitButton.setVisible(false); const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitNotic.setVisible(true); submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
// window.location.reload(); this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
// windowLoad(); this.add.image(displayW * 0.9-32, 170, "target1");
submitUserData(); // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
}) this.add.image(displayW * 0.9-32, 340, "target2");
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); // this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW / 6, 30, "topMatch").setScale(); this.add.image(displayW * 0.9-32, 510, "target3");
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale(); // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 170, "target1"), this.add.image(displayW * 0.9-32, 680, "target4");
this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65), // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 340, "target2"),
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 510, "target3"),
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 680, "target4"),
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [ const blocks = [
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
@@ -427,11 +444,20 @@ import Layout from '../../layouts/Layout.astro';
id: "block4", id: "block4",
}, },
]; ];
// submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData(this);
});
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65); const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.5).setScale(1);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
@@ -498,12 +524,12 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}) // })
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
@@ -530,7 +556,23 @@ import Layout from '../../layouts/Layout.astro';
resultView.setVisible(true); resultView.setVisible(true);
} }
}; };
const footerBorder = this.add.graphics();
const footerX = 0; const footerY = window.innerHeight / 1.07;
const footerLineWidth = window.innerWidth;
footerBorder.lineStyle(1, 0x0348A8);
footerBorder.setAlpha(0.2);
footerBorder.beginPath();
footerBorder.moveTo(footerX, footerY);
footerBorder.lineTo(footerX + footerLineWidth, footerY);
footerBorder.strokePath();
let textSize;
if(isMobile){
textSize = 10;
}else{
textSize = 20;
}
this.add.text(displayW / 20, window.innerHeight / 1.05, 'All rights reserved. Copyright@akademy.interakto2024', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
this.add.text(displayW / 1.36, window.innerHeight / 1.05, 'Privacy • Terms of use', {font: ` ${textSize}px Quicksand`, fill: '#002C6970',});
} }
} }
// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", { // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
@@ -560,28 +602,28 @@ import Layout from '../../layouts/Layout.astro';
</script> </script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" > <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
cursor: -webkit-grab; cursor: grab; cursor: -webkit-grab; cursor: grab;
font-family: quicksand; font-family: quicksand;
} }
/* body { /* body {
margin: 0; margin: 0;
background: #020202; background: #020202;
cursor: crosshair; cursor: crosshair;
} */ } */
/* canvas{display:block} */ /* canvas{display:block} */
/* h1 { /* h1 {
position: absolute; position: absolute;
top: 20%; top: 20%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: #fff; color: #fff;
font-family: "Source Sans Pro"; font-family: "Source Sans Pro";
font-size: 5em; font-size: 5em;
font-weight: 900; font-weight: 900;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} */ } */
#overlap { #overlap {
display: none; display: none;

187
src/pages/drag/match_phonics.astro
View File

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -57,7 +58,22 @@ import Layout from '../../layouts/Layout.astro';
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@@ -65,6 +81,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@@ -72,13 +93,6 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -100,6 +114,7 @@ import Layout from '../../layouts/Layout.astro';
return result; return result;
}; };
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [ const targetZones = [
{ {
@@ -233,12 +248,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
// this.load.image("bg", '/assets/bgwhite.jpg'); this.load.image("topMatch", "/assets/top_match.jpg");
// this.load.image("target1", assetsList.right_image1); this.load.image("topLogo", "/assets/top_logo.jpg");
// this.load.image("target2", '/assets/hay.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
// this.load.image("target3", '/assets/mat.png'); this.load.image("muteIcon", '/assets/svg/mute.svg');
// this.load.image("target4", '/assets/star.png'); this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("border", '/assets/squar.png'); this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.image("border", '/assets/svg/pointer.svg');
this.load.spritesheet("target1", assetsList.right_image1,{ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@@ -299,14 +315,11 @@ import Layout from '../../layouts/Layout.astro';
}, },
]; ];
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 24;
const baseFontSize = 20 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 76, data.description, { const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name
@@ -325,104 +338,122 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const url = window.location.href;
const gameName = URL.split('/'); // const gameName = url.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW * 0.9-32, 170, "target1");
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 340, "target2");
// this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 510, "target3");
// this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 680, "target4");
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false); // submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); // submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
this.add.image(displayW * 0.9-32, 170, "target1"),
this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 340, "target2"),
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 510, "target3"),
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 680, "target4"),
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [ const blocks = [
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 120, y: 120,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 280, y: 280,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 460, y: 460,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 640, y: 640,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
blockPointer: 'border',
}, },
]; ];
this.graphics = this.add.graphics(); this.graphics = this.add.graphics();
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); // const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65); const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
this.add.sprite(block.x+100, block.y+35, block.blockPointer, 1).setOrigin(0, 0).setInteractive({ draggable: true });
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(1.3);
@@ -451,7 +482,7 @@ import Layout from '../../layouts/Layout.astro';
if (droppedOnTargetZone) { if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone // Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color this.graphics.lineStyle(6, 0xFF0000); // Red color
this.graphics.moveTo(block.x + 50, block.y + 50); this.graphics.moveTo(block.x + 105, block.y + 47);
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y); this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath(); this.graphics.strokePath();
@@ -473,12 +504,12 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}) // })
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })

187
src/pages/drag/v2.astro
View File

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -57,7 +58,22 @@ import Layout from '../../layouts/Layout.astro';
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
if(isMobile){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@@ -65,6 +81,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@@ -72,13 +93,6 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 70;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -100,6 +114,7 @@ import Layout from '../../layouts/Layout.astro';
return result; return result;
}; };
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [ const targetZones = [
{ {
@@ -233,12 +248,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
// this.load.image("bg", '/assets/bgwhite.jpg'); this.load.image("topMatch", "/assets/top_match.jpg");
// this.load.image("target1", assetsList.right_image1); this.load.image("topLogo", "/assets/top_logo.jpg");
// this.load.image("target2", '/assets/hay.png'); this.load.image("tickIcon", '/assets/svg/tick2.svg');
// this.load.image("target3", '/assets/mat.png'); this.load.image("muteIcon", '/assets/svg/mute.svg');
// this.load.image("target4", '/assets/star.png'); this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("border", '/assets/squar.png'); this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.image("border", '/assets/svg/pointer.svg');
this.load.spritesheet("target1", assetsList.right_image1,{ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@@ -299,14 +315,11 @@ import Layout from '../../layouts/Layout.astro';
}, },
]; ];
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 24;
const baseFontSize = 20 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 76, data.description, { const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23); // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name // Left Image Name
@@ -325,104 +338,122 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const url = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
this.add.image(displayW * 0.9-32, 170, "target1");
// this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 340, "target2");
// this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 510, "target3");
// this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
this.add.image(displayW * 0.9-32, 680, "target4");
// this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false); // submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); // submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
this.add.image(displayW * 0.9-32, 170, "target1"),
this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 340, "target2"),
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 510, "target3"),
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 680, "target4"),
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [ const blocks = [
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 120, y: 120,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 280, y: 280,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 460, y: 460,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
blockPointer: 'border',
}, },
{ {
x: displayW / 15 - 15, x: displayW / 15 - 15,
y: 640, y: 640,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
blockPointer: 'border',
}, },
]; ];
this.graphics = this.add.graphics(); this.graphics = this.add.graphics();
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); // const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65); const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
this.add.sprite(block.x+100, block.y+35, block.blockPointer, 1).setOrigin(0, 0).setInteractive({ draggable: true });
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3); this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(1.3);
@@ -451,7 +482,7 @@ import Layout from '../../layouts/Layout.astro';
if (droppedOnTargetZone) { if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone // Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color this.graphics.lineStyle(6, 0xFF0000); // Red color
this.graphics.moveTo(block.x + 50, block.y + 50); this.graphics.moveTo(block.x + 105, block.y + 47);
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y); this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath(); this.graphics.strokePath();
@@ -473,12 +504,12 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}) // })
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })

152
src/pages/drag/v3.astro
View File

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -57,7 +58,24 @@ import Layout from '../../layouts/Layout.astro';
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
let retryButton;
let blockMatches;
if(isMobile){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@@ -67,6 +85,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth * 0.9 - 40; leftTargetZoneW = window.innerWidth * 0.9 - 40;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@@ -76,13 +99,7 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth * 0.9 - 172; leftTargetZoneW = window.innerWidth * 0.9 - 172;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let resultView;
let scoreTotal = 0; // resultView scoreTotal
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -260,8 +277,13 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
this.load.image("retryIcon", "/assets/svg/retry.svg") this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image("border", '/assets/squar.png'); this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
// this.load.image("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/svg/border.svg');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@@ -339,71 +361,81 @@ import Layout from '../../layouts/Layout.astro';
]; ];
// console.log(data) // console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 24;
const baseFontSize = 30; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 95, data.description, { const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
const blocks = [ const blocks = [
{ {
x: displayW / 2-400, x: displayW / 2-400,
@@ -459,8 +491,8 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone, index) => { targetZones.forEach((targetZone, index) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.65); const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.7).setScale(1);
const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7) const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#60C6CB`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
@@ -508,11 +540,11 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false); // retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;

182
src/pages/drag/v4.astro
View File

@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = { const drawingZone = {
@@ -57,7 +58,24 @@ import Layout from '../../layouts/Layout.astro';
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
height: window.innerHeight / 2, height: window.innerHeight / 2,
}; };
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
let retryButton;
let blockMatches;
if(isMobile){ if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
@@ -67,6 +85,11 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40; rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 100; buttonWidth = 100;
@@ -76,13 +99,6 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172; rightTargetZoneW = window.innerWidth * 0.9 - 172;
} }
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@@ -228,9 +244,17 @@ import Layout from '../../layouts/Layout.astro';
} }
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); // this.load.image("tick", '/assets/tick.png');
this.load.image("retryIcon", "/assets/svg/retry.svg")
this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
// this.load.image("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/squar.png'); this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{ this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@@ -266,25 +290,6 @@ import Layout from '../../layouts/Layout.astro';
} }
create() { create() {
// const borderGraphics = this.add.graphics();
// const borderThickness = 6;
// borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
// const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
// borderGraphics.beginPath();
// borderGraphics.moveTo(borderX, 130);
// borderGraphics.lineTo(borderX, window.innerHeight - 260);
// borderGraphics.strokePath();
// borderGraphics.closePath();
// const borderGraphicsX = this.add.graphics();
// const borderThicknessX = 6;
// borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
// const borderY = window.innerHeight / 5 - borderThickness / 2; // Center the border vertically on the screen
// borderGraphicsX.beginPath();
// borderGraphicsX.moveTo(0, borderY);
// borderGraphicsX.lineTo(window.innerWidth, borderY);
// borderGraphicsX.strokePath();
// borderGraphicsX.closePath();
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const paramsID = params.get('id');
@@ -337,78 +342,90 @@ import Layout from '../../layouts/Layout.astro';
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`}) this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
} }
if(isMobile){ if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`}); this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`}); this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
} else{ } else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`}); this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`}); this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
} }
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text const baseFontSize = 24;
const baseFontSize = 22; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
// Calculate responsive font size based on screen width let wrapWidth;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 95, data.description, { const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const graphics = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
graphics.lineStyle(1, 0x0348A8);
graphics.setAlpha(0.2);
graphics.beginPath();
graphics.moveTo(x, y);
graphics.lineTo(x + lineWidth, y);
graphics.strokePath();
this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", { // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}).setDepth(1); // }).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// window.location.reload(); // window.location.reload();
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
const blocks = [ const blocks = [
{ {
x: displayW / 2 - 200, x: displayW / 2 - 200,
@@ -465,7 +482,7 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = []; const targetZoneBorders = [];
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0).setScale(borderScale); const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.05).setScale(borderScale);
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
@@ -486,7 +503,7 @@ import Layout from '../../layouts/Layout.astro';
if ( if (
Phaser.Geom.Intersects.RectangleToRectangle( Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(), newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100) new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 50, 25)
) )
) { ) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
@@ -505,7 +522,7 @@ import Layout from '../../layouts/Layout.astro';
droppedOnTargetZone = true; droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true); targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(0); targetZoneBorders[targetIndex].setAlpha(0.05);
return; return;
} }
}); });
@@ -524,11 +541,10 @@ import Layout from '../../layouts/Layout.astro';
}); });
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false);
let score = 0; let score = 0;
let counter = 0; let counter = 0;
const isMatch = (blockName, targetName) => { const isMatch = (blockName, targetName) => {

156
src/pages/drawing/drawing_phonics.astro
View File

@@ -9,15 +9,32 @@ import Layout from '../../layouts/Layout.astro';
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: 0, x: 0,
y: 0, y: 0,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
}; };
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@@ -27,6 +44,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;
@@ -36,11 +58,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450; learningWidth = 450;
learningHeight = 400 learningHeight = 400
} }
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
@@ -105,6 +123,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() { function preload() {
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png'); this.load.image('topLogo', '/assets/top_logo.png');
this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
} }
@@ -117,61 +139,82 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const borderBottom = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
borderBottom.lineStyle(1, 0x0348A8);
borderBottom.setAlpha(0.2);
borderBottom.beginPath();
borderBottom.moveTo(x, y);
borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath();
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
});
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}); // });
submitButton.setVisible(true); submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){
@@ -181,9 +224,13 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle); // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
} }
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); let outlineImagePosition;
isMobile ? outlineImagePosition = 0 : outlineImagePosition = 45;
const outlineImage = this.add.image(customWidth / 2 + outlineImagePosition, customHeight / 2, 'outline');
if(isMobile){ if(isMobile){
outlineImage.setDepth(1).setScale(0.31); outlineImage.setDepth(1).setScale(0.33);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.38);
} else{ } else{
outlineImage.setDepth(1).setScale(0.5); outlineImage.setDepth(1).setScale(0.5);
} }
@@ -227,9 +274,10 @@ import Layout from '../../layouts/Layout.astro';
}); });
// Append the color picker to the color container data // Append the color picker to the color container data
colorContainer.appendChild(colorPicker); colorContainer.appendChild(colorPicker);
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// const colors = data.colors; // const colors = data.colors;
// var colors = colorList; // var colors = colorList;
var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700']; // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60; const buttonSize = 60;
const buttonSpacing = 5; const buttonSpacing = 5;
@@ -331,20 +379,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer); document.body.appendChild(buttonsContainer);
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('button'); const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>'; clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// clearButton.style.border = '3px solid blue'; // clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue'; // clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content'; // clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px'; // clearButton.style.marginRight = '10px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '2px 8px'; clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%'; buttonsContainer.style.top = '17%';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
clearButton.style.fontWeight = 'bold'; // clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%'; // clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => { clearButton.addEventListener('click', () => {
clearDrawing(); clearDrawing();
}); });
@@ -453,13 +501,13 @@ import Layout from '../../layouts/Layout.astro';
}; };
// Add a "Save Snapshot" button // Add a "Save Snapshot" button
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
snapHeight = 70; snapHeight = 70;
} }
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons'); snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10); // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive(); snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => { snapshotButton.on('pointerdown', () => {

160
src/pages/drawing/drawing_writo.astro
View File

@@ -9,15 +9,33 @@ import Layout from '../../layouts/Layout.astro';
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</main> </main>
</Layout> </Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline> <script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: 0, x: 0,
y: 0, y: 0,
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
}; };
let topLogoWidth;
let muteIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
if(isMobile){ if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
submitWidth = 250; submitWidth = 250;
submitHeight = 110; submitHeight = 110;
noticeWidth = 100; noticeWidth = 100;
@@ -27,6 +45,11 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 200; learningWidth = 200;
learningHeight = 400 learningHeight = 400
} else { } else {
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
submitWidth = 380; submitWidth = 380;
submitHeight = 95; submitHeight = 95;
noticeWidth = 0; noticeWidth = 0;
@@ -36,11 +59,7 @@ import Layout from '../../layouts/Layout.astro';
learningWidth = 450; learningWidth = 450;
learningHeight = 400 learningHeight = 400
} }
var assetsList = {}
var snapshotButton;
let submitButton;
let formattedDateTime;
let shortUniqueID;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
currentDate = new Date(); currentDate = new Date();
@@ -105,6 +124,10 @@ import Layout from '../../layouts/Layout.astro';
function preload() { function preload() {
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png'); this.load.image('topLogo', '/assets/top_logo.png');
this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg'); this.load.svg('cursorImage', '/assets/svg/pencil.svg');
} }
@@ -117,61 +140,80 @@ import Layout from '../../layouts/Layout.astro';
.then(({ data }) => { .then(({ data }) => {
// console.log(data.colors) // console.log(data.colors)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 22; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 800) * baseFontSize; const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5); let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23) // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
}) })
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const URL = window.location.href; // const URL = window.location.href;
const gameName = URL.split('/'); // const gameName = URL.split('/');
let userData = { // let userData = {
'user': 'drawing@beanstalkedu.com', // 'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3], // 'game_name': gameName[3],
'starts': formattedDateTime, // 'starts': formattedDateTime,
// 'game_start' : gameStartTime, // // 'game_start' : gameStartTime,
}; // };
function submitUserData() { // function submitUserData() {
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type' : 'application/json' // 'Content-Type' : 'application/json'
}, // },
body: JSON.stringify(userData) // body: JSON.stringify(userData)
}) // })
.then(response => { // .then(response => {
if(response.ok){ // if(response.ok){
// console.log('Data Saved', response) // // console.log('Data Saved', response)
} else{ // } else{
// console.log('Something Wrong', response) // // console.log('Something Wrong', response)
} // }
}) // })
.catch(error => { // .catch(error => {
console.error('An error occured', error) // console.error('An error occured', error)
}); // });
}; // };
// window.load // window.load
const borderBottom = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
borderBottom.lineStyle(1, 0x0348A8);
borderBottom.setAlpha(0.2);
borderBottom.beginPath();
borderBottom.moveTo(x, y);
borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath();
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: 'blue' fill: 'blue'
}).setDepth(1); }).setDepth(1);
submitNotic.setVisible(false); submitNotic.setVisible(false);
submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", { // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
font: '600 30px Quicksand', // font: '600 30px Quicksand',
fill: '#fff', // fill: '#fff',
backgroundColor: 'blue', // backgroundColor: 'blue',
padding: { x: 20, y: 10 }, // padding: { x: 20, y: 10 },
}); // });
submitButton.setVisible(true); submitButton.setVisible(true);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitButton.setVisible(false);
submitNotic.setVisible(true); submitNotic.setVisible(true);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){
@@ -181,11 +223,14 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(customWidth / 30, 0, "Drawing", textStyle); // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo'); // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
} }
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline'); let outlineImagePosition; isMobile ? outlineImagePosition = 0 : outlineImagePosition = 45;
const outlineImage = this.add.image(customWidth / 2 + outlineImagePosition, customHeight / 2+0, 'outline');
if(isMobile){ if(isMobile){
outlineImage.setDepth(1).setScale(0.33); outlineImage.setDepth(1).setScale(0.21);
}else if(isTab){
outlineImage.setDepth(1).setScale(0.32);
} else{ } else{
outlineImage.setDepth(1).setScale(0.65); outlineImage.setDepth(1).setScale(0.45);
} }
graphics = this.add.graphics(); graphics = this.add.graphics();
@@ -205,7 +250,7 @@ import Layout from '../../layouts/Layout.astro';
colorPicker.value = selectedColor; colorPicker.value = selectedColor;
colorPicker.className = 'color-picker'; colorPicker.className = 'color-picker';
colorPicker.style.marginBottom = '0px'; colorPicker.style.marginBottom = '0px';
colorPicker.style.marginTop = '-0px'; colorPicker.style.marginTop = '25px';
colorPicker.style.marginRight = '15px'; colorPicker.style.marginRight = '15px';
// colorPicker.style.padding = '1px 1px'; // colorPicker.style.padding = '1px 1px';
// colorPicker.style.outline = 'none'; // colorPicker.style.outline = 'none';
@@ -227,9 +272,10 @@ import Layout from '../../layouts/Layout.astro';
}); });
// Append the color picker to the color container data // Append the color picker to the color container data
colorContainer.appendChild(colorPicker); colorContainer.appendChild(colorPicker);
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
// const colors = data.colors; // const colors = data.colors;
// var colors = colorList; // var colors = colorList;
var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700']; // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 60; const buttonSize = 60;
const buttonSpacing = 5; const buttonSpacing = 5;
@@ -321,7 +367,7 @@ import Layout from '../../layouts/Layout.astro';
buttonsContainer.style.marginTop = '30px'; buttonsContainer.style.marginTop = '30px';
if(!isMobile){ if(!isMobile){
// buttonsContainer.style.position = 'fixed'; // buttonsContainer.style.position = 'fixed';
buttonsContainer.style.top = '10%'; buttonsContainer.style.top = '12%';
buttonsContainer.style.flexDirection = 'column'; buttonsContainer.style.flexDirection = 'column';
buttonsContainer.style.marginLeft = '60px'; buttonsContainer.style.marginLeft = '60px';
buttonsContainer.style.marginTop = '0%'; buttonsContainer.style.marginTop = '0%';
@@ -331,20 +377,20 @@ import Layout from '../../layouts/Layout.astro';
document.body.appendChild(buttonsContainer); document.body.appendChild(buttonsContainer);
// Create the Clear button // Create the Clear button
const clearButton = document.createElement('button'); const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>'; clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
// clearButton.style.border = '3px solid blue'; // clearButton.style.border = '3px solid blue';
clearButton.style.color = 'blue'; // clearButton.style.color = 'blue';
clearButton.style.width = 'fit-content'; // clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px'; // clearButton.style.marginRight = '10px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '2px 8px'; clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%'; buttonsContainer.style.top = '17%';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
} }
clearButton.style.fontWeight = 'bold'; // clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '20%'; // clearButton.style.borderRadius = '20%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390'; // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.addEventListener('click', () => { clearButton.addEventListener('click', () => {
clearDrawing(); clearDrawing();
}); });
@@ -453,13 +499,13 @@ import Layout from '../../layouts/Layout.astro';
}; };
// Add a "Save Snapshot" button // Add a "Save Snapshot" button
if(isMobile){ if(isMobile){
snapWidth = 50; snapWidth = 70;
snapHeight = 70; snapHeight = 70;
} else { } else {
snapWidth = 200; snapWidth = 200;
snapHeight = 70; snapHeight = 70;
} }
snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons'); snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10); // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive(); snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => { snapshotButton.on('pointerdown', () => {

416
src/pages/drawing/index.astro
View File

File diff suppressed because one or more lines are too long

393
src/pages/drawing/v2.astro
View File

File diff suppressed because one or more lines are too long

448
src/pages/drawing/v3.astro
View File

File diff suppressed because one or more lines are too long

2
src/pages/guided-tracing/0.astro
View File

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);

2
src/pages/guided-tracing/1.astro
View File

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);

2
src/pages/guided-tracing/2.astro
View File

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);

2
src/pages/guided-tracing/3.astro
View File

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale);

2
src/pages/guided-tracing/4.astro
View File

@@ -274,7 +274,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale);

2
src/pages/guided-tracing/5.astro
View File

@@ -275,7 +275,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale);

2
src/pages/guided-tracing/6.astro
View File

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale);

2
src/pages/guided-tracing/7.astro
View File

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
}); });
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale);

2
src/pages/guided-tracing/8.astro
View File

@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale);

2
src/pages/guided-tracing/9.astro
View File

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale);

2
src/pages/guided-tracing/A.astro
View File

@@ -264,7 +264,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale);

2
src/pages/guided-tracing/B.astro
View File

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/C.astro
View File

@@ -265,7 +265,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/D.astro
View File

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/E.astro
View File

@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73);

2
src/pages/guided-tracing/F.astro
View File

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale);

2
src/pages/guided-tracing/G.astro
View File

@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/H.astro
View File

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale);

2
src/pages/guided-tracing/I.astro
View File

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : I', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : I', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale);

2
src/pages/guided-tracing/J.astro
View File

@@ -264,7 +264,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/K.astro
View File

@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);

2
src/pages/guided-tracing/L.astro
View File

@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/M.astro
View File

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/N.astro
View File

@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : N', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : N', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale);

2
src/pages/guided-tracing/O.astro
View File

@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : O', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : O', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/P.astro
View File

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/Q.astro
View File

@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/R.astro
View File

@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/S.astro
View File

@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/T.astro
View File

@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);

2
src/pages/guided-tracing/U.astro
View File

@@ -265,7 +265,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20; const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize; const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5); const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale); animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);

Some files were not shown because too many files have changed in this diff Show More