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

Compare commits

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

3 Commits
b3 ... 570a12dc5c

Author SHA1 Message Date
kar
570a12dc5c Merge pull request 'ch' (#4) from wss14 into master 
Reviewed-on: #4
 2024-03-28 11:18:20 +00:00
kar
4c0d8449b8 Merge pull request 'c' (#3) from wss14 into master 
Reviewed-on: #3
 2024-03-26 05:41:15 +00:00
kar
fe11bf9c77 Merge pull request 'wss14' (#2) from wss14 into master 
Reviewed-on: #2
 2024-03-26 05:28:08 +00:00
146 changed files with 6962 additions and 5646 deletions
Expand all files Collapse all files

1
info.txt
View File

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

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

BIN
public/assets/animated-letter/small_n.mp4 Normal file → Executable 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
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

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

@@ -7,13 +7,92 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-1-7"
id="Arrow2-1"
refX="0"
refY="0"
orient="auto-start-reverse"
@@ -25,11 +104,11 @@
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-9-9" />
id="arrow2L-9" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-3-6-2"
id="Arrow2-3-6"
refX="0"
refY="0"
orient="auto-start-reverse"
@@ -41,35 +120,35 @@
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-9-0" />
id="arrow2L-6-9" />
</marker>
</defs>
<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 33.49094,71.100673 c -0.03821,-4.62453 0.177952,-60.628037 0.177952,-60.628037"
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.925961,62.66356 c -0.03846,-3.805681 0.179081,-49.892837 0.179081,-49.892837"
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-7);paint-order:stroke fill markers"
d="M 33.846126,34.230178 C 33.821526,32.089494 33.801206,23.84963 33.801206,23.84963"
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"
d="m 33.933962,27.117519 c -0.02456,-2.146424 -0.04485,-10.408377 -0.04485,-10.408377"
id="path1246-3" />
<g
id="g2746-62"
transform="matrix(1.409452,0,0,1.4034978,-35.734447,-4.457449)"
id="g2746"
transform="matrix(1.4072602,0,0,1.4072602,-35.010064,-11.673817)"
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"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740-1"
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-8"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
@@ -78,14 +157,14 @@
<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 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" />
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" />
<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-2);paint-order:stroke fill markers"
d="m 50.509565,45.367091 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
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 50.597819,38.356547 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778814"
id="path13743-5-0" />
<g
id="g1244-5"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.839517,87.485383)"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.751263,80.474842)"
style="display:inline">
<text
xml:space="preserve"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

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

@@ -7,13 +7,92 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-1-7"
id="Arrow2-1"
refX="0"
refY="0"
orient="auto-start-reverse"
@@ -25,11 +104,11 @@
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-9-9" />
id="arrow2L-9" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-3-6-2"
id="Arrow2-3-6"
refX="0"
refY="0"
orient="auto-start-reverse"
@@ -41,37 +120,37 @@
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-9-0" />
id="arrow2L-6-9" />
</marker>
</defs>
<g
id="g2">
id="g56231">
<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 33.49094,71.100673 c -0.03821,-4.62453 0.177952,-60.628037 0.177952,-60.628037"
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.925961,62.66356 c -0.03846,-3.805681 0.179081,-49.892837 0.179081,-49.892837"
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-7);paint-order:stroke fill markers"
d="M 33.846126,34.230178 C 33.821526,32.089494 33.801206,23.84963 33.801206,23.84963"
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"
d="m 33.933962,27.117519 c -0.02456,-2.146424 -0.04485,-10.408377 -0.04485,-10.408377"
id="path1246-3" />
<g
id="g2746-62"
transform="matrix(1.409452,0,0,1.4034978,-35.734447,-4.457449)"
id="g2746"
transform="matrix(1.4072602,0,0,1.4072602,-35.010064,-11.673817)"
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"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740-1"
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-8"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
@@ -79,19 +158,19 @@
</g>
</g>
<g
id="g1"
id="g56281"
style="display:none">
<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 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" />
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" />
<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-2);paint-order:stroke fill markers"
d="m 50.509565,45.367091 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
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 50.597819,38.356547 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778814"
id="path13743-5-0" />
<g
id="g1244-5"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.839517,87.485383)"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.751263,80.474842)"
style="display:inline">
<text
xml:space="preserve"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

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

@@ -7,13 +7,92 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-1-7"
id="Arrow2-1"
refX="0"
refY="0"
orient="auto-start-reverse"
@@ -25,11 +104,11 @@
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-9-9" />
id="arrow2L-9" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-3-6-2"
id="Arrow2-3-6"
refX="0"
refY="0"
orient="auto-start-reverse"
@@ -41,38 +120,38 @@
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-9-0" />
id="arrow2L-6-9" />
</marker>
</defs>
<g
id="g2"
id="g56231"
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 33.49094,71.100673 c -0.03821,-4.62453 0.177952,-60.628037 0.177952,-60.628037"
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.925961,62.66356 c -0.03846,-3.805681 0.179081,-49.892837 0.179081,-49.892837"
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-7);paint-order:stroke fill markers"
d="M 33.846126,34.230178 C 33.821526,32.089494 33.801206,23.84963 33.801206,23.84963"
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"
d="m 33.933962,27.117519 c -0.02456,-2.146424 -0.04485,-10.408377 -0.04485,-10.408377"
id="path1246-3" />
<g
id="g2746-62"
transform="matrix(1.409452,0,0,1.4034978,-35.734447,-4.457449)"
id="g2746"
transform="matrix(1.4072602,0,0,1.4072602,-35.010064,-11.673817)"
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"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740-1"
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-8"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
@@ -80,19 +159,19 @@
</g>
</g>
<g
id="g1"
id="g56281"
style="display:inline">
<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 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" />
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" />
<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-2);paint-order:stroke fill markers"
d="m 50.509565,45.367091 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
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 50.597819,38.356547 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778814"
id="path13743-5-0" />
<g
id="g1244-5"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.839517,87.485383)"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-56.751263,80.474842)"
style="display:inline">
<text
xml:space="preserve"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

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

@@ -7,49 +7,90 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xml:space="preserve"
sodipodi:docname="as.svg"
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: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><marker
style="overflow:visible"
id="Arrow2-6"
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-7" /></marker><marker
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
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-3"
refX="0"
@@ -58,191 +99,99 @@
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"><path
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" /></marker><marker
id="arrow2L-6" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-1"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"><path
inkscape:isstock="true"
inkscape:collect="always"
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-9" /></marker><marker
style="overflow:visible"
id="Arrow2-3-6"
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-9" /></marker></defs><g
id="g4"
style="display:none"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 75.184854,71.482044 c -0.03647,-4.052143 0.184035,-60.657513 0.184035,-60.657513"
id="path1236-1" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481786;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 75.254826,31.391094 c -0.02604,-2.031242 -0.04755,-9.849843 -0.04755,-9.849843"
id="path1246-8" /><g
id="g2746"
transform="matrix(1.4909448,0,0,1.3647474,1.9112848,-5.5868929)"
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
id="g1"
style="display:inline"
transform="translate(41.504681,0.06850035)"><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.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" /><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"
id="path4236-8"
d="M 8.1437852,63.944087 A 13.174543,14.063217 10.380298 0 0 22.952834,70.837734 13.174543,14.063217 10.380298 0 0 33.102139,57.023148 13.174543,14.063217 10.380298 0 0 23.110017,43.573003 13.174543,14.063217 10.380298 0 0 8.2183837,51.004057" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.481099;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-6);paint-order:stroke fill markers"
d="m 24.757178,45.663336 c -3.479672,-2.53512 -6.95274,-2.415059 -9.937039,-0.778813"
id="path13743-5-0" /><g
id="g1244-5"
transform="matrix(1.3919656,-0.90209595,0.9428036,1.3318644,-82.591904,87.781631)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479"
y="-25.081388"
id="text1240-6"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1238-6"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="55.705479"
y="-25.081388">2</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle1242-4"
cx="-55.559937"
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" /></g></g><g
id="g8"><path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path57645"
d="M 66.345062,63.884771 A 14.04826,13.298772 83.189707 0 1 51.412762,70.930244 14.04826,13.298772 83.189707 0 1 41.192253,57.212847 14.04826,13.298772 83.189707 0 1 51.273838,43.656999 14.04826,13.298772 83.189707 0 1 66.279132,50.940698" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="m 49.415379,44.064902 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" /><g
id="g2"
transform="matrix(1.5730821,0,0,1.5086122,-17.02496,17.771258)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g></g><g
id="g7"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
id="arrow2L-7" />
</marker>
</defs>
<path
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"
d="m 66.046726,63.742318 c -0.04959,-4.073392 0.230883,-53.402544 0.230883,-53.402544"
id="path1236-9"
sodipodi:nodetypes="cc" />
<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.380273,26.571294 C 66.348609,24.27388 66.322449,15.430741 66.322449,15.430741"
id="path1246-8"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.0088349"
inkscape:transform-center-y="5.1277257" />
<g
id="g2746"
transform="matrix(1.2849761,0,0,1.2223535,3.1447033,-9.2588114)"
style="display:inline">
<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>
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
sodipodi:role="line"
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path57645"
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" />
<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.207097,36.810781 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" />
<g
id="g58394"
transform="matrix(1.2571663,-0.87051125,0.78952664,1.2406297,-23.391278,79.81556)"
style="display:inline">
<text
xml:space="preserve"
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="text58390"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan58388"
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="circle58392"
cx="-55.559937"
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

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

@@ -7,49 +7,90 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xml:space="preserve"
sodipodi:docname="as.svg"
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: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><marker
style="overflow:visible"
id="Arrow2-6"
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-7" /></marker><marker
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
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-3"
refX="0"
@@ -58,192 +99,106 @@
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"><path
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" /></marker><marker
id="arrow2L-6" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-1"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"><path
inkscape:isstock="true"
inkscape:collect="always"
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-9" /></marker><marker
style="overflow:visible"
id="Arrow2-3-6"
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-9" /></marker></defs><g
id="g4"
style="display:none"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 75.184854,71.482044 c -0.03647,-4.052143 0.184035,-60.657513 0.184035,-60.657513"
id="path1236-1" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481786;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 75.254826,31.391094 c -0.02604,-2.031242 -0.04755,-9.849843 -0.04755,-9.849843"
id="path1246-8" /><g
id="arrow2L-7" />
</marker>
</defs>
<g
id="g58761">
<path
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"
d="m 66.046726,63.742318 c -0.04959,-4.073392 0.230883,-53.402544 0.230883,-53.402544"
id="path1236-9"
sodipodi:nodetypes="cc" />
<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.380273,26.571294 C 66.348609,24.27388 66.322449,15.430741 66.322449,15.430741"
id="path1246-8"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.0088349"
inkscape:transform-center-y="5.1277257" />
<g
id="g2746"
transform="matrix(1.4909448,0,0,1.3647474,1.9112848,-5.5868929)"
style="display:inline"><text
transform="matrix(1.2849761,0,0,1.2223535,3.1447033,-9.2588114)"
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
sodipodi:role="line"
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
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
id="g1"
style="display:inline"
transform="translate(41.504681,0.06850035)"><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.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" /><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
transform="rotate(-178.67073)" />
</g>
</g>
<g
id="g58705"
style="display:none">
<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
id="path57645"
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" />
<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.207097,36.810781 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" />
<g
id="g58394"
transform="matrix(1.2571663,-0.87051125,0.78952664,1.2406297,-23.391278,79.81556)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479"
y="-25.081388"
id="text1240-6"
id="text58390"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1238-6"
sodipodi:role="line"
id="tspan58388"
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
y="-25.081388">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle1242-4"
id="circle58392"
cx="-55.559937"
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" /></g></g><g
id="g8"><path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path57645"
d="M 66.345062,63.884771 A 14.04826,13.298772 83.189707 0 1 51.412762,70.930244 14.04826,13.298772 83.189707 0 1 41.192253,57.212847 14.04826,13.298772 83.189707 0 1 51.273838,43.656999 14.04826,13.298772 83.189707 0 1 66.279132,50.940698" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="m 49.415379,44.064902 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" /><g
id="g2"
transform="matrix(1.5730821,0,0,1.5086122,-17.02496,17.771258)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g></g><g
id="g7"
style="display:none"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855383,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /></g></svg>
transform="rotate(-144.24458)" />
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

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

@@ -7,49 +7,90 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xml:space="preserve"
sodipodi:docname="as.svg"
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: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><marker
style="overflow:visible"
id="Arrow2-6"
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-7" /></marker><marker
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
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-3"
refX="0"
@@ -58,193 +99,107 @@
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"><path
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" /></marker><marker
id="arrow2L-6" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-1"
id="Arrow2-6"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"><path
inkscape:isstock="true"
inkscape:collect="always"
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-9" /></marker><marker
style="overflow:visible"
id="Arrow2-3-6"
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-9" /></marker></defs><g
id="g4"
style="display:none"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 75.184854,71.482044 c -0.03647,-4.052143 0.184035,-60.657513 0.184035,-60.657513"
id="path1236-1" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.481786;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-36);paint-order:stroke fill markers"
d="m 75.254826,31.391094 c -0.02604,-2.031242 -0.04755,-9.849843 -0.04755,-9.849843"
id="path1246-8" /><g
id="arrow2L-7" />
</marker>
</defs>
<g
id="g58761"
style="display:none">
<path
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"
d="m 66.046726,63.742318 c -0.04959,-4.073392 0.230883,-53.402544 0.230883,-53.402544"
id="path1236-9"
sodipodi:nodetypes="cc" />
<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.380273,26.571294 C 66.348609,24.27388 66.322449,15.430741 66.322449,15.430741"
id="path1246-8"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.0088349"
inkscape:transform-center-y="5.1277257" />
<g
id="g2746"
transform="matrix(1.4909448,0,0,1.3647474,1.9112848,-5.5868929)"
style="display:inline"><text
transform="matrix(1.2849761,0,0,1.2223535,3.1447033,-9.2588114)"
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
sodipodi:role="line"
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
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
id="g1"
style="display:inline"
transform="translate(41.504681,0.06850035)"><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.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" /><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
transform="rotate(-178.67073)" />
</g>
</g>
<g
id="g58705"
style="display:inline">
<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
id="path57645"
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" />
<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.207097,36.810781 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" />
<g
id="g58394"
transform="matrix(1.2571663,-0.87051125,0.78952664,1.2406297,-23.391278,79.81556)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.31549px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="55.705479"
y="-25.081388"
id="text1240-6"
id="text58390"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan1238-6"
sodipodi:role="line"
id="tspan58388"
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
y="-25.081388">2</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle1242-4"
id="circle58392"
cx="-55.559937"
cy="27.578447"
r="1.2760839"
transform="rotate(-144.24458)" /></g></g><g
id="g8"
style="display:none"><path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path57645"
d="M 66.345062,63.884771 A 14.04826,13.298772 83.189707 0 1 51.412762,70.930244 14.04826,13.298772 83.189707 0 1 41.192253,57.212847 14.04826,13.298772 83.189707 0 1 51.273838,43.656999 14.04826,13.298772 83.189707 0 1 66.279132,50.940698" /><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.354143;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3);paint-order:stroke fill markers"
d="m 49.415379,44.064902 c 3.242855,-1.399649 6.109266,-1.095812 8.358098,0.149097"
id="path57655" /><g
id="g2"
transform="matrix(1.5730821,0,0,1.5086122,-17.02496,17.771258)"
style="display:inline"><text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text><circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" /></g></g><g
id="g7"
style="display:inline"><path
style="display:inline;fill:#009e40;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7.047;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 66.268155,71.59369 c -0.0438,-4.654626 0.20379,-61.022576 0.20379,-61.022576"
id="path1236-9" /><text
xml:space="preserve"
style="font-size:3.80784px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="63.954109"
y="20.842781"
id="text3"
transform="matrix(1.0219114,-0.00211637,0.00221361,0.97855383,0,0)"><tspan
id="tspan3"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.190993;stroke-dasharray:none;stroke-opacity:1"
x="63.954109"
y="20.842781">2</tspan></text><path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#fefdfd;stroke-width:0.565155;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-6);paint-order:stroke fill markers"
d="m 66.588555,33.825415 c -0.03166,-2.297414 -0.05782,-11.140553 -0.05782,-11.140553"
id="path1246-8-5" /><ellipse
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#f9f6f6;stroke-width:0.230232;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
cx="-67.118843"
cy="-17.201206"
transform="matrix(-0.99962271,-0.02746689,0.02999955,-0.99954991,0,0)"
rx="2.1452827"
ry="2.0528049" /></g></svg>
transform="rotate(-144.24458)" />
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

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

@@ -7,7 +7,7 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
sodipodi:docname="es.svg"
sodipodi:docname="as.svg"
inkscape:export-filename="ds_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
@@ -159,7 +159,7 @@
id="path1236-1" />
<g
id="g1244-4"
transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-28.786873,73.145439)"
transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-6.1635281,72.543754)"
style="display:inline">
<text
xml:space="preserve"
@@ -182,6 +182,6 @@
</g>
<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"
d="M 56.028776,45.18763 C 54.054458,45.16698 46.456114,45.037749 46.456114,45.037749"
d="m 54.779931,44.658047 c 1.974412,-0.0072 9.573823,0.01486 9.573823,0.01486"
id="path1246-7" />
</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
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.1 KiB

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

@@ -7,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -44,41 +123,38 @@
id="arrow2L-61" />
</marker>
</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
id="g2">
<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
id="g2108-2"
transform="matrix(1.3525273,0,0,1.1292035,-2.8510023,19.346162)">
<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"
id="g2108-2"
transform="matrix(1.3525273,0,0,1.1292035,-2.8510023,19.346162)">
<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="text9342-7-1"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan9340-5-5"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451"
id="text9342-7-1"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan9340-5-5"
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="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" />
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="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
id="g1"
id="g61662"
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"
@@ -86,7 +162,7 @@
id="path1236-1" />
<g
id="g1244-4"
transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-28.786873,73.145439)"
transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-6.1635281,72.543754)"
style="display:inline">
<text
xml:space="preserve"
@@ -109,7 +185,7 @@
</g>
<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"
d="M 56.028776,45.18763 C 54.054458,45.16698 46.456114,45.037749 46.456114,45.037749"
d="m 54.779931,44.658047 c 1.974412,-0.0072 9.573823,0.01486 9.573823,0.01486"
id="path1246-7" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

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

@@ -7,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -45,7 +124,7 @@
</marker>
</defs>
<g
id="g2"
id="g61882"
style="display:none">
<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"
@@ -79,7 +158,7 @@
id="path13743-5-9" />
</g>
<g
id="g1"
id="g61662"
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"
@@ -87,7 +166,7 @@
id="path1236-1" />
<g
id="g1244-4"
transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-28.786873,73.145439)"
transform="matrix(1.1016092,-0.64486304,0.74614002,0.95208289,-6.1635281,72.543754)"
style="display:inline">
<text
xml:space="preserve"
@@ -110,7 +189,7 @@
</g>
<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"
d="M 56.028776,45.18763 C 54.054458,45.16698 46.456114,45.037749 46.456114,45.037749"
d="m 54.779931,44.658047 c 1.974412,-0.0072 9.573823,0.01486 9.573823,0.01486"
id="path1246-7" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

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

@@ -7,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -44,75 +123,66 @@
id="arrow2L-6-8" />
</marker>
</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
id="g4">
<g
id="g2">
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 40.987557,89.148649 C 40.880435,87.700565 40.760964,58.387914 40.819142,45.235628 40.881098,31.228446 60.900498,32.941912 59.37793,46.216072"
id="path1236-7" />
</g>
<g
id="g2746"
transform="matrix(1.353893,0,0,1.3502686,-6.9726516,20.293638)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="g2746"
transform="matrix(1.353893,0,0,1.3502686,-6.9726516,20.293638)"
style="display:inline">
<text
xml:space="preserve"
style="font-size:2.7912px;display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#f9f4f4;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
x="48.182404"
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#fefdfd;stroke-width:0.430285;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker-start:url(#Arrow2-3-5);paint-order:stroke fill markers"
d="m 51.741347,36.394533 c 3.846292,0.268023 6.157268,2.347049 7.259149,5.181348"
id="path13743-5-4" />
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:#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
id="g3">
<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
id="g1244-0"
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"
id="g1244-0"
transform="matrix(0.89961144,-0.60769192,0.60932315,0.89720307,-11.897872,86.152612)"
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"
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" />
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" />
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.4 KiB

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

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

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

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

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

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

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

@@ -7,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -17,9 +96,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -33,9 +115,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -44,74 +129,76 @@
id="arrow2L-6-6" />
</marker>
</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
id="g2"
id="g2746"
transform="matrix(1.5017246,0,0,1.345653,-40.24741,-12.358096)"
style="display:inline">
<path
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.679525,71.437205 C 33.642787,67.441756 33.86489,11.628361 33.86489,11.628361"
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.750003,31.907174 c -0.02623,-2.002823 -0.04789,-9.712032 -0.04789,-9.712032"
id="path1246-8" />
<g
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"
<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
sodipodi:role="line"
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"
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>
y="19.336451">1</tspan></text>
<circle
style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#f9f6f6;stroke-width:0.14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="circle2744"
cx="-49.550514"
cy="-16.824097"
r="1.2760839"
transform="rotate(-178.67073)" />
</g>
<path
style="display:inline;fill:none;fill-opacity:1;fill-rule: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
id="g1"
id="g1126"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.865295,81.445834)"
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.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" />
<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"
<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
sodipodi:role="line"
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"
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>
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>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

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

@@ -1,117 +0,0 @@
<?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

Before

Width:  |  Height:  |  Size: 5.2 KiB

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

@@ -1,117 +0,0 @@
<?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

Before

Width:  |  Height:  |  Size: 5.2 KiB

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

@@ -7,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -17,9 +96,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -33,9 +115,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -45,18 +130,23 @@
</marker>
</defs>
<g
id="g2">
id="g1851"
style="display:inline">
<path
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.679525,71.437205 C 33.642787,67.441756 33.86489,11.628361 33.86489,11.628361"
id="path1236-1" />
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.750003,31.907174 c -0.02623,-2.002823 -0.04789,-9.712032 -0.04789,-9.712032"
id="path1246-8" />
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
id="g2746"
transform="matrix(1.5017246,0,0,1.345653,-40.123827,-4.5534477)"
transform="matrix(1.5017246,0,0,1.345653,-40.24741,-12.358096)"
style="display:inline">
<text
xml:space="preserve"
@@ -65,6 +155,7 @@
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
@@ -79,19 +170,23 @@
</g>
</g>
<g
id="g1"
id="g1807"
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.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" />
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.26788,44.378094 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
id="path1118" />
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
id="g1126"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.741712,89.250482)"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.865295,81.445834)"
style="display:inline">
<text
xml:space="preserve"
@@ -100,6 +195,7 @@
y="-25.081388"
id="text1122"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
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"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

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

@@ -7,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -17,9 +96,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -33,9 +115,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -45,19 +130,23 @@
</marker>
</defs>
<g
id="g2"
id="g1851"
style="display:none">
<path
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.679525,71.437205 C 33.642787,67.441756 33.86489,11.628361 33.86489,11.628361"
id="path1236-1" />
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.750003,31.907174 c -0.02623,-2.002823 -0.04789,-9.712032 -0.04789,-9.712032"
id="path1246-8" />
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
id="g2746"
transform="matrix(1.5017246,0,0,1.345653,-40.123827,-4.5534477)"
transform="matrix(1.5017246,0,0,1.345653,-40.24741,-12.358096)"
style="display:inline">
<text
xml:space="preserve"
@@ -66,6 +155,7 @@
y="19.336451"
id="text2742"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
sodipodi:role="line"
id="tspan2740"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="48.182404"
@@ -80,19 +170,23 @@
</g>
</g>
<g
id="g1"
id="g1807"
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.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" />
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.26788,44.378094 c -4.559582,0.05579 -7.570594,2.107967 -9.267114,5.026196"
id="path1118" />
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
id="g1126"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.741712,89.250482)"
transform="matrix(1.1799302,-0.80541095,0.79918818,1.1891176,-45.865295,81.445834)"
style="display:inline">
<text
xml:space="preserve"
@@ -101,6 +195,7 @@
y="-25.081388"
id="text1122"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
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"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

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

@@ -7,106 +7,214 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xml:space="preserve"
sodipodi:docname="as.svg"
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:svg="http://www.w3.org/2000/svg"><defs
id="defs2"><linearGradient
id="swatch6"><stop
style="stop-color:#808080;stop-opacity:1;"
offset="0"
id="stop6" /></linearGradient><marker
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
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-36-3"
id="Arrow2-36"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"><path
inkscape:isstock="true"
inkscape:collect="always"
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-6" /></marker></defs><g
id="g9"
style="display:inline"><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"
d="M 33.897256,10.914479 C 33.616971,9.8851391 33.786514,71.343218 33.786514,71.343218"
id="path127-7" /><g
id="g4983-5"
transform="matrix(1.5341872,0,0,1.4840821,-18.065036,-1.352247)"
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"
id="arrow2L-0" />
</marker>
</defs>
<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"
d="m 33.921393,11.147309 c -0.314864,-0.910336 -0.124404,53.44247 -0.124404,53.44247"
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"
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"
y="12.794106"
id="text9342-3"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan9340-5"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.14;stroke-dasharray:none;stroke-opacity:1"
x="32.887978"
y="12.794106">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="path9448-6"
cx="-34.067326"
cy="-10.754245"
transform="rotate(-178.67073)"
r="1.2760839" /></g><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-36-3);paint-order:stroke fill markers"
d="m 33.859011,29.420135 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
id="path13743-2" /></g><g
id="g10"
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 58.816429,43.133531 C 56.694269,44.70809 37.161399,59.276133 35.853105,60.460409"
id="path15674-9" /><g
id="g21551-1"
transform="matrix(1.0493551,-0.80462172,0.75631798,1.1250384,-11.344737,78.798908)"
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"
y="12.794106">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="path9448"
cx="-34.067326"
cy="-10.754245"
transform="rotate(-178.67073)"
r="1.2760839" />
</g>
<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-36);paint-order:stroke fill markers"
d="m 33.887502,25.269364 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
id="path13743"
sodipodi:nodetypes="cc" />
<path
style="display:inline;fill:#b16c57;fill-opacity:1;fill-rule:nonzero;stroke:#b16c57;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 53.121566,28.128633 C 52.980692,28.306461 34.558514,54.770101 34.558514,54.770101"
id="path15674"
sodipodi:nodetypes="cc" />
<g
id="g21551"
transform="matrix(1.0709125,-0.77569872,0.72534851,1.1452501,-18.674442,63.55512)"
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="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"
y="-23.497944"
id="text15678-2"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan15676-7"
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="circle15680-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.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"
d="m 48.976421,50.160424 c 1.491381,-1.085308 7.26986,-5.212171 7.26986,-5.212171"
id="path15682-9" /></g><g
id="g11"
style="display:inline"><path
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"
d="M 44.011809,54.273077 59.185821,71.265479"
id="path1108-3" /><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"
d="M 53.607403,65.037959 47.429246,58.315175"
id="path9576-6" /><g
id="g21538-0"
transform="matrix(1.2270494,0,0,1.2270494,-27.438185,-36.914981)"
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"
id="circle9582-6"
cx="-74.661598"
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"
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="circle15680"
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-36);paint-order:stroke fill markers"
d="m 44.081818,40.087032 c 1.269428,-1.730977 6.21501,-8.34923 6.21501,-8.34923"
id="path15682"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="3.0865939"
inkscape:transform-center-y="4.0947028" />
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.90976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 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"
id="circle9582"
cx="-74.661598"
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"
y="75.579971"
id="text9714-2"
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>
y="75.579971">3</tspan></text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

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

@@ -7,106 +7,225 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xml:space="preserve"
sodipodi:docname="as.svg"
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:svg="http://www.w3.org/2000/svg"><defs
id="defs2"><linearGradient
id="swatch6"><stop
style="stop-color:#808080;stop-opacity:1;"
offset="0"
id="stop6" /></linearGradient><marker
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
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-36-3"
id="Arrow2-36"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"><path
inkscape:isstock="true"
inkscape:collect="always"
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-6" /></marker></defs><g
id="g9"
style="display:inline"><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"
d="M 33.897256,10.914479 C 33.616971,9.8851391 33.786514,71.343218 33.786514,71.343218"
id="path127-7" /><g
id="g4983-5"
transform="matrix(1.5341872,0,0,1.4840821,-18.065036,-1.352247)"
style="display:inline"><text
id="arrow2L-0" />
</marker>
</defs>
<g
id="g5482">
<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"
d="m 33.921393,11.147309 c -0.314864,-0.910336 -0.124404,53.44247 -0.124404,53.44247"
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"
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-3"
id="text9342"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan9340-5"
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"
y="12.794106">1</tspan></text><circle
y="12.794106">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="path9448-6"
id="path9448"
cx="-34.067326"
cy="-10.754245"
transform="rotate(-178.67073)"
r="1.2760839" /></g><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-36-3);paint-order:stroke fill markers"
d="m 33.859011,29.420135 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
id="path13743-2" /></g><g
id="g10"
style="display:none"><path
r="1.2760839" />
</g>
<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-36);paint-order:stroke fill markers"
d="m 33.887502,25.269364 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
id="path13743"
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"
d="M 58.816429,43.133531 C 56.694269,44.70809 37.161399,59.276133 35.853105,60.460409"
id="path15674-9" /><g
id="g21551-1"
transform="matrix(1.0493551,-0.80462172,0.75631798,1.1250384,-11.344737,78.798908)"
style="display:inline"><text
d="M 53.121566,28.128633 C 52.980692,28.306461 34.558514,54.770101 34.558514,54.770101"
id="path15674"
sodipodi:nodetypes="cc" />
<g
id="g21551"
transform="matrix(1.0709125,-0.77569872,0.72534851,1.1452501,-18.674442,63.55512)"
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="text15678-2"
id="text15678"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan15676-7"
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"
y="-23.497944">2</tspan></text><circle
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="circle15680-0"
id="circle15680"
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.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"
d="m 48.976421,50.160424 c 1.491381,-1.085308 7.26986,-5.212171 7.26986,-5.212171"
id="path15682-9" /></g><g
id="g11"
style="display:none"><path
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"
d="M 44.011809,54.273077 59.185821,71.265479"
id="path1108-3" /><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"
d="M 53.607403,65.037959 47.429246,58.315175"
id="path9576-6" /><g
id="g21538-0"
transform="matrix(1.2270494,0,0,1.2270494,-27.438185,-36.914981)"
style="display:inline"><ellipse
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-36);paint-order:stroke fill markers"
d="m 44.081818,40.087032 c 1.269428,-1.730977 6.21501,-8.34923 6.21501,-8.34923"
id="path15682"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="3.0865939"
inkscape:transform-center-y="4.0947028" />
</g>
<g
id="g5406"
style="display:none">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.90976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 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"
id="circle9582-6"
id="circle9582"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" /><text
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-2"
id="text9714"
transform="scale(0.98702867,1.0131418)"><tspan
id="tspan9712-6"
sodipodi:role="line"
id="tspan9712"
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>
y="75.579971">3</tspan></text>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

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

@@ -7,106 +7,226 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xml:space="preserve"
sodipodi:docname="as.svg"
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:svg="http://www.w3.org/2000/svg"><defs
id="defs2"><linearGradient
id="swatch6"><stop
style="stop-color:#808080;stop-opacity:1;"
offset="0"
id="stop6" /></linearGradient><marker
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
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-36-3"
id="Arrow2-36"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"><path
inkscape:isstock="true"
inkscape:collect="always"
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-6" /></marker></defs><g
id="g9"
style="display:none"><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"
d="M 33.897256,10.914479 C 33.616971,9.8851391 33.786514,71.343218 33.786514,71.343218"
id="path127-7" /><g
id="g4983-5"
transform="matrix(1.5341872,0,0,1.4840821,-18.065036,-1.352247)"
style="display:inline"><text
id="arrow2L-0" />
</marker>
</defs>
<g
id="g5482"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.921393,11.147309 c -0.314864,-0.910336 -0.124404,53.44247 -0.124404,53.44247"
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"
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-3"
id="text9342"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan9340-5"
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"
y="12.794106">1</tspan></text><circle
y="12.794106">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="path9448-6"
id="path9448"
cx="-34.067326"
cy="-10.754245"
transform="rotate(-178.67073)"
r="1.2760839" /></g><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-36-3);paint-order:stroke fill markers"
d="m 33.859011,29.420135 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
id="path13743-2" /></g><g
id="g10"
style="display:inline"><path
r="1.2760839" />
</g>
<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-36);paint-order:stroke fill markers"
d="m 33.887502,25.269364 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
id="path13743"
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"
d="M 58.816429,43.133531 C 56.694269,44.70809 37.161399,59.276133 35.853105,60.460409"
id="path15674-9" /><g
id="g21551-1"
transform="matrix(1.0493551,-0.80462172,0.75631798,1.1250384,-11.344737,78.798908)"
style="display:inline"><text
d="M 53.121566,28.128633 C 52.980692,28.306461 34.558514,54.770101 34.558514,54.770101"
id="path15674"
sodipodi:nodetypes="cc" />
<g
id="g21551"
transform="matrix(1.0709125,-0.77569872,0.72534851,1.1452501,-18.674442,63.55512)"
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="text15678-2"
id="text15678"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan15676-7"
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"
y="-23.497944">2</tspan></text><circle
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="circle15680-0"
id="circle15680"
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.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"
d="m 48.976421,50.160424 c 1.491381,-1.085308 7.26986,-5.212171 7.26986,-5.212171"
id="path15682-9" /></g><g
id="g11"
style="display:none"><path
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"
d="M 44.011809,54.273077 59.185821,71.265479"
id="path1108-3" /><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"
d="M 53.607403,65.037959 47.429246,58.315175"
id="path9576-6" /><g
id="g21538-0"
transform="matrix(1.2270494,0,0,1.2270494,-27.438185,-36.914981)"
style="display:inline"><ellipse
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-36);paint-order:stroke fill markers"
d="m 44.081818,40.087032 c 1.269428,-1.730977 6.21501,-8.34923 6.21501,-8.34923"
id="path15682"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="3.0865939"
inkscape:transform-center-y="4.0947028" />
</g>
<g
id="g5406"
style="display:none">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.90976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 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"
id="circle9582-6"
id="circle9582"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" /><text
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-2"
id="text9714"
transform="scale(0.98702867,1.0131418)"><tspan
id="tspan9712-6"
sodipodi:role="line"
id="tspan9712"
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>
y="75.579971">3</tspan></text>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

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

@@ -7,106 +7,226 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
xml:space="preserve"
sodipodi:docname="as.svg"
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:svg="http://www.w3.org/2000/svg"><defs
id="defs2"><linearGradient
id="swatch6"><stop
style="stop-color:#808080;stop-opacity:1;"
offset="0"
id="stop6" /></linearGradient><marker
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
id="defs2">
<marker
style="overflow:visible"
id="Arrow2-36-3"
id="Arrow2-36"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
preserveAspectRatio="xMidYMid"><path
inkscape:isstock="true"
inkscape:collect="always"
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-6" /></marker></defs><g
id="g9"
style="display:none"><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"
d="M 33.897256,10.914479 C 33.616971,9.8851391 33.786514,71.343218 33.786514,71.343218"
id="path127-7" /><g
id="g4983-5"
transform="matrix(1.5341872,0,0,1.4840821,-18.065036,-1.352247)"
style="display:inline"><text
id="arrow2L-0" />
</marker>
</defs>
<g
id="g5482"
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 33.921393,11.147309 c -0.314864,-0.910336 -0.124404,53.44247 -0.124404,53.44247"
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"
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-3"
id="text9342"
transform="matrix(0.99957927,-0.0076705,0.00767651,1.000362,0,0)"><tspan
id="tspan9340-5"
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"
y="12.794106">1</tspan></text><circle
y="12.794106">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="path9448-6"
id="path9448"
cx="-34.067326"
cy="-10.754245"
transform="rotate(-178.67073)"
r="1.2760839" /></g><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-36-3);paint-order:stroke fill markers"
d="m 33.859011,29.420135 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
id="path13743-2" /></g><g
id="g10"
style="display:none"><path
r="1.2760839" />
</g>
<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-36);paint-order:stroke fill markers"
d="m 33.887502,25.269364 c -0.01675,-2.146498 -0.007,-10.408471 -0.007,-10.408471"
id="path13743"
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"
d="M 58.816429,43.133531 C 56.694269,44.70809 37.161399,59.276133 35.853105,60.460409"
id="path15674-9" /><g
id="g21551-1"
transform="matrix(1.0493551,-0.80462172,0.75631798,1.1250384,-11.344737,78.798908)"
style="display:inline"><text
d="M 53.121566,28.128633 C 52.980692,28.306461 34.558514,54.770101 34.558514,54.770101"
id="path15674"
sodipodi:nodetypes="cc" />
<g
id="g21551"
transform="matrix(1.0709125,-0.77569872,0.72534851,1.1452501,-18.674442,63.55512)"
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="text15678-2"
id="text15678"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
id="tspan15676-7"
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"
y="-23.497944">2</tspan></text><circle
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="circle15680-0"
id="circle15680"
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.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"
d="m 48.976421,50.160424 c 1.491381,-1.085308 7.26986,-5.212171 7.26986,-5.212171"
id="path15682-9" /></g><g
id="g11"
style="display:inline"><path
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"
d="M 44.011809,54.273077 59.185821,71.265479"
id="path1108-3" /><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"
d="M 53.607403,65.037959 47.429246,58.315175"
id="path9576-6" /><g
id="g21538-0"
transform="matrix(1.2270494,0,0,1.2270494,-27.438185,-36.914981)"
style="display:inline"><ellipse
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-36);paint-order:stroke fill markers"
d="m 44.081818,40.087032 c 1.269428,-1.730977 6.21501,-8.34923 6.21501,-8.34923"
id="path15682"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="3.0865939"
inkscape:transform-center-y="4.0947028" />
</g>
<g
id="g5406"
style="display:inline">
<path
style="display:inline;fill:#000000;fill-opacity:1;stroke:#de0029;stroke-width:6.90976;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 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"
id="circle9582-6"
id="circle9582"
cx="-74.661598"
cy="60.70055"
transform="matrix(0.01839222,-0.99983085,0.99981223,0.0193779,0,0)"
rx="1.2146922"
ry="1.1834064" /><text
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-2"
id="text9714"
transform="scale(0.98702867,1.0131418)"><tspan
id="tspan9712-6"
sodipodi:role="line"
id="tspan9712"
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>
y="75.579971">3</tspan></text>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

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

@@ -7,8 +7,8 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
sodipodi:docname="ms.svg"
inkscape:export-filename="ms_.png"
sodipodi:docname="as.svg"
inkscape:export-filename="ks_l3.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
@@ -87,11 +87,6 @@
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
<sodipodi:guide
position="49.699157,65.944645"
orientation="0,-1"
id="guide1"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
@@ -116,33 +111,33 @@
</marker>
</defs>
<path
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.827168,37.661031 c 0.160276,0.905134 -0.09202,26.213044 -0.09202,26.213044"
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.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283"
id="path127"
sodipodi:nodetypes="cc" />
<text
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"
x="33.126442"
y="37.159477"
x="33.553684"
y="29.776054"
id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.126442"
y="37.159477">1</tspan></text>
x="33.553684"
y="29.776054">1</tspan></text>
<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"
id="path9448"
cx="-34.242313"
cy="-35.770748"
cx="-34.556458"
cy="-28.180008"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091"
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.772723,58.600095 c -0.03072,-1.354619 -0.01284,-6.568613 -0.01284,-6.568613"
d="M 33.89306,38.744499 C 33.86234,37.38988 33.88022,32.175886 33.88022,32.175886"
id="path13743"
sodipodi:nodetypes="cc" />
<path
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

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

@@ -7,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -17,9 +96,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -29,42 +111,46 @@
</marker>
</defs>
<g
id="g3">
id="g6916">
<path
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.827168,37.661031 c 0.160276,0.905134 -0.09202,26.213044 -0.09202,26.213044"
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"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283"
id="path127"
sodipodi:nodetypes="cc" />
<text
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"
x="33.126442"
y="37.159477"
x="33.553684"
y="29.776054"
id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.126442"
y="37.159477">1</tspan></text>
x="33.553684"
y="29.776054">1</tspan></text>
<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"
id="path9448"
cx="-34.242313"
cy="-35.770748"
cx="-34.556458"
cy="-28.180008"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091"
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.772723,58.600095 c -0.03072,-1.354619 -0.01284,-6.568613 -0.01284,-6.568613"
id="path13743" />
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
id="g2"
id="g6879"
style="display:none">
<path
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.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" />
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"
id="path6285"
sodipodi:nodetypes="csc" />
<g
id="g6313"
transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)"
@@ -76,6 +162,7 @@
y="-23.497944"
id="text6309"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan6307"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926"
@@ -90,20 +177,27 @@
</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-6);paint-order:stroke fill markers"
d="m 37.819885,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315" />
d="m 38.349052,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
</g>
<g
id="g1"
id="g6841"
style="display:none">
<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"
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
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"
id="path6317" />
id="path6317"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
<g
id="g6325"
transform="matrix(1.2912359,0,0,1.2912359,-26.452174,-46.397985)"
@@ -123,6 +217,7 @@
y="75.579971"
id="text6323"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan6321"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

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

@@ -7,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -17,9 +96,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -29,43 +111,47 @@
</marker>
</defs>
<g
id="g3"
id="g6916"
style="display:none">
<path
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.827168,37.661031 c 0.160276,0.905134 -0.09202,26.213044 -0.09202,26.213044"
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"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283"
id="path127"
sodipodi:nodetypes="cc" />
<text
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"
x="33.126442"
y="37.159477"
x="33.553684"
y="29.776054"
id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.126442"
y="37.159477">1</tspan></text>
x="33.553684"
y="29.776054">1</tspan></text>
<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"
id="path9448"
cx="-34.242313"
cy="-35.770748"
cx="-34.556458"
cy="-28.180008"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091"
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.772723,58.600095 c -0.03072,-1.354619 -0.01284,-6.568613 -0.01284,-6.568613"
id="path13743" />
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
id="g2"
id="g6879"
style="display:inline">
<path
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.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" />
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"
id="path6285"
sodipodi:nodetypes="csc" />
<g
id="g6313"
transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)"
@@ -77,6 +163,7 @@
y="-23.497944"
id="text6309"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan6307"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926"
@@ -91,20 +178,27 @@
</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-6);paint-order:stroke fill markers"
d="m 37.819885,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315" />
d="m 38.349052,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
</g>
<g
id="g1"
id="g6841"
style="display:none">
<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"
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
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"
id="path6317" />
id="path6317"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
<g
id="g6325"
transform="matrix(1.2912359,0,0,1.2912359,-26.452174,-46.397985)"
@@ -124,6 +218,7 @@
y="75.579971"
id="text6323"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan6321"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

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

@@ -7,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -17,9 +96,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -29,43 +111,47 @@
</marker>
</defs>
<g
id="g3"
id="g6916"
style="display:none">
<path
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.827168,37.661031 c 0.160276,0.905134 -0.09202,26.213044 -0.09202,26.213044"
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"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283"
id="path127"
sodipodi:nodetypes="cc" />
<text
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"
x="33.126442"
y="37.159477"
x="33.553684"
y="29.776054"
id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.126442"
y="37.159477">1</tspan></text>
x="33.553684"
y="29.776054">1</tspan></text>
<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"
id="path9448"
cx="-34.242313"
cy="-35.770748"
cx="-34.556458"
cy="-28.180008"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091"
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.772723,58.600095 c -0.03072,-1.354619 -0.01284,-6.568613 -0.01284,-6.568613"
id="path13743" />
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
id="g2"
id="g6879"
style="display:none">
<path
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.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" />
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"
id="path6285"
sodipodi:nodetypes="csc" />
<g
id="g6313"
transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)"
@@ -77,6 +163,7 @@
y="-23.497944"
id="text6309"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan6307"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926"
@@ -91,20 +178,27 @@
</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-6);paint-order:stroke fill markers"
d="m 37.819885,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315" />
d="m 38.349052,39.347895 c -3.566392,1.489354 -5.526222,4.175033 -5.246421,9.256318"
id="path6315"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
</g>
<g
id="g1"
id="g6841"
style="display:inline">
<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"
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
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"
id="path6317" />
id="path6317"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
<g
id="g6325"
transform="matrix(1.2912359,0,0,1.2912359,-26.452174,-46.397985)"
@@ -124,6 +218,7 @@
y="75.579971"
id="text6323"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan6321"
style="stroke:#f9f6f6;stroke-width:0.131537;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="59.531094"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

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

@@ -7,7 +7,7 @@
viewBox="0 0 100 100"
version="1.1"
id="svg5"
sodipodi:docname="ns.svg"
sodipodi:docname="as.svg"
inkscape:export-filename="ms_l3.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
@@ -87,11 +87,6 @@
orientation="1,0"
id="guide53860"
inkscape:locked="false" />
<sodipodi:guide
position="47.172081,65.583634"
orientation="0,-1"
id="guide1"
inkscape:locked="false" />
</sodipodi:namedview>
<defs
id="defs2">
@@ -115,36 +110,40 @@
id="arrow2L-2" />
</marker>
</defs>
<path
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.827084,37.541011 c 0.159576,0.909267 -0.09162,26.332747 -0.09162,26.332747"
id="path127"
sodipodi:nodetypes="cc" />
<text
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"
x="33.249947"
y="37.160423"
id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.249947"
y="37.160423">1</tspan></text>
<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"
id="path9448"
cx="-34.482925"
cy="-35.764874"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091"
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,58.323678 C 33.86234,56.969059 33.88022,51.755065 33.88022,51.755065"
id="path13743"
sodipodi:nodetypes="cc" />
<g
id="g6916"
style="display:inline">
<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"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283"
id="path127"
sodipodi:nodetypes="cc" />
<text
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"
x="33.553684"
y="29.776054"
id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.553684"
y="29.776054">1</tspan></text>
<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"
id="path9448"
cx="-34.556458"
cy="-28.180008"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091"
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
id="g6879"
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,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -17,9 +96,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -28,40 +110,48 @@
id="arrow2L-2" />
</marker>
</defs>
<path
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.827084,37.541011 c 0.159576,0.909267 -0.09162,26.332747 -0.09162,26.332747"
id="path127" />
<text
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"
x="33.249947"
y="37.160423"
id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.249947"
y="37.160423">1</tspan></text>
<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"
id="path9448"
cx="-34.482925"
cy="-35.764874"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091"
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,58.323678 C 33.86234,56.969059 33.88022,51.755065 33.88022,51.755065"
id="path13743" />
<g
id="g6916"
style="display:inline">
<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"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283"
id="path127"
sodipodi:nodetypes="cc" />
<text
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"
x="33.553684"
y="29.776054"
id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.553684"
y="29.776054">1</tspan></text>
<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"
id="path9448"
cx="-34.556458"
cy="-28.180008"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091"
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
id="g6879"
style="display:none">
<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"
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
id="g6313"
transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)"
@@ -73,6 +163,7 @@
y="-23.497944"
id="text6309"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan6307"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926"
@@ -88,7 +179,10 @@
<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"
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
id="g6841"
@@ -96,11 +190,15 @@
<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"
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
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"
id="path6317" />
id="path6317"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
<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"
id="ellipse6319"
@@ -116,6 +214,7 @@
y="51.795433"
id="text6323"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan6321"
style="stroke:#f9f6f6;stroke-width:0.169845;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="50.068886"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

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

@@ -7,8 +7,87 @@
viewBox="0 0 100 100"
version="1.1"
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: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
id="defs2">
<marker
@@ -17,9 +96,12 @@
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
@@ -29,35 +111,38 @@
</marker>
</defs>
<g
id="g1"
id="g6916"
style="display:none">
<path
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.827084,37.541011 c 0.159576,0.909267 -0.09162,26.332747 -0.09162,26.332747"
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"
d="m 33.822278,28.413439 c 0.119792,1.223818 -0.06878,35.442283 -0.06878,35.442283"
id="path127"
sodipodi:nodetypes="cc" />
<text
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"
x="33.249947"
y="37.160423"
x="33.553684"
y="29.776054"
id="text9342"
transform="matrix(0.97428327,-0.00786965,0.00748224,1.0263351,0,0)"><tspan
sodipodi:role="line"
id="tspan9340"
style="fill:#ffffff;fill-opacity:1;stroke:#f9f4f4;stroke-width:0.17372;stroke-dasharray:none;stroke-opacity:1"
x="33.249947"
y="37.160423">1</tspan></text>
x="33.553684"
y="29.776054">1</tspan></text>
<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"
id="path9448"
cx="-34.482925"
cy="-35.764874"
cx="-34.556458"
cy="-28.180008"
transform="matrix(-0.99970185,-0.0244176,0.02203936,-0.9997571,0,0)"
rx="1.5434091"
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,58.323678 C 33.86234,56.969059 33.88022,51.755065 33.88022,51.755065"
id="path13743" />
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
id="g6879"
@@ -65,7 +150,8 @@
<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"
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
id="g6313"
transform="matrix(0.97035549,-0.65723941,0.65723941,0.97035549,-31.442501,79.56139)"
@@ -77,6 +163,7 @@
y="-23.497944"
id="text6309"
transform="matrix(0.828845,0.5587786,-0.55921616,0.82949403,0,0)"><tspan
sodipodi:role="line"
id="tspan6307"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#f9f4f4;stroke-width:0.11614;stroke-dasharray:none;stroke-opacity:1"
x="54.113926"
@@ -92,7 +179,10 @@
<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"
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
id="g6841"
@@ -100,11 +190,15 @@
<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"
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
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"
id="path6317" />
id="path6317"
sodipodi:nodetypes="cc"
inkscape:transform-center-x="0.41460034"
inkscape:transform-center-y="0.46910942" />
<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"
id="ellipse6319"
@@ -120,6 +214,7 @@
y="51.795433"
id="text6323"
transform="scale(0.98702867,1.0131418)"><tspan
sodipodi:role="line"
id="tspan6321"
style="stroke:#f9f6f6;stroke-width:0.169845;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
x="50.068886"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

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

@@ -8,7 +8,7 @@
version="1.1"
id="svg5"
sodipodi:docname="ts_l2.svg"
inkscape:export-filename="ts-l3.svg"
inkscape:export-filename="ts_l2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
@@ -138,9 +138,9 @@
style="display:inline">
<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"
d="m 49.923123,20.759627 c 0.276649,8.508821 -0.04251,41.885183 -0.04251,50.388906"
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"
id="path127"
sodipodi:nodetypes="cc" />
sodipodi:nodetypes="ccc" />
<text
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"
@@ -166,13 +166,12 @@
</g>
<g
id="g18551"
transform="translate(-1.0583333,-3.9071252)"
transform="translate(-1.0583333,-0.52916667)"
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 62.074406,36.333523 c -2.013851,0.08758 -21.695455,0.03337 -21.695455,0.03337"
id="path1236-5"
sodipodi:nodetypes="cc" />
d="m 63.698073,36.333523 c -2.013851,0.08758 -26.404088,0.195734 -26.404088,0.195734"
id="path1236-5" />
<g
id="g1301"
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,10 +8,9 @@
version="1.1"
id="svg5"
sodipodi:docname="ts_l2.svg"
inkscape:export-filename="..\Desktop\LATTER\ts_l1.png"
inkscape:export-filename="ts-l1.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
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"
@@ -29,12 +28,12 @@
showgrid="false"
showguides="true"
inkscape:zoom="1.6295423"
inkscape:cx="125.49536"
inkscape:cy="151.88314"
inkscape:cx="47.252532"
inkscape:cy="206.19287"
inkscape:window-width="1920"
inkscape:window-height="1027"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-height="1007"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg5">
<sodipodi:guide
@@ -116,31 +115,15 @@
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-54" />
</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>
<g
id="g18882"
style="display:inline">
<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"
d="m 49.923123,20.759627 c 0.276649,8.508821 -0.04251,41.885183 -0.04251,50.388906"
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"
id="path127"
sodipodi:nodetypes="cc" />
sodipodi:nodetypes="ccc" />
<text
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"
@@ -164,41 +147,4 @@
d="m 50.181312,42.781753 c -0.01038,-3.228056 -0.0043,-15.652996 -0.0043,-15.652996"
id="path13743" />
</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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

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

@@ -8,7 +8,7 @@
version="1.1"
id="svg5"
sodipodi:docname="ts_l2.svg"
inkscape:export-filename="..\Desktop\LATTER\ts_l1.svg"
inkscape:export-filename="ts-l3.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
@@ -138,9 +138,9 @@
style="display:none">
<path
style="display:inline;fill:none;fill-opacity:1;stroke:#009e40;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 49.923123,20.759627 c 0.276649,8.508821 -0.04251,41.885183 -0.04251,50.388906"
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"
id="path127"
sodipodi:nodetypes="cc" />
sodipodi:nodetypes="ccc" />
<text
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"
@@ -166,13 +166,12 @@
</g>
<g
id="g18551"
transform="translate(-1.0583333,-3.9071252)"
transform="translate(-1.0583333,-0.52916667)"
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 62.074406,36.333523 c -2.013851,0.08758 -21.695455,0.03337 -21.695455,0.03337"
id="path1236-5"
sodipodi:nodetypes="cc" />
d="m 63.698073,36.333523 c -2.013851,0.08758 -26.404088,0.195734 -26.404088,0.195734"
id="path1236-5" />
<g
id="g1301"
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
View File

@@ -1,3 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 197 B

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

@@ -1 +1 @@
<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>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 683 B

After

Width:  |  Height:  |  Size: 698 B

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

@@ -1,4 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 749 B

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

@@ -1,4 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 868 B

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

@@ -1,5 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 721 B

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

@@ -1,3 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 151 B

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

@@ -1,4 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 789 B

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

@@ -1,4 +0,0 @@
<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

Before

Width:  |  Height:  |  Size: 592 B

111
public/saveGameData.js
View File

@@ -1,111 +0,0 @@
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
View File

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

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

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

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

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

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

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

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

@@ -49,49 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
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){
noticeWidth = 100;
noticeHeight = 0;
@@ -111,6 +76,13 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = [];
window.onload = function() {
// Get the current date and time
@@ -159,7 +131,7 @@ import Layout from '../../layouts/Layout.astro';
.then(({data}) => {
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){
imageCustomWidth = "?width=80";
imageCustomWidth = "?width=100";
} else{
imageCustomWidth = "?width=100";
}
@@ -256,11 +228,8 @@ import Layout from '../../layouts/Layout.astro';
}
this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
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("tick", '/assets/tick.png');
this.load.image("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100,
@@ -357,168 +326,135 @@ import Layout from '../../layouts/Layout.astro';
}
];
// 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){
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 55, data.label1, {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 + 15, window.innerHeight - 55, data.label3, {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 - 185, data.label5, {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 + 20, window.innerHeight - 185, data.label7, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 185, data.label8, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, 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 + 30, window.innerHeight - 30, 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 - 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 + 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`})
}
if(isMobile){
this.add.text(leftTargetZoneW - 20, window.innerHeight / 4.5, data.left_label, {font:`10px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 100, window.innerHeight / 4.5, data.right_label, {font:`10px`, fill: `#60C6CB`});
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
} else{
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: `#60C6CB`});
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
// Base font size for your text
const baseFontSize = 22;
// Calculate responsive font size based on screen width
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 => {
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
// const url = window.location.href;
// const gameName = url.split('/');
// let userData = {
// 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3],
// 'starts': formattedDateTime,
// // 'game_start' : gameStartTime,
// };
// function submitUserData() {
// 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 URL = window.location.href;
const gameName = URL.split('/');
let userData = {
'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3],
'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
function submitUserData() {
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)
});
};
// 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', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// }).setDepth(1);
// submitButton.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
}).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
// submitButton.setVisible(false);
submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData(this);
submitUserData();
})
let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
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;
}
// 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 = [
{
x: displayW / 2 - blocks1Width1,
y: window.innerHeight - 290,
x: displayW / 2 - 200,
y: window.innerHeight - 250,
textureKey: "blocks1",
id: "block1",
},
{
x: displayW / 2 - blocks1Width2,
y: window.innerHeight - 290,
x: displayW / 2-100,
y: window.innerHeight - 250,
textureKey: "blocks2",
id: "block2",
},
{
x: displayW / blocks1Width3,
y: window.innerHeight - 290,
x: displayW / 2,
y: window.innerHeight - 250,
textureKey: "blocks3",
id: "block3",
},
{
x: displayW / 2 + blocks1Width4,
y: window.innerHeight - 290,
x: displayW / 2+100,
y: window.innerHeight - 250,
textureKey: "blocks4",
id: "block4",
},
{
x: displayW / 2 - blocks1Width5,
y: window.innerHeight - 160,
x: displayW / 2-200,
y: window.innerHeight - 120,
textureKey: "blocks5",
id: "block5",
},
{
x: displayW / 2 - blocks1Width6,
y: window.innerHeight - 160,
x: displayW / 2-100,
y: window.innerHeight - 120,
textureKey: "blocks6",
id: "block6",
},
{
x: displayW / blocks1Width7,
y: window.innerHeight - 160,
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks7",
id: "block7",
},
{
x: displayW / 2 + blocks1Width8,
y: window.innerHeight - 160,
x: displayW / 2+100,
y: window.innerHeight - 120,
textureKey: "blocks8",
id: "block8",
},
@@ -529,7 +465,7 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = [];
targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x, targetZone.y-20, "border").setAlpha(0.05).setScale(borderScale);
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0).setScale(borderScale);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
@@ -550,7 +486,7 @@ import Layout from '../../layouts/Layout.astro';
if (
Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 100, 50)
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
)
) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
@@ -569,7 +505,7 @@ import Layout from '../../layouts/Layout.astro';
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(0.5);
targetZoneBorders[targetIndex].setAlpha(0);
return;
}
});
@@ -588,11 +524,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', () => {
window.location.reload();
})
// retryButton.setVisible(false);
retryButton.setVisible(false);
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {
@@ -605,7 +541,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){
scoreTotal++;
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){
// console.log(counter)

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

@@ -49,46 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
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){
noticeWidth = 100;
noticeHeight = 0;
@@ -104,7 +72,11 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let scoreTotal = 0;
let resultView;
gameResult = [];
window.onload = function() {
// Get the current date and time
@@ -276,11 +248,13 @@ import Layout from '../../layouts/Layout.astro';
}
this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
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("border", '/assets/svg/border.svg');
this.load.image("tick", '/assets/tick.png');
// this.load.image("bg", '/assets/bgwhite.jpg');
// this.load.image("target1", assetsList.right_image1);
// this.load.image("target2", '/assets/hay.png');
// this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
@@ -316,19 +290,21 @@ import Layout from '../../layouts/Layout.astro';
});
}
create() {
const params = new URLSearchParams(window.location.search);
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({ data }) => {
// console.log(data)
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
let textSizeScale; if(isMobile){textSizeScale = 540}else{textSizeScale = 940};
const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
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);
// Base font size for your text
const baseFontSize = 30;
// Calculate responsive font size based on screen width
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
blockMatches = [
{
blockName: "blocks1",
@@ -365,70 +341,66 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
// const URL = window.location.href;
// const gameName = URL.split('/');
// let userData = {
// 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3],
// 'starts': formattedDateTime,
// // 'game_start' : gameStartTime,
// };
// function submitUserData() {
// 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 URL = window.location.href;
const gameName = URL.split('/');
let userData = {
'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3],
'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
function submitUserData() {
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)
});
};
// 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', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// }).setDepth(1);
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);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
}).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData();
})
// 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 = [
{
x: displayW / 15 - 15,
@@ -455,20 +427,11 @@ import Layout from '../../layouts/Layout.astro';
id: "block4",
},
];
// submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData(this);
});
const droppedBlocks = [];
const targetZoneBorders = [];
targetZones.forEach((targetZone) => {
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.5).setScale(1);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
@@ -535,12 +498,12 @@ import Layout from '../../layouts/Layout.astro';
}
});
});
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// })
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
})
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
@@ -552,10 +515,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter)
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match)
console.log(match)
if(match !== undefined){
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.setVisible(false);
}
@@ -567,23 +530,7 @@ import Layout from '../../layouts/Layout.astro';
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", {
@@ -613,28 +560,28 @@ import Layout from '../../layouts/Layout.astro';
</script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
* {
margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
}
margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
}
/* body {
margin: 0;
background: #020202;
cursor: crosshair;
} */
/* canvas{display:block} */
/* h1 {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: "Source Sans Pro";
font-size: 5em;
font-weight: 900;
-webkit-user-select: none;
user-select: none;
margin: 0;
background: #020202;
cursor: crosshair;
} */
/* canvas{display:block} */
/* h1 {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: "Source Sans Pro";
font-size: 5em;
font-weight: 900;
-webkit-user-select: none;
user-select: none;
} */
#overlap {
display: none;

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

@@ -49,47 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
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){
noticeWidth = 100;
noticeHeight = 0;
@@ -105,6 +72,13 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
gameResult = [];
window.onload = function() {
// Get the current date and time
@@ -126,7 +100,6 @@ import Layout from '../../layouts/Layout.astro';
return result;
};
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [
{
@@ -260,13 +233,12 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png');
this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
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("border", '/assets/svg/pointer.svg');
// this.load.image("bg", '/assets/bgwhite.jpg');
// this.load.image("target1", assetsList.right_image1);
// this.load.image("target2", '/assets/hay.png');
// this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
@@ -326,20 +298,15 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`,
},
];
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 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);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 20
// Calculate responsive font size based on screen width
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name
@@ -358,122 +325,104 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
// const url = window.location.href;
// const gameName = url.split('/');
// let userData = {
// 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3],
// 'starts': formattedDateTime,
// // 'game_start' : gameStartTime,
// };
// function submitUserData() {
// 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)
// });
// };
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 URL = window.location.href;
const gameName = URL.split('/');
let userData = {
'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3],
'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
function submitUserData() {
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)
});
};
// 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', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// }).setDepth(1);
// submitButton.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
}).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
// submitButton.setVisible(false);
submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData(this);
submitUserData();
})
// 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 = [
{
x: displayW / 15 - 15,
y: 120,
textureKey: "blocks1",
id: "block1",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 280,
textureKey: "blocks2",
id: "block2",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 460,
textureKey: "blocks3",
id: "block3",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 640,
textureKey: "blocks4",
id: "block4",
blockPointer: 'border',
},
];
this.graphics = this.add.graphics();
const droppedBlocks = [];
const targetZoneBorders = [];
targetZones.forEach((targetZone) => {
// const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
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);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
blocks.forEach((block, index) => {
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);
newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3);
@@ -502,7 +451,7 @@ import Layout from '../../layouts/Layout.astro';
if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color
this.graphics.moveTo(block.x + 105, block.y + 47);
this.graphics.moveTo(block.x + 50, block.y + 50);
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath();
@@ -524,12 +473,12 @@ import Layout from '../../layouts/Layout.astro';
}
});
});
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// })
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
})
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
@@ -542,10 +491,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter)
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match)
console.log(match)
if(match !== undefined){
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);
}
if(counter === 4){

1
src/pages/drag/testv3.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {

5
src/pages/drag/tmp.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@@ -451,7 +450,7 @@ import Layout from '../../layouts/Layout.astro';
targetZone.block = null;
}),
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);
// this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => {
@@ -522,7 +521,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){
scoreTotal++;
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){
// console.log(counter)

5
src/pages/drag/tmp2.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@@ -545,11 +544,11 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter)
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match)
console.log(match)
if(match !== undefined){
scoreTotal++;
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){
// console.log(counter)

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

@@ -49,47 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
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){
noticeWidth = 100;
noticeHeight = 0;
@@ -105,6 +72,13 @@ import Layout from '../../layouts/Layout.astro';
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let blockMatches;
let resultView;
let scoreTotal = 0;
gameResult = [];
window.onload = function() {
// Get the current date and time
@@ -126,7 +100,6 @@ import Layout from '../../layouts/Layout.astro';
return result;
};
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
let blockMatches;
const targetZones = [
{
@@ -260,13 +233,12 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png');
this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
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("border", '/assets/svg/pointer.svg');
// this.load.image("bg", '/assets/bgwhite.jpg');
// this.load.image("target1", assetsList.right_image1);
// this.load.image("target2", '/assets/hay.png');
// this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
@@ -326,20 +298,15 @@ import Layout from '../../layouts/Layout.astro';
targetName: `target${data.right_match4}`,
},
];
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 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);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 20
// Calculate responsive font size based on screen width
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name
@@ -358,122 +325,104 @@ import Layout from '../../layouts/Layout.astro';
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
// const url = window.location.href;
// const gameName = URL.split('/');
// let userData = {
// 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3],
// 'starts': formattedDateTime,
// // 'game_start' : gameStartTime,
// };
// function submitUserData() {
// 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)
// });
// };
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 URL = window.location.href;
const gameName = URL.split('/');
let userData = {
'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3],
'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
function submitUserData() {
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)
});
};
// 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', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// }).setDepth(1);
// submitButton.setVisible(false);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
}).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
// submitButton.setVisible(false);
submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData(this);
submitUserData();
})
// 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 = [
{
x: displayW / 15 - 15,
y: 120,
textureKey: "blocks1",
id: "block1",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 280,
textureKey: "blocks2",
id: "block2",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 460,
textureKey: "blocks3",
id: "block3",
blockPointer: 'border',
},
{
x: displayW / 15 - 15,
y: 640,
textureKey: "blocks4",
id: "block4",
blockPointer: 'border',
},
];
this.graphics = this.add.graphics();
const droppedBlocks = [];
const targetZoneBorders = [];
targetZones.forEach((targetZone) => {
// const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
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);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
blocks.forEach((block, index) => {
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);
newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3);
@@ -502,7 +451,7 @@ import Layout from '../../layouts/Layout.astro';
if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color
this.graphics.moveTo(block.x + 105, block.y + 47);
this.graphics.moveTo(block.x + 50, block.y + 50);
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath();
@@ -524,12 +473,12 @@ import Layout from '../../layouts/Layout.astro';
}
});
});
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// })
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
})
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
@@ -542,10 +491,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter)
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match)
console.log(match)
if(match !== undefined){
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);
}
if(counter === 4){

5
src/pages/drag/v20.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@@ -492,10 +491,10 @@ import Layout from '../../layouts/Layout.astro';
// console.log(counter)
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match)
console.log(match)
if(match !== undefined){
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);
}
if(counter === 4){

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

@@ -49,51 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
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){
noticeWidth = 100;
noticeHeight = 0;
@@ -101,7 +64,7 @@ import Layout from '../../layouts/Layout.astro';
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 140;
retryButtonHeight = window.innerHeight - 50;
leftTargetZoneW = window.innerWidth * 0.9 - 30;
leftTargetZoneW = window.innerWidth * 0.9 - 40;
rightTargetZoneW = window.innerWidth / 6;
} else {
noticeWidth = 100;
@@ -113,7 +76,13 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth * 0.9 - 172;
rightTargetZoneW = window.innerWidth / 6;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let resultView;
let scoreTotal = 0; // resultView scoreTotal
gameResult = [];
window.onload = function() {
// Get the current date and time
@@ -145,19 +114,19 @@ import Layout from '../../layouts/Layout.astro';
},
{
x: rightTargetZoneW,
y: 330,
y: 340,
name: "target2",
block: null,
},
{
x: rightTargetZoneW,
y: 480,
y: 510,
name: "target3",
block: null,
},
{
x: rightTargetZoneW,
y: 650,
y: 680,
name: "target4",
block: null,
},
@@ -169,19 +138,19 @@ import Layout from '../../layouts/Layout.astro';
},
{
x: leftTargetZoneW,
y: 330,
y: 340,
name: "target6",
block: null,
},
{
x: leftTargetZoneW,
y: 480,
y: 510,
name: "target7",
block: null,
},
{
x: leftTargetZoneW,
y: 650,
y: 680,
name: "target8",
block: null,
},
@@ -291,13 +260,8 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.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("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.image("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100,
frameHeight: 100,
@@ -338,7 +302,7 @@ import Layout from '../../layouts/Layout.astro';
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({ data }) => {
// console.log(data)
console.log(data)
blockMatches = [
{
blockName: "blocks1",
@@ -374,91 +338,72 @@ import Layout from '../../layouts/Layout.astro';
}
];
// 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 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);
// Base font size for your text
const baseFontSize = 30;
// Calculate responsive font size based on screen width
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 => {
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
// const URL = window.location.href;
// const gameName = URL.split('/');
// let userData = {
// 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3],
// 'starts': formattedDateTime,
// // 'game_start' : gameStartTime,
// };
// function submitUserData() {
// 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 URL = window.location.href;
const gameName = URL.split('/');
let userData = {
'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3],
'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
function submitUserData() {
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)
});
};
// 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', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// }).setDepth(1);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
}).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData(this);
submitUserData();
})
// 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 = [
{
x: displayW / 2-400,
@@ -514,8 +459,8 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = [];
targetZones.forEach((targetZone, index) => {
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.7).setScale(1);
const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#60C6CB`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
@@ -563,11 +508,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', () => {
window.location.reload();
})
// retryButton.setVisible(false);
retryButton.setVisible(false);
let score = 0;
let counter = 0;
@@ -578,7 +523,7 @@ import Layout from '../../layouts/Layout.astro';
}
//resultView scoreTotal
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match)
console.log(match)
if(match){
scoreTotal++;
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,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@@ -303,7 +302,7 @@ import Layout from '../../layouts/Layout.astro';
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({ data }) => {
// console.log(data)
console.log(data)
blockMatches = [
{
blockName: "blocks1",
@@ -524,7 +523,7 @@ import Layout from '../../layouts/Layout.astro';
}
//resultView scoreTotal
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match)
console.log(match)
if(match){
scoreTotal++;
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,52 +49,14 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
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){
noticeWidth = 100;
noticeHeight = 0;
@@ -114,6 +76,13 @@ import Layout from '../../layouts/Layout.astro';
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172;
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let retryButton;
let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = [];
window.onload = function() {
// Get the current date and time
@@ -161,7 +130,11 @@ import Layout from '../../layouts/Layout.astro';
.then(response => response.json())
.then(({data}) => {
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
if(isMobile){
imageCustomWidth = "?width=100";
} else{
imageCustomWidth = "?width=100";
}
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
assetsList.element1 = assetsURL + image1 + imageCustomWidth;
assetsList.element2 = assetsURL + image2 + imageCustomWidth;
@@ -255,17 +228,9 @@ import Layout from '../../layouts/Layout.astro';
}
this.load.image("topMatch", "/assets/top_match.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("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("tick", '/assets/tick.png');
this.load.image("retryIcon", "/assets/svg/retry.svg")
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100,
frameHeight: 100,
@@ -301,6 +266,25 @@ import Layout from '../../layouts/Layout.astro';
}
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 paramsID = params.get('id');
@@ -343,110 +327,88 @@ import Layout from '../../layouts/Layout.astro';
];
// console.log(data)
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 - 20, data.label1, {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 - 20, data.label3, {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 - 30, 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 + 30, window.innerHeight - 30, 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 - 170, window.innerHeight - 150, data.label5, {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 - 50, 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 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
}
if(isMobile){
this.add.text(window.innerWidth / 18, window.innerHeight / 4, data.left_label+'!', {font:`10px`, fill: `#60C6CB`});
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`});
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
} else{
this.add.text(window.innerWidth / 9, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
this.add.text(window.innerWidth / 1.39, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
}
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 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);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 22;
// Calculate responsive font size based on screen width
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 => {
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
// const URL = window.location.href;
// const gameName = URL.split('/');
// let userData = {
// 'user': 'drawing@beanstalkedu.com',
// 'game_name': gameName[3],
// 'starts': formattedDateTime,
// // 'game_start' : gameStartTime,
// };
// function submitUserData() {
// 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 URL = window.location.href;
const gameName = URL.split('/');
let userData = {
'user': 'drawing@beanstalkedu.com',
'game_name': gameName[3],
'starts': formattedDateTime,
// 'game_start' : gameStartTime,
};
function submitUserData() {
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)
});
};
// 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', {
font: '600 20px Quicksand',
fill: 'blue'
}).setDepth(1);
submitNotic.setVisible(false);
// submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// }).setDepth(1);
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
}).setDepth(1);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(true);
// window.location.reload();
// windowLoad();
submitUserData(this);
submitUserData();
})
// 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 = [
{
x: displayW / 2 - 200,
@@ -503,52 +465,35 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = [];
targetZones.forEach((targetZone) => {
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.05).setScale(borderScale);
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0).setScale(borderScale);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
blocks.forEach((block, index) => {
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);
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);
newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(blocksScale+.3);
newBlock.setScale(1.3);
newBlock.x = dragX;
newBlock.y = dragY;
});
newBlock.on("dragend", () => {
newBlock.setScale(blocksScale).setDepth(-2);
newBlock.setScale(1.0).setDepth(-2);
let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => {
let phaserGeomX, phaserGeomY, blockSetPosition;
if(isMobile){
phaserGeomX = 50;
phaserGeomY = 25;
blockSetPosition = 40;
}else{
phaserGeomX = 200;
phaserGeomY = 100;
blockSetPosition = 50;
}
if (
Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, phaserGeomX, phaserGeomY)
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
)
) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
const col = counter % 2;
const row = Math.floor(counter / 2);
newBlock.setPosition(targetZone.x - blockSetPosition, targetZone.y - blockSetPosition);
newBlock.setPosition(targetZone.x - 50, targetZone.y -50);
newBlock.disableInteractive();
targetZone.block = newBlock;
droppedBlocks.push(newBlock);
@@ -560,7 +505,7 @@ import Layout from '../../layouts/Layout.astro';
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(0.05);
targetZoneBorders[targetIndex].setAlpha(0);
return;
}
});
@@ -579,10 +524,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', () => {
window.location.reload();
})
retryButton.setVisible(false);
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {
@@ -595,7 +541,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){
scoreTotal++;
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){
// console.log(counter)

3
src/pages/drag/v40.astro
View File

@@ -49,7 +49,6 @@ import Layout from '../../layouts/Layout.astro';
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const drawingZone = {
@@ -540,7 +539,7 @@ import Layout from '../../layouts/Layout.astro';
if(match !== undefined){
scoreTotal++;
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){
// console.log(counter)

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

434
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

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -42,13 +41,7 @@ import Layout from "../../layouts/Layout.astro";
let isDrawing = false;
let formattedDateTime;
let animatedLetter;
let scoreTotal = 0;
// const urls = window.location.href;
// const gameNames = urls.split('/');
// const gameTypes = gameNames[3].split('?id=');
// console.log(gameTypes[0]);
let gameStartTime = "stat timr here";
if(isMobile){
cloudeSize = 200;
@@ -127,6 +120,35 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('canvasStand', '/assets/stand2.png');
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -149,8 +171,10 @@ import Layout from "../../layouts/Layout.astro";
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitNotic.setVisible(false);
submitUserData(this);
submitButton.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData();
})
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', });
@@ -246,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "stat timr here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -138,11 +165,13 @@ let scoreTotal = 0; let isDrawing = false;
}
});
submitButton.setVisible(false);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitNotic.setVisible(false);
submitUserData(this);
submitButton.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData();
})
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', });
@@ -241,7 +270,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -119,7 +118,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -143,9 +170,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -244,7 +271,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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 animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -119,7 +118,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -143,9 +170,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -244,7 +271,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
// let x = 100;
@@ -125,7 +124,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -148,9 +175,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -247,7 +274,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
// let x = 100;
@@ -126,7 +125,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -149,9 +176,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -248,7 +275,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -245,7 +272,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -244,7 +271,7 @@ submitUserData(this);
});
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -120,7 +119,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -143,9 +170,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -244,7 +271,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -245,7 +272,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -123,7 +122,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -146,9 +173,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -237,7 +264,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -119,7 +118,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -142,9 +169,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -242,7 +269,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -116,7 +115,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -139,9 +166,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -238,7 +265,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -141,9 +168,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -241,7 +268,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -117,7 +116,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -140,9 +167,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -240,7 +267,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
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,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
// let x = 100;
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -241,7 +268,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -111,8 +110,41 @@ let scoreTotal = 0; let isDrawing = false;
this.load.image('bgMobile', '/assets/bgMobile.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() {
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -135,9 +167,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -235,7 +267,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
// let x = 100;
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -242,7 +269,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
// let x = 100;
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -144,9 +171,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -242,7 +269,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -116,7 +115,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -139,9 +166,9 @@ let scoreTotal = 0; let isDrawing = false;
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -237,7 +264,7 @@ submitUserData(this);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
// let x = 100;
@@ -121,7 +120,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -140,13 +167,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true
}
});
submitButton.setVisible(false);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -242,7 +269,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -117,7 +116,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -136,13 +163,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true
}
});
submitButton.setVisible(false);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -239,7 +266,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
@@ -118,7 +117,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -137,13 +164,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true
}
});
submitButton.setVisible(false);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -241,7 +268,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale);

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

@@ -8,7 +8,6 @@ import Layout from "../../layouts/Layout.astro";
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
@@ -40,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
let firstLayer, secondLayer, thirdLayer;
let graphics;
let animatedLetter;
let scoreTotal = 0; let isDrawing = false;
let isDrawing = false;
let formattedDateTime;
let gameStartTime = "start time here";
// let x = 100;
@@ -122,7 +121,35 @@ let scoreTotal = 0; let isDrawing = false;
}
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', {
font: '600 20px Quicksand',
fill: '#05b3a4'
@@ -141,13 +168,13 @@ let scoreTotal = 0; let isDrawing = false;
fill: true
}
});
submitButton.setVisible(false);
submitButton.setVisible(false);
submitButton.setInteractive().on('pointerdown', () => {
// console.log('Clicked');
submitButton.setVisible(false);
submitNotic.setVisible(false);
submitNotic.setVisible(true);
// windowLoad();
submitUserData(this);
submitUserData();
})
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', });
@@ -243,7 +270,7 @@ let scoreTotal = 0; let isDrawing = false;
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const baseFontSize = 20;
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);
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