Merge branch 'develop' into main
@@ -15,6 +15,7 @@ module.exports = {
|
||||
},
|
||||
rules: {
|
||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
|
||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
}
|
||||
};
|
||||
|
||||
BIN
public/celestials_bg-min.jpg
Normal file
|
After Width: | Height: | Size: 164 KiB |
BIN
public/celestials_bg.jpg
Normal file
|
After Width: | Height: | Size: 455 KiB |
BIN
public/home_bg-min.jpg
Normal file
|
After Width: | Height: | Size: 322 KiB |
BIN
public/home_bg.jpg
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
23
public/icons/galaxy-spiral-shape-white.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 571.1 571.1" style="enable-background:new 0 0 571.1 571.1;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M181.9,364.9c0.9,0.1,1.7,0.1,2.6,0.1c27.6,0,79.5-26.5,109.4-99.4c9.5-23.2,10.1-41.3,1.7-53.8
|
||||
c-5.4-8.1-14.2-13.3-25.8-15.5c9.5-5.8,20-10.3,24.8-12.1c9.2-2.7,15.7-1.8,20.1,3.1c8.7,9.8,8.1,32.5,7.1,40.4
|
||||
c-0.5,4.1,1.9,8.1,5.8,9.6s8.3,0.2,10.7-3.2c17.1-23.9,14-53.8,13.9-54.9c-3.8-42.8-28.9-49.2-43.5-49.2
|
||||
c-16.2,0-36.2,7.3-59.5,21.6c-19.2,11.8-74.5,62-73.7,110.8c0.4,22.9,13.4,36.3,35.7,36.8c-9.2,7.9-18.3,11.2-28.1,9.6
|
||||
c-22.5-3.8-17.1-38.3-16.9-39.7c0.8-4.6-2-9-6.4-10.3c-4.5-1.3-9.2,0.9-11,5.1c-13,29.9-13.3,58.8-0.9,79.2
|
||||
C156.2,356,168.5,364,181.9,364.9z"/>
|
||||
<path class="st0" d="M519.1,66.4c-21.9-19.5-49.5-29.3-81.9-29.3c-85.8,0-177.2,68.8-181,71.7c-3.9,3-4.8,8.8-1.9,12.8
|
||||
c2.9,4,8.4,5.6,12.5,2.8l3-1c24.9-16,56.3-26.6,86.3-22.3c12.3,1.8,24.7,7.8,31.1,18.5c6.3,10.4,6.2,23.3,5,35.4
|
||||
c-6.7,67.7-41.9,129.5-90.4,176.3c-30.4,29.3-72.9,61.9-116.9,64.8c-20.5,1.3-35.4-3.4-45.3-13.9c-14.9-15.8-13.6-40.1-13.6-40.3
|
||||
c0.2-3.8-1.9-7.4-5.4-8.9c-3.4-1.6-7.5-0.9-10.2,1.9c-16.5,16.5-20.3,49.2-20.6,73.5c-48-86.1,34-222.3,34.9-223.8
|
||||
c2.1-3.5,1.7-8-1.1-11s-7.2-3.8-10.9-1.9C53.9,201.9,12.6,315.1,10.9,320C-8.4,375.8-1.7,436.5,28.3,478.6
|
||||
C53.8,514.3,94.1,534,141.8,534c44.1,0,93.7-16.1,147.4-47.8C456.8,387.3,494.5,239.1,503,178.7c41.5,83.8-28.2,203.1-29,204.3
|
||||
c-2.3,3.8-1.5,8.8,1.9,11.6c3.4,2.9,8.4,2.9,11.8,0c47.4-40,82.4-122.1,83.4-195.4C571.8,143.3,553.9,97.4,519.1,66.4z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
53
public/icons/galaxy-spiral-shape.svg
Normal file
@@ -0,0 +1,53 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="571.106px" height="571.107px" viewBox="0 0 571.106 571.107" style="enable-background:new 0 0 571.106 571.107;"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<path d="M181.887,364.903c0.9,0.101,1.7,0.101,2.6,0.101c27.6,0,79.5-26.5,109.4-99.4c9.5-23.2,10.101-41.3,1.7-53.8
|
||||
c-5.4-8.1-14.2-13.3-25.8-15.5c9.5-5.8,20-10.3,24.8-12.1c9.2-2.7,15.7-1.8,20.1,3.1c8.7,9.8,8.101,32.5,7.101,40.4
|
||||
c-0.5,4.1,1.899,8.1,5.8,9.6s8.3,0.2,10.7-3.2c17.1-23.9,14-53.8,13.899-54.9c-3.8-42.8-28.899-49.2-43.5-49.2
|
||||
c-16.199,0-36.2,7.3-59.5,21.6c-19.2,11.8-74.5,62-73.7,110.8c0.4,22.9,13.4,36.3,35.7,36.8c-9.2,7.899-18.3,11.199-28.1,9.6
|
||||
c-22.5-3.8-17.1-38.3-16.9-39.7c0.8-4.6-2-9-6.4-10.3c-4.5-1.3-9.2,0.9-11,5.1c-13,29.9-13.3,58.8-0.9,79.2
|
||||
C156.187,356.003,168.487,364.003,181.887,364.903z"/>
|
||||
<path d="M519.087,66.403c-21.9-19.5-49.5-29.3-81.9-29.3c-85.8,0-177.2,68.8-181,71.7c-3.9,3-4.8,8.8-1.9,12.8
|
||||
c2.9,4,8.4,5.6,12.5,2.8l3-1c24.899-16,56.3-26.6,86.3-22.3c12.3,1.8,24.7,7.8,31.1,18.5c6.301,10.4,6.2,23.3,5,35.4
|
||||
c-6.699,67.7-41.899,129.5-90.399,176.3c-30.4,29.3-72.9,61.9-116.9,64.8c-20.5,1.3-35.4-3.399-45.3-13.899
|
||||
c-14.9-15.801-13.6-40.101-13.6-40.301c0.2-3.8-1.9-7.399-5.4-8.899c-3.4-1.601-7.5-0.9-10.2,1.899c-16.5,16.5-20.3,49.2-20.6,73.5
|
||||
c-48-86.1,34-222.3,34.9-223.8c2.1-3.5,1.7-8-1.1-11s-7.2-3.8-10.9-1.9c-58.8,30.2-100.1,143.4-101.8,148.3
|
||||
c-19.3,55.8-12.6,116.5,17.4,158.6c25.5,35.7,65.8,55.4,113.5,55.4c44.1,0,93.7-16.101,147.399-47.8
|
||||
c167.601-98.9,205.301-247.101,213.801-307.5c41.5,83.8-28.2,203.1-29,204.3c-2.301,3.8-1.5,8.8,1.899,11.6c3.4,2.9,8.4,2.9,11.8,0
|
||||
c47.4-40,82.4-122.1,83.4-195.4C571.787,143.303,553.887,97.403,519.087,66.403z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
29
public/icons/moon-and-stars-in-a-cloud-white.svg
Normal file
@@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 572.4 572.4" style="enable-background:new 0 0 572.4 572.4;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M363.7,70.8c-4.5,0-9.2,0.3-14.5,1c-22.8-34.3-60.6-54.7-101.7-54.7c-65.2,0-118.9,51.8-122,116.4
|
||||
c-1.1-0.1-2.1-0.1-3.2-0.1C54.8,133.4,0,188.2,0,255.6c0,30.6,11.3,59.7,32,82.3c-4.4,13.8-6.6,28-6.6,42.2
|
||||
c0,76.9,62.5,139.4,139.4,139.4c19.6,0,38.7-4.1,56.8-12.2c25.4,30.5,62.3,48,102,48c65.4,0,121.1-48,131-112.4
|
||||
c66.4-5.3,117.9-60.6,117.9-127.6c0-55.2-34.6-103.4-86.5-121.2c0-0.3,0-0.7,0-1C486,125.6,431.1,70.8,363.7,70.8z M101.7,286.3
|
||||
c2.3-62.5,28.3-107,77.3-132.6c38.3-20,78.9-21.6,90.5-21.6c2.3,0,3.5,0.1,3.5,0.1c1.3,0.1,2.4,1.1,2.5,2.4c0.1,1.3-0.7,2.5-2,2.9
|
||||
c-28.9,7.9-53,44.3-53.3,44.7c-33.2,47.6-28.5,88.7-18.7,114.7c16.4,43.7,57.6,74.8,89.8,82.8c10,2.5,20.2,3.8,30.2,3.8
|
||||
c30.3,0,53.4-11.4,63.2-16.3c3.9-1.9,5.5-2.7,6.9-2.7c1.5,0,3,1.5,3,3c0,5-28.1,52.7-67.3,68.1c-17.8,7.7-40.5,11.9-63.7,11.9
|
||||
C189.7,447.5,108.2,405.1,101.7,286.3z M343.2,113.8c0-1.3,0.7-2.4,1.8-3c1.1-0.6,2.5-0.5,3.5,0.3l24.6,18.4l29.1-9.9
|
||||
c1.2-0.4,2.5-0.1,3.4,0.8c0.9,0.9,1.2,2.2,0.8,3.4l-9.9,29.1l18.4,24.6c0.8,1,0.9,2.4,0.3,3.5c-0.6,1.1-1.9,1.7-3,1.8l-30.7-0.4
|
||||
l-17.7,25.1c-0.6,0.9-1.7,1.4-2.7,1.4c-0.2,0-0.4,0-0.5,0c-1.3-0.2-2.3-1.1-2.7-2.3l-9.1-29.3l-29.3-9.1c-1.2-0.4-2.1-1.4-2.3-2.7
|
||||
c-0.2-1.3,0.3-2.5,1.4-3.3l25.1-17.7L343.2,113.8z M274.8,256.7c0-0.7,0.4-1.4,1-1.7c0.7-0.3,1.4-0.3,2,0.2l14.1,10.5l16.6-5.6
|
||||
c0.7-0.2,1.5-0.1,2,0.5c0.5,0.5,0.7,1.3,0.5,2l-5.6,16.6l10.5,14.1c0.4,0.6,0.5,1.4,0.2,2s-1.1,1.1-1.7,1l-17.6-0.2l-10.1,14.3
|
||||
c-0.4,0.5-0.9,0.8-1.6,0.8c-0.1,0-0.2,0-0.3,0c-0.7-0.1-1.3-0.6-1.5-1.3L278,293l-16.8-5.2c-0.7-0.2-1.2-0.8-1.3-1.5
|
||||
c-0.1-0.7,0.2-1.4,0.8-1.9l14.3-10.1L274.8,256.7z M392.3,329.8c-0.5,0.7-1.3,1.1-2.2,1.1c-0.1,0-0.3,0-0.4,0
|
||||
c-1-0.2-1.8-0.9-2.1-1.9l-7.3-23.5l-23.5-7.3c-1-0.3-1.7-1.1-1.9-2.1s0.3-2,1.1-2.6l20.1-14.2l-0.3-24.6c0-1,0.6-2,1.5-2.4
|
||||
c0.9-0.5,2-0.4,2.8,0.2l19.7,14.7l23.3-7.9c0.9-0.3,2-0.1,2.8,0.6c0.7,0.7,1,1.8,0.6,2.8l-7.9,23.3l14.7,19.7
|
||||
c0.6,0.8,0.7,1.9,0.2,2.8c-0.5,0.9-1.4,1.5-2.4,1.5l-24.6-0.3L392.3,329.8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
67
public/icons/moon-and-stars-in-a-cloud.svg
Normal file
@@ -0,0 +1,67 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="572.412px" height="572.412px" viewBox="0 0 572.412 572.412" style="enable-background:new 0 0 572.412 572.412;"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M363.719,70.797c-4.531,0-9.209,0.315-14.545,0.995c-22.787-34.282-60.598-54.65-101.725-54.65
|
||||
c-65.159,0-118.948,51.781-122.046,116.366c-1.052-0.057-2.113-0.096-3.174-0.096C54.832,133.412,0,188.244,0,255.64
|
||||
c0,30.562,11.332,59.669,31.967,82.275c-4.398,13.809-6.627,27.99-6.627,42.199c0,76.855,62.529,139.375,139.374,139.375
|
||||
c19.613,0,38.69-4.113,56.763-12.213c25.35,30.543,62.319,47.994,101.994,47.994c65.445,0,121.129-48.041,131.006-112.359
|
||||
c66.432-5.258,117.936-60.625,117.936-127.629c0-55.167-34.607-103.448-86.475-121.234c0.01-0.334,0.02-0.66,0.02-0.994
|
||||
C485.957,125.638,431.115,70.797,363.719,70.797z M101.668,286.345c2.343-62.5,28.324-107.033,77.255-132.622
|
||||
c38.25-20.005,78.919-21.554,90.48-21.554c2.276,0,3.509,0.058,3.509,0.058c1.32,0.057,2.391,1.071,2.544,2.381
|
||||
c0.143,1.31-0.679,2.534-1.951,2.878c-28.897,7.927-53.014,44.322-53.253,44.686c-33.191,47.631-28.506,88.683-18.733,114.75
|
||||
c16.39,43.74,57.595,74.779,89.82,82.84c9.984,2.496,20.158,3.758,30.246,3.758c30.295,0,53.379-11.436,63.238-16.312
|
||||
c3.891-1.932,5.498-2.727,6.875-2.727c1.482,0,3.031,1.492,3.031,2.975c0,5.012-28.143,52.738-67.291,68.086
|
||||
c-17.797,7.688-40.45,11.943-63.706,11.943C189.691,447.464,108.238,405.14,101.668,286.345z M343.17,113.799
|
||||
c-0.02-1.271,0.688-2.438,1.826-3.021c1.129-0.574,2.496-0.459,3.52,0.296l24.613,18.37l29.09-9.859
|
||||
c1.195-0.421,2.543-0.105,3.432,0.803c0.898,0.899,1.215,2.228,0.803,3.433l-9.857,29.089l18.369,24.614
|
||||
c0.766,1.014,0.879,2.381,0.297,3.519c-0.584,1.138-1.904,1.683-3.021,1.827l-30.715-0.392l-17.73,25.083
|
||||
c-0.631,0.889-1.654,1.405-2.734,1.405c-0.172,0-0.354-0.009-0.525-0.038c-1.254-0.201-2.295-1.09-2.668-2.305l-9.113-29.328
|
||||
l-29.328-9.123c-1.215-0.382-2.113-1.416-2.305-2.668c-0.201-1.252,0.334-2.515,1.367-3.251l25.082-17.729L343.17,113.799z
|
||||
M274.826,256.74c-0.01-0.727,0.392-1.396,1.042-1.731c0.66-0.334,1.434-0.258,2.008,0.172l14.067,10.5l16.619-5.642
|
||||
c0.689-0.22,1.453-0.057,1.971,0.459c0.516,0.517,0.697,1.272,0.459,1.96l-5.643,16.629l10.5,14.066
|
||||
c0.43,0.584,0.506,1.367,0.172,2.008s-1.148,1.072-1.73,1.043l-17.557-0.221l-10.137,14.336c-0.363,0.516-0.947,0.803-1.559,0.803
|
||||
c-0.096,0-0.201,0-0.296-0.02c-0.717-0.115-1.31-0.621-1.53-1.32l-5.211-16.762l-16.753-5.203c-0.688-0.21-1.205-0.803-1.32-1.529
|
||||
c-0.115-0.717,0.191-1.435,0.784-1.855l14.334-10.136L274.826,256.74z M392.301,329.778c-0.506,0.717-1.328,1.139-2.189,1.139
|
||||
c-0.143,0-0.277-0.01-0.42-0.029c-1.004-0.162-1.836-0.881-2.143-1.855l-7.297-23.494l-23.494-7.297
|
||||
c-0.975-0.307-1.693-1.139-1.855-2.143s0.268-2.018,1.1-2.601l20.092-14.2l-0.316-24.595c-0.01-1.014,0.555-1.96,1.463-2.419
|
||||
c0.898-0.459,1.998-0.363,2.812,0.239l19.707,14.717l23.305-7.898c0.947-0.344,2.027-0.086,2.754,0.641
|
||||
c0.717,0.727,0.965,1.788,0.641,2.754l-7.898,23.304l14.717,19.718c0.602,0.812,0.697,1.912,0.238,2.812
|
||||
c-0.459,0.908-1.377,1.473-2.42,1.463l-24.594-0.326L392.301,329.778z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
20
public/icons/saturn-and-other-planets-white.svg
Normal file
@@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 587.9 587.9" style="enable-background:new 0 0 587.9 587.9;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<circle class="st0" cx="388.4" cy="151.3" r="54.9"/>
|
||||
<circle class="st0" cx="97.6" cy="293.1" r="27.4"/>
|
||||
<path class="st0" d="M49.6,474.8c36.8,0,92.6-9.5,146.5-21.9c25,23.9,58.8,38.6,96.1,38.6c68.8,0,125.8-50,137.1-115.6
|
||||
c96.3-39.6,170.4-81.1,157.1-123.9c-0.1-0.3-0.2-0.6-0.3-0.9c-4.5-10.9-18.3-15.8-44.8-15.8c-46.8,0-119.9,15.2-123,15.8
|
||||
c-5,1.1-8.5,5.7-8,10.8s4.7,9.1,9.9,9.2c32.4,0.8,60.3,7.8,63.7,13.5c-3.3,7.4-25.6,21-56,36c-14.3-61.8-69.5-107.9-135.6-107.9
|
||||
c-76.9,0-139.3,62.4-139.3,139.3c0,20.9,4.8,40.7,13,58.5c-15.3,2.9-29.6,4.7-41.1,4.7c-10.8,0-16.4-1.6-19.1-2.9
|
||||
c0.7-3.3,5.5-14.7,36.5-36.2c2.8-1.8,4.6-5,4.6-8.5c0-5.5-4.4-10.1-9.9-10.1c-0.1,0-0.2,0-0.3,0c-0.3,0-0.7,0-1,0.1
|
||||
c-0.6,0.1-1.1,0.2-1.6,0.3c-11.6,2.8-103.5,26.5-127.8,66.9c-5.9,9.9-7.6,20.1-5,30.3C5.7,472.8,31,474.8,49.6,474.8z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
52
public/icons/saturn-and-other-planets.svg
Normal file
@@ -0,0 +1,52 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="587.934px" height="587.935px" viewBox="0 0 587.934 587.935" style="enable-background:new 0 0 587.934 587.935;"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<circle cx="388.427" cy="151.281" r="54.879"/>
|
||||
<circle cx="97.565" cy="293.121" r="27.444"/>
|
||||
<path d="M49.6,474.847c36.796,0,92.632-9.524,146.507-21.907c24.997,23.858,58.781,38.594,96.065,38.594
|
||||
c68.821,0,125.842-49.954,137.135-115.554c96.333-39.598,170.433-81.08,157.064-123.872c-0.086-0.287-0.191-0.574-0.307-0.851
|
||||
c-4.504-10.892-18.321-15.75-44.8-15.759c-46.828,0-119.876,15.176-122.965,15.816c-5.039,1.052-8.481,5.719-8.013,10.844
|
||||
s4.704,9.084,9.85,9.208c32.378,0.765,60.329,7.774,63.686,13.455c-3.251,7.411-25.618,20.99-56.046,35.955
|
||||
c-14.276-61.764-69.51-107.865-135.615-107.865c-76.939,0-139.306,62.367-139.306,139.306c0,20.942,4.752,40.727,13.024,58.542
|
||||
c-15.348,2.888-29.567,4.724-41.081,4.724c-10.806,0-16.352-1.616-19.077-2.936c0.717-3.299,5.489-14.735,36.452-36.232
|
||||
c2.792-1.807,4.647-4.953,4.647-8.52c0-5.518-4.389-10.146-9.869-10.146c-0.095,0-0.191,0-0.277,0
|
||||
c-0.334,0-0.66,0.029-0.994,0.067c-0.555,0.058-1.1,0.162-1.635,0.306c-11.561,2.831-103.533,26.46-127.841,66.861
|
||||
c-5.938,9.868-7.621,20.062-5.02,30.304C5.679,472.81,30.972,474.847,49.6,474.847z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
19
public/icons/saturn-planet-shape-white.svg
Normal file
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 587.2 587.2" style="enable-background:new 0 0 587.2 587.2;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M530.4,345.1c-3.6-1.5-7.7-0.8-10.5,2c-2.8,2.7-3.6,6.9-2.1,10.5c0.8,1.9,1,3.4,0.7,4.1
|
||||
c-0.5,0.9-3.3,3-9.6,4.1c-0.6,0.1-2,0.1-3.9,0.1c-4,0-14-0.2-30-2c9.6-22.1,14.6-46.1,14.6-70.2c0-97.2-79.1-176.4-176.4-176.4
|
||||
c-80.5,0-150,54.3-170.3,130.9c-22.9-14.9-40.7-30-52-44.1c-5.5-6.8-1.6-12.3,0.3-14.3c2.5-2.5,3.4-6.3,2.4-9.7
|
||||
c-1.1-3.4-4-5.9-7.5-6.5c-11.3-1.9-21.6-2.9-30.8-2.9c-43.3,0-51.8,20.9-53.3,26.8c-16.8,45,96,106.8,138.1,128
|
||||
c15.3,83.9,87.4,144.3,173.2,144.3c41.1,0,80.9-14.5,112.6-40.8c24.9,5.9,67,14.5,100.5,14.5c28.6,0,46.6-6.2,54.8-18.8
|
||||
c6.2-9.6,7.8-20.1,4.7-30.4C577,366,535.1,347.2,530.4,345.1z M269.4,229.7c-16.7,0-30.3-13.6-30.3-30.3s13.6-30.3,30.3-30.3
|
||||
s30.3,13.6,30.3,30.3C299.7,216.1,286.1,229.7,269.4,229.7z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
51
public/icons/saturn-planet-shape.svg
Normal file
@@ -0,0 +1,51 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="587.176px" height="587.176px" viewBox="0 0 587.176 587.176" style="enable-background:new 0 0 587.176 587.176;"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M530.365,345.148c-3.586-1.529-7.727-0.766-10.49,1.971c-2.773,2.725-3.615,6.855-2.143,10.451
|
||||
c0.766,1.865,1.014,3.424,0.65,4.084c-0.535,0.945-3.251,3.002-9.639,4.072c-0.65,0.076-1.97,0.115-3.911,0.115
|
||||
c-4.017,0-13.971-0.229-30.036-2.037c9.592-22.098,14.611-46.109,14.611-70.227c0-97.241-79.11-176.352-176.352-176.352
|
||||
c-80.477,0-150.016,54.286-170.317,130.939c-22.912-14.937-40.746-30.036-51.982-44.083c-5.47-6.847-1.578-12.345,0.258-14.296
|
||||
c2.534-2.534,3.433-6.263,2.353-9.667c-1.09-3.414-3.988-5.929-7.516-6.522c-11.274-1.903-21.649-2.869-30.849-2.869
|
||||
c-43.309,0-51.781,20.942-53.311,26.842c-16.801,44.991,95.998,106.812,138.111,128.042
|
||||
c15.338,83.939,87.42,144.336,173.234,144.336c41.109,0,80.889-14.459,112.569-40.822c24.9,5.908,67.014,14.545,100.54,14.545
|
||||
c28.63,0,46.551-6.168,54.774-18.848c6.206-9.572,7.831-20.092,4.705-30.42C577.039,365.967,535.117,347.205,530.365,345.148z
|
||||
M269.395,229.71c-16.696,0-30.285-13.588-30.285-30.285s13.588-30.275,30.285-30.275s30.284,13.579,30.284,30.284
|
||||
C299.679,216.141,286.091,229.71,269.395,229.71z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
42
public/icons/stars-group-white.svg
Normal file
@@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 528.2 528.2" style="enable-background:new 0 0 528.2 528.2;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M74.9,526.3c3,2.2,6.9,2.4,10.1,0.7l99.3-52.2l99.3,52.2c1.4,0.7,2.9,1.1,4.5,1.1c2,0,3.9-0.6,5.6-1.8
|
||||
c2.9-2.1,4.4-5.8,3.8-9.4l-19-110.6l80.4-78.3c2.6-2.5,3.5-6.3,2.4-9.8c-1.1-3.5-4.1-6-7.7-6.5l-111-16.1L192.9,195
|
||||
c-3.2-6.5-13.9-6.5-17.1,0L126,295.6L15,311.7c-3.6,0.5-6.6,3.1-7.7,6.5c-1.1,3.5-0.2,7.3,2.4,9.8l80.4,78.3l-19,110.6
|
||||
C70.4,520.6,71.9,524.2,74.9,526.3z"/>
|
||||
<path class="st0" d="M520.8,398.8c-1.1-3.5-4.1-6-7.7-6.5l-45.2-6.6l-20.2-41c-1.6-3.3-4.9-5.3-8.6-5.3c-3.7,0-7,2.1-8.6,5.3
|
||||
l-20.2,41l-45.2,6.6c-3.6,0.5-6.6,3.1-7.7,6.5c-1.1,3.5-0.2,7.3,2.4,9.8l32.7,31.9l-7.7,45c-0.6,3.6,0.9,7.2,3.8,9.4
|
||||
c2.9,2.1,6.9,2.4,10.1,0.7l40.4-21.3l40.4,21.3c1.4,0.7,2.9,1.1,4.5,1.1c2,0,3.9-0.6,5.6-1.8c2.9-2.1,4.4-5.8,3.8-9.4l-7.7-45
|
||||
l32.7-31.9C521,406.1,521.9,402.3,520.8,398.8z"/>
|
||||
<path class="st0" d="M326.8,149.4c-3.2-6.5-13.9-6.5-17.1,0L295.1,179l-32.6,4.7c-3.6,0.5-6.6,3.1-7.7,6.5
|
||||
c-1.1,3.5-0.2,7.3,2.4,9.8l23.6,23l-5.6,32.5c-0.6,3.6,0.9,7.2,3.8,9.4c1.7,1.2,3.6,1.8,5.6,1.8c1.5,0,3.1-0.4,4.4-1.2l29.2-15.4
|
||||
l29.2,15.2c1.4,0.7,2.9,0.8,4.4,0.8c0.1,0,0.2,0,0.2,0c5.3,0,9.6-4,9.6-9.3c0-1.2-0.2-2.1-0.6-3.2l-5.3-30.6l23.6-23
|
||||
c2.6-2.5,3.5-6.3,2.4-9.8c-1.1-3.5-4.1-6-7.7-6.5l-32.6-4.7L326.8,149.4z"/>
|
||||
<path class="st0" d="M108,28.1c-4.4-9-19.1-9-23.6,0l-20,40.6l-44.8,6.5c-5,0.7-9.1,4.2-10.6,8.9c-1.5,4.8-0.3,10,3.3,13.5
|
||||
l32.4,31.6l-7.6,44.6c-0.8,4.9,1.2,9.9,5.2,12.8c2.3,1.7,5,2.5,7.7,2.5c2.1,0,4.2-0.6,6.1-1.6l40.1-21.2l40.1,20.9
|
||||
c1.9,1,4,1.1,6.1,1.1c0.1,0,0.2,0,0.3,0c7.3,0,13.1-5.5,13.1-12.8c0-1.7-0.3-2.9-0.9-4.4l-7.2-42.1l32.4-31.6
|
||||
c3.6-3.5,4.9-8.7,3.3-13.5c-1.6-4.8-5.7-8.2-10.6-8.9L128,68.5L108,28.1z"/>
|
||||
<path class="st0" d="M495.2,252.9c-0.6-1.7-2.1-3-3.9-3.3l-15.1-2.2l-6.7-13.6c-1.6-3.3-7-3.3-8.6,0l-6.7,13.6l-15.1,2.2
|
||||
c-1.8,0.3-3.3,1.5-3.9,3.3c-0.6,1.7-0.1,3.6,1.2,4.9l10.9,10.6l-2.6,15c-0.3,1.8,0.4,3.6,1.9,4.7s3.4,1.2,5,0.4l13.5-7.1l13.5,7.1
|
||||
c0.7,0.4,1.5,0.6,2.2,0.6c1,0,2-0.3,2.8-0.9c1.5-1.1,2.2-2.9,1.9-4.7l-2.6-15l10.9-10.6C495.3,256.6,495.8,254.7,495.2,252.9z"/>
|
||||
<path class="st0" d="M462.6,119.7c-0.9-1.6-2.7-2.4-4.5-2.3l-15.2,1.3l-9.6-11.8c-2.3-2.8-7.5-1.6-8.3,1.9l-3.5,14.8l-14.2,5.5
|
||||
c-1.7,0.7-2.9,2.2-3,4c-0.2,1.8,0.7,3.6,2.3,4.5l13,7.9l0.9,15.2c0.1,1.8,1.2,3.4,2.9,4.1c1.7,0.7,3.6,0.4,5-0.8l11.5-9.9
|
||||
l14.7,3.9c0.8,0.2,1.5,0.2,2.3,0c1-0.2,1.9-0.7,2.5-1.5c1.2-1.4,1.5-3.3,0.8-5l-5.9-14l8.2-12.8
|
||||
C463.5,123.2,463.6,121.3,462.6,119.7z"/>
|
||||
<path class="st0" d="M328.9,32.5c-1.4-2.4-4.1-3.7-6.8-3.5l-23,1.9L284.5,13c-3.5-4.3-11.4-2.4-12.7,2.9l-5.3,22.5L245,46.8
|
||||
c-2.6,1-4.4,3.4-4.6,6.1c-0.2,2.8,1.1,5.4,3.5,6.8l19.7,12l1.3,23.1c0.2,2.8,1.9,5.2,4.4,6.3s5.5,0.6,7.6-1.2l17.5-15.1l22.3,5.9
|
||||
c1.2,0.3,2.3,0.3,3.5,0.1c1.5-0.3,2.8-1.1,3.8-2.3c1.8-2.1,2.3-5,1.2-7.6l-9-21.3l12.5-19.4C330.3,37.9,330.3,34.9,328.9,32.5z"/>
|
||||
<path class="st0" d="M427.9,11.3c-0.7-1.2-2.1-1.9-3.5-1.8l-11.9,1l-7.6-9.3c-1.8-2.2-5.9-1.3-6.6,1.5l-2.7,11.6l-11.1,4.4
|
||||
c-1.3,0.5-2.3,1.8-2.4,3.2c-0.1,1.4,0.6,2.8,1.8,3.5l10.2,6.2l0.7,12c0.1,1.4,1,2.7,2.3,3.2c1.3,0.6,2.8,0.3,3.9-0.6l9.1-7.8
|
||||
l11.6,3c0.6,0.2,1.2,0.2,1.8,0c0.8-0.2,1.5-0.6,2-1.2c0.9-1.1,1.2-2.6,0.6-3.9l-4.6-11l6.5-10.1C428.7,14.1,428.7,12.5,427.9,11.3
|
||||
z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
73
public/icons/stars-group.svg
Normal file
@@ -0,0 +1,73 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="528.164px" height="528.163px" viewBox="0 0 528.164 528.163" style="enable-background:new 0 0 528.164 528.163;"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M74.932,526.331c3,2.2,6.9,2.4,10.1,0.7l99.3-52.2l99.3,52.2c1.4,0.7,2.9,1.101,4.5,1.101c2,0,3.9-0.601,5.601-1.801
|
||||
c2.899-2.1,4.399-5.8,3.8-9.399l-19-110.601l80.4-78.3c2.6-2.5,3.5-6.3,2.399-9.8c-1.1-3.5-4.1-6-7.7-6.5l-111-16.1l-49.7-100.601
|
||||
c-3.2-6.5-13.9-6.5-17.1,0l-49.8,100.601l-111,16.1c-3.6,0.5-6.6,3.1-7.7,6.5c-1.1,3.5-0.2,7.3,2.4,9.8l80.4,78.3l-19,110.601
|
||||
C70.432,520.632,71.932,524.231,74.932,526.331z"/>
|
||||
<path d="M520.832,398.831c-1.1-3.5-4.1-6-7.7-6.5l-45.199-6.6l-20.2-41c-1.601-3.3-4.9-5.3-8.601-5.3c-3.699,0-7,2.1-8.6,5.3
|
||||
l-20.2,41l-45.2,6.6c-3.6,0.5-6.6,3.101-7.699,6.5c-1.101,3.5-0.2,7.301,2.399,9.801l32.7,31.899l-7.7,45
|
||||
c-0.6,3.601,0.9,7.2,3.8,9.4c2.9,2.1,6.9,2.399,10.101,0.7l40.399-21.301l40.4,21.301c1.4,0.699,2.9,1.1,4.5,1.1
|
||||
c2,0,3.9-0.6,5.6-1.8c2.9-2.101,4.4-5.8,3.8-9.4l-7.699-45l32.699-31.899C521.032,406.132,521.932,402.331,520.832,398.831z"/>
|
||||
<path d="M326.832,149.431c-3.2-6.5-13.899-6.5-17.1,0l-14.601,29.6l-32.6,4.7c-3.6,0.5-6.6,3.1-7.7,6.5c-1.1,3.5-0.2,7.3,2.4,9.8
|
||||
l23.6,23l-5.6,32.5c-0.601,3.6,0.899,7.2,3.8,9.401c1.7,1.199,3.6,1.8,5.6,1.8c1.5,0,3.101-0.4,4.4-1.2l29.2-15.4l29.2,15.2
|
||||
c1.399,0.7,2.899,0.8,4.399,0.8c0.101,0,0.2,0,0.2,0c5.3,0,9.6-4,9.6-9.3c0-1.2-0.199-2.1-0.6-3.2l-5.3-30.6l23.6-23
|
||||
c2.601-2.5,3.5-6.3,2.4-9.8c-1.101-3.5-4.101-6-7.7-6.5l-32.6-4.7L326.832,149.431z"/>
|
||||
<path d="M108.032,28.131c-4.4-9-19.1-9-23.6,0l-20,40.6l-44.8,6.5c-5,0.7-9.1,4.2-10.6,8.9c-1.5,4.8-0.3,10,3.3,13.5l32.4,31.6
|
||||
l-7.6,44.6c-0.8,4.9,1.2,9.9,5.2,12.8c2.3,1.7,5,2.5,7.7,2.5c2.1,0,4.2-0.6,6.1-1.6l40.1-21.2l40.1,20.9c1.9,1,4,1.1,6.1,1.1
|
||||
c0.1,0,0.2,0,0.3,0c7.3,0,13.1-5.5,13.1-12.8c0-1.7-0.3-2.9-0.9-4.4l-7.2-42.1l32.4-31.6c3.6-3.5,4.9-8.7,3.3-13.5
|
||||
c-1.6-4.8-5.7-8.2-10.6-8.9l-44.8-6.5L108.032,28.131z"/>
|
||||
<path d="M495.232,252.931c-0.601-1.7-2.101-3-3.9-3.3l-15.1-2.2l-6.7-13.6c-1.6-3.3-7-3.3-8.6,0l-6.7,13.6l-15.101,2.2
|
||||
c-1.8,0.3-3.3,1.5-3.899,3.3c-0.601,1.7-0.101,3.6,1.2,4.9l10.899,10.601l-2.6,15c-0.3,1.8,0.399,3.6,1.899,4.7
|
||||
c1.5,1.1,3.4,1.199,5,0.399l13.5-7.1l13.5,7.1c0.7,0.4,1.5,0.601,2.2,0.601c1,0,2-0.301,2.8-0.9c1.5-1.1,2.2-2.9,1.9-4.7l-2.6-15
|
||||
l10.899-10.6C495.332,256.631,495.832,254.731,495.232,252.931z"/>
|
||||
<path d="M462.631,119.731c-0.899-1.6-2.699-2.4-4.5-2.3l-15.199,1.3l-9.601-11.8c-2.3-2.8-7.5-1.6-8.3,1.9l-3.5,14.8l-14.2,5.5
|
||||
c-1.7,0.7-2.899,2.2-3,4c-0.2,1.8,0.7,3.6,2.3,4.5l13,7.9l0.9,15.2c0.1,1.8,1.2,3.4,2.9,4.1c1.699,0.7,3.6,0.4,5-0.8l11.5-9.9
|
||||
l14.699,3.9c0.801,0.2,1.5,0.2,2.301,0c1-0.2,1.899-0.7,2.5-1.5c1.199-1.4,1.5-3.3,0.8-5l-5.9-14l8.2-12.8
|
||||
C463.532,123.231,463.631,121.331,462.631,119.731z"/>
|
||||
<path d="M328.932,32.531c-1.4-2.4-4.101-3.7-6.801-3.5l-23,1.9l-14.6-17.9c-3.5-4.3-11.4-2.4-12.7,2.9l-5.3,22.5l-21.5,8.4
|
||||
c-2.6,1-4.4,3.4-4.6,6.1c-0.2,2.8,1.1,5.4,3.5,6.8l19.7,12l1.3,23.1c0.2,2.8,1.9,5.2,4.4,6.3s5.5,0.6,7.601-1.2l17.5-15.1
|
||||
l22.3,5.9c1.2,0.3,2.3,0.3,3.5,0.1c1.5-0.3,2.8-1.1,3.8-2.3c1.8-2.1,2.3-5,1.2-7.6l-9-21.3l12.5-19.4
|
||||
C330.332,37.931,330.332,34.931,328.932,32.531z"/>
|
||||
<path d="M427.932,11.331c-0.7-1.2-2.101-1.9-3.5-1.8l-11.9,1l-7.6-9.3c-1.801-2.2-5.9-1.3-6.601,1.5l-2.7,11.6l-11.1,4.4
|
||||
c-1.3,0.5-2.3,1.8-2.4,3.2c-0.1,1.4,0.601,2.8,1.801,3.5l10.199,6.2l0.7,12c0.101,1.4,1,2.7,2.3,3.2c1.301,0.6,2.801,0.3,3.9-0.6
|
||||
l9.1-7.8l11.601,3c0.6,0.2,1.2,0.2,1.8,0c0.8-0.2,1.5-0.6,2-1.2c0.9-1.1,1.2-2.6,0.6-3.9l-4.6-11l6.5-10.1
|
||||
C428.732,14.131,428.732,12.531,427.932,11.331z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
22
public/icons/sun-shape-white.svg
Normal file
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 575.6 575.6" style="enable-background:new 0 0 575.6 575.6;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
<circle class="st0" cx="287.5" cy="287.3" r="115.5"/>
|
||||
<path class="st0" d="M572.9,283.7l-115.1-41.6l78.9-93.6c1.1-1.3,1.3-3.3,0.4-4.8c-0.9-1.5-2.6-2.3-4.4-2l-120.5,21.6l21.6-120.5
|
||||
c0.3-1.7-0.5-3.5-2-4.4c-1.5-0.9-3.4-0.7-4.8,0.4l-93.6,78.9L291.8,2.6c-1.2-3.3-6.7-3.3-7.9,0l-41.6,115.1l-93.6-78.9
|
||||
c-1.4-1.1-3.3-1.3-4.8-0.4c-1.5,0.9-2.3,2.6-2,4.4l21.6,120.5L42.9,141.7c-1.7-0.3-3.5,0.5-4.4,2c-0.9,1.5-0.7,3.4,0.4,4.8
|
||||
l78.9,93.6L2.8,283.7c-1.7,0.6-2.8,2.2-2.8,3.9s1.1,3.3,2.8,3.9l115.1,41.6L39,426.9c-1.1,1.3-1.3,3.3-0.4,4.8s2.7,2.4,4.4,2
|
||||
l120.5-21.6l-21.6,120.5c-0.3,1.7,0.5,3.5,2,4.4c1.5,0.9,3.4,0.7,4.8-0.4l93.6-78.9l41.6,115.1c0.6,1.7,2.2,2.8,3.9,2.8
|
||||
c1.8,0,3.3-1.1,3.9-2.8l41.6-115.1l93.6,78.9c1.4,1.1,3.3,1.3,4.8,0.4c1.5-0.9,2.3-2.6,2-4.4l-21.6-120.5l120.5,21.6
|
||||
c0.3,0,0.6,0,0.8,0.1c2.3-0.2,4.3-1.9,4.3-4.2c0-1.4-0.7-2.7-1.8-3.4l-78.3-92.9l115.1-41.6c1.7-0.6,2.8-2.2,2.8-3.9
|
||||
C575.6,285.9,574.5,284.3,572.9,283.7z M287.9,443.4c-83.6,0-151.4-69.6-151.4-155.5c0-85.9,67.8-155.5,151.4-155.5
|
||||
S439.3,202,439.3,287.9C439.3,373.8,371.5,443.4,287.9,443.4z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
55
public/icons/sun-shape.svg
Normal file
@@ -0,0 +1,55 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="575.634px" height="575.634px" viewBox="0 0 575.634 575.634" style="enable-background:new 0 0 575.634 575.634;"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<circle cx="287.478" cy="287.34" r="115.495"/>
|
||||
<path d="M572.89,283.745L457.776,242.1l78.899-93.607c1.139-1.348,1.311-3.27,0.421-4.791c-0.88-1.521-2.61-2.324-4.36-2.027
|
||||
l-120.525,21.621l21.62-120.525c0.316-1.741-0.497-3.481-2.027-4.361c-1.511-0.889-3.442-0.717-4.79,0.421l-93.607,78.891
|
||||
L291.771,2.617c-1.214-3.318-6.665-3.318-7.879,0l-41.635,115.104L148.649,38.83c-1.358-1.128-3.29-1.31-4.791-0.421
|
||||
c-1.53,0.88-2.343,2.62-2.027,4.361l21.621,120.516L42.917,141.675c-1.721-0.296-3.471,0.507-4.36,2.027
|
||||
c-0.89,1.53-0.717,3.442,0.42,4.791l78.891,93.607L2.754,283.745C1.1,284.338,0,285.916,0,287.685s1.1,3.336,2.754,3.939
|
||||
l115.113,41.645l-78.9,93.599c-1.138,1.348-1.31,3.27-0.421,4.79s2.658,2.353,4.36,2.027l120.526-21.62l-21.611,120.525
|
||||
c-0.315,1.74,0.498,3.48,2.027,4.36c1.492,0.88,3.433,0.708,4.791-0.421l93.598-78.891l41.645,115.104
|
||||
c0.603,1.654,2.181,2.763,3.939,2.763c1.76,0,3.338-1.108,3.94-2.763l41.635-115.104l93.598,78.891
|
||||
c1.358,1.138,3.28,1.311,4.791,0.421c1.53-0.88,2.343-2.62,2.027-4.36l-21.611-120.517l120.517,21.621
|
||||
c0.276,0.048,0.554,0.048,0.841,0.067c2.276-0.211,4.274-1.855,4.274-4.188c0-1.425-0.717-2.688-1.798-3.442l-78.269-92.853
|
||||
l115.113-41.645c1.654-0.593,2.754-2.171,2.754-3.939C575.634,285.925,574.544,284.347,572.89,283.745z M287.86,443.38
|
||||
c-83.615,0-151.403-69.614-151.403-155.486c0-85.871,67.789-155.486,151.403-155.486c83.614,0,151.402,69.615,151.402,155.486
|
||||
C439.263,373.766,371.475,443.38,287.86,443.38z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/nav-bg.png
Normal file
|
After Width: | Height: | Size: 818 KiB |
36
src/App.vue
@@ -1,8 +1,34 @@
|
||||
<template>
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
<router-link to="/profile">Profile</router-link>
|
||||
<div class="fs-wrapper">
|
||||
<navbar />
|
||||
<div class="fs-content">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import Navbar from "@/components/Navbar.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
Navbar
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fs-wrapper {
|
||||
position: relative;
|
||||
.fs-content {
|
||||
margin-top: 70px;
|
||||
min-height: calc(100vh - 70px);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
48
src/assets/scss/_animations.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
@keyframes fadeInBg {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fromBottom {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes paneBgAround {
|
||||
0% {
|
||||
background-position: -10vw 0%;
|
||||
}
|
||||
50% {
|
||||
background-position: -20vw 0%;
|
||||
}
|
||||
100% {
|
||||
background-position: -10vw 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-children {
|
||||
@for $i from 1 through 10 {
|
||||
:nth-child(#{$i}) {
|
||||
opacity: 0;
|
||||
animation: fadeIn 1.5s ease-in-out 1s 1 forwards, fromBottom 1.5s ease-in-out 1s 1 forwards;
|
||||
animation-delay: 0.25s + $i * 0.25s;
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/assets/scss/_fonts.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:wght@400;600;700;800;900&display=swap');
|
||||
129
src/assets/scss/_global.scss
Normal file
@@ -0,0 +1,129 @@
|
||||
@import 'libs/normalize';
|
||||
|
||||
@import 'fonts';
|
||||
@import 'variables';
|
||||
@import 'animations';
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: $body-font-family;
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.2;
|
||||
color: $white;
|
||||
background: $black;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
font-family: $heading-font-family;
|
||||
font-weight: $fw-regular;
|
||||
}
|
||||
h1 { font-size: 50px; }
|
||||
h2 { font-size: 25px; }
|
||||
h3 { font-size: 22px; }
|
||||
h4 { font-size: 18px; }
|
||||
|
||||
.heading {
|
||||
&-1 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 50px;
|
||||
font-weight: $fw-semibold;
|
||||
}
|
||||
&-2 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 25px;
|
||||
font-weight: $fw-semibold;
|
||||
}
|
||||
&-3 {
|
||||
margin-bottom: 0;
|
||||
font-size: 20px;
|
||||
font-weight: $fw-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.txt {
|
||||
&-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&.no-style {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&.no-style {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: rgba($white, .2);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 13px 33px;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
& ~ & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&-primary {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
transition: background-color .3s ease-out;
|
||||
&:hover {
|
||||
background-color: $primary-light;
|
||||
}
|
||||
&:focus, &.active {
|
||||
background-color: $primary-light;
|
||||
transition: box-shadow .2s ease-in-out;
|
||||
box-shadow: 0 0 10px rgba($white, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: relative;
|
||||
padding-right: 53px;
|
||||
.fs-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fs-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
&.icon-sm {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
24
src/assets/scss/_variables.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$fs-black: #070712;
|
||||
|
||||
$space-blue-700: #1d3557;
|
||||
$space-blue-600: #234e69;
|
||||
$space-blue-500: #457b9d;
|
||||
$space-blue-300: #a8dadc;
|
||||
|
||||
$primary: $space-blue-700;
|
||||
$primary-light: $space-blue-600;
|
||||
|
||||
$heading-font-family: 'Poppins', serif;
|
||||
$body-font-family: 'Open Sans', sans-serif;
|
||||
|
||||
$font-size-base: 14px;
|
||||
|
||||
$fw-light: 300;
|
||||
$fw-regular: 400;
|
||||
$fw-semibold: 600;
|
||||
$fw-bold: 700;
|
||||
$fw-extra-bold: 800;
|
||||
$fw-black: 900;
|
||||
104
src/components/Navbar.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<ul class="navbar-menu no-style">
|
||||
<li v-for="item in items" :key="item.url" class="navbar-item">
|
||||
<router-link :to="item.link" class="navbar-link no-style">
|
||||
{{ item.text }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "navbar",
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
text: "Home",
|
||||
link: "/"
|
||||
},
|
||||
{
|
||||
text: "Célestes",
|
||||
link: "/celestes"
|
||||
},
|
||||
{
|
||||
text: "À propos",
|
||||
link: "/a-propos"
|
||||
},
|
||||
{
|
||||
text: "Profil",
|
||||
link: "/profil"
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
padding: 0 20px;
|
||||
background: $fs-black;
|
||||
box-shadow: 0 5px 5px rgba($black, 0.3);
|
||||
z-index: 9999;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
content: "";
|
||||
background-image: url("/nav-bg.png");
|
||||
background-size: cover;
|
||||
background-position: center right;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
|
||||
.navbar-item {
|
||||
&:not(:first-child) {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
color: $white;
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: $white;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
bottom: -8px;
|
||||
transition: width 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&.router-link-active {
|
||||
&:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
140
src/components/celestials/CelestialCard.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="celestial-card">
|
||||
<div class="card-wrapper">
|
||||
<div class="card-icon">
|
||||
<img
|
||||
v-if="celestial.type === 'planète à lunes'"
|
||||
src="/icons/saturn-and-other-planets.svg"
|
||||
class="fs-icon"
|
||||
alt="planet icon"
|
||||
/>
|
||||
<img
|
||||
v-else-if="celestial.type === 'planète'"
|
||||
src="/icons/saturn-planet-shape.svg"
|
||||
class="fs-icon"
|
||||
alt="planet icon"
|
||||
/>
|
||||
<img
|
||||
v-else-if="celestial.type === 'lune'"
|
||||
src="icons/moon-and-stars-in-a-cloud.svg"
|
||||
class="fs-icon"
|
||||
alt="moon icon"
|
||||
/>
|
||||
<img
|
||||
v-else-if="celestial.type === 'étoile'"
|
||||
src="icons/sun-shape.svg"
|
||||
class="fs-icon"
|
||||
alt="moon icon"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="icons/stars-group.svg"
|
||||
alt="moon icon"
|
||||
class="fs-icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="card-header">
|
||||
<h3 class="heading-3">{{ celestial.name }}</h3>
|
||||
<p>
|
||||
Type :
|
||||
<span class="txt-capitalize">{{ celestial.type }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div v-if="celestial.aroundPlanet">
|
||||
<p>
|
||||
Orbite autour de
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'CelesteSingle',
|
||||
params: { slug: celestial.aroundPlanet.planet }
|
||||
}"
|
||||
class="txt-capitalize"
|
||||
>
|
||||
{{ celestial.aroundPlanet.planet }}
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="celestial.gravity">
|
||||
<p>Facteur Gravité : {{ celestial.gravity }}</p>
|
||||
</div>
|
||||
<div v-if="celestial.density">
|
||||
<p>Facteur Densité : {{ celestial.density }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer" v-if="celestial.discoveredBy">
|
||||
<p>
|
||||
<i>
|
||||
Ce corps céleste a été découvert par
|
||||
{{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
|
||||
</i>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-actions">
|
||||
<router-link
|
||||
:to="{ name: 'CelesteSingle', params: { slug: celestial.id } }"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Détails
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "celestial-card",
|
||||
data() {
|
||||
return {
|
||||
type: "unknown"
|
||||
};
|
||||
},
|
||||
props: {
|
||||
celestial: Object
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.celestial-card {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
padding: 20px;
|
||||
color: $fs-black;
|
||||
background: rgba($white, 85%);
|
||||
border-radius: 5px;
|
||||
|
||||
.card-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: stretch;
|
||||
|
||||
.card-icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
.card-header {
|
||||
padding-right: 60px;
|
||||
}
|
||||
.card-content {
|
||||
flex: 1 1 auto;
|
||||
min-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
src/components/celestials/CelestialFilters.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="celestial-filters">
|
||||
<ul class="no-style">
|
||||
<li>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:class="[filters.all ? 'active' : '']"
|
||||
@click="emitFilter('all')"
|
||||
>
|
||||
Tous
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary btn-icon"
|
||||
:class="[filters.planets ? 'active' : '']"
|
||||
@click="emitFilter('planets')"
|
||||
>
|
||||
Planètes
|
||||
<img
|
||||
src="icons/saturn-planet-shape-white.svg"
|
||||
alt=""
|
||||
class="fs-icon icon-sm"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary btn-icon"
|
||||
:class="[filters.moons ? 'active' : '']"
|
||||
@click="emitFilter('moons')"
|
||||
>
|
||||
Lunes
|
||||
<img
|
||||
src="icons/moon-and-stars-in-a-cloud-white.svg"
|
||||
alt=""
|
||||
class="fs-icon icon-sm"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary btn-icon"
|
||||
:class="[filters.stars ? 'active' : '']"
|
||||
@click="emitFilter('stars')"
|
||||
>
|
||||
Etoiles
|
||||
<img src="icons/sun-shape-white.svg" alt="" class="fs-icon icon-sm" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary btn-icon"
|
||||
:class="[filters.others ? 'active' : '']"
|
||||
@click="emitFilter('others')"
|
||||
>
|
||||
Autres
|
||||
<img
|
||||
src="icons/stars-group-white.svg"
|
||||
alt=""
|
||||
class="fs-icon icon-sm"
|
||||
/>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "celestial-filters",
|
||||
props: {
|
||||
celestials: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filters: {
|
||||
all: false,
|
||||
planets: false,
|
||||
moons: false,
|
||||
stars: false,
|
||||
others: false
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Emits the type of celestial body to filter for to parent
|
||||
*/
|
||||
emitFilter(type: string) {
|
||||
// Reset filter appearance
|
||||
this.filters = {
|
||||
all: false,
|
||||
planets: false,
|
||||
moons: false,
|
||||
stars: false,
|
||||
others: false
|
||||
};
|
||||
|
||||
// Triggers the correct filter
|
||||
if (type == "all") {
|
||||
this.filters.all = true;
|
||||
} else if (type == "planets") {
|
||||
this.filters.planets = true;
|
||||
} else if (type == "moons") {
|
||||
this.filters.moons = true;
|
||||
} else if (type == "stars") {
|
||||
this.filters.stars = true;
|
||||
} else if (type == "others") {
|
||||
this.filters.others = true;
|
||||
}
|
||||
|
||||
// Emit filter type
|
||||
this.$emit("filter:celestials", type);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.celestial-filters {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
112
src/components/celestials/CelestialsList.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="celestial-list-wrapper">
|
||||
<celestial-filters @filter:celestials="filterCelestials" />
|
||||
<ul v-if="celestials" class="celestial-list grid no-style">
|
||||
<li
|
||||
v-for="(celestial, index) in sortedCelestials"
|
||||
:key="index"
|
||||
class="celestial-item"
|
||||
>
|
||||
<celestial-card :celestial="celestial" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
// API
|
||||
import axios from "axios";
|
||||
// Global methods
|
||||
import { addCelestialType } from "@/plugins/methods";
|
||||
|
||||
import CelestialCard from "@/components/celestials/CelestialCard.vue";
|
||||
import CelestialFilters from "./CelestialFilters.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "celestial-list",
|
||||
components: {
|
||||
CelestialCard,
|
||||
CelestialFilters
|
||||
},
|
||||
|
||||
// Initial state
|
||||
data() {
|
||||
return {
|
||||
celestials: Array<any>(),
|
||||
activeFilter: "all"
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
sortedCelestials(): any {
|
||||
if (this.activeFilter == "moons") {
|
||||
return this.celestials.filter(e => e.type === "lune");
|
||||
} else if (this.activeFilter == "planets") {
|
||||
return this.celestials.filter(
|
||||
e => e.type === "planète" || e.type === "planète à lunes"
|
||||
);
|
||||
} else if (this.activeFilter == "stars") {
|
||||
return this.celestials.filter(e => e.type === "étoile");
|
||||
} else if (this.activeFilter == "others") {
|
||||
return this.celestials.filter(e => e.type === "autre");
|
||||
} else {
|
||||
return this.celestials;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// Fetches from API...
|
||||
this.fetchCelestials().then(res => {
|
||||
// ...and add type
|
||||
this.celestials = this.addType(res);
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Fetches celestial bodies from API
|
||||
*/
|
||||
fetchCelestials(): Promise<any> {
|
||||
return axios
|
||||
.get("https://api.le-systeme-solaire.net/rest/bodies/")
|
||||
.then(res => {
|
||||
return res.data.bodies;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
return [];
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Assign a type from the celestial object provided
|
||||
*/
|
||||
addType(bodies: Array<any>): Array<any> {
|
||||
return bodies.map((e: any) => addCelestialType(e));
|
||||
},
|
||||
|
||||
/**
|
||||
* Applies the filter type to the data
|
||||
*/
|
||||
filterCelestials(type: string) {
|
||||
this.activeFilter = type;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.celestial-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
flex-flow: row wrap;
|
||||
.celestial-item {
|
||||
width: calc(33% - 15px);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,8 @@ import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
|
||||
import "./assets/scss/libs/_normalize.scss";
|
||||
import "@/assets/scss/libs/_normalize.scss";
|
||||
import "@/assets/scss/_global.scss";
|
||||
|
||||
createApp(App)
|
||||
.use(store)
|
||||
|
||||
26
src/plugins/methods/index.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
export const addCelestialType = (celestial: any) => {
|
||||
if (celestial.isPlanet) {
|
||||
if (celestial.moons) {
|
||||
celestial.type = "planète à lunes";
|
||||
} else {
|
||||
celestial.type = "planète";
|
||||
}
|
||||
|
||||
// Check if element is moon
|
||||
} else if (celestial.aroundPlanet != null) {
|
||||
celestial.type = "lune";
|
||||
|
||||
// Check if element is star
|
||||
} else if (celestial.id === "soleil") {
|
||||
celestial.type = "étoile";
|
||||
|
||||
// ...else, body is "other"
|
||||
} else {
|
||||
celestial.type = "autre";
|
||||
}
|
||||
return celestial;
|
||||
};
|
||||
|
||||
export default {
|
||||
addCelestialType
|
||||
};
|
||||
@@ -4,6 +4,9 @@ import Home from "../views/Home.vue";
|
||||
import About from "../views/About.vue";
|
||||
import Profile from "../views/Profile.vue";
|
||||
|
||||
import Celestials from "../views/celestials/Celestials.vue";
|
||||
import Celestial from "../views/celestials/Celestial.vue";
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "/",
|
||||
@@ -11,12 +14,23 @@ const routes: Array<RouteRecordRaw> = [
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
path: "/a-propos",
|
||||
name: "About",
|
||||
component: About
|
||||
},
|
||||
{
|
||||
path: "/profile",
|
||||
path: "/celestes",
|
||||
name: "CelesteAll",
|
||||
component: Celestials
|
||||
},
|
||||
{
|
||||
path: "/celestes/:slug",
|
||||
name: "CelesteSingle",
|
||||
component: Celestial,
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: "/profil",
|
||||
name: "Profile",
|
||||
component: Profile
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>About</h1>
|
||||
</div>
|
||||
<section class="about">
|
||||
<h2>About</h2>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -1,7 +1,16 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<h1>Homepage</h1>
|
||||
</div>
|
||||
<section class="home">
|
||||
<div class="splash fade-in-children">
|
||||
<h2 class="heading-1">Full Skies</h2>
|
||||
<p class="heading-2">
|
||||
L'application Full Skies explore les cieux à votre place !
|
||||
</p>
|
||||
<p class="heading-2">
|
||||
Embarquez pour un voyage stellaire ; destination : le système solaire et
|
||||
ses astres.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -11,3 +20,31 @@ export default defineComponent({
|
||||
name: "Home"
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
position: relative;
|
||||
min-height: inherit;
|
||||
padding: 0 10%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 120vw;
|
||||
background-image: url("/home_bg-min.jpg");
|
||||
background-size: cover;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
animation: fadeInBg 2s ease-out 0s 1 forwards,
|
||||
paneBgAround 35s ease-in-out 0s infinite forwards;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<header class="profile-header">
|
||||
<h1>My Profile</h1>
|
||||
<h2>My Profile</h2>
|
||||
<hr />
|
||||
<h2>Profile for {{ user.name }}</h2>
|
||||
</header>
|
||||
|
||||
59
src/views/celestials/Celestial.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<section class="celestial">
|
||||
<header>
|
||||
<h1 class="heading-1">{{ celestial.name }}</h1>
|
||||
</header>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
// API
|
||||
import axios from "axios";
|
||||
// Global methods
|
||||
import { addCelestialType } from "@/plugins/methods";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Celestial",
|
||||
data() {
|
||||
return {
|
||||
celestial: {},
|
||||
error: ""
|
||||
};
|
||||
},
|
||||
props: {
|
||||
slug: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// Fetches from API...
|
||||
this.fetchCelestial()
|
||||
.then(res => {
|
||||
// ...and add type
|
||||
this.celestial = addCelestialType(res);
|
||||
})
|
||||
.catch(err => {
|
||||
this.error = err.message;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Fetches celestial bodies from API
|
||||
*/
|
||||
fetchCelestial(): Promise<any> {
|
||||
return axios
|
||||
.get(`https://api.le-systeme-solaire.net/rest/bodies/${this.slug}`)
|
||||
.then(res => {
|
||||
return res.data;
|
||||
})
|
||||
.catch(err => {
|
||||
this.error = err.message;
|
||||
return [];
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
46
src/views/celestials/Celestials.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<section class="celestials">
|
||||
<header>
|
||||
<h1 class="heading-1">Le système solaire</h1>
|
||||
</header>
|
||||
<div class="section-content">
|
||||
<celestials-list />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import CelestialsList from "@/components/celestials/CelestialsList.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Celestials",
|
||||
components: {
|
||||
CelestialsList
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.celestials {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
padding: 25px 5%;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-image: url("/celestials_bg-min.jpg");
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
z-index: -1;
|
||||
opacity: 33%;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
9
vue.config.js
Normal file
@@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
css: {
|
||||
loaderOptions: {
|
||||
scss: {
|
||||
additionalData: `@import "src/assets/scss/_variables.scss";`
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||