init
This commit is contained in:
='fauz
+8
-2
@@ -9,16 +9,22 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^3.2.13"
|
||||
"primeicons": "^7.0.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@tailwindcss/postcss": "^4.1.13",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3"
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^3.4.17"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
// '@tailwindcss/postcss': {}, // ganti ini
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.665988in" height="0.666071in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 150 150"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#F4F8F8}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M50 119l0 15c0,11 10,18 20,15 3,-1 8,-5 11,-7 7,-7 11,-13 15,-22 7,-15 -2,-4 16,-20 22,-18 36,-43 37,-72 1,-7 1,-10 -2,-16 -2,-4 -5,-7 -9,-9 -4,-3 -9,-3 -15,-3 -11,1 -20,3 -30,6 -9,4 -17,8 -24,13 -3,3 -7,6 -10,8 -3,3 -6,6 -9,10 -3,3 -5,6 -8,10 -1,1 -1,1 -2,2 -1,2 -1,2 -3,2 -10,4 -21,9 -28,17 -6,7 -13,16 -6,25 6,10 16,6 30,7 9,0 17,9 17,19zm44 -81c-5,1 -7,2 -10,6 -5,6 -4,16 4,22 11,8 26,-2 24,-16 -1,-7 -9,-14 -18,-12zm-73 74c-7,1 -8,3 -11,8 -3,4 -12,22 -9,27 3,5 9,2 13,0 5,-1 14,-6 19,-9 4,-4 6,-14 1,-20 -3,-4 -7,-6 -13,-6zm21 -30l1 1c2,1 6,1 14,9 2,1 4,4 6,6 2,5 2,6 4,9 1,0 10,-5 13,-6 2,-1 3,-3 5,-4 5,-3 12,-9 17,-12 3,-4 6,-6 9,-10 13,-13 18,-29 20,-47 1,-9 0,-10 -9,-9 -3,0 -6,1 -8,1 -6,1 -11,2 -16,4 -18,7 -30,19 -42,34 -2,4 -5,8 -7,12 -2,3 -5,9 -7,12z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666748in" height="0.666299in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 59 59"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#F4F8F8}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M0 28l0 25c0,3 3,6 6,6l47 0c3,0 6,-3 6,-6l0 -25c0,-5 -3,-7 -5,-9l-15 -15c-2,-2 -5,-4 -10,-4 -4,0 -7,2 -10,4 -2,3 -4,5 -7,7 -1,2 -9,10 -10,11 -1,2 -2,3 -2,6zm7 0l0 23c3,0 11,0 13,0 0,-2 0,-4 0,-6 0,-3 0,-4 1,-6 3,-6 14,-6 17,0 2,4 1,8 1,12l12 0c1,-1 0,-17 0,-20 0,-1 0,-2 0,-3 0,-1 0,-2 -1,-2 -4,-5 -9,-9 -13,-14 -3,-2 -5,-6 -9,-5 -2,1 -3,2 -4,3l-15 15c-1,1 -2,2 -2,3z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666362in" height="0.667362in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 71 71"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#F4F8F8}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M34 30c-2,0 -2,0 -4,1 -5,2 -7,4 -10,7 -4,4 -7,9 -8,16 -1,6 1,13 7,16 2,1 6,2 9,1 4,-1 5,-3 9,-2 2,0 3,2 9,2 3,1 6,-1 8,-3 3,-2 4,-3 5,-7 2,-9 -3,-18 -9,-24 -3,-3 -10,-8 -16,-7zm-27 -12c-8,2 -9,14 -4,20 1,2 4,4 6,4 7,-2 10,-14 4,-21 -1,-2 -3,-4 -6,-3zm48 12l0 0c0,6 2,12 9,12 2,-1 4,-3 5,-5 4,-7 3,-19 -6,-19 -3,0 -5,2 -6,4 -2,2 -2,4 -2,8zm-40 -20c0,4 0,6 2,9 1,2 3,4 6,5 6,1 9,-5 10,-11 0,-3 -1,-6 -2,-8 -5,-9 -16,-5 -16,5zm31 -10c-2,1 -4,2 -6,5 -4,7 0,20 9,19 2,-1 4,-3 5,-5 4,-5 4,-16 -3,-18 -2,-1 -3,-1 -5,-1zm-10 39c-4,0 -7,3 -9,5 -9,8 -7,18 -2,18 2,1 3,-1 5,-1 3,-2 8,-2 12,0 2,1 6,4 8,-2 1,-2 0,-5 0,-7 -2,-5 -9,-13 -14,-13z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666638in" height="0.666665in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 60 60"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#49509E}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M27 0c-2,1 -3,0 -6,1 -1,1 -2,1 -3,1 0,1 -1,1 -2,2 -3,1 -6,4 -9,6 -8,9 -9,23 -3,34 4,8 12,14 21,15 4,1 7,1 11,0 1,0 0,0 3,-1 5,-1 10,-4 13,-8 3,-3 5,-6 6,-10 1,-3 2,-8 2,-13 -1,-2 -1,-3 -2,-6 -2,-7 -6,-13 -13,-17 -1,-1 -3,-1 -5,-2 -4,-1 -9,-3 -13,-2zm10 16c-2,1 -2,1 -3,3 -1,0 -2,1 -2,1 0,1 1,1 1,2 2,1 4,4 6,5 1,1 1,1 2,0 1,-2 3,-3 2,-6 0,-3 -3,-5 -6,-5zm-20 23c0,3 1,3 4,3 5,0 8,-4 12,-7 2,-2 1,-1 -1,-4 -1,-1 -2,-2 -3,-2 -3,-4 -2,-4 -5,-1 -3,3 -7,6 -7,11zm10 -31c-3,0 -5,1 -8,2 -8,5 -12,13 -11,23 1,11 12,21 25,19 3,0 6,-1 8,-3 2,-1 4,-3 6,-5 2,-2 3,-4 4,-7 3,-8 0,-18 -7,-24 -4,-4 -11,-6 -17,-5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
@@ -0,0 +1,58 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.34067in" height="1.34067in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 438 438"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil11 {fill:none}
|
||||
.fil0 {fill:#F4F8F8}
|
||||
.fil2 {fill:#FEFEFE;fill-rule:nonzero}
|
||||
.fil4 {fill:#F7C3B9;fill-rule:nonzero}
|
||||
.fil6 {fill:#F4B3AC;fill-rule:nonzero}
|
||||
.fil5 {fill:#F4AEA1;fill-rule:nonzero}
|
||||
.fil8 {fill:#F3ADB2;fill-rule:nonzero}
|
||||
.fil7 {fill:#F29F96;fill-rule:nonzero}
|
||||
.fil10 {fill:#EE817C;fill-rule:nonzero}
|
||||
.fil1 {fill:#EC6F54;fill-rule:nonzero}
|
||||
.fil3 {fill:#3B4A9A;fill-rule:nonzero}
|
||||
.fil9 {fill:#2E3778;fill-rule:nonzero}
|
||||
.fil12 {fill:#49509E;fill-rule:nonzero}
|
||||
]]>
|
||||
</style>
|
||||
<clipPath id="id0">
|
||||
<path d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1359329921408">
|
||||
<path class="fil0" d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
|
||||
<g style="clip-path:url(#id0)">
|
||||
<g>
|
||||
<g>
|
||||
<path id="1" class="fil1" d="M219 321c89,0 134,-31 144,-63 6,-21 -31,11 -35,-106 -1,-57 -30,-102 -109,-102 -79,0 -106,45 -109,102 -7,130 -47,76 -36,108 10,30 56,61 145,61z"/>
|
||||
<path class="fil2" d="M331 427l-224 0 0 -9c0,-62 50,-112 112,-112 62,0 112,50 112,112l0 9z"/>
|
||||
<path class="fil3" d="M271 317c0,6 -1,46 0,56 0,13 -105,14 -106,1 0,-10 -1,-27 -1,-56 -34,17 -57,53 -57,94l0 15 224 0 0 -15c0,-42 -24,-78 -60,-95z"/>
|
||||
<path class="fil4" d="M136 198c-3,-10 -14,-18 -24,-16 -11,2 -19,12 -18,23 1,11 11,20 21,23 11,3 23,2 34,-1l-13 -29z"/>
|
||||
<path class="fil5" d="M134 218c0,0 -1,0 -1,-1 -2,-5 -6,-11 -11,-14 -5,-4 -11,-6 -18,-6 -1,0 -1,-1 -1,-2 0,-1 1,-1 1,-1 0,0 0,0 0,0 7,0 14,2 20,6 5,4 9,10 12,16 0,1 0,2 -1,2l-1 0z"/>
|
||||
<path class="fil4" d="M302 198c2,-10 13,-18 24,-16 10,2 19,12 18,23 -1,11 -11,20 -22,23 -11,3 -22,2 -34,-1l14 -29z"/>
|
||||
<path class="fil5" d="M303 218l0 0c-1,0 -2,-1 -1,-2 2,-6 6,-12 12,-16 6,-4 12,-6 19,-6 0,0 0,0 0,0 1,0 2,0 2,1 0,1 -1,2 -2,2 -6,0 -12,2 -17,6 -5,3 -9,9 -11,14 -1,1 -1,1 -2,1z"/>
|
||||
<path class="fil6" d="M219 361c-20,0 -35,-16 -35,-35l0 -63 70 0 0 63c0,19 -16,35 -35,35z"/>
|
||||
<path class="fil7" d="M184 319l0 -56 70 0 0 42c-22,10 -46,13 -70,14z"/>
|
||||
<path class="fil4" d="M219 300l0 0c-51,0 -93,-41 -93,-92l0 -20c0,-51 42,-93 93,-93 51,0 92,42 92,93l0 20c0,51 -41,92 -92,92z"/>
|
||||
<path class="fil8" d="M258 211c2,8 13,12 24,10 11,-3 18,-11 16,-20 -1,-8 -12,-12 -23,-10 -11,3 -19,11 -17,20zm-78 0c-2,8 -13,12 -24,10 -11,-3 -19,-11 -17,-20 2,-8 13,-12 24,-10 11,3 18,11 17,20z"/>
|
||||
<path class="fil9" d="M255 177c0,-3 -6,-3 -7,0 -1,5 -1,11 1,14 1,2 4,2 5,0 3,-3 2,-9 1,-14zm-66 14c-2,2 -4,2 -6,0 -2,-3 -1,-9 -1,-14 1,-3 7,-3 8,0 1,5 1,11 -1,14z"/>
|
||||
<path class="fil10" d="M219 223c-7,0 -13,-6 -13,-13l0 -2c0,-1 1,-2 2,-2 1,0 1,1 1,2l0 2c0,6 5,10 10,10 5,0 9,-4 9,-10l0 -2c0,-1 1,-2 2,-2 1,0 1,1 1,2l0 2c0,7 -5,13 -12,13z"/>
|
||||
<path class="fil10" d="M219 196c0,0 0,0 -1,-1 -2,0 -4,-2 -5,-4 -1,-2 -1,-5 1,-7 1,-2 3,-3 5,-3 2,0 4,1 5,2 0,0 0,1 -1,2 0,0 -1,0 -1,-1 -1,0 -2,0 -3,0 -1,0 -2,0 -3,1 -1,2 -1,3 -1,5 1,2 2,3 4,3 1,0 3,-1 4,-2 0,0 1,-1 2,0 0,0 0,1 0,1 -1,2 -3,4 -6,4z"/>
|
||||
<path class="fil1" d="M121 187c38,4 130,-22 139,-75 0,0 6,51 56,75 0,0 23,-124 -95,-124 -119,0 -100,124 -100,124z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path class="fil11" d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
|
||||
<path class="fil12" d="M219 416c54,0 103,-22 139,-58 36,-36 58,-85 58,-139 0,-55 -22,-104 -58,-140 -36,-35 -85,-57 -139,-57 -55,0 -104,22 -140,57 -35,36 -57,85 -57,140 0,54 22,103 57,139 36,36 85,58 140,58zm155 -42c-40,39 -95,64 -155,64 -61,0 -115,-25 -155,-64 -40,-40 -64,-95 -64,-155 0,-61 24,-115 64,-155 40,-40 94,-64 155,-64 60,0 115,24 155,64 39,40 64,94 64,155 0,60 -25,115 -64,155z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.34166in" height="1.34166in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 427 427"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil5 {fill:none}
|
||||
.fil0 {fill:#F4F8F8}
|
||||
.fil2 {fill:#F7C3B9;fill-rule:nonzero}
|
||||
.fil3 {fill:#F4B3AC;fill-rule:nonzero}
|
||||
.fil4 {fill:#F29F96;fill-rule:nonzero}
|
||||
.fil1 {fill:#49509E;fill-rule:nonzero}
|
||||
]]>
|
||||
</style>
|
||||
<clipPath id="id0">
|
||||
<path d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1359325661072">
|
||||
<path class="fil0" d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
|
||||
<g style="clip-path:url(#id0)">
|
||||
<g>
|
||||
<g>
|
||||
<path id="1" class="fil1" d="M323 416l-218 0 0 -8c0,-61 48,-109 109,-109 60,0 109,48 109,109l0 8z"/>
|
||||
<path class="fil2" d="M133 194c-2,-10 -13,-18 -24,-16 -10,2 -18,12 -17,22 1,11 11,20 21,23 11,3 22,1 33,-1l-13 -28z"/>
|
||||
<path class="fil2" d="M294 194c3,-10 14,-18 24,-16 10,2 18,12 17,22 -1,11 -10,20 -21,23 -11,3 -22,1 -33,-1l13 -28z"/>
|
||||
<path class="fil3" d="M214 352c-19,0 -34,-16 -34,-34l0 -62 68 0 0 62c0,18 -16,34 -34,34z"/>
|
||||
<path class="fil4" d="M180 311l0 -55 68 0 0 42c-21,9 -45,12 -68,13z"/>
|
||||
<path class="fil2" d="M214 293l0 0c-50,0 -90,-41 -90,-90l0 -20c0,-49 40,-89 90,-89 49,0 89,40 89,89l0 20c0,49 -40,90 -89,90z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path class="fil5" d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
|
||||
<path class="fil1" d="M214 404c52,0 100,-21 134,-56 35,-34 56,-82 56,-134 0,-53 -21,-101 -56,-135 -34,-35 -82,-56 -134,-56 -53,0 -101,21 -135,56 -35,34 -56,82 -56,135 0,52 21,100 56,134 34,35 82,56 135,56zm151 -39c-39,38 -92,62 -151,62 -59,0 -113,-24 -151,-62 -39,-39 -63,-92 -63,-151 0,-59 24,-113 63,-151 38,-39 92,-63 151,-63 59,0 112,24 151,63 38,38 62,92 62,151 0,59 -24,112 -62,151z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
@@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.425in" height="1.425in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 726 726"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil4 {fill:none}
|
||||
.fil1 {fill:#FDD54E}
|
||||
.fil5 {fill:#FBE5B9}
|
||||
.fil3 {fill:#F7BF4E}
|
||||
.fil2 {fill:#F4B03D}
|
||||
.fil6 {fill:#F0A230}
|
||||
.fil0 {fill:#D17D2B}
|
||||
.fil7 {fill:#3A3B3A}
|
||||
]]>
|
||||
</style>
|
||||
<clipPath id="id0">
|
||||
<path d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1359330850544">
|
||||
<g>
|
||||
<circle class="fil0" cx="363" cy="363" r="363"/>
|
||||
<path class="fil1" d="M344 671c182,0 328,-147 328,-328 0,-181 -146,-328 -328,-328 -181,0 -327,147 -327,328 0,181 146,328 327,328zm0 -40c160,0 288,-129 288,-288 0,-159 -128,-288 -288,-288 -159,0 -287,129 -287,288 0,159 128,288 287,288z"/>
|
||||
<path class="fil2" d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
|
||||
<g style="clip-path:url(#id0)">
|
||||
<g>
|
||||
<circle class="fil3" cx="343" cy="126" r="274"/>
|
||||
</g>
|
||||
</g>
|
||||
<path class="fil4" d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
|
||||
<path class="fil5" d="M170 142c13,-13 29,-18 35,-9 6,8 -1,26 -14,40 -14,13 -29,18 -35,9 -6,-8 0,-26 14,-40zm44 -9c7,0 12,-6 12,-12 0,-7 -5,-12 -12,-12 -6,0 -12,5 -12,12 0,6 6,12 12,12z"/>
|
||||
<path class="fil6" d="M511 503c13,-14 29,-18 35,-10 6,9 0,27 -14,40 -13,14 -29,18 -35,10 -6,-9 0,-26 14,-40zm44 -10c7,0 12,-5 12,-12 0,-6 -5,-11 -12,-11 -6,0 -11,5 -11,11 0,7 5,12 11,12z"/>
|
||||
</g>
|
||||
<path class="fil7" d="M486 205c7,0 12,0 15,0 4,1 7,2 11,5 5,2 8,6 9,11 2,6 3,13 3,22 0,9 -1,17 -3,22 -1,6 -4,10 -9,12 -4,2 -8,3 -11,4 -4,0 -9,0 -16,0l-132 0 0 44 85 0c7,0 12,0 16,1 3,0 7,1 11,4 8,4 11,15 11,34 0,20 -5,32 -16,36 -5,1 -12,2 -22,2l-85 0 0 81c0,7 0,12 0,16 -1,3 -2,6 -4,11 -5,8 -16,11 -34,11 -20,0 -32,-5 -36,-16 -1,-5 -2,-12 -2,-22l0 -81 -36 0c-10,0 -18,-1 -22,-2 -11,-4 -17,-16 -17,-36 0,-19 4,-30 12,-34 4,-3 8,-4 11,-4 3,-1 9,-1 15,-1l37 0 0 -82c0,-15 3,-25 8,-30 5,-6 16,-8 31,-8l170 0z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.425in" height="1.425in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 4353 4353"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil4 {fill:none}
|
||||
.fil1 {fill:#FDD54E}
|
||||
.fil5 {fill:#FBE5B9}
|
||||
.fil3 {fill:#F7BF4E}
|
||||
.fil2 {fill:#F4B03D}
|
||||
.fil6 {fill:#F0A230}
|
||||
.fil0 {fill:#D17D2B}
|
||||
.fil7 {fill:#3A3B3A}
|
||||
]]>
|
||||
</style>
|
||||
<clipPath id="id0">
|
||||
<path d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1359333286720">
|
||||
<g>
|
||||
<circle class="fil0" cx="2177" cy="2177" r="2177"/>
|
||||
<path class="fil1" d="M2065 4021c1085,0 1965,-880 1965,-1965 0,-1086 -880,-1966 -1965,-1966 -1086,0 -1965,880 -1965,1966 0,1085 879,1965 1965,1965zm0 -240c953,0 1726,-772 1726,-1725 0,-953 -773,-1726 -1726,-1726 -953,0 -1726,773 -1726,1726 0,953 773,1725 1726,1725z"/>
|
||||
<path class="fil2" d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
|
||||
<g style="clip-path:url(#id0)">
|
||||
<g>
|
||||
<circle class="fil3" cx="2058" cy="752" r="1641"/>
|
||||
</g>
|
||||
</g>
|
||||
<path class="fil4" d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
|
||||
<path class="fil5" d="M1017 854c81,-83 175,-108 211,-58 35,50 -3,157 -84,239 -81,83 -175,108 -210,58 -35,-50 2,-157 83,-239zm266 -59c39,0 70,-32 70,-71 0,-39 -31,-70 -70,-70 -39,0 -71,31 -71,70 0,39 32,71 71,71z"/>
|
||||
<path class="fil6" d="M3062 3014c81,-82 176,-108 211,-58 35,50 -3,158 -84,240 -81,82 -175,108 -210,57 -35,-50 2,-157 83,-239zm266 -59c39,0 70,-31 70,-70 0,-39 -31,-71 -70,-71 -39,0 -70,32 -70,71 0,39 31,70 70,70z"/>
|
||||
</g>
|
||||
<path class="fil7" d="M2463 1163c-36,4 -79,4 -112,14 -34,10 -66,14 -101,25 -67,22 -116,46 -174,83 -45,28 -98,85 -123,132 -61,116 -3,174 -45,171 -183,-13 -335,2 -480,60 -119,48 -223,128 -262,249 -15,46 -7,726 -8,882 0,54 0,72 12,117 5,17 35,68 45,81 31,42 87,92 135,116 29,14 58,28 89,41 74,32 133,39 205,51 75,13 218,18 298,1 53,-12 84,-10 157,-34 147,-49 309,-139 329,-310 2,-17 -1,-50 2,-63 4,-19 30,-11 52,-10 198,6 371,-16 529,-106 15,-8 26,-17 39,-27 82,-65 96,-79 137,-183 16,-40 7,-188 7,-243l0 -638c1,-120 -31,-181 -120,-260 -140,-123 -422,-174 -611,-149zm126 249c-108,0 -161,3 -267,34 -34,10 -155,60 -144,101 11,40 118,79 154,90 90,27 123,30 219,30 64,0 159,-3 218,-26 40,-15 137,-39 164,-85 30,-51 -142,-116 -177,-122 -55,-10 -111,-22 -167,-22zm-829 679c100,0 182,1 274,-35 107,-42 212,-82 67,-156 -165,-84 -449,-83 -613,-1 -103,52 -86,78 -24,118 72,46 202,74 296,74zm416 188c-14,-1 -110,39 -176,49 -163,25 -240,24 -412,0 -28,-4 -63,-14 -88,-22 -24,-8 -65,-28 -86,-27 -4,24 -2,51 -2,76 0,34 -2,41 17,60 45,46 155,80 217,91 48,9 95,9 149,9 120,0 168,-7 266,-43 33,-12 76,-34 97,-55 19,-19 19,-23 18,-58 0,-26 2,-55 0,-80zm-1 425c-15,-2 -77,23 -97,30 -165,52 -425,46 -591,-7 -16,-5 -30,-12 -47,-19 -34,-12 -28,6 -28,36 1,58 -11,71 29,106 37,34 128,63 186,77 136,31 334,14 465,-43 20,-9 64,-36 77,-55 13,-17 11,-101 6,-125zm402 -359l-118 -4c-41,-2 -29,9 -29,132 0,40 12,38 48,40 142,8 290,-2 411,-72 64,-37 54,-61 51,-160 -22,-2 -59,15 -81,23 -79,28 -194,41 -282,41zm12 -422l-158 -6c-2,27 -1,56 -1,83 0,12 1,25 0,38 0,57 -4,51 159,51 98,0 135,-9 214,-35 35,-11 59,-22 88,-39 60,-36 53,-61 48,-160 -26,0 -97,36 -162,46 -33,5 -52,13 -89,14 -39,0 -60,8 -99,8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
+41
-19
@@ -1,26 +1,48 @@
|
||||
<template>
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<div class="min-h-screen flex flex-col bg-gradient-to-b from-green-100 to-green-300 pb-24">
|
||||
<!-- Page Content -->
|
||||
<router-view v-slot="{ Component }">
|
||||
<div class="flex-1">
|
||||
<component :is="Component" />
|
||||
</div>
|
||||
</router-view>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<nav v-if="!['/register', '/login'].includes($route.path)" class="fixed bottom-0 left-0 w-full border-t shadow-lg flex justify-center gap-[100px] items-center z-50 h-[90px] bg-lime-200">
|
||||
<router-link
|
||||
to="/"
|
||||
class="flex flex-col items-center text-gray-600 hover:text-green-500 p-2"
|
||||
active-class="text-green-600 font-bold"
|
||||
exact
|
||||
>
|
||||
<img src="/images/but-nav-home.png" class="w-10 h-10" />
|
||||
<span class="text-xs font-bold">Home</span>
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
to="/character"
|
||||
class="flex flex-col items-center text-gray-600 hover:text-green-500 p-2"
|
||||
active-class="text-green-600 font-bold"
|
||||
>
|
||||
<img src="/images/but-nav-koleksi.png" class="w-10 h-10" />
|
||||
<span class="text-xs font-bold">Koleksi</span>
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
to="/hiburan"
|
||||
class="flex flex-col items-center text-gray-600 hover:text-green-500 p-2"
|
||||
active-class="text-green-600 font-bold"
|
||||
>
|
||||
<img src="/images/but-nav-hiburan.png" class="w-10 h-10" />
|
||||
<span class="text-xs font-bold">Hiburan</span>
|
||||
</router-link>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
name: "App",
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.665988in" height="0.666071in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 150 150"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#F4F8F8}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M50 119l0 15c0,11 10,18 20,15 3,-1 8,-5 11,-7 7,-7 11,-13 15,-22 7,-15 -2,-4 16,-20 22,-18 36,-43 37,-72 1,-7 1,-10 -2,-16 -2,-4 -5,-7 -9,-9 -4,-3 -9,-3 -15,-3 -11,1 -20,3 -30,6 -9,4 -17,8 -24,13 -3,3 -7,6 -10,8 -3,3 -6,6 -9,10 -3,3 -5,6 -8,10 -1,1 -1,1 -2,2 -1,2 -1,2 -3,2 -10,4 -21,9 -28,17 -6,7 -13,16 -6,25 6,10 16,6 30,7 9,0 17,9 17,19zm44 -81c-5,1 -7,2 -10,6 -5,6 -4,16 4,22 11,8 26,-2 24,-16 -1,-7 -9,-14 -18,-12zm-73 74c-7,1 -8,3 -11,8 -3,4 -12,22 -9,27 3,5 9,2 13,0 5,-1 14,-6 19,-9 4,-4 6,-14 1,-20 -3,-4 -7,-6 -13,-6zm21 -30l1 1c2,1 6,1 14,9 2,1 4,4 6,6 2,5 2,6 4,9 1,0 10,-5 13,-6 2,-1 3,-3 5,-4 5,-3 12,-9 17,-12 3,-4 6,-6 9,-10 13,-13 18,-29 20,-47 1,-9 0,-10 -9,-9 -3,0 -6,1 -8,1 -6,1 -11,2 -16,4 -18,7 -30,19 -42,34 -2,4 -5,8 -7,12 -2,3 -5,9 -7,12z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666748in" height="0.666299in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 59 59"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#F4F8F8}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M0 28l0 25c0,3 3,6 6,6l47 0c3,0 6,-3 6,-6l0 -25c0,-5 -3,-7 -5,-9l-15 -15c-2,-2 -5,-4 -10,-4 -4,0 -7,2 -10,4 -2,3 -4,5 -7,7 -1,2 -9,10 -10,11 -1,2 -2,3 -2,6zm7 0l0 23c3,0 11,0 13,0 0,-2 0,-4 0,-6 0,-3 0,-4 1,-6 3,-6 14,-6 17,0 2,4 1,8 1,12l12 0c1,-1 0,-17 0,-20 0,-1 0,-2 0,-3 0,-1 0,-2 -1,-2 -4,-5 -9,-9 -13,-14 -3,-2 -5,-6 -9,-5 -2,1 -3,2 -4,3l-15 15c-1,1 -2,2 -2,3z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666362in" height="0.667362in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 71 71"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#F4F8F8}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M34 30c-2,0 -2,0 -4,1 -5,2 -7,4 -10,7 -4,4 -7,9 -8,16 -1,6 1,13 7,16 2,1 6,2 9,1 4,-1 5,-3 9,-2 2,0 3,2 9,2 3,1 6,-1 8,-3 3,-2 4,-3 5,-7 2,-9 -3,-18 -9,-24 -3,-3 -10,-8 -16,-7zm-27 -12c-8,2 -9,14 -4,20 1,2 4,4 6,4 7,-2 10,-14 4,-21 -1,-2 -3,-4 -6,-3zm48 12l0 0c0,6 2,12 9,12 2,-1 4,-3 5,-5 4,-7 3,-19 -6,-19 -3,0 -5,2 -6,4 -2,2 -2,4 -2,8zm-40 -20c0,4 0,6 2,9 1,2 3,4 6,5 6,1 9,-5 10,-11 0,-3 -1,-6 -2,-8 -5,-9 -16,-5 -16,5zm31 -10c-2,1 -4,2 -6,5 -4,7 0,20 9,19 2,-1 4,-3 5,-5 4,-5 4,-16 -3,-18 -2,-1 -3,-1 -5,-1zm-10 39c-4,0 -7,3 -9,5 -9,8 -7,18 -2,18 2,1 3,-1 5,-1 3,-2 8,-2 12,0 2,1 6,4 8,-2 1,-2 0,-5 0,-7 -2,-5 -9,-13 -14,-13z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="0.666638in" height="0.666665in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 60 60"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:#49509E}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<path class="fil0" d="M27 0c-2,1 -3,0 -6,1 -1,1 -2,1 -3,1 0,1 -1,1 -2,2 -3,1 -6,4 -9,6 -8,9 -9,23 -3,34 4,8 12,14 21,15 4,1 7,1 11,0 1,0 0,0 3,-1 5,-1 10,-4 13,-8 3,-3 5,-6 6,-10 1,-3 2,-8 2,-13 -1,-2 -1,-3 -2,-6 -2,-7 -6,-13 -13,-17 -1,-1 -3,-1 -5,-2 -4,-1 -9,-3 -13,-2zm10 16c-2,1 -2,1 -3,3 -1,0 -2,1 -2,1 0,1 1,1 1,2 2,1 4,4 6,5 1,1 1,1 2,0 1,-2 3,-3 2,-6 0,-3 -3,-5 -6,-5zm-20 23c0,3 1,3 4,3 5,0 8,-4 12,-7 2,-2 1,-1 -1,-4 -1,-1 -2,-2 -3,-2 -3,-4 -2,-4 -5,-1 -3,3 -7,6 -7,11zm10 -31c-3,0 -5,1 -8,2 -8,5 -12,13 -11,23 1,11 12,21 25,19 3,0 6,-1 8,-3 2,-1 4,-3 6,-5 2,-2 3,-4 4,-7 3,-8 0,-18 -7,-24 -4,-4 -11,-6 -17,-5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
@@ -0,0 +1,58 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.34067in" height="1.34067in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 438 438"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil11 {fill:none}
|
||||
.fil0 {fill:#F4F8F8}
|
||||
.fil2 {fill:#FEFEFE;fill-rule:nonzero}
|
||||
.fil4 {fill:#F7C3B9;fill-rule:nonzero}
|
||||
.fil6 {fill:#F4B3AC;fill-rule:nonzero}
|
||||
.fil5 {fill:#F4AEA1;fill-rule:nonzero}
|
||||
.fil8 {fill:#F3ADB2;fill-rule:nonzero}
|
||||
.fil7 {fill:#F29F96;fill-rule:nonzero}
|
||||
.fil10 {fill:#EE817C;fill-rule:nonzero}
|
||||
.fil1 {fill:#EC6F54;fill-rule:nonzero}
|
||||
.fil3 {fill:#3B4A9A;fill-rule:nonzero}
|
||||
.fil9 {fill:#2E3778;fill-rule:nonzero}
|
||||
.fil12 {fill:#49509E;fill-rule:nonzero}
|
||||
]]>
|
||||
</style>
|
||||
<clipPath id="id0">
|
||||
<path d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1359329921408">
|
||||
<path class="fil0" d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
|
||||
<g style="clip-path:url(#id0)">
|
||||
<g>
|
||||
<g>
|
||||
<path id="1" class="fil1" d="M219 321c89,0 134,-31 144,-63 6,-21 -31,11 -35,-106 -1,-57 -30,-102 -109,-102 -79,0 -106,45 -109,102 -7,130 -47,76 -36,108 10,30 56,61 145,61z"/>
|
||||
<path class="fil2" d="M331 427l-224 0 0 -9c0,-62 50,-112 112,-112 62,0 112,50 112,112l0 9z"/>
|
||||
<path class="fil3" d="M271 317c0,6 -1,46 0,56 0,13 -105,14 -106,1 0,-10 -1,-27 -1,-56 -34,17 -57,53 -57,94l0 15 224 0 0 -15c0,-42 -24,-78 -60,-95z"/>
|
||||
<path class="fil4" d="M136 198c-3,-10 -14,-18 -24,-16 -11,2 -19,12 -18,23 1,11 11,20 21,23 11,3 23,2 34,-1l-13 -29z"/>
|
||||
<path class="fil5" d="M134 218c0,0 -1,0 -1,-1 -2,-5 -6,-11 -11,-14 -5,-4 -11,-6 -18,-6 -1,0 -1,-1 -1,-2 0,-1 1,-1 1,-1 0,0 0,0 0,0 7,0 14,2 20,6 5,4 9,10 12,16 0,1 0,2 -1,2l-1 0z"/>
|
||||
<path class="fil4" d="M302 198c2,-10 13,-18 24,-16 10,2 19,12 18,23 -1,11 -11,20 -22,23 -11,3 -22,2 -34,-1l14 -29z"/>
|
||||
<path class="fil5" d="M303 218l0 0c-1,0 -2,-1 -1,-2 2,-6 6,-12 12,-16 6,-4 12,-6 19,-6 0,0 0,0 0,0 1,0 2,0 2,1 0,1 -1,2 -2,2 -6,0 -12,2 -17,6 -5,3 -9,9 -11,14 -1,1 -1,1 -2,1z"/>
|
||||
<path class="fil6" d="M219 361c-20,0 -35,-16 -35,-35l0 -63 70 0 0 63c0,19 -16,35 -35,35z"/>
|
||||
<path class="fil7" d="M184 319l0 -56 70 0 0 42c-22,10 -46,13 -70,14z"/>
|
||||
<path class="fil4" d="M219 300l0 0c-51,0 -93,-41 -93,-92l0 -20c0,-51 42,-93 93,-93 51,0 92,42 92,93l0 20c0,51 -41,92 -92,92z"/>
|
||||
<path class="fil8" d="M258 211c2,8 13,12 24,10 11,-3 18,-11 16,-20 -1,-8 -12,-12 -23,-10 -11,3 -19,11 -17,20zm-78 0c-2,8 -13,12 -24,10 -11,-3 -19,-11 -17,-20 2,-8 13,-12 24,-10 11,3 18,11 17,20z"/>
|
||||
<path class="fil9" d="M255 177c0,-3 -6,-3 -7,0 -1,5 -1,11 1,14 1,2 4,2 5,0 3,-3 2,-9 1,-14zm-66 14c-2,2 -4,2 -6,0 -2,-3 -1,-9 -1,-14 1,-3 7,-3 8,0 1,5 1,11 -1,14z"/>
|
||||
<path class="fil10" d="M219 223c-7,0 -13,-6 -13,-13l0 -2c0,-1 1,-2 2,-2 1,0 1,1 1,2l0 2c0,6 5,10 10,10 5,0 9,-4 9,-10l0 -2c0,-1 1,-2 2,-2 1,0 1,1 1,2l0 2c0,7 -5,13 -12,13z"/>
|
||||
<path class="fil10" d="M219 196c0,0 0,0 -1,-1 -2,0 -4,-2 -5,-4 -1,-2 -1,-5 1,-7 1,-2 3,-3 5,-3 2,0 4,1 5,2 0,0 0,1 -1,2 0,0 -1,0 -1,-1 -1,0 -2,0 -3,0 -1,0 -2,0 -3,1 -1,2 -1,3 -1,5 1,2 2,3 4,3 1,0 3,-1 4,-2 0,0 1,-1 2,0 0,0 0,1 0,1 -1,2 -3,4 -6,4z"/>
|
||||
<path class="fil1" d="M121 187c38,4 130,-22 139,-75 0,0 6,51 56,75 0,0 23,-124 -95,-124 -119,0 -100,124 -100,124z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path class="fil11" d="M219 427c115,0 208,-93 208,-208 0,-115 -93,-208 -208,-208 -115,0 -208,93 -208,208 0,115 93,208 208,208z"/>
|
||||
<path class="fil12" d="M219 416c54,0 103,-22 139,-58 36,-36 58,-85 58,-139 0,-55 -22,-104 -58,-140 -36,-35 -85,-57 -139,-57 -55,0 -104,22 -140,57 -35,36 -57,85 -57,140 0,54 22,103 57,139 36,36 85,58 140,58zm155 -42c-40,39 -95,64 -155,64 -61,0 -115,-25 -155,-64 -40,-40 -64,-95 -64,-155 0,-61 24,-115 64,-155 40,-40 94,-64 155,-64 60,0 115,24 155,64 39,40 64,94 64,155 0,60 -25,115 -64,155z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.34166in" height="1.34166in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 427 427"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil5 {fill:none}
|
||||
.fil0 {fill:#F4F8F8}
|
||||
.fil2 {fill:#F7C3B9;fill-rule:nonzero}
|
||||
.fil3 {fill:#F4B3AC;fill-rule:nonzero}
|
||||
.fil4 {fill:#F29F96;fill-rule:nonzero}
|
||||
.fil1 {fill:#49509E;fill-rule:nonzero}
|
||||
]]>
|
||||
</style>
|
||||
<clipPath id="id0">
|
||||
<path d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1359325661072">
|
||||
<path class="fil0" d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
|
||||
<g style="clip-path:url(#id0)">
|
||||
<g>
|
||||
<g>
|
||||
<path id="1" class="fil1" d="M323 416l-218 0 0 -8c0,-61 48,-109 109,-109 60,0 109,48 109,109l0 8z"/>
|
||||
<path class="fil2" d="M133 194c-2,-10 -13,-18 -24,-16 -10,2 -18,12 -17,22 1,11 11,20 21,23 11,3 22,1 33,-1l-13 -28z"/>
|
||||
<path class="fil2" d="M294 194c3,-10 14,-18 24,-16 10,2 18,12 17,22 -1,11 -10,20 -21,23 -11,3 -22,1 -33,-1l13 -28z"/>
|
||||
<path class="fil3" d="M214 352c-19,0 -34,-16 -34,-34l0 -62 68 0 0 62c0,18 -16,34 -34,34z"/>
|
||||
<path class="fil4" d="M180 311l0 -55 68 0 0 42c-21,9 -45,12 -68,13z"/>
|
||||
<path class="fil2" d="M214 293l0 0c-50,0 -90,-41 -90,-90l0 -20c0,-49 40,-89 90,-89 49,0 89,40 89,89l0 20c0,49 -40,90 -89,90z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path class="fil5" d="M214 416c111,0 202,-91 202,-202 0,-112 -91,-202 -202,-202 -112,0 -202,90 -202,202 0,111 90,202 202,202z"/>
|
||||
<path class="fil1" d="M214 404c52,0 100,-21 134,-56 35,-34 56,-82 56,-134 0,-53 -21,-101 -56,-135 -34,-35 -82,-56 -134,-56 -53,0 -101,21 -135,56 -35,34 -56,82 -56,135 0,52 21,100 56,134 34,35 82,56 135,56zm151 -39c-39,38 -92,62 -151,62 -59,0 -113,-24 -151,-62 -39,-39 -63,-92 -63,-151 0,-59 24,-113 63,-151 38,-39 92,-63 151,-63 59,0 112,24 151,63 38,38 62,92 62,151 0,59 -24,112 -62,151z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
@@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.425in" height="1.425in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 726 726"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil4 {fill:none}
|
||||
.fil1 {fill:#FDD54E}
|
||||
.fil5 {fill:#FBE5B9}
|
||||
.fil3 {fill:#F7BF4E}
|
||||
.fil2 {fill:#F4B03D}
|
||||
.fil6 {fill:#F0A230}
|
||||
.fil0 {fill:#D17D2B}
|
||||
.fil7 {fill:#3A3B3A}
|
||||
]]>
|
||||
</style>
|
||||
<clipPath id="id0">
|
||||
<path d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1359330850544">
|
||||
<g>
|
||||
<circle class="fil0" cx="363" cy="363" r="363"/>
|
||||
<path class="fil1" d="M344 671c182,0 328,-147 328,-328 0,-181 -146,-328 -328,-328 -181,0 -327,147 -327,328 0,181 146,328 327,328zm0 -40c160,0 288,-129 288,-288 0,-159 -128,-288 -288,-288 -159,0 -287,129 -287,288 0,159 128,288 287,288z"/>
|
||||
<path class="fil2" d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
|
||||
<g style="clip-path:url(#id0)">
|
||||
<g>
|
||||
<circle class="fil3" cx="343" cy="126" r="274"/>
|
||||
</g>
|
||||
</g>
|
||||
<path class="fil4" d="M344 617c152,0 274,-123 274,-274 0,-151 -122,-274 -274,-274 -151,0 -273,123 -273,274 0,151 122,274 273,274z"/>
|
||||
<path class="fil5" d="M170 142c13,-13 29,-18 35,-9 6,8 -1,26 -14,40 -14,13 -29,18 -35,9 -6,-8 0,-26 14,-40zm44 -9c7,0 12,-6 12,-12 0,-7 -5,-12 -12,-12 -6,0 -12,5 -12,12 0,6 6,12 12,12z"/>
|
||||
<path class="fil6" d="M511 503c13,-14 29,-18 35,-10 6,9 0,27 -14,40 -13,14 -29,18 -35,10 -6,-9 0,-26 14,-40zm44 -10c7,0 12,-5 12,-12 0,-6 -5,-11 -12,-11 -6,0 -11,5 -11,11 0,7 5,12 11,12z"/>
|
||||
</g>
|
||||
<path class="fil7" d="M486 205c7,0 12,0 15,0 4,1 7,2 11,5 5,2 8,6 9,11 2,6 3,13 3,22 0,9 -1,17 -3,22 -1,6 -4,10 -9,12 -4,2 -8,3 -11,4 -4,0 -9,0 -16,0l-132 0 0 44 85 0c7,0 12,0 16,1 3,0 7,1 11,4 8,4 11,15 11,34 0,20 -5,32 -16,36 -5,1 -12,2 -22,2l-85 0 0 81c0,7 0,12 0,16 -1,3 -2,6 -4,11 -5,8 -16,11 -34,11 -20,0 -32,-5 -36,-16 -1,-5 -2,-12 -2,-22l0 -81 -36 0c-10,0 -18,-1 -22,-2 -11,-4 -17,-16 -17,-36 0,-19 4,-30 12,-34 4,-3 8,-4 11,-4 3,-1 9,-1 15,-1l37 0 0 -82c0,-15 3,-25 8,-30 5,-6 16,-8 31,-8l170 0z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<!-- Creator: CorelDRAW X7 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.425in" height="1.425in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 4353 4353"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil4 {fill:none}
|
||||
.fil1 {fill:#FDD54E}
|
||||
.fil5 {fill:#FBE5B9}
|
||||
.fil3 {fill:#F7BF4E}
|
||||
.fil2 {fill:#F4B03D}
|
||||
.fil6 {fill:#F0A230}
|
||||
.fil0 {fill:#D17D2B}
|
||||
.fil7 {fill:#3A3B3A}
|
||||
]]>
|
||||
</style>
|
||||
<clipPath id="id0">
|
||||
<path d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="Layer_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<g id="_1359333286720">
|
||||
<g>
|
||||
<circle class="fil0" cx="2177" cy="2177" r="2177"/>
|
||||
<path class="fil1" d="M2065 4021c1085,0 1965,-880 1965,-1965 0,-1086 -880,-1966 -1965,-1966 -1086,0 -1965,880 -1965,1966 0,1085 879,1965 1965,1965zm0 -240c953,0 1726,-772 1726,-1725 0,-953 -773,-1726 -1726,-1726 -953,0 -1726,773 -1726,1726 0,953 773,1725 1726,1725z"/>
|
||||
<path class="fil2" d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
|
||||
<g style="clip-path:url(#id0)">
|
||||
<g>
|
||||
<circle class="fil3" cx="2058" cy="752" r="1641"/>
|
||||
</g>
|
||||
</g>
|
||||
<path class="fil4" d="M2065 3697c906,0 1641,-735 1641,-1641 0,-907 -735,-1642 -1641,-1642 -907,0 -1641,735 -1641,1642 0,906 734,1641 1641,1641z"/>
|
||||
<path class="fil5" d="M1017 854c81,-83 175,-108 211,-58 35,50 -3,157 -84,239 -81,83 -175,108 -210,58 -35,-50 2,-157 83,-239zm266 -59c39,0 70,-32 70,-71 0,-39 -31,-70 -70,-70 -39,0 -71,31 -71,70 0,39 32,71 71,71z"/>
|
||||
<path class="fil6" d="M3062 3014c81,-82 176,-108 211,-58 35,50 -3,158 -84,240 -81,82 -175,108 -210,57 -35,-50 2,-157 83,-239zm266 -59c39,0 70,-31 70,-70 0,-39 -31,-71 -70,-71 -39,0 -70,32 -70,71 0,39 31,70 70,70z"/>
|
||||
</g>
|
||||
<path class="fil7" d="M2463 1163c-36,4 -79,4 -112,14 -34,10 -66,14 -101,25 -67,22 -116,46 -174,83 -45,28 -98,85 -123,132 -61,116 -3,174 -45,171 -183,-13 -335,2 -480,60 -119,48 -223,128 -262,249 -15,46 -7,726 -8,882 0,54 0,72 12,117 5,17 35,68 45,81 31,42 87,92 135,116 29,14 58,28 89,41 74,32 133,39 205,51 75,13 218,18 298,1 53,-12 84,-10 157,-34 147,-49 309,-139 329,-310 2,-17 -1,-50 2,-63 4,-19 30,-11 52,-10 198,6 371,-16 529,-106 15,-8 26,-17 39,-27 82,-65 96,-79 137,-183 16,-40 7,-188 7,-243l0 -638c1,-120 -31,-181 -120,-260 -140,-123 -422,-174 -611,-149zm126 249c-108,0 -161,3 -267,34 -34,10 -155,60 -144,101 11,40 118,79 154,90 90,27 123,30 219,30 64,0 159,-3 218,-26 40,-15 137,-39 164,-85 30,-51 -142,-116 -177,-122 -55,-10 -111,-22 -167,-22zm-829 679c100,0 182,1 274,-35 107,-42 212,-82 67,-156 -165,-84 -449,-83 -613,-1 -103,52 -86,78 -24,118 72,46 202,74 296,74zm416 188c-14,-1 -110,39 -176,49 -163,25 -240,24 -412,0 -28,-4 -63,-14 -88,-22 -24,-8 -65,-28 -86,-27 -4,24 -2,51 -2,76 0,34 -2,41 17,60 45,46 155,80 217,91 48,9 95,9 149,9 120,0 168,-7 266,-43 33,-12 76,-34 97,-55 19,-19 19,-23 18,-58 0,-26 2,-55 0,-80zm-1 425c-15,-2 -77,23 -97,30 -165,52 -425,46 -591,-7 -16,-5 -30,-12 -47,-19 -34,-12 -28,6 -28,36 1,58 -11,71 29,106 37,34 128,63 186,77 136,31 334,14 465,-43 20,-9 64,-36 77,-55 13,-17 11,-101 6,-125zm402 -359l-118 -4c-41,-2 -29,9 -29,132 0,40 12,38 48,40 142,8 290,-2 411,-72 64,-37 54,-61 51,-160 -22,-2 -59,15 -81,23 -79,28 -194,41 -282,41zm12 -422l-158 -6c-2,27 -1,56 -1,83 0,12 1,25 0,38 0,57 -4,51 159,51 98,0 135,-9 214,-35 35,-11 59,-22 88,-39 60,-36 53,-61 48,-160 -26,0 -97,36 -162,46 -33,5 -52,13 -89,14 -39,0 -60,8 -99,8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
+5
-1
@@ -1,4 +1,8 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './assets/tailwind.css'
|
||||
import router from './router'
|
||||
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-2 pl-2">
|
||||
<div class="w-full max-w-md flex flex-col items-center z-60 " >
|
||||
<div class="relative flex items-end justify-center z-30 px-[10px] mt-[40px]">
|
||||
<img
|
||||
src="/images/logo.png"
|
||||
:alt="selectedCharacter.name"
|
||||
class="object-contain relative z-30 pb-0"
|
||||
/>
|
||||
</div>
|
||||
<h2 class="mt-6 text-xl font-bold text-gray-700">
|
||||
{{ selectedCharacter.name }}
|
||||
</h2>
|
||||
<div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
|
||||
<img
|
||||
:src="selectedProfile.img"
|
||||
:alt="selectedCharacter.name"
|
||||
class="w-40 h-60 object-contain relative z-30 pb-12"
|
||||
/>
|
||||
<div
|
||||
class="absolute w-[30px] h-[30px] right-0 top-[100px] z-40 bg-green-600 hover:bg-green-400 transition"
|
||||
style="
|
||||
-webkit-mask: url('/images/icon-edit.svg') no-repeat center;
|
||||
-webkit-mask-size: contain;
|
||||
mask: url('/images/icon-edit.svg') no-repeat center;
|
||||
mask-size: contain;
|
||||
"
|
||||
@click="changeAva('profile')"
|
||||
></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full max-w-md flex flex-col items-center z-60">
|
||||
<div class="bg-lime-200 shadow-xl rounded-2xl p-6 flex flex-col items-center
|
||||
relative w-full px-[10px] mx-[10px] bg-cover bg-center bg-no-repeat"
|
||||
style="background-image: url('/images/bghero.jpg')">
|
||||
<div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px] mt-[40px]">
|
||||
<img
|
||||
:src="selectedCharacter.img"
|
||||
:alt="selectedCharacter.name"
|
||||
class="w-40 h-60 object-contain relative z-30 pb-12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <div class="absolute bottom-9 w-32 h-16 flex items-center justify-center perspective-800">
|
||||
<div class="w-28 h-4 bg-gradient-to-r from-gray-400 to-gray-500 rounded-full absolute top-3 left-0 blur-sm opacity-70"></div>
|
||||
<div
|
||||
class="absolute w-28 h-8 rounded-full bg-white transform-gpu rotate-x-60 scale-y-50 shadow-md z-10 top-1"
|
||||
></div>
|
||||
<div
|
||||
class="absolute w-28 h-8 rounded-full bg-grey transform-gpu rotate-x-60 scale-y-50 shadow-md z-10 top-3"
|
||||
></div>
|
||||
<div
|
||||
class="absolute w-28 h-5 rounded-full bg-black opacity-30 blur-md bottom-5"
|
||||
></div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="flex items-center justify-center w-[30px] h-[30px] rounded-full border-4 border-green-500 absolute top-2 right-2">
|
||||
<img src="/images/but-nav-koleksi.png" alt="img" class="w-[20px] h-[20px] "
|
||||
@click="changeAva('character')">
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Character Selection -->
|
||||
<div class="w-full max-w-md flex flex-col items-center z-60 " >
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6 w-full max-w-2xl">
|
||||
|
||||
<div
|
||||
v-for="char in characters"
|
||||
:key="char.name"
|
||||
@click="selectedCharacter = char"
|
||||
class="cursor-pointer flex flex-col items-center p-4 rounded-xl shadow-md hover:shadow-lg transition bg-white"
|
||||
:class="{'ring-4 ring-green-400': selectedCharacter.name === char.name}"
|
||||
>
|
||||
<img :src="char.img" :alt="char.name" class="w-20 h-20 object-contain" />
|
||||
<!-- <p class="mt-2 text-gray-600 font-medium">{{ char.name }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
characters: [
|
||||
{ name: "Bear", img: "../images/char/bear.png" },
|
||||
{ name: "Rabbit", img: "../images/char/rabbit.png" },
|
||||
{ name: "Fox", img: "../images/char/fox.png" },
|
||||
{ name: "Brown Bear", img: "../images/char/brownbear.png" },
|
||||
{ name: "Lion", img: "../images/char/lion.png" },
|
||||
{ name: "Monkey", img: "../images/char/monkey.png" },
|
||||
{ name: "Pig", img: "../images/char/pig.png" },
|
||||
{ name: "Sheep", img: "../images/char/sheep.png" },
|
||||
{ name: "Tiger", img: "../images/char/tiger.png" },
|
||||
],
|
||||
|
||||
profiles : [
|
||||
{name : "profile", img: "/images/propic-001.svg"},
|
||||
{name : "profile", img: "/images/propic-blank.svg"},
|
||||
],
|
||||
|
||||
selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
|
||||
showModal:false,
|
||||
selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
|
||||
modalType : "profile",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickCharacter(char) {
|
||||
this.selectedCharacter = char;
|
||||
this.showModal = false;
|
||||
},
|
||||
changeAva(type) {
|
||||
this.modalType = type;
|
||||
this.showModal = true;
|
||||
},
|
||||
profileListSelected(profile) {
|
||||
this.selectedProfile = profile;
|
||||
this.showModal = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-2 pl-2">
|
||||
<!-- Character Preview -->
|
||||
<div class="w-full max-w-md flex flex-col items-center z-60 " >
|
||||
<div class="relative flex items-end justify-center z-30 px-[10px] mt-[40px]">
|
||||
<img
|
||||
src="/images/logo.png"
|
||||
:alt="selectedCharacter.name"
|
||||
class="object-contain relative z-30 pb-0"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
|
||||
<img
|
||||
:src="selectedProfile.img"
|
||||
:alt="selectedCharacter.name"
|
||||
class="w-40 h-60 object-contain relative z-30 pb-12"
|
||||
/>
|
||||
<div
|
||||
class="absolute w-[30px] h-[30px] right-0 top-[100px] z-40 bg-green-600 hover:bg-green-400 transition"
|
||||
style="
|
||||
-webkit-mask: url('/images/icon-edit.svg') no-repeat center;
|
||||
-webkit-mask-size: contain;
|
||||
mask: url('/images/icon-edit.svg') no-repeat center;
|
||||
mask-size: contain;
|
||||
"
|
||||
@click="changeAva('profile')"
|
||||
></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full max-w-md flex flex-col items-center z-60">
|
||||
<div class="bg-lime-200 shadow-xl rounded-2xl p-6 flex flex-col items-center
|
||||
relative w-full px-[10px] mx-[10px] bg-cover bg-center bg-no-repeat"
|
||||
style="background-image: url('/images/bghero.jpg')">
|
||||
<div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px] mt-[40px]">
|
||||
<img
|
||||
:src="selectedCharacter.img"
|
||||
:alt="selectedCharacter.name"
|
||||
class="w-40 h-60 object-contain relative z-30 pb-12"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row items-start justify-between gap-12 w-full pt-5 absolute bottom-2 left-2 pr-5">
|
||||
<div class="bg-white w-[90px] h-[60px] rounded-xl p-1 shadow-lg flex flex-col bottom-0">
|
||||
<span class="text-xs font-bold text-gray-800 items-center text-center">{{ 'KOIN' }}</span>
|
||||
<div class="flex items-end justify-center gap-2 p-1">
|
||||
<img src="/images/token-poin.svg" alt="coin" class="w-6 h-6" />
|
||||
<span>100</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white w-[90px] h-[60px] rounded-xl p-1 shadow-lg flex flex-col bottom-0">
|
||||
<span class="text-xs font-bold text-gray-800 items-center text-center">{{ 'Dayly Quest' }}</span>
|
||||
<div class="flex items-end justify-center gap-2 p-1">
|
||||
<span>3/10</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center w-[30px] h-[30px] rounded-full border-4 border-green-500 absolute top-2 right-2">
|
||||
<img src="/images/but-nav-koleksi.png" alt="img" class="w-[20px] h-[20px] "
|
||||
@click="changeAva('character')">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="logo w-full max-w-md flex flex-col items-center mt-4">
|
||||
<div class="bg-grey shadow-xl rounded-2xl px-16 py-1 flex flex-col items-center">
|
||||
<h2 class="mt-4 mb-4 text-md font-bold text-grey-400">Level 10 - Hari ke-2</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Character Selection -->
|
||||
<div class="w-full max-w-md flex flex-col items-center bg-green-grey py-[0px] mx-[10px] md:mx-0
|
||||
transform transition-transform duration-300 hover:scale-105
|
||||
">
|
||||
<div class="bg-lime-500 rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
<img src="/images/qicon1.png" alt="Quest Icon" class="w-12 h-12" />
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-bold text-gray-800">{{ 'BANGUN PAGI' }}</h2>
|
||||
<p class="text-sm text-gray-600 mb-2">{{ 'Mulai hari dengan semangat.!' }}</p>
|
||||
|
||||
<div class="flex items-center gap-4 text-xs text-gray-700">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/></svg>
|
||||
{{ '12:20' }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
|
||||
+{{ '1000' }} koin
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4 text-green-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
|
||||
+{{ '100' }}mm
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-xs text-gray-700">
|
||||
<button class="w-full mt-4 py-2 px-4 rounded-lg bg-green-600 text-white font-bold hover:bg-green-700 transition">MULAI QUEST</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full max-w-md flex flex-col items-center bg-white-grey py-[0px] mx-2.5 md:mx-5
|
||||
transform transition-transform duration-300 hover:scale-105
|
||||
">
|
||||
<div class="bg-white rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
<img src="/images/qicon2.png" alt="Quest Icon" class="w-12 h-12" />
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-bold text-gray-800">{{ 'MAKAN SIANG' }}</h2>
|
||||
<p class="text-sm text-gray-600 mb-2">{{ 'Waktunya makan siang dan istirahat.' }}</p>
|
||||
|
||||
<div class="flex items-center gap-4 text-xs text-gray-700">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/></svg>
|
||||
{{ '12:20' }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
|
||||
+{{ '1000' }} koin
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4 text-green-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
|
||||
+{{ '100' }}mm
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-xs text-gray-700">
|
||||
<button class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold hover:bg-green-700 transition">MULAI QUEST</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full max-w-md flex flex-col items-center bg-green-grey py-[0px] mx-2.5 md:mx-5
|
||||
transform transition-transform duration-300 hover:scale-105
|
||||
">
|
||||
<div class="bg-white rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
<img src="/images/qicon3.png" alt="Quest Icon" class="w-12 h-12" />
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-bold text-gray-800">{{ 'CERITA HARI INI' }}</h2>
|
||||
<p class="text-sm text-gray-600 mb-2">{{ 'Berbagi cerita seru hari ini' }}</p>
|
||||
|
||||
<div class="flex items-center gap-4 text-xs text-gray-700">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 11V5a1 1 0 012 0v6a1 1 0 01-2 0zM10 13a1 1 0 100 2 1 1 0 000-2z"/></svg>
|
||||
{{ '12:20' }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15a5 5 0 100-10 5 5 0 000 10z"/><path fill-rule="evenodd" d="M10 0a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"/></svg>
|
||||
+{{ '1000' }} koin
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="w-4 h-4 text-red-600 transform rotate-180" fill="currentColor" viewBox="0 0 20 20"><path d="M10 14a1 1 0 01-.707-.293l-4-4a1 1 0 011.414-1.414L10 11.586l3.293-3.293a1 1 0 011.414 1.414l-4 4A1 1 0 0110 14z"/></svg>
|
||||
+{{ '100' }}mm
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-xs text-gray-700">
|
||||
<button class="w-full mt-4 py-2 px-4 rounded-lg bg-red-600 text-white font-bold hover:bg-green-700 transition">MULAI QUEST</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div
|
||||
v-if="showModal"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
|
||||
>
|
||||
<div class="bg-white rounded-lg p-6 w-80 max-h-[80vh] overflow-auto relative">
|
||||
<h2 class="text-xl font-bold mb-4">Pilih {{ modalType === 'profile' ? 'Profil' : 'Karakter' }}</h2>
|
||||
|
||||
<!-- Tombol close -->
|
||||
<button
|
||||
@click="showModal = false"
|
||||
class="absolute top-2 right-2 text-gray-500 hover:text-gray-800"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
<!-- List karakter -->
|
||||
<div class="grid grid-cols-3 gap-4" v-if="modalType === 'profile'">
|
||||
<div
|
||||
v-for="prof in profiles"
|
||||
:key="prof.name"
|
||||
@click="profileListSelected(prof)"
|
||||
class="cursor-pointer hover:scale-105 transform transition flex flex-col items-center"
|
||||
>
|
||||
<img :src="prof.img" :alt="prof.name" class="w-16 h-16 rounded"/>
|
||||
<span class="text-sm mt-1">{{ prof.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4" v-if="modalType === 'character'">
|
||||
<div
|
||||
v-for="char in characters"
|
||||
:key="char.name"
|
||||
@click="clickCharacter(char)"
|
||||
class="cursor-pointer hover:scale-105 transform transition flex flex-col items-center"
|
||||
>
|
||||
<img :src="char.img" :alt="char.name" class="w-16 h-16 rounded"/>
|
||||
<span class="text-sm mt-1">{{ char.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
characters: [
|
||||
{ name: "Bear", img: "../images/char/bear.png" },
|
||||
{ name: "Rabbit", img: "../images/char/rabbit.png" },
|
||||
{ name: "Fox", img: "../images/char/fox.png" },
|
||||
{ name: "Brown Bear", img: "../images/char/brownbear.png" },
|
||||
{ name: "Lion", img: "../images/char/lion.png" },
|
||||
{ name: "Monkey", img: "../images/char/monkey.png" },
|
||||
{ name: "Pig", img: "../images/char/pig.png" },
|
||||
{ name: "Sheep", img: "../images/char/sheep.png" },
|
||||
{ name: "Tiger", img: "../images/char/tiger.png" },
|
||||
],
|
||||
|
||||
profiles : [
|
||||
{name : "profile", img: "/images/propic-001.svg"},
|
||||
{name : "profile", img: "/images/propic-blank.svg"},
|
||||
],
|
||||
|
||||
selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
|
||||
showModal:false,
|
||||
selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
|
||||
modalType : "profile",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickCharacter(char) {
|
||||
this.selectedCharacter = char;
|
||||
this.showModal = false;
|
||||
},
|
||||
changeAva(type) {
|
||||
this.modalType = type;
|
||||
this.showModal = true;
|
||||
},
|
||||
profileListSelected(profile) {
|
||||
this.selectedProfile = profile;
|
||||
this.showModal = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300">
|
||||
<div class="w-full max-w-md flex flex-col items-center z-60 mt-10">
|
||||
<div class="relative flex items-end justify-center z-30">
|
||||
<img
|
||||
src="/images/logo.png"
|
||||
:alt="selectedCharacter.name"
|
||||
class="object-contain relative z-30 pb-0"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
|
||||
<img
|
||||
:src="selectedProfile.img"
|
||||
:alt="selectedCharacter.name"
|
||||
class="w-40 h-60 object-contain relative z-30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Character Selection -->
|
||||
<div class="w-full flex flex-col items-center z-60">
|
||||
<div class="w-full p-4">
|
||||
<div class="mb-4">
|
||||
<input type="text" placeholder="email"
|
||||
class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl
|
||||
focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<input type="text" placeholder="Password"
|
||||
class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="w-full mt-6 h-[60px] bg-lime-500 border border-transparent rounded-lg px-4 py-2 text-sm font-medium text-white hover:bg-lime-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500"> R E G I S T E R </button>
|
||||
<div class="w-full flex items-center justify-center mt-2">
|
||||
<router-link to="/register">
|
||||
<span class="cursor-pointer justify-center text-center text-sm mt-2 text-blue-600 font-bold">R E G I S T E R</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
characters: [
|
||||
{ name: "Bear", img: "../images/char/bear.png" },
|
||||
{ name: "Rabbit", img: "../images/char/rabbit.png" },
|
||||
{ name: "Fox", img: "../images/char/fox.png" },
|
||||
{ name: "Brown Bear", img: "../images/char/brownbear.png" },
|
||||
{ name: "Lion", img: "../images/char/lion.png" },
|
||||
{ name: "Monkey", img: "../images/char/monkey.png" },
|
||||
{ name: "Pig", img: "../images/char/pig.png" },
|
||||
{ name: "Sheep", img: "../images/char/sheep.png" },
|
||||
{ name: "Tiger", img: "../images/char/tiger.png" },
|
||||
],
|
||||
|
||||
profiles : [
|
||||
{name : "profile", img: "/images/propic-001.svg"},
|
||||
{name : "profile", img: "/images/propic-blank.svg"},
|
||||
],
|
||||
|
||||
selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
|
||||
showModal:false,
|
||||
selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
|
||||
modalType : "profile",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickCharacter(char) {
|
||||
this.selectedCharacter = char;
|
||||
this.showModal = false;
|
||||
},
|
||||
changeAva(type) {
|
||||
this.modalType = type;
|
||||
this.showModal = true;
|
||||
},
|
||||
profileListSelected(profile) {
|
||||
this.selectedProfile = profile;
|
||||
this.showModal = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-4 pl-4">
|
||||
<div class="max-w-md flex flex-col items-center z-60" >
|
||||
<div class="relative flex items-end justify-center z-30 px-[10px] mt-[10px]">
|
||||
<img
|
||||
src="/images/logo.png"
|
||||
:alt="selectedCharacter.name"
|
||||
class="object-contain relative z-30 pb-0"
|
||||
/>
|
||||
</div>
|
||||
<h2 class="mt-6 text-xl font-bold text-gray-700">
|
||||
{{ selectedCharacter.name }}
|
||||
</h2>
|
||||
<div class="relative w-40 h-50 flex items-end justify-center z-30 px-[10px]">
|
||||
<img
|
||||
:src="selectedProfile.img"
|
||||
:alt="selectedCharacter.name"
|
||||
class="w-40 h-60 object-contain relative z-30 pb-12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Character Selection -->
|
||||
<div class="w-full flex flex-col items-center z-60" >
|
||||
<div class="w-full ">
|
||||
<div class="mb-4">
|
||||
<input type="text" placeholder="Real Name"
|
||||
class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl
|
||||
focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<input type="text" placeholder="Email"
|
||||
class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl
|
||||
focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<input type="text" placeholder="Phone"
|
||||
class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl
|
||||
focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
<div >
|
||||
<input type="text" placeholder="Password"
|
||||
class="w-full h-[50px] px-4 py-2 text-grey-700 bg-white border border-grey-300 rounded-2xl
|
||||
focus:outline-none focus:ring focus:ring-grey-100 focus:border-grey-300 shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
<button class="w-full mt-6 h-[60px] bg-lime-500 border border-transparent rounded-lg px-4 py-2 text-sm font-medium text-white hover:bg-lime-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500"> R E G I S T E R </button>
|
||||
<div class="flex items-center justify-center mt-4">
|
||||
<router-link to ="/login">
|
||||
<span class="font-bold text-sm text-blue-600">L O G I N</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
data() {
|
||||
return {
|
||||
characters: [
|
||||
{ name: "Bear", img: "../images/char/bear.png" },
|
||||
{ name: "Rabbit", img: "../images/char/rabbit.png" },
|
||||
{ name: "Fox", img: "../images/char/fox.png" },
|
||||
{ name: "Brown Bear", img: "../images/char/brownbear.png" },
|
||||
{ name: "Lion", img: "../images/char/lion.png" },
|
||||
{ name: "Monkey", img: "../images/char/monkey.png" },
|
||||
{ name: "Pig", img: "../images/char/pig.png" },
|
||||
{ name: "Sheep", img: "../images/char/sheep.png" },
|
||||
{ name: "Tiger", img: "../images/char/tiger.png" },
|
||||
],
|
||||
|
||||
profiles : [
|
||||
{name : "profile", img: "/images/propic-001.svg"},
|
||||
{name : "profile", img: "/images/propic-blank.svg"},
|
||||
],
|
||||
|
||||
selectedCharacter: { name: "Tiger", img: "../images/char/tiger.png" },
|
||||
showModal:false,
|
||||
selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
|
||||
modalType : "profile",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickCharacter(char) {
|
||||
this.selectedCharacter = char;
|
||||
this.showModal = false;
|
||||
},
|
||||
changeAva(type) {
|
||||
this.modalType = type;
|
||||
this.showModal = true;
|
||||
},
|
||||
profileListSelected(profile) {
|
||||
this.selectedProfile = profile;
|
||||
this.showModal = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,21 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomePage from '../pages/Home.vue'
|
||||
import ContentPage from '../pages/Home.vue'
|
||||
import CharacterPage from '../pages/Character.vue'
|
||||
import RegistePage from '../pages/Register.vue'
|
||||
import loginPage from '../pages/Login.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', name: 'home', component: HomePage },
|
||||
{ path: '/content', name: 'content', component: ContentPage },
|
||||
{ path: '/character', name: 'character', component: CharacterPage },
|
||||
{path: '/register', name: 'register', component: RegistePage},
|
||||
{path: '/login', name:'login', component:loginPage}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,31 @@
|
||||
import defaultTheme from "tailwindcss/defaultTheme";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./public/index.html",
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
green: {
|
||||
50: "#f0fdf4",
|
||||
100: "#dcfce7",
|
||||
200: "#bbf7d0",
|
||||
300: "#86efac",
|
||||
400: "#4ade80",
|
||||
500: "#22c55e",
|
||||
600: "#16a34a",
|
||||
700: "#15803d",
|
||||
800: "#166534",
|
||||
900: "#14532d",
|
||||
},
|
||||
red: {
|
||||
500: "#ef4444",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
presets: [defaultTheme],
|
||||
};
|
||||
Reference in New Issue
Block a user