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:b3
Branches Tags
kar:staging kar:dev kar:master kar:prod kar:newb2 kar:newb kar:b4 kar:fetch2 kar:b3 kar:b2

30 Commits
570a12dc5c ... b3

Author SHA1 Message Date
Suvodip
693aeb55c8 Dc 2024-06-29 19:52:00 +05:30
Suvodip
cf51757537 c 2024-06-24 19:15:56 +05:30
Suvodip
5c233bafa6 l 2024-06-24 18:27:14 +05:30
Suvodip
79f158380c submit user data in all games 2024-06-24 18:19:47 +05:30
Suvodip
d7a2533f43 change api endpoint 2024-06-22 19:27:43 +05:30
Suvodip
64ab2bacd4 new desgine and some little changes others game previous desgine 2024-06-21 20:43:54 +05:30
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
146 changed files with 5650 additions and 6966 deletions
Expand all files Collapse all files

1
info.txt Normal file
View File

@@ -0,0 +1 @@
1. Auto brake line Drag v4 Left & Right Heading.

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

379
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
id="g2746" 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"
transform="matrix(1.2849761,0,0,1.2223535,3.1447033,-9.2588114)" d="m 75.184854,71.482044 c -0.03647,-4.052143 0.184035,-60.657513 0.184035,-60.657513"
style="display:inline"> id="path1236-1" /><path
<text 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"
xml:space="preserve" d="m 75.254826,31.391094 c -0.02604,-2.031242 -0.04755,-9.849843 -0.04755,-9.849843"
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" id="path1246-8" /><g
x="48.182404" id="g2746"
y="19.336451" transform="matrix(1.4909448,0,0,1.3647474,1.9112848,-5.5868929)"
id="text2742" style="display:inline"><text
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan xml:space="preserve"
sodipodi:role="line" 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"
id="tspan2740"
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"
<circle id="text2742"
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" transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="circle2744" id="tspan2740"
cx="-49.550514" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
cy="-16.824097" x="48.182404"
r="1.2760839" y="19.336451">1</tspan></text><circle
transform="rotate(-178.67073)" /> 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"
</g> id="circle2744"
<path cx="-49.550514"
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" cy="-16.824097"
id="path57645" r="1.2760839"
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" /> transform="rotate(-178.67073)" /></g><g
<path id="g1"
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"
d="m 49.207097,36.810781 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097" transform="translate(41.504681,0.06850035)"><path
id="path57655" /> 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"
<g 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="g58394" id="path385" /><path
transform="matrix(1.2571663,-0.87051125,0.78952664,1.2406297,-23.391278,79.81556)" 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"> d="m 46.26788,44.378094 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
<text id="path1118" /><g
xml:space="preserve" id="g1126"
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" transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.741712,89.250482)"
x="55.705479" style="display:inline"><text
y="-25.081388" xml:space="preserve"
id="text58390" 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"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan x="55.705479"
sodipodi:role="line" y="-25.081388"
id="tspan58388" id="text1122"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" 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></g><g
id="g5"
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" x="55.705479"
y="-25.081388">2</tspan></text> y="-25.081388"
<circle id="text1240-6"
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" transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="circle58392" id="tspan1238-6"
cx="-55.559937" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
cy="27.578447" x="55.705479"
r="1.2760839" y="-25.081388">2</tspan></text><circle
transform="rotate(-144.24458)" /> 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"
</g> id="circle1242-4"
</svg> 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

337
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;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.26788,44.378094 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.741712,89.250482)"
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></g><g
id="g5"
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" 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="path57645" id="path4236-8"
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 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
<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.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 24.757178,45.663336 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
d="m 49.207097,36.810781 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097" id="path13743-5-0" /><g
id="path57655" /> id="g1244-5"
<g transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-82.591904,87.781631)"
id="g58394" style="display:inline"><text
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="text1240-6"
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="tspan1238-6"
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="circle1242-4"
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> id="g8"><path
</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;paint-order:stroke fill markers"
</svg> 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

339
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;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.26788,44.378094 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.741712,89.250482)"
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></g><g
id="g5"
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" 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="path57645" id="path4236-8"
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 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
<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.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 24.757178,45.663336 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
d="m 49.207097,36.810781 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097" id="path13743-5-0" /><g
id="path57655" /> id="g1244-5"
<g transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-82.591904,87.781631)"
id="g58394" style="display:inline"><text
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="text1240-6"
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="tspan1238-6"
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="circle1242-4"
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> id="g8"
</g> style="display:none"><path
</svg> 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

142
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,38 +44,41 @@
id="arrow2L-61" /> id="arrow2L-61" />
</marker> </marker>
</defs> </defs>
<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"
id="path4236-3"
d="M 66.282481,57.301684 A 14.44182,13.780303 62.359571 0 1 50.393538,63.429223 14.44182,13.780303 62.359571 0 1 40.227923,48.789419 14.44182,13.780303 62.359571 0 1 51.292193,35.713725 14.44182,13.780303 62.359571 0 1 66.708988,44.147715" />
<g <g
id="g2108-2" id="g2">
transform="matrix(1.3525273,0,0,1.1292035,-2.8510023,19.346162)"> <path
<text 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"
xml:space="preserve" id="path4236-3"
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" d="M 66.282481,57.301684 A 14.44182,13.780303 62.359571 0 1 50.393538,63.429223 14.44182,13.780303 62.359571 0 1 40.227923,48.789419 14.44182,13.780303 62.359571 0 1 51.292193,35.713725 14.44182,13.780303 62.359571 0 1 66.708988,44.147715" />
x="48.182404" <g
y="19.336451" id="g2108-2"
id="text9342-7-1" transform="matrix(1.3525273,0,0,1.1292035,-2.8510023,19.346162)">
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan <text
id="tspan9340-5-5" xml:space="preserve"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" 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">1</tspan></text> y="19.336451"
<circle id="text9342-7-1"
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" transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="path9448-3-9" id="tspan9340-5-5"
cx="-49.550514" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
cy="-16.824097" x="48.182404"
r="1.2760839" y="19.336451">1</tspan></text>
transform="rotate(-178.67073)" /> <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="path9448-3-9"
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.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"
id="path13743-5-9" />
</g> </g>
<path
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"
id="path13743-5-9" />
<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

200
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,66 +44,75 @@
id="arrow2L-6-8" /> id="arrow2L-6-8" />
</marker> </marker>
</defs> </defs>
<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" />
<g <g
id="g2746" id="g4">
transform="matrix(1.353893,0,0,1.3502686,-6.9726516,20.293638)" <g
style="display:inline"> id="g2">
<text <path
xml:space="preserve" 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="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" 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"
x="48.182404" id="path1236-7" />
y="19.336451" </g>
id="text2742" <g
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan id="g2746"
id="tspan2740" transform="matrix(1.353893,0,0,1.3502686,-6.9726516,20.293638)"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" 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" x="48.182404"
y="19.336451">1</tspan></text> y="19.336451"
<circle id="text2742"
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" transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="circle2744" id="tspan2740"
cx="-49.550514" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
cy="-16.824097" x="48.182404"
r="1.2760839" y="19.336451">1</tspan></text>
transform="rotate(-178.67073)" /> <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>
<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 47.275855,59.874526 c -1.084812,0.124987 -14.223247,0.279337 -14.223247,0.279337"
id="path1236-9" />
<g <g
id="g1244-0" id="g3">
transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-11.897872,86.152612)" <path
style="display:inline"> 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"
<text d="m 47.275855,59.874526 c -1.084812,0.124987 -14.223247,0.279337 -14.223247,0.279337"
xml:space="preserve" id="path1236-9" />
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" <g
x="54.113926" id="g1244-0"
y="-23.497944" transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-26.338305,86.272949)"
id="text1240-4" style="display:inline">
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan <text
id="tspan1238-8" xml:space="preserve"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" 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">2</tspan></text> y="-23.497944"
<circle id="text1240-4"
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" transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="circle1242-0" id="tspan1238-8"
cx="-54.018658" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
cy="25.946033" x="54.113926"
r="1.2760839" y="-23.497944">2</tspan></text>
transform="rotate(-144.24458)" /> <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-0"
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.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 44.720865,59.777257 c -1.922132,0.03315 -9.321133,0.09483 -9.321133,0.09483"
id="path1246-1" />
</g> </g>
<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"
d="m 35.778518,59.825204 c 1.922394,-0.0095 9.321594,0.01986 9.321594,0.01986"
id="path1246-1" />
<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" />
</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

129
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,72 +124,79 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g380"> id="g1"
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 47.275855,59.874526 c -1.084812,0.124987 -14.223247,0.279337 -14.223247,0.279337"
id="path1236-9" />
<g <g
id="g440" id="g1244-0"
transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-26.338305,86.272949)"
style="display:inline"> 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-4"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1238-8"
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-0"
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.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 44.720865,59.777257 c -1.922132,0.03315 -9.321133,0.09483 -9.321133,0.09483"
id="path1246-1" />
</g>
<g
id="g3"
style="display:inline">
<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"
<text inkscape:export-filename="path1236-7.png"
xml:space="preserve" inkscape:export-xdpi="96"
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" inkscape:export-ydpi="96" />
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>
<g <g
id="g306" id="g2746"
style="display:none"> transform="matrix(1.353893,0,0,1.3502686,-6.9726516,20.293638)"
<path style="display:inline">
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" <text
d="m 47.275855,59.874526 c -1.084812,0.124987 -14.223247,0.279337 -14.223247,0.279337" xml:space="preserve"
id="path1236-9" /> 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"
<g x="48.182404"
id="g1244-0" y="19.336451"
transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-11.897872,86.152612)" id="text2742"
style="display:inline"> transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
<text id="tspan2740"
xml:space="preserve" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
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="48.182404"
x="54.113926" y="19.336451">1</tspan></text>
y="-23.497944" <circle
id="text1240-4" 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"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan id="circle2744"
id="tspan1238-8" cx="-49.550514"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" cy="-16.824097"
x="54.113926" r="1.2760839"
y="-23.497944">2</tspan></text> transform="rotate(-178.67073)" />
<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-0"
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.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"
id="path1246-1" />
</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>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

129
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,72 +124,79 @@
</marker> </marker>
</defs> </defs>
<g <g
id="g380"> id="g1"
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"
d="m 47.275855,59.874526 c -1.084812,0.124987 -14.223247,0.279337 -14.223247,0.279337"
id="path1236-9" />
<g <g
id="g440" id="g1244-0"
style="display:none"> transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-26.338305,86.272949)"
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-4"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1238-8"
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-0"
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.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 44.720865,59.777257 c -1.922132,0.03315 -9.321133,0.09483 -9.321133,0.09483"
id="path1246-1" />
</g>
<g
id="g3"
style="display:none">
<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"
<text inkscape:export-filename="path1236-7.png"
xml:space="preserve" inkscape:export-xdpi="96"
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" inkscape:export-ydpi="96" />
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>
<g <g
id="g306" id="g2746"
transform="matrix(1.353893,0,0,1.3502686,-6.9726516,20.293638)"
style="display:inline"> style="display:inline">
<path <text
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" xml:space="preserve"
d="m 47.275855,59.874526 c -1.084812,0.124987 -14.223247,0.279337 -14.223247,0.279337" 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"
id="path1236-9" /> x="48.182404"
<g y="19.336451"
id="g1244-0" id="text2742"
transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-11.897872,86.152612)" transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
style="display:inline"> id="tspan2740"
<text style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
xml:space="preserve" x="48.182404"
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" y="19.336451">1</tspan></text>
x="54.113926" <circle
y="-23.497944" 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="text1240-4" id="circle2744"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan cx="-49.550514"
id="tspan1238-8" cy="-16.824097"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" r="1.2760839"
x="54.113926" transform="rotate(-178.67073)" />
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-0"
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.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"
id="path1246-1" />
</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>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

211
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,76 +44,74 @@
id="arrow2L-6-6" /> id="arrow2L-6-6" />
</marker> </marker>
</defs> </defs>
<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"
d="m 33.545293,63.643729 c -0.04107,-3.551071 0.207234,-53.15685 0.207234,-53.15685"
id="path1236-1"
sodipodi:nodetypes="cc" />
<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.62642,24.102526 C 33.60019,22.099703 33.57853,14.390494 33.57853,14.390494"
id="path1246-8"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.0094338882"
inkscape:transform-center-y="4.7846689" />
<g <g
id="g2746" id="g2"
transform="matrix(1.5017246,0,0,1.345653,-40.24741,-12.358096)"
style="display:inline"> style="display:inline">
<text <path
xml:space="preserve" 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"
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" d="M 33.679525,71.437205 C 33.642787,67.441756 33.86489,11.628361 33.86489,11.628361"
x="48.182404" id="path1236-1" />
y="19.336451" <path
id="text2742" 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"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan d="m 33.750003,31.907174 c -0.02623,-2.002823 -0.04789,-9.712032 -0.04789,-9.712032"
sodipodi:role="line" id="path1246-8" />
id="tspan2740" <g
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1" id="g2746"
transform="matrix(1.5017246,0,0,1.345653,-40.123827,-4.5534477)"
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" x="48.182404"
y="19.336451">1</tspan></text> y="19.336451"
<circle id="text2742"
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" transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="circle2744" id="tspan2740"
cx="-49.550514" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
cy="-16.824097" x="48.182404"
r="1.2760839" y="19.336451">1</tspan></text>
transform="rotate(-178.67073)" /> <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>
<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"
sodipodi:nodetypes="csc" />
<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"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="-4.9534769"
inkscape:transform-center-y="-2.6843876" />
<g <g
id="g1126" id="g1"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.865295,81.445834)"
style="display:inline"> style="display:inline">
<text <path
xml:space="preserve" 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="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" 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"
x="55.705479" id="path385" />
y="-25.081388" <path
id="text1122" 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"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan d="m 46.26788,44.378094 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
sodipodi:role="line" id="path1118" />
id="tspan1120" <g
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1" id="g1126"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.741712,89.250482)"
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" x="55.705479"
y="-25.081388">2</tspan></text> y="-25.081388"
<circle id="text1122"
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" transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="circle1124" id="tspan1120"
cx="-55.559937" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
cy="27.578447" x="55.705479"
r="1.2760839" y="-25.081388">2</tspan></text>
transform="rotate(-144.24458)" /> <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> </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

286
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" xml:space="preserve"
transform="matrix(1.3106705,0,0,1.3612996,-10.525636,-3.5362715)" 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="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="32.887978"
y="12.794106"
id="text9342"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan9340"
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"
<circle id="text9342-3"
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" transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="path9448" id="tspan9340-5"
cx="-34.067326" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
cy="-10.754245" x="32.887978"
transform="rotate(-178.67073)" y="12.794106">1</tspan></text><circle
r="1.2760839" /> 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"
</g> id="path9448-6"
<path cx="-34.067326"
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" cy="-10.754245"
d="m 33.887502,25.269364 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471" transform="rotate(-178.67073)"
id="path13743" r="1.2760839" /></g><path
sodipodi:nodetypes="cc" /> 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:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" id="path13743-2" /></g><g
d="M 53.121566,28.128633 C 52.980692,28.306461 34.558514,54.770101 34.558514,54.770101" id="g10"
id="path15674" style="display:inline"><path
sodipodi:nodetypes="cc" /> 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"
<g d="M 58.816429,43.133531 C 56.694269,44.70809 37.161399,59.276133 35.853105,60.460409"
id="g21551" id="path15674-9" /><g
transform="matrix(1.0709125,-0.77569872,0.72534851,1.1452501,-18.674442,63.55512)" id="g21551-1"
style="display:inline"> transform="matrix(1.0493551,-0.80462172,0.75631798,1.1250384,-11.344737,78.798908)"
<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="54.113926"
y="-23.497944"
id="text15678"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan15676"
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"
<circle id="text15678-2"
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" transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="circle15680" id="tspan15676-7"
cx="-54.018658" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
cy="25.946033" x="54.113926"
r="1.2760839" y="-23.497944">2</tspan></text><circle
transform="rotate(-144.24458)" /> 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"
</g> id="circle15680-0"
<path cx="-54.018658"
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" cy="25.946033"
d="m 44.081818,40.087032 c 1.269428,-1.730977 6.21501,-8.34923 6.21501,-8.34923" r="1.2760839"
id="path15682" transform="rotate(-144.24458)" /></g><path
sodipodi:nodetypes="cc" 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"
inkscape:transform-center-x="3.0865939" d="m 48.976421,50.160424 c 1.491381,-1.085308 7.26986,-5.212171 7.26986,-5.212171"
inkscape:transform-center-y="4.0947028" /> id="path15682-9" /></g><g
<path id="g11"
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"><path
d="M 40.051918,47.333345 55.451943,64.62565" 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"
id="path1108" d="M 44.011809,54.273077 59.185821,71.265479"
sodipodi:nodetypes="cc" /> 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:#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 53.607403,65.037959 47.429246,58.315175"
d="M 48.935982,58.682648 43.108673,51.653571" id="path9576-6" /><g
id="path9576" id="g21538-0"
sodipodi:nodetypes="cc" transform="matrix(1.2270494,0,0,1.2270494,-27.438185,-36.914981)"
inkscape:transform-center-x="-2.7683077" style="display:inline"><ellipse
inkscape:transform-center-y="3.9580734" /> 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"
<g id="circle9582-6"
id="g21538" cx="-74.661598"
transform="matrix(1.2270494,0,0,1.2270494,-30.897128,-43.158996)" cy="60.70055"
style="display:inline"> transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
<ellipse rx="1.2146922"
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" ry="1.1834064" /><text
id="circle9582" xml:space="preserve"
cx="-74.661598" 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"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" />
<text
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"
x="59.531094"
y="75.579971"
id="text9714"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan9712"
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"
</g> id="text9714-2"
</svg> transform="scale(0.98702867,1.0131418)"><tspan
id="tspan9712-6"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
y="75.579971">3</tspan></text></g></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

71
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 <path
id="g6916" 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"
style="display:inline"> d="m 33.827084,37.541011 c 0.159576,0.909267 -0.09162,26.332747 -0.09162,26.332747"
<path id="path127"
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" sodipodi:nodetypes="cc" />
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283" <text
id="path127" xml:space="preserve"
sodipodi:nodetypes="cc" /> 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"
<text x="33.249947"
xml:space="preserve" y="37.160423"
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" id="text9342"
x="33.553684" transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
y="29.776054" sodipodi:role="line"
id="text9342" id="tspan9340"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
sodipodi:role="line" x="33.249947"
id="tspan9340" y="37.160423">1</tspan></text>
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1" <ellipse
x="33.553684" 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"
y="29.776054">1</tspan></text> id="path9448"
<ellipse cx="-34.482925"
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" cy="-35.764874"
id="path9448" transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
cx="-34.556458" rx="1.5434091"
cy="-28.180008" ry="1.624505" />
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)" <path
rx="1.5434091" 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"
ry="1.624505" /> d="M 33.89306,58.323678 C 33.86234,56.969059 33.88022,51.755065 33.88022,51.755065"
<path id="path13743"
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" sodipodi:nodetypes="cc" />
d="M 33.89306,38.744499 C 33.86234,37.38988 33.88022,32.175886 33.88022,32.175886"
id="path13743"
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

161
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 <path
id="g6916" 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"
style="display:inline"> d="m 33.827084,37.541011 c 0.159576,0.909267 -0.09162,26.332747 -0.09162,26.332747"
<path id="path127" />
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" <text
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283" xml:space="preserve"
id="path127" 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"
sodipodi:nodetypes="cc" /> x="33.249947"
<text y="37.160423"
xml:space="preserve" id="text9342"
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" transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
x="33.553684" id="tspan9340"
y="29.776054" style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
id="text9342" x="33.249947"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan y="37.160423">1</tspan></text>
sodipodi:role="line" <ellipse
id="tspan9340" 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="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1" id="path9448"
x="33.553684" cx="-34.482925"
y="29.776054">1</tspan></text> cy="-35.764874"
<ellipse transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
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" rx="1.5434091"
id="path9448" ry="1.624505" />
cx="-34.556458" <path
cy="-28.180008" 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"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)" d="M 33.89306,58.323678 C 33.86234,56.969059 33.88022,51.755065 33.88022,51.755065"
rx="1.5434091" id="path13743" />
ry="1.624505" />
<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"
d="M 33.89306,38.744499 C 33.86234,37.38988 33.88022,32.175886 33.88022,32.175886"
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

111
public/saveGameData.js Normal file
View File

@@ -0,0 +1,111 @@
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('userid');
let gameId;
let startTime = Date.now();
const url = window.location.href;
const gameName = url.split('/');
const gameType = gameName[3].split('?id=');
let gameVersion;
if(gameType[0] == "guided-tracing"){
gameVersion = gameType[0].split('?')[0];
gameId = gameName[4];
} else if(gameName.length == 5){
gameVersion = gameName[3];
gameId = urlParams.get('id');
}else if(gameName.length == 6){
gameVersion = gameType[0] + '-' + gameName[4];
gameId = urlParams.get('id');
}
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;
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;
}else if( gameType[0] == "guided-tracing"){
// 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 = `guided-tracing-${gameId}.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(`https://phaser-game-api.s38.siliconpin.com/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();
});
};

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

@@ -0,0 +1,286 @@
---
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-1 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="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 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 text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5" class="h-[50px] overflow-y-auto"></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 text-[14px] md:text-2xl">
<img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6" class="h-[50px] overflow-y-auto"></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 gameId = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?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];
function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// 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('redBorder')) {
totalPoints += 1;
}
});
// Move the userData object creation inside the saveUserData function if needed
let userData = {
'gameName': gameName,
'gameID': gameId,
'userId': userId,
'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
};
// console.log(userData);
fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
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;
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>

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

@@ -5,79 +5,89 @@ 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 class="flex flex-row space-x-1 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> </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>
</div> --> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="" class="flex flex-row place-content-between gap-4"> <div id="" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label"> <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label7"></p> <p id="label7" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label"> <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label8"></p> <p id="label8" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label"> <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label9"></p> <p id="label9" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
</div> </div>
</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>
@@ -87,9 +97,11 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const gameId = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -137,26 +149,23 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) { if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) { if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('greenBorder');
} else {
element.classList.add('redBorder'); element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
} }
} else { } else {
element.classList.remove('greenBorder', 'redBorder'); element.classList.remove('redBorder', 'greenBorder');
} }
} }
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// const checkboxValues = { // const checkboxValues = {
// a1: document.getElementById('a1').checked, // a1: document.getElementById('a1').checked,
// a2: document.getElementById('a2').checked, // a2: document.getElementById('a2').checked,
@@ -182,19 +191,20 @@ import Layout from "../../layouts/Layout.astro";
// Count points based on checkbox values and "greenBorder" class // Count points based on checkbox values and "greenBorder" class
let totalPoints = 0; let totalPoints = 0;
checkboxValues.forEach(checkbox => { checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) { if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
totalPoints += 1; totalPoints += 1;
} }
}); });
let userData = { let userData = {
'user': 'tick-v2@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
// 'game_start' : gameStartTime, 'gameTime': timeDifferenceInSeconds,
'score' : totalPoints, 'score': totalPoints,
}; };
// console.log(userData);
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -282,7 +292,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

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

@@ -5,61 +5,71 @@ 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 class="flex flex-row space-x-1 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> </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>
</div> --> </div> -->
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="itemForm" class="flex flex-row place-content-between gap-4"> <div id="itemForm" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
</div> </div>
<div class="flex flex-col gap-6 place-items-center"> <div class="flex flex-col gap-6 place-items-center">
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
</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>
@@ -69,10 +79,12 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const gameId = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
let gameData = null; let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -123,14 +135,12 @@ import Layout from "../../layouts/Layout.astro";
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements // Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']; const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
const checkboxValues = checkboxes.map(id => { const checkboxValues = checkboxes.map(id => {
@@ -153,13 +163,14 @@ import Layout from "../../layouts/Layout.astro";
// Move the userData object creation inside the saveUserData function if needed // Move the userData object creation inside the saveUserData function if needed
let userData = { let userData = {
'user': 'tick-v1@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
'score': totalPoints, // Include the totalPoints in the userData 'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
}; };
// console.log(userData); // console.log(userData);
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -178,7 +189,6 @@ import Layout from "../../layouts/Layout.astro";
}); });
} }
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const contactForm = document.getElementById('contactForm'); const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', async function (event) { contactForm.addEventListener('submit', async function (event) {
@@ -248,7 +258,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

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

@@ -5,79 +5,89 @@ 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 class="flex flex-row space-x-1 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> </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>
</div> --> </div> -->
<p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p> <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<form id="contactForm"> <form id="contactForm">
<div id="" class="flex flex-row place-content-between gap-4"> <div id="" class="flex flex-row place-content-between gap-4">
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a1" class="round-checkbox-label"> <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image1" src="" alt="" draggable="false" class="select-none" /> <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label1"></p> <p id="label1" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/> <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
<label for="a2" class="round-checkbox-label"> <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image2" src="" alt="" draggable="false" class="select-none" /> <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label2"></p> <p id="label2" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/> <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
<label for="a3" class="round-checkbox-label"> <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image3" src="" alt="" draggable="false" class="select-none" /> <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label3"></p> <p id="label3" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/> <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a4" class="round-checkbox-label"> <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image4" src="" alt="" draggable="false" class="select-none" /> <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label4"></p> <p id="label4" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/> <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
<label for="a5" class="round-checkbox-label"> <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image5" src="" alt="" draggable="false" class="select-none" /> <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label5"></p> <p id="label5" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/> <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
<label for="a6" class="round-checkbox-label"> <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image6" src="" alt="" draggable="false" class="select-none" /> <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label6"></p> <p id="label6" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/> <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
</div> </div>
<div class="flex flex-col gap-x-6 gap-y-2 place-items-center"> <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
<label for="a7" class="round-checkbox-label"> <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image7" src="" alt="" draggable="false" class="select-none" /> <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label7"></p> <p id="label7" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/> <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
<label for="a8" class="round-checkbox-label"> <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image8" src="" alt="" draggable="false" class="select-none" /> <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label8"></p> <p id="label8" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/> <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
<label for="a9" class="round-checkbox-label"> <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
<img id="image9" src="" alt="" draggable="false" class="select-none" /> <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
<p id="label9"></p> <p id="label9" class="h-[50px] overflow-y-auto"></p>
</label> </label>
<input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/> <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
</div> </div>
</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>
@@ -87,9 +97,11 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const gameId = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -137,26 +149,24 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) { if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) { if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('greenBorder');
} else {
element.classList.add('redBorder'); element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
} }
} else { } else {
element.classList.remove('greenBorder', 'redBorder'); element.classList.remove('redBorder', 'greenBorder');
} }
} }
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// const checkboxValues = { // const checkboxValues = {
// a1: document.getElementById('a1').checked, // a1: document.getElementById('a1').checked,
// a2: document.getElementById('a2').checked, // a2: document.getElementById('a2').checked,
@@ -182,19 +192,20 @@ import Layout from "../../layouts/Layout.astro";
// Count points based on checkbox values and "greenBorder" class // Count points based on checkbox values and "greenBorder" class
let totalPoints = 0; let totalPoints = 0;
checkboxValues.forEach(checkbox => { checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) { if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
totalPoints += 1; totalPoints += 1;
} }
}); });
let userData = { let userData = {
'user': 'tick-v2@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
// 'game_start' : gameStartTime, 'gameTime': timeDifferenceInSeconds,
'score' : totalPoints, 'score': totalPoints,
}; };
// console.log(userData);
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -282,7 +293,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea_copy{ #LearningArea, #LearningSubArea_copy{

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

@@ -6,17 +6,27 @@ 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 class="flex flex-row space-x-1 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> </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="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
<!-- <p id="LearningSubArea"></p> --> <!-- <p id="LearningSubArea"></p> -->
</div> </div>
<div class="flex flex-col justify-center place-items-center "> <div class="flex flex-col justify-center place-items-center ">
<img class="lg:w-[50%]" draggable="false" id="descImage" src="" alt="" /> <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
<p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p> <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
</div> </div>
<form id="contactForm" class=""> <form id="contactForm" class="">
@@ -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>
@@ -57,10 +67,12 @@ import Layout from "../../layouts/Layout.astro";
</Layout> </Layout>
<script is:inline> <script is:inline>
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const gameId = params.get('id');
const userId = params.get('userid');
let startTime = Date.now();
let gameData = null; let gameData = null;
fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
gameData = data.data; gameData = data.data;
@@ -100,25 +112,22 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) { if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) { if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('greenBorder');
} else {
element.classList.add('redBorder'); element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
} }
} else { } else {
element.classList.remove('greenBorder', 'redBorder'); element.classList.remove('redBorder', 'greenBorder');
} }
} }
let url = window.location.href; let url = window.location.href;
let urlSplit = url.split('/'); let urlSplit = url.split('/');
let gameName = urlSplit[3] + '-' + urlSplit[4]; let gameName = urlSplit[3] + '-' + urlSplit[4];
let formatedDateTime;
window.onload = function () {
let currentTime = new Date();
formatedDateTime = currentTime.toLocaleString();
};
function saveUserData() { function saveUserData() {
const endTime = Date.now();
const timeDifference = endTime - startTime;
const timeDifferenceInSeconds = timeDifference / 1000;
// Get checkbox values and corresponding elements // Get checkbox values and corresponding elements
const checkboxes = ['a1', 'a2', 'a3']; const checkboxes = ['a1', 'a2', 'a3'];
const checkboxValues = checkboxes.map(id => { const checkboxValues = checkboxes.map(id => {
@@ -134,19 +143,20 @@ import Layout from "../../layouts/Layout.astro";
// Count points based on checkbox values and "greenBorder" class // Count points based on checkbox values and "greenBorder" class
let totalPoints = 0; let totalPoints = 0;
checkboxValues.forEach(checkbox => { checkboxValues.forEach(checkbox => {
if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) { if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
totalPoints += 1; totalPoints += 1;
} }
}); });
let userData = { let userData = {
'user': 'tick-v1@beanstalkedu.com', 'gameName': gameName,
'game_name': gameName, 'gameID': gameId,
'starts': formatedDateTime, 'userId': userId,
'score': totalPoints, // Include the totalPoints in the userData 'gameTime': timeDifferenceInSeconds,
'score': totalPoints,
}; };
// console.log(userData); // console.log(userData);
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, { fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -235,7 +245,6 @@ import Layout from "../../layouts/Layout.astro";
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: #7C4C23; color: #7C4C23;
font-size: 20px;
padding-top: 10px; padding-top: 10px;
} }
#LearningArea, #LearningSubArea{ #LearningArea, #LearningSubArea{

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

@@ -49,14 +49,49 @@ 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 isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
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){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -76,13 +111,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 +159,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 +256,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 +357,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 +529,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 +550,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 +569,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 +588,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) => {
@@ -541,7 +605,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
console.log("Score Total", scoreTotal) // console.log("Score Total", scoreTotal)
} }
if(counter === 8){ if(counter === 8){
// console.log(counter) // console.log(counter)

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

@@ -49,14 +49,46 @@ 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 isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
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){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -72,11 +104,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 +276,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,
@@ -290,21 +316,19 @@ import Layout from '../../layouts/Layout.astro';
}); });
} }
create() { create() {
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const paramsID = params.get('id');
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.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; let textSizeScale; if(isMobile){textSizeScale = 540}else{textSizeScale = 940};
// Calculate responsive font size based on screen width const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width let wrapWidth;
const descrptText = this.add.text(screenCenterX, 76, data.description, { if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
font: ` ${responsiveFontSize}px Quicksand`, const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
fill: '#7c4c23',
}).setOrigin(0.5);
blockMatches = [ blockMatches = [
{ {
blockName: "blocks1", blockName: "blocks1",
@@ -341,66 +365,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 +455,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 +535,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();
}) })
@@ -515,10 +552,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter) // console.log(counter)
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match) // console.log(match)
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
console.log("Score Total", scoreTotal) // console.log("Score Total", scoreTotal)
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
resultView.setVisible(false); resultView.setVisible(false);
} }
@@ -530,7 +567,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 +613,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;

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

@@ -49,14 +49,47 @@ 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 isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
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){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -72,13 +105,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 +126,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 +260,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,
@@ -298,15 +326,20 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`, targetName: `target${data.right_match4}`,
}, },
]; ];
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; let wrapWidth;
// Base font size for your text let textSizeScale;
const baseFontSize = 20 if(isMobile){
// Calculate responsive font size based on screen width wrapWidth = 10;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width textSizeScale = 540
const descrptText = this.add.text(screenCenterX, 76, data.description, { }else{
font: ` ${responsiveFontSize}px Quicksand`, wrapWidth = 200;
fill: '#7c4c23', textSizeScale = 940
}).setOrigin(0.5); };
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).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 +358,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 +502,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 +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();
}) })
@@ -491,10 +542,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter) // console.log(counter)
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match) // console.log(match)
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
console.log("Score Total", scoreTotal) // console.log("Score Total", scoreTotal)
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
} }
if(counter === 4){ if(counter === 4){

1
src/pages/drag/testv3.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 = {

5
src/pages/drag/tmp.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 = {
@@ -450,7 +451,7 @@ import Layout from '../../layouts/Layout.astro';
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
console.log(index+1) // console.log(index+1)
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1); const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
// 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) => {
@@ -521,7 +522,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
console.log("Score Total", scoreTotal) // console.log("Score Total", scoreTotal)
} }
if(counter === 8){ if(counter === 8){
// console.log(counter) // console.log(counter)

5
src/pages/drag/tmp2.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 = {
@@ -544,11 +545,11 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter) // console.log(counter)
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match) // console.log(match)
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
console.log("Score Total", scoreTotal) // console.log("Score Total", scoreTotal)
} }
if(counter === 8){ if(counter === 8){
// console.log(counter) // console.log(counter)

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

@@ -49,14 +49,47 @@ 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 isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
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){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -72,13 +105,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 +126,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 +260,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,
@@ -298,15 +326,20 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`, targetName: `target${data.right_match4}`,
}, },
]; ];
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text let wrapWidth;
const baseFontSize = 20 let textSizeScale;
// Calculate responsive font size based on screen width if(isMobile){
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width wrapWidth = 10;
const descrptText = this.add.text(screenCenterX, 76, data.description, { textSizeScale = 540
font: ` ${responsiveFontSize}px Quicksand`, } else{
fill: '#7c4c23', wrapWidth = 200;
}).setOrigin(0.5); textSizeScale = 940
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).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 +358,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 +502,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 +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();
}) })
@@ -491,10 +542,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter) // console.log(counter)
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match) // console.log(match)
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
console.log("Score Total", scoreTotal) // console.log("Score Total", scoreTotal)
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
} }
if(counter === 4){ if(counter === 4){

5
src/pages/drag/v20.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 = {
@@ -491,10 +492,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter) // console.log(counter)
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match) // console.log(match)
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
console.log("Score Total", scoreTotal) // console.log("Score Total", scoreTotal)
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
} }
if(counter === 4){ if(counter === 4){

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

@@ -49,14 +49,51 @@ 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 isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
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;
let retryButtonWidth;
let leftTargetZoneW;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -64,7 +101,7 @@ import Layout from '../../layouts/Layout.astro';
buttonHeight = 0; buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 140; retryButtonWidth = window.innerWidth / 2 - 140;
retryButtonHeight = window.innerHeight - 50; retryButtonHeight = window.innerHeight - 50;
leftTargetZoneW = window.innerWidth * 0.9 - 40; leftTargetZoneW = window.innerWidth * 0.9 - 30;
rightTargetZoneW = window.innerWidth / 6; rightTargetZoneW = window.innerWidth / 6;
} else { } else {
noticeWidth = 100; noticeWidth = 100;
@@ -76,13 +113,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
@@ -114,19 +145,19 @@ import Layout from '../../layouts/Layout.astro';
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 340, y: 330,
name: "target2", name: "target2",
block: null, block: null,
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 510, y: 480,
name: "target3", name: "target3",
block: null, block: null,
}, },
{ {
x: rightTargetZoneW, x: rightTargetZoneW,
y: 680, y: 650,
name: "target4", name: "target4",
block: null, block: null,
}, },
@@ -138,19 +169,19 @@ import Layout from '../../layouts/Layout.astro';
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 340, y: 330,
name: "target6", name: "target6",
block: null, block: null,
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 510, y: 480,
name: "target7", name: "target7",
block: null, block: null,
}, },
{ {
x: leftTargetZoneW, x: leftTargetZoneW,
y: 680, y: 650,
name: "target8", name: "target8",
block: null, block: null,
}, },
@@ -260,8 +291,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,
@@ -302,7 +338,7 @@ import Layout from '../../layouts/Layout.astro';
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({ data }) => { .then(({ data }) => {
console.log(data) // console.log(data)
blockMatches = [ blockMatches = [
{ {
blockName: "blocks1", blockName: "blocks1",
@@ -338,72 +374,91 @@ import Layout from '../../layouts/Layout.astro';
} }
]; ];
// console.log(data) // console.log(data)
let wrapWidth;
let textSizeScale;
if(isMobile){
wrapWidth = 10;
textSizeScale = 540;
} else{
wrapWidth = 200;
textSizeScale = 940
}
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 / textSizeScale) * baseFontSize;
// Calculate responsive font size based on screen width const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 95, data.description, {
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 +514,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 +563,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;
@@ -523,7 +578,7 @@ import Layout from '../../layouts/Layout.astro';
} }
//resultView scoreTotal //resultView scoreTotal
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match) // console.log(match)
if(match){ if(match){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);

5
src/pages/drag/v30.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 = {
@@ -302,7 +303,7 @@ import Layout from '../../layouts/Layout.astro';
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`) fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json()) .then(response => response.json())
.then(({ data }) => { .then(({ data }) => {
console.log(data) // console.log(data)
blockMatches = [ blockMatches = [
{ {
blockName: "blocks1", blockName: "blocks1",
@@ -523,7 +524,7 @@ import Layout from '../../layouts/Layout.astro';
} }
//resultView scoreTotal //resultView scoreTotal
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match) // console.log(match)
if(match){ if(match){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);

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

@@ -49,14 +49,52 @@ 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 isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4, y: window.innerHeight / 4,
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;
let leftTargetZoneW;
let rightTargetZoneW;
let retryButtonWidth;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
}
if(isMobile){ if(isMobile){
noticeWidth = 100; noticeWidth = 100;
noticeHeight = 0; noticeHeight = 0;
@@ -76,13 +114,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
@@ -130,11 +161,7 @@ import Layout from '../../layouts/Layout.astro';
.then(response => response.json()) .then(response => response.json())
.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";} else{imageCustomWidth = "?width=100";};
imageCustomWidth = "?width=100";
} else{
imageCustomWidth = "?width=100";
}
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/" const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
assetsList.element1 = assetsURL + image1 + imageCustomWidth; assetsList.element1 = assetsURL + image1 + imageCustomWidth;
assetsList.element2 = assetsURL + image2 + imageCustomWidth; assetsList.element2 = assetsURL + image2 + imageCustomWidth;
@@ -228,9 +255,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 +301,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');
@@ -327,88 +343,110 @@ import Layout from '../../layouts/Layout.astro';
]; ];
// console.log(data) // console.log(data)
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 - 20, 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 - 20, 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 + 30, window.innerHeight - 20, 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 + 125, window.innerHeight - 20, 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 - 150, 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 - 150, 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 + 30, window.innerHeight - 150, 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 + 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(window.innerWidth / 18, window.innerHeight / 4, 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(window.innerWidth / 1.8, window.innerHeight / 4, data.right_label, {font:`10px`, fill: `#60C6CB`});
} else if(isTab){
this.add.text(window.innerWidth / 17, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
this.add.text(window.innerWidth / 1.8, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
} else{ } else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`}); this.add.text(window.innerWidth / 9, 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(window.innerWidth / 1.39, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
} }
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2; let wrapWidth;
// Base font size for your text let textSizeScale;
const baseFontSize = 22; if(isMobile){
// Calculate responsive font size based on screen width wrapWidth = 10;
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width textSizeScale = 540
const descrptText = this.add.text(screenCenterX, 95, data.description, { } else{
font: ` ${responsiveFontSize}px Quicksand`, wrapWidth = 200;
fill: '#7c4c23', textSizeScale = 940
}).setOrigin(0.5); }
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).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,35 +503,52 @@ 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;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1); let blocksScale;
if(isMobile){
blocksScale = 0.75;
} else{
blocksScale = 1;
}
const newBlock = this.add.sprite(block.x + 10, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(blocksScale);
// 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(blocksScale+.3);
newBlock.x = dragX; newBlock.x = dragX;
newBlock.y = dragY; newBlock.y = dragY;
}); });
newBlock.on("dragend", () => { newBlock.on("dragend", () => {
newBlock.setScale(1.0).setDepth(-2); newBlock.setScale(blocksScale).setDepth(-2);
let droppedOnTargetZone = false; let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => { targetZones.forEach((targetZone, targetIndex) => {
let phaserGeomX, phaserGeomY, blockSetPosition;
if(isMobile){
phaserGeomX = 50;
phaserGeomY = 25;
blockSetPosition = 40;
}else{
phaserGeomX = 200;
phaserGeomY = 100;
blockSetPosition = 50;
}
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, phaserGeomX, phaserGeomY)
) )
) { ) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000` // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
const col = counter % 2; const col = counter % 2;
const row = Math.floor(counter / 2); const row = Math.floor(counter / 2);
newBlock.setPosition(targetZone.x - 50, targetZone.y -50); newBlock.setPosition(targetZone.x - blockSetPosition, targetZone.y - blockSetPosition);
newBlock.disableInteractive(); newBlock.disableInteractive();
targetZone.block = newBlock; targetZone.block = newBlock;
droppedBlocks.push(newBlock); droppedBlocks.push(newBlock);
@@ -505,7 +560,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 +579,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) => {
@@ -541,7 +595,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
console.log("Score Total", scoreTotal) // console.log("Score Total", scoreTotal)
} }
if(counter === 8){ if(counter === 8){
// console.log(counter) // console.log(counter)

3
src/pages/drag/v40.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 = {
@@ -539,7 +540,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){ if(match !== undefined){
scoreTotal++; scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false); resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
console.log("Score Total", scoreTotal) // console.log("Score Total", scoreTotal)
} }
if(counter === 8){ if(counter === 8){
// console.log(counter) // console.log(counter)

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@@ -8,8 +8,9 @@ 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 is:inline> <script src="/saveGameData.js" is:inline></script>
const isMobile = window.innerWidth <= 768; <script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4, y: window.innerHeight / 4,
@@ -41,7 +42,13 @@ import Layout from "../../layouts/Layout.astro";
let isDrawing = false; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let animatedLetter; let animatedLetter;
let gameStartTime = "stat timr here"; let scoreTotal = 0;
// const urls = window.location.href;
// const gameNames = urls.split('/');
// const gameTypes = gameNames[3].split('?id=');
// console.log(gameTypes[0]);
if(isMobile){ if(isMobile){
cloudeSize = 200; cloudeSize = 200;
@@ -120,35 +127,6 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('canvasStand', '/assets/stand2.png'); this.load.image('canvasStand', '/assets/stand2.png');
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -171,10 +149,8 @@ import Layout from "../../layouts/Layout.astro";
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitNotic.setVisible(false);
submitNotic.setVisible(true); submitUserData(this);
// windowLoad();
submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +246,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "stat timr here"; let gameStartTime = "stat timr here";
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -165,13 +138,11 @@ import Layout from "../../layouts/Layout.astro";
} }
}); });
submitButton.setVisible(false); submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => { submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked'); // console.log('Clicked');
submitButton.setVisible(false); submitNotic.setVisible(false);
submitNotic.setVisible(true); submitUserData(this);
// windowLoad();
submitUserData();
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +241,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -124,35 +125,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -175,9 +148,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -274,7 +247,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -125,35 +126,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -176,9 +149,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -275,7 +248,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer; let firstLayer, secondLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -122,35 +123,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -173,9 +146,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -264,7 +237,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer; let firstLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -265,7 +238,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer, fourthLayer; let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -267,7 +240,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -110,41 +111,8 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('bgMobile', '/assets/bgMobile.png'); this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png'); this.load.image('canvasStand', '/assets/stand2.png');
} }
window.onload = function() {
currentDate = new Date();
formattedDateTime = currentDate.toLocaleString();
// console.log("Page loaded on: " + formattedDateTime);
};
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -167,9 +135,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -267,7 +235,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -264,7 +237,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
fill: true fill: true
} }
}); });
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : K", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : K", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
fill: true fill: true
} }
}); });
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : L", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : L", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -266,7 +239,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer, fourthLayer; let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
fill: true fill: true
} }
}); });
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : M", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : M", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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);

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

@@ -8,6 +8,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; const isMobile = window.innerWidth <= 768;
const drawingZone = { const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer;
let graphics; let graphics;
let animatedLetter; let animatedLetter;
let isDrawing = false; let scoreTotal = 0; let isDrawing = false;
let formattedDateTime; let formattedDateTime;
let gameStartTime = "start time here"; let gameStartTime = "start time here";
// let x = 100; // let x = 100;
@@ -121,35 +122,7 @@ import Layout from "../../layouts/Layout.astro";
} }
function create() { function create() {
const URL = window.location.href;
const urlSplit = URL.split('/');
const gameName = urlSplit[3] + '-' + urlSplit[4]
let userData = {
'user': 'guided-tracing@beanstalkedu.com',
'game_name': gameName,
'starts': formattedDateTime,
'game_start' : gameStartTime,
};
function submitUserData() {
// 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){
// console.log('Data Saved', response)
} else{
// console.log('Something Wrong', response)
}
})
.catch(error => {
console.error('An error occured', error)
});
};
const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', { const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
font: '600 20px Quicksand', font: '600 20px Quicksand',
fill: '#05b3a4' fill: '#05b3a4'
@@ -168,13 +141,13 @@ import Layout from "../../layouts/Layout.astro";
fill: true fill: true
} }
}); });
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(false);
// windowLoad(); // windowLoad();
submitUserData(); submitUserData(this);
}) })
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : N", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : N", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +243,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);

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