ReflectsLight/al-quran.reflectslight.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #126 from ReflectsLight/audio

Browse source 
Add audio support
This commit is contained in:
Robert 2023-07-12 17:22:30 -03:00 committed by GitHub
commit 8d683c8040
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 367 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -60,6 +60,9 @@ First and foremost, Alhamdulillah.
* [/src/images/leaf.svg](/src/images/leaf.svg)
by
[Fasil](https://freeicons.io/profile/722).
* [RefreshShape](/src/js/components/Shape.tsx)
by
[Muhammad Haq](https://freeicons.io/profile/823).
* Thanks to the following translators:
* English (The Clear Quran) by Dr. Mustafa Khattab

14
src/css/pages/surah/stream.scss
View file

@ -37,7 +37,7 @@
li.ayah p { width: 100%; }
}
.content .timer {
.content .row .timer {
display: flex;
justify-content: center;
flex-direction: column;
@ -53,10 +53,20 @@
top: 4px;
}
.content.ar .timer {
.content.ar .row .timer {
position: relative;
top: 2px;
}
.content .row svg {
width: 30px;
height: 30px;
cursor: pointer;
}
.justify-end {
justify-content: flex-end !important;
}
@import "themes/moon";
@import "themes/leaf";

11
src/css/themes/leaf/pages/surah/_stream.scss
View file

@ -16,4 +16,15 @@
background-color: $green;
color: $white;
}
.row svg g {
polygon {
stroke: $green;
stroke-width: 5;
}
path {
stroke: $green;
stroke-width: 5;
}
}
}

18
src/css/themes/moon/pages/surah/_stream.scss
View file

@ -23,4 +23,22 @@
.row .shape {
background: $gold;
}
.row .shape.refresh {
height: 16px;
width: 16px;
background: unset;
fill: $gold;
}
.row svg g {
polygon {
stroke: $gold;
stroke-width: 5;
}
path {
stroke: $gold;
stroke-width: 5;
}
}
}

3
src/html/pages/surah/stream.html.erb
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="icon" href="/favicon.png">
<%= inline_css('/css/webpackage.scss') %>
<%= inline_css('/css/postman.css') %>
</head>
<body>
<div class="webpackage loader">
@ -16,6 +16,7 @@
</div>
<div class="root" data-locale="<%= locale %>" data-surah-id="<%= surah_id %>"></div>
<%= inline_json("/i18n.json") %>
<%= inline_json("/reciters.json") %>
<script src="/js/pages/surah/stream/loader.js"></script>
</body>
</html>

7
src/images/flags/KW.svg Normal file
View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 12 6">
<rect width="12" height="6" fill="#007a3d"/>
<rect width="12" height="4" y="2" fill="#fff"/>
<rect width="12" height="2" y="4" fill="#ce1126"/>
<polygon points="0,0 3,2 3,4 0,6"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 317 B

7
src/images/flags/MK.svg Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="-140 -70 280 140" fill="#f8e92e">
<title>Flag of North Macedonia</title>
<path fill="#d82126" d="m-140-70h280V70h-280z"/>
<path d="m-140 14v-28l280 28v-28zm126-84h28L0-15zM14 70h-28L0 15zM-140-70h42L12.86 7.72zm0 140h42L12.86-7.72zM140-70H98L-12.86 7.72zm0 140H98L-12.86-7.72z"/>
<circle r="25" fill="#d82126"/>
<circle r="20"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 416 B

105
src/images/flags/SA.svg Normal file
View file

@ -0,0 +1,105 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="900" height="600" enable-background="new 0 0 1773 1182" version="1.1" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">
<path id="green" d="m0 600h900v-600h-900z" fill="#005430" stroke-width=".375"/>
<g id="white" transform="scale(.375)">
<g id="shahada">
<g transform="matrix(7.3042,0,0,-6.7531,1800,635.53)">
<path d="m0 0c-0.023 4.162-1.516 15.373-1.895 19.134-0.378 3.761-0.759 7.173-0.667 7.972 0.09 0.771 1.187-1.072 1.767-1.221 0.3 0.065 0.166 1.229-0.379 2.223-0.369 0.675-1.627 3.199-2.39 4.678-0.359 0.7-0.439 1.106-0.612 1.192-0.172 0.086-1.561-2.945-1.409-3.281 0.379-0.616 0.639-0.91 0.698-1.998 0.06-1.088 0.58-8.856 1.243-14.744 0.499-4.442 1.594-14.012 1.633-19.962 0.011-1.941-0.188-3.791-0.427-4.564-0.613-1.214-1.571-2.309-5.139-4.567-4.011-2.539-9.362-4.652-11.662-6.066-1.43-0.882-0.956-1 0.289-0.614 1.242 0.386 7.664 1.623 10.784 3.049 2.929 1.342 4.83 3.587 6.273 6.862 1.782 4.049 1.918 7.485 1.893 11.907" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1709.3,422.03)">
<path d="m0 0c0.31 0.13 2.877 0.273 3.568 0.119-0.454-0.702-3.532-2.256-3.545-2.541 0.084-0.192 2.126 0.355 2.77 0.659 0.421 0.274 0.702 0.698 1.014 1.05 0.736 0.916 1.609 2.615 1.389 2.828-0.357 0.344-3.856 0.13-4.317 0.059-0.309-0.048-1.093-1.568-1.237-1.958-0.141-0.39 0.048-0.346 0.358-0.216" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1747.6,588.62)">
<path d="m0 0c0.535 1.96 0.667 4.338-0.061 6.841-0.748 2.577-2.606 4.148-3.946 4.953l-0.239-2.481s1.879-1.01 3.164-3.553c0.814-1.613 1.153-3.894 0.51-6.437-0.107-0.631 0.31-0.283 0.572 0.677" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1602.4,672.64)">
<path d="m0 0c0.482 1.765 0.6 3.906-0.054 6.16-0.674 2.321-2.347 3.736-3.554 4.458l-0.216-2.233s1.692-0.91 2.849-3.198c0.734-1.451 1.038-3.508 0.461-5.797-0.096-0.566 0.279-0.254 0.514 0.61" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1098.3,444.51)">
<path d="m0 0c0.774-1.531 1.095-3.699 0.486-6.114-0.102-0.599 0.292-0.27 0.543 0.642 0.506 1.86 0.632 4.12-0.06 6.499-0.711 2.449-2.476 3.94-3.749 4.703l-0.225-2.356s1.785-0.959 3.005-3.374" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,758,449.86)">
<path d="m0 0c0.65-1.648 0.694-3.873-0.356-6.217-0.204-0.589 0.293-0.31 0.71 0.571 0.852 1.801 1.33 4.055 0.898 6.545-0.443 2.56-2.221 4.305-3.552 5.25l-0.604-2.339s1.879-1.212 2.904-3.81" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,852.07,698.62)">
<path d="m0 0c0.826 1.658 1.17 2.774 1.537 4.738 0.321 1.728 0.342 3.724 0.226 5.756 2.472 1.09 5.418 2.899 6.408 3.032-0.677-2.514 0.939-5.227 4.203-4.873 0.25-2.843 0.464-5.34 0.594-6.821 0.266-3.036 0.226-6.862 0.218-7.527-0.011-0.668 0.436-0.542 0.895 0.946 0.612 1.992 0.801 7.194 0.579 10.634-0.053 0.86-0.143 2.021-0.252 3.344 2.116 1.059 2.468 3.103 3.259 3.974 0.714-2.705 4.644-3.072 5.857-2.493 1.504 0.719 1.997 2.012 2.384 5.013 0.388 3-0.742 4.208-1.146 4.535-0.04-0.363-1.024-3.889-1.024-3.889s0.933-1.066 0.98-1.59c-0.76-0.744-2.363-0.79-3.709-0.316-1.347 0.474-1.76 1.346-1.68 1.931 0.078 0.587 0.585 1.121 0.602 1.836 0.015 0.715-0.302 0.508-0.841-0.125-0.539-0.634-0.887-1.204-1.633-2.565-0.61-1.113-1.6-2.471-3.346-2.859-0.288 3.268-0.617 6.745-0.837 8.929-0.115 1.153-1.264 11.117-1.346 12.232-0.071 0.971-0.204 2.116-0.182 2.654 0.022 0.428 0.27 0.258 0.654-0.19 0.385-0.447 1.058-1.227 1.174-1.166 0.392 0.208-9e-3 1.503-0.522 2.663-0.512 1.163-2.26 5.751-2.627 5.94-0.189 0.096-1.369-2.728-1.439-3.284 0.183-0.348 0.661-0.895 0.678-2.451 6e-3 -0.434 0.264-4.526 0.622-8.395 0.313-3.417 0.728-6.659 0.768-7.036 0.285-2.608 0.631-6.284 0.96-9.898-1.895 0.39-2.399 1.742-2.357 2.513 0.048 0.87 0.411 1.852 0.237 2.074-0.365 0.237-2.537-1.076-5.566-2.487-0.852-0.396-1.812-0.821-2.825-1.224-0.264 2.463-0.612 4.805-0.752 6.596l-0.017 0.199c1.992 0.139 3.623 1.227 4.365 2.263 0.927 1.295 1.575 3.96 1.638 6.002 0.063 2.044-1.462 5.781-1.825 6.969-0.366 1.189-0.555 2.013-0.587 2.424-0.033 0.411 0.824-0.476 1.363-0.65 0.365-0.079 0.239 0.776-0.207 1.363-0.443 0.585-2.839 4.518-3.007 4.242-0.103-0.162-1.063-3.055-1.126-3.498 0.378-0.27 0.82-1.014 0.851-1.727 0.032-0.713 0.56-3.848 1.145-5.59 0.587-1.742 1.837-5.084 1.916-6.003-0.893-0.681-2.926-1.834-4.937-1.765-0.344 3.048-0.78 6.588-1.013 9.095-0.09 0.969-0.096 2.003-0.082 2.543 0.011 0.428 0.296 0.369 0.688-0.071 0.394-0.44 0.998-1.08 1.122-1.034 0.27 0.097 0.036 1.068-0.499 2.221s-2.661 6.03-3.034 6.212c-0.189 0.093-1.141-2.646-1.201-3.205 0.19-0.346 0.677-0.881 0.725-2.437 0.038-1.239 0.596-7.311 1.074-12.659-1.99 1.113-2.669 2.704-2.915 5.375-0.172 1.862-0.189 5.292-0.803 8.161-0.346 1.622-1.075 3.27-1.939 4.145-0.206-0.539-1.126-3.848-1.126-3.848 0.3-0.95 1.233-4.149 1.201-6.921-0.031-2.772-0.233-5.482-3.105-7.349-2.87-1.868-7.175-1.125-8.238 1.789-1.063 2.916 1.3 10.227 1.269 11.953-0.032 1.726-0.317 1.964-0.984 1.679-0.666-0.285-2.029-1.949-3.203-4.656-1.174-2.709-1.696-6.064-2.363-8.345-0.665-2.281-1.73-4.592-3.378-4.464-1.648 0.126-2.535 1.757-3.042 4.116-0.508 2.361-0.197 5.47-0.059 6.267 0.344 1.996-0.453 1.587-0.941-1.547-0.302-1.933-0.602-5.02 0.461-8.251 1.061-3.231 2.87-4.436 4.455-4.023 1.586 0.411 2.98 4.434 3.472 6.241 0.491 1.804 2.688 9.817 3.932 10.211 0.174-0.903-0.967-3.814-1.332-7.219-0.364-3.405 0.485-7.979 4.481-8.77 3.996-0.792 6.707 2.011 7.69 3.957 0.984 1.949 1.443 3.992 1.554 5.021 0.128-2.612 1.776-6.691 4.977-7.854l0.33-0.103c0.197-2.138 0.518-4.929 0.813-7.86-0.623-0.208-1.252-0.396-1.878-0.558-0.08 0.281-0.168 0.556-0.275 0.809-0.977 2.273-2.594 4.368-4.835 4.223-2.289-0.147-4.785-3.451-4.676-5.864 0.072-1.623 0.898-2.955 3.902-3.296 1.372-0.157 2.829 8e-3 4.334 0.363 0.212-0.671 0.346-1.338 0.361-1.946-0.952-1.204-8.829-7.63-14.727-8.248-5.898-0.617-7.697 2.727-7.756 6.084-0.044 2.554 1.376 5.103 2.374 6.867 1.428 1.13 2.6 2.543 3.34 3.633 0.201-0.134 0.392-0.258 0.574-0.373 0.705-0.443 0.986-1.105 0.986-1.105 0.13 0.216 0.736 1.396 0.499 1.973-0.109 0.142-0.642 0.497-1.283 0.918 0.673 1.814 0.664 3.625-0.208 4.028-0.975 0.449-2.248-0.799-2.797-1.56-0.285-0.396-0.394-0.845-0.396-1.222-4e-3 -0.485 0.207-0.923 0.729-1.313 0.52-0.384 1.003-0.732 1.457-1.046-1.289-1.464-4.335-3.609-6.199-4.869-0.069 0.185-0.342-0.01-0.709-0.478l-0.505-0.337c-1.487-0.984-5.053-3.145-5.754-3.674-0.702-0.53-0.262-0.434 0-0.316 0.495 0.289 1.145 0.639 1.875 1.025 1.034 0.547 2.237 1.166 3.413 1.787-0.348-0.638-0.708-1.384-1.027-2.198-1.403-3.583-3.671-11.009 1.235-15.477 4.694-4.277 12.762-2.65 19.453 1.795 6.692 4.446 8.137 6.009 9.183 7.625m-21.816 17.664c-0.232 0.185-0.264 0.432-0.075 0.604 0.241 0.222 0.549 0.432 0.899 0.503 0.742 0.149 1.038-0.773 0.74-2.209-0.564 0.373-1.144 0.765-1.564 1.102m15.348-6.057c-3.407-0.017-3.564 0.652-3.5 1.08 0.063 0.426 1.124 1.595 2.47 0.824 0.569-0.327 1.21-1.011 1.803-1.87-0.262-0.021-0.52-0.032-0.773-0.034m-10.435-19.379c-6.437-1.9-12.716 1.044-13.096 6.873-0.291 4.451 1.21 7.805 2.178 9.695 0.923 0.494 1.795 0.974 2.516 1.404-1.685-2.935-2.671-6.866-2.012-10.196 0.746-3.772 3.78-6.059 8.917-5.321 5.086 0.729 11.963 5.961 13.913 7.934 0.594 0.712 0.986 1.354 1.52 2.662 0.22 0.537 0.529 1.246 0.644 2.047 0.075 0.522 0.115 1.08 0.124 1.648 0.597 0.193 1.197 0.409 1.801 0.641 0.205-2.388 0.356-4.742 0.365-6.778-3.169-4.02-10.433-8.708-16.87-10.609" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1551,647.88)">
<path d="m0 0c-0.218 3.9-0.744 10.959-1.038 14.54-0.26 3.187-0.771 7.555-1.145 11.4-0.094 0.968-0.104 1.895-0.094 2.434 0.011 0.426 0.405 0.262 0.799-0.176s1.01-0.988 1.126-0.921c0.385 0.216-0.076 1.284-0.617 2.433-0.541 1.151-2.686 5.912-3.059 6.093-0.19 0.092-1.195-2.76-1.253-3.319 0.192-0.344 0.683-0.877 0.736-2.433 0.054-1.557 0.781-8.715 1.306-14.504 0.364-4.024 0.834-10.59 1.176-15.541-0.017-8e-3 0.323-4.707 0.36-5.235 0.21-3.04 0.101-6.865 0.08-7.529-0.023-0.667 0.428-0.551 0.912 0.929 0.493 1.511 0.774 4.885 0.812 7.931z" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1417.5,555.68)">
<path d="m0 0c-0.66-0.218-1.696 0.537-1.617 2.12 0.072 1.43 0.638 2.769 0.856 3.614 0.3 1.166 0.302 2.29 0.048 1.653-0.572-1.424-1.637-4.177-1.857-6.045-0.221-1.868 0.339-3.072 1.1-3.483 0.948-0.515 1.631 0.302 2.093 1.506 0.444 1.153 0.36 2.499 0.052 2.182-0.258-0.331-0.354-1.44-0.675-1.547" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1348.2,594.54)">
<path d="m0 0c0.35 1.006 0.432 1.992 0.163 1.451-0.607-1.212-1.744-3.554-2.077-5.181-0.332-1.627 0.071-2.728 0.711-3.145 0.798-0.522 1.455 0.147 1.952 1.172 0.475 0.981 0.499 2.172 0.207 1.914-0.252-0.272-0.419-1.239-0.707-1.31-0.599-0.143-1.453 0.597-1.268 1.985 0.168 1.25 0.765 2.387 1.019 3.114" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1146.4,737.86)">
<path d="m0 0c0.585 1.027 0.876 2.092 0.47 1.554-0.906-1.202-2.621-3.535-3.313-5.246-0.69-1.711-0.47-2.996 0.145-3.581 0.767-0.73 1.622-0.13 2.369 0.889 0.717 0.977 0.985 2.273 0.61 2.052-0.329-0.249-0.705-1.272-1.036-1.291-0.681-0.036-1.467 0.945-0.985 2.423 0.436 1.334 1.317 2.456 1.74 3.2" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1500.2,535.46)">
<path d="m0 0c-0.671-0.182-1.663 0.631-1.497 2.208 0.151 1.423 0.792 2.728 1.055 3.558 0.366 1.149 0.429 2.27 0.14 1.65-0.648-1.392-1.864-4.08-2.189-5.934-0.325-1.853 0.166-3.086 0.904-3.539 0.92-0.564 1.644 0.212 2.174 1.39 0.507 1.126 0.499 2.474 0.172 2.174-0.275-0.318-0.432-1.419-0.759-1.507" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1498.7,666.11)">
<path d="m0 0c0.918-0.564 1.646 0.212 2.174 1.39 0.506 1.126 0.499 2.474 0.174 2.174-0.277-0.316-0.434-1.419-0.761-1.507-0.671-0.181-1.665 0.631-1.497 2.208 0.151 1.423 0.791 2.729 1.055 3.558 0.365 1.149 0.428 2.272 0.14 1.65-0.65-1.392-1.864-4.08-2.189-5.932-0.325-1.855 0.166-3.088 0.904-3.541" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1584.4,499.22)">
<path d="m0 0c0.442 1.39 0.518 2.747 0.168 1.996-0.786-1.684-2.256-4.936-2.65-7.181-0.392-2.243 0.203-3.734 1.096-4.283 1.111-0.682 1.99 0.257 2.631 1.681 0.611 1.363 0.602 2.996 0.208 2.631-0.333-0.383-0.524-1.715-0.92-1.822-0.81-0.22-2.013 0.763-1.81 2.671 0.183 1.722 0.958 3.301 1.277 4.307" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,899.52,661.58)">
<path d="m0 0c0.723 1.694 0.985 3.39 0.453 2.487-1.191-2.021-3.434-5.934-4.2-8.706-0.767-2.773-0.199-4.721 0.856-5.52 1.316-0.992 2.535 0.084 3.512 1.795 0.935 1.641 1.121 3.696 0.582 3.285-0.465-0.44-0.867-2.094-1.377-2.181-1.048-0.178-2.44 1.204-1.954 3.579 0.44 2.143 1.606 4.035 2.128 5.261" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1639,775)">
<path d="m0 0c0.554 0.491 5.372 3.298 6.259 3.868 0 0 0.907 1.6 0.635 1.77-0.273 0.17-2.032-1.56-3.126-1.608-1.095-0.048-2.594 0.822-2.642 1.535 0.142 0.538 1.459 1.346 1.935 1.379 0.476 0.03 0.399-1.142 0.558-1.285 0.159-0.141 0.792 0.809 0.872 1.205 0.078 0.395 0.013 2.049-0.858 1.812-1.379-0.377-3.459-3.143-3.696-4.013-0.239-0.872 1.046-1.631 1.984-2.044-0.08-0.032-0.78-0.396-1.223-0.87 0 0-0.476-0.577-0.698-1.749" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1519,798.48)">
<path d="m0 0c0.554 0.491 5.372 3.296 6.259 3.868 0 0 0.909 1.6 0.635 1.77-0.273 0.17-2.032-1.56-3.126-1.608-1.095-0.048-2.594 0.822-2.642 1.535 0.142 0.538 1.459 1.346 1.935 1.377 0.476 0.032 0.399-1.139 0.558-1.281 0.159-0.143 0.792 0.807 0.872 1.203 0.078 0.395 0.011 2.049-0.858 1.812-1.379-0.379-3.459-3.143-3.696-4.015-0.239-0.87 1.046-1.629 1.982-2.042-0.078-0.032-0.778-0.395-1.221-0.87 0 0-0.476-0.577-0.698-1.749" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1248.7,458.72)">
<path d="m0 0c0.432-0.543 3.262-4.432 5.479-6.877 2.216-2.447 6.015-6.407 8.806-9.121 0.54-0.526 1.113-1.096 1.696-1.689 0.704-5.846 1.518-13.285 1.86-16.361 0.337-3.029 0.387-6.854 0.394-7.52 6e-3 -0.667 0.45-0.531 0.872 0.966 0.566 2.009 0.631 7.211 0.331 10.647-0.186 2.122-0.625 6.097-1.05 9.762 1.648-1.761 3.205-3.508 4.254-4.816 1.929-2.401 3.552-4.212 4.541-6.793 0.7-1.826 0.629-3.279 0.916-3.566 0.248-0.248 0.522 1.937 0.216 4.056-0.496 3.441-1.176 4.9-5.26 9.813-1.558 1.878-3.392 3.841-5.185 5.676-0.069 0.566-0.132 1.09-0.189 1.555-0.142 1.149-1.526 11.083-1.635 12.196-0.093 0.969-0.256 2.11-0.243 2.649 0.01 0.429 0.262 0.262 0.658-0.176 0.394-0.437 1.084-1.202 1.201-1.135 0.386 0.216-0.044 1.499-0.585 2.65-0.539 1.149-2.396 5.695-2.769 5.875-0.189 0.092-1.302-2.759-1.359-3.317 0.193-0.344 0.683-0.88 0.736-2.434 0.015-0.434 0.371-4.52 0.818-8.378 0.396-3.409 0.886-6.642 0.937-7.016l2e-3 -0.029c-1.849 1.824-3.478 3.373-4.466 4.346-2.31 2.271-7.412 7.66-7.617 8.467-0.046 0.255 0.35 0.098 1.078-0.028 0.731-0.127 1.381-0.396 1.264-8e-3 -0.053 0.183-0.333 0.635-1.03 1.101-0.698 0.467-2.486 1.677-3.816 2.533-1.333 0.855-1.993 1.572-2.268 1.367-0.136-0.101-0.015-3.03 0.065-3.395 0.333-0.031 0.918-0.455 1.348-1" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1275.3,423.15)">
<path d="m0 0c0.547 0.13 3.139 0.059 4.08-0.155-0.394-0.296-3.046-1.745-3.57-2.09-0.521-0.346-0.653-0.546-0.391-0.512 0.76 0.228 2.473 0.512 3.294 0.975 0.774 0.392 2.093 2.304 2.606 3.017 0.51 0.713 0.51 1.069 0.38 1.26-0.524 0.308-3.902 0.617-5.531 0.18-0.451-0.331-1.333-2.094-1.463-2.461-0.13-0.369 0.048-0.344 0.595-0.214" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1380.6,421.6)">
<path d="m0 0c0.442 0.105 2.531 0.048 3.288-0.124-0.317-0.239-2.453-1.407-2.875-1.687-0.423-0.277-0.528-0.439-0.317-0.411 0.613 0.182 1.994 0.411 2.655 0.786 0.623 0.316 1.686 1.857 2.099 2.43 0.411 0.576 0.411 0.862 0.306 1.015-0.42 0.251-3.143 0.499-4.456 0.146-0.364-0.266-1.073-1.687-1.178-1.983-0.107-0.296 0.038-0.277 0.478-0.172" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1466.2,420.5)">
<path d="m0 0c0.44 0.105 2.529 0.048 3.286-0.124-0.315-0.239-2.452-1.407-2.875-1.685-0.421-0.279-0.526-0.441-0.315-0.413 0.613 0.182 2.101 0.413 2.762 0.786 0.624 0.316 1.363 1.857 1.776 2.432 0.413 0.574 0.413 0.862 0.306 1.013-0.42 0.251-2.929 0.499-4.24 0.148-0.364-0.268-1.075-1.689-1.18-1.985s0.038-0.277 0.48-0.172" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1412.8,462.19)">
<path d="m0 0c-0.694-1.182 0.176-2.136 0.493-3.091-0.428-0.423-1.086-0.037-1.306 0.334-0.468 0.761-0.311 2.312-0.862 2.551-0.141-0.419-0.233-0.884-0.233-0.884s0.419-1.061 0.314-1.763c-0.067-0.424-0.413-0.919-0.87-0.929-1.218-0.032-0.618 1.918-1.088 3.023-0.096-0.27-0.165-0.56-0.277-0.813 0.086-0.288 0.133-0.692 0.147-0.925 0.028-0.463-6e-3 -0.962 0.067-1.357 0.101-0.559 0.388-0.93 0.826-0.966 0.91-0.078 1.325 0.719 1.462 1.373 0.157-0.667 1.36-1.402 1.952-0.583 0.784 1.08 0.157 2.005-0.245 3.021-0.29 0.751-0.206 1.244-0.38 1.009" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1163.1,441.02)">
<path d="m0 0c0.063-0.486 0.294-0.818 0.671-0.868 0.778-0.107 1.172 0.562 1.319 1.118 0.103-0.581 1.109-1.265 1.656-0.587 0.723 0.897 0.222 1.721-0.08 2.614-0.216 0.662-0.123 1.082-0.283 0.887-0.65-0.986 0.059-1.849 0.29-2.686-0.388-0.344-0.937 0.017-1.111 0.344-0.37 0.677-0.168 2.006-0.63 2.237-0.14-0.356-0.239-0.751-0.239-0.751s0.313-0.933 0.191-1.532c-0.075-0.363-0.394-0.774-0.79-0.763-1.049 0.025-0.447 1.679-0.805 2.65-0.093-0.227-0.166-0.476-0.275-0.686 0.063-0.254 0.086-0.602 0.086-0.805 8e-3 -0.4-0.044-0.826 0-1.172" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1344.4,750.3)">
<path d="m0 0c0.117 0.201 0.375 0.753 0.31 1.13s-0.492 1.95-1.321 2.344c-0.824 0.394-1.448-0.432-1.843-1.581l-0.274 7e-3c-0.065-0.17-0.147-0.424-0.212-0.883-0.092-0.663-0.266-1.09-1.317-2.122-0.884-0.864-3.748-2.939-5.604-3.914-1.858-0.977-3.195-1.82-3.688-2.076-0.491-0.252-0.348-0.346 0.143-0.187 0.49 0.158 2.956 1.017 3.939 1.455 0.981 0.441 2.181 1.166 3.627 2.181 1.608 1.128 2.569 2.256 2.892 3.256 0.23 0.713 0.289 0.998 0.289 0.998s0.604-0.386 1.629-0.639c1.021-0.254 1.311-0.172 1.43 0.031m-1.386 2.235c0.455-0.187 0.732-0.723 0.814-1.048-0.522-0.013-1.483 0.274-1.892 0.474 0.246 0.515 0.674 0.738 1.078 0.574" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1264.9,757.77)">
<path d="m0 0c-1.426 0.214-5.019 0.805-5.898 3.061 0.738 1.164 4.137 2.638 8.395 4.017 4.258 1.376 8.707 3.162 9.903 4.024 0.262 0.096 0.769 0.067 0.769 0.067 0.214 0.667 1.283 3.009 1.35 3.499-1.19-0.073-8.525-0.656-11.783-0.845-3.26-0.19-9.538-0.144-11.63-0.119 1.283 0.998 4.328 2.946 8.68 4.608 0.564 0.216 1.086 0.411 1.573 0.587 0.362-0.698 0.631-1.388 0.687-1.989 0.277 0.308 0.485 1.329 0.415 2.377 2.537 0.876 3.844 1.166 4.408 1.331 0.356 0.499 0.987 2.517 1.081 3.984-0.379 0.747-1.566 1.677-2.622 2.476-1.455 1.099-3.024 2.057-4.59 1.638-2.141-0.568-2.57-4.822-2.071-5.724 0.159-0.285 0.536-0.79 0.981-1.413-1.564-0.665-3.2-1.447-4.642-2.269-3.212-1.83-6.798-3.832-7.844-5.757l-0.3-0.158c-0.084-0.182-0.746-3.161-0.842-3.482 0.668 0.025 5.656 0.015 9.13 0.132 3.472 0.12 6.508 0.239 7.697 0.239-1.761-0.451-6.376-2.306-7.703-3.397-1.327-1.094-2.161-2.757-2.183-5.608-1.237 0.524-3.536 1.721-5.495 4.587-2.184 3.194-1.732 6.479-2.606 10.79-1.27 6.256-3.982 11.538-5.671 13.154-0.569-2.208-0.642-3.872-0.642-3.872s2.116-5.06 3.187-8.29c1.071-3.231 1.986-6.414 1.941-7.127-0.882-2.092-6.103-6.474-10.454-9.039-4.126-2.432-7.761-2.694-9.049-0.962-0.253 0.338-0.425 0.738-0.522 1.191 0.56 0.283 1.122 0.568 1.698 0.853 3.71 1.828 10.299 5.676 11.843 7.695 1.666 2.447 1.643 5.892 0.666 7.864-0.973 1.971-2.499 4.253-2.618 5.06-0.093 0.381 0.991-0.155 1.631-0.191 0.31 0.025 0.155 0.476-0.51 1.189-0.532 0.568-2.589 2.411-3.375 3.13-0.197 0.183-0.344 0.109-0.384-0.084-0.153-0.736-0.466-2.312-0.587-3.09l0.084-0.392c0.226-0.145 0.486-0.308 0.612-0.715 0.178-0.577 0.801-2.187 1.822-4.219 1.023-2.031 2.501-4.273 2.646-5.405-1.202-1.658-7.263-5.189-13.167-8.099 0.365 1.224 0.941 2.608 1.705 4.145 0.217 0.26 0.415 0.581 0.599 0.943 0.589 1.164 0.646 2.587 0.289 2.286-0.306-0.319-0.526-1.474-0.876-1.552-0.717-0.159-1.723 0.746-1.47 2.401 0.229 1.493 0.967 2.841 1.286 3.704 0.442 1.194 0.563 2.374 0.228 1.732-0.753-1.434-2.166-4.212-2.6-6.153-0.432-1.938 0.027-3.263 0.784-3.776 0.283-0.195 0.554-0.256 0.812-0.218-0.518-1.066-1.158-2.374-1.625-3.934-2.374-1.149-4.684-2.176-6.596-2.916-6.873-2.661-11.771-4.229-15.197-5.393l-0.134-0.065c0.252 0.881 0.218 1.633-0.052 1.407-0.306-0.321-0.525-1.476-0.875-1.552-0.717-0.159-1.723 0.745-1.471 2.401 0.23 1.493 0.968 2.839 1.287 3.703 0.44 1.193 0.562 2.375 0.228 1.732-0.754-1.434-2.166-4.212-2.6-6.152-0.433-1.939 0.026-3.264 0.782-3.778 0.942-0.64 1.745 0.145 2.361 1.359l0.216 0.499c0.214 0 0.575 0.054 1.114 0.184 1.57 0.382 5.495 0.998 10.892 1.759 3.996 0.562 6.755 1.749 9.422 3.07-0.012-0.319-0.015-0.644-2e-3 -0.979 0.145-3.961 2.545-5.079 5.827-4.338 3.166 0.719 7.581 3.859 10.227 5.977 2.759 2.208 4.351 4.181 4.757 4.869 0.736 1.687 0.938 3.551 0.988 4.43 0.241-2.422 0.436-5.774 2.554-8.649 1.95-2.646 5.946-6.338 13.462-6.439 0.025 0.967-0.333 3.986-0.333 3.986m-0.497 24.544c1.076 1.306 3.372 0.452 5.095-1.204-0.883-0.224-2.082-0.623-3.405-1.134-0.786 1.025-1.663 2.013-1.69 2.338" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,952.63,471.1)">
<path d="m0 0c0.488 0.241 1.981 0.967 3.59 1.981 1.606 1.007 3.115 2.227 3.853 3.038 0.283 0.311 0.535 0.554 0.696 0.843 0.482-0.216 0.814-0.44 1.021-0.528 0.311-0.13 0.726-0.317 0.996 0.641 0.269 0.957-0.088 1.575-0.614 2.313-0.445 0.619-1.151 1.549-1.724 1.78-0.486 0.197-0.717-0.977-0.643-0.948h0.325l0.063-0.033c-0.669-0.365-1.187-1.501-1.239-1.9-0.053-0.434 0.023-0.754 0.983-1.021l0.386-0.123c-0.801-1.026-2.294-2.087-3.311-2.839-1.443-1.07-3.491-2.407-4.074-2.793-0.583-0.384-0.534-0.505-0.308-0.411m8.672 7.538 0.052 0.513c0.675-0.832 1.176-1.822 1.126-1.962-0.31-0.027-0.696 0.283-1.371 0.595 0.075 0.248 0.138 0.522 0.193 0.854m-1.938-1e-3c-4e-3 0.156 0.256 0.59 0.806 0.827 0.549 0.239 0.792-0.428 0.84-1.24l-0.163-0.325-0.495 0.185c-0.524 0.166-0.878 0.26-0.988 0.553" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1215.5,576.87)">
<path d="m0 0c0.792 0.566 2.969 2.266 4.204 3.38 0.859 0.774 1.868 1.914 2.553 2.878 0.43-0.301 0.831-0.568 1.196-0.8 0.704-0.445 0.987-1.105 0.987-1.105 0.13 0.216 0.736 1.398 0.499 1.973-0.142 0.188-1.008 0.735-1.893 1.321 0.449 1.09 1.067 2.975 0.182 3.635-0.757 0.56-2.034-0.367-2.625-1.57-0.488-0.996-0.551-1.841 0.38-2.533 0.262-0.195 0.513-0.379 0.759-0.554-0.939-1.111-2.669-2.755-3.9-3.874-1.529-1.384-2.975-2.741-3.227-3.065l-0.073-0.126c-0.334 1.006-0.243 1.627-0.491 1.293-1.071-1.817 0.271-3.289 0.759-4.759-0.66-0.648-1.671-0.053-2.01 0.514-0.722 1.174-0.481 3.558-1.326 3.927-0.218-0.644-0.36-1.361-0.36-1.361s0.643-1.633 0.48-2.711c-0.101-0.652-0.635-1.415-1.336-1.428-1.876-0.052-0.951 2.95-1.675 4.65-0.147-0.417-0.252-0.863-0.428-1.249 0.133-0.447 0.206-1.067 0.225-1.426 0.048-0.713-6e-3 -1.478 0.105-2.09 0.155-0.86 0.597-1.432 1.272-1.485 1.399-0.123 2.038 1.107 2.25 2.11 0.241-1.026 2.094-2.154 3.005-0.896 1.207 1.663 0.241 3.087-0.376 4.651l-0.073 0.203c0.086-0.033 0.409 0.12 0.937 0.497m5.472 9.364c0.464 0.931 1.441 1.01 1.734 0.522 0.233-0.388 0.252-1.145-0.098-1.944-0.862 0.585-1.631 1.158-1.636 1.422" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,992.43,536.89)">
<path d="m0 0c-1.648 0.126-2.535 1.759-3.042 4.118-0.508 2.359-0.197 5.47-0.059 6.267 0.138 0.796-0.639 0.385-0.941-1.548-0.3-1.931-0.602-5.019 0.461-8.252 1.061-3.229 2.87-4.434 4.455-4.021 1.585 0.411 2.98 4.434 3.472 6.239 0.491 1.806 2.688 9.171 3.932 9.567 0.174-0.903-0.967-3.168-1.332-6.573-0.363-3.405 0.269-7.871 4.265-8.663 3.996-0.793 6.707 2.011 7.69 3.96 0.984 1.946 1.443 3.992 1.554 5.02 0.128-2.613 1.776-6.693 4.977-7.856 3.093-1.124 5.456-0.095 6.5 1.362 0.927 1.294 1.682 3.959 1.747 6.003 0.063 2.042-1.569 5.779-1.934 6.969-0.366 1.187-0.555 2.011-0.587 2.422-0.031 0.411 0.826-0.476 1.365-0.65 0.365-0.079 0.237 0.776-0.207 1.363-0.443 0.585-2.841 4.518-3.009 4.244-0.103-0.164-1.063-3.057-1.126-3.5 0.38-0.27 0.82-1.014 0.853-1.727 0.03-0.713 0.665-3.848 1.252-5.59s1.728-5.084 1.808-6.003c-1.141-0.87-3.711-1.977-6.152-0.855-2.441 1.126-3.22 2.757-3.489 5.671-0.172 1.862-0.189 5.292-0.803 8.16-0.346 1.621-1.075 3.269-1.941 4.144-0.204-0.537-1.124-3.848-1.124-3.848 0.3-0.95 1.233-4.149 1.203-6.921-0.033-2.77-0.235-5.481-3.107-7.349-2.87-1.868-6.959-1.124-8.022 1.791-1.063 2.914 1.3 9.47 1.269 11.196-0.032 1.726-0.319 1.965-0.984 1.679-0.666-0.285-2.031-1.949-3.203-4.656-1.174-2.709-1.695-5.416-2.363-7.697-0.665-2.281-1.73-4.592-3.378-4.466" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,642.92,468.66)">
<path d="m0 0c2.028 0.159 3.742 1.822 4.185 2.264 0.444 0.445 0.683 1.108 0.365 0.856-2.346-2.265-5.485-2.329-5.661-1.948 0.08 0.38 0.906 0.998 2.111 1.868 0.732 0.529 1.384 1.025 1.872 1.728l0.133-0.025c0.893-0.212 1.924-0.634 2.239-0.296 0.513 0.547 0.581 1.443 0.025 2.409-0.47 0.82-1.566 1.583-2.518 2.134-0.95 0.548-1.134-0.327-1.256-0.639-0.117-0.291-0.069-0.539 0.132-0.545-0.306-0.451-0.524-1.032-0.604-1.512-0.052-0.31-0.01-0.564 0.107-0.773 0.034-0.059 0.21-0.292 0.543-0.43l0.413-0.139c-0.711-0.71-1.53-1.266-1.96-1.547-0.776-0.507-1.696-1.394-1.981-2.311-0.286-0.92-0.175-1.253 1.855-1.094m3.585 6.47 0.078 0.468v0.3c0.643-0.506 1.671-1.464 1.608-2.038-0.407 0.1-1.183 0.277-1.92 0.482 0.094 0.239 0.171 0.501 0.234 0.788m-1.906-0.146c-0.473 0.408-0.012 0.815 0.407 1.077 0.541 0.338 0.858 0.059 1.135-0.828-0.097-0.254-0.233-0.501-0.393-0.738-0.421 0.141-1.014 0.367-1.149 0.489" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,687.36,635.95)">
<path d="m0 0c-0.583-0.547-0.809-2.327-0.69-2.434 0.118-0.107 1.94-0.772 2.225-0.916l0.13 0.536c0.868-0.843 1.83-5.049 2.044-5.061 0.214-0.011 0.524 0.476 0.727 1.593 0.187 1.036 0.374 2.586 0.569 3.848 0.182 1.155 0.465 1.816 1.107 1.948 0.643 0.13 1.119-0.761 1.285-1.367 0 0 0.451 1.165 0.547 1.889-0.107 0.381-1.107 1.817-1.927 1.342-0.821-0.476-1.335-2.491-1.501-3.751-0.167-1.258-0.295-2.818-0.497-3.068-0.212 1.074-0.891 2.996-1.711 4.076-0.922 1.21-2 1.654-2.308 1.365" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,630.59,621.43)">
<path d="m0 0c0.761 0.226 2.474 0.51 3.294 0.973 0.773 0.392 2.092 2.304 2.604 3.017 0.511 0.713 0.512 1.071 0.382 1.26-0.523 0.31-3.902 0.617-5.532 0.18-0.45-0.329-1.331-2.092-1.461-2.461-0.132-0.367 0.048-0.344 0.594-0.214 0.547 0.132 3.14 0.061 4.078-0.153-0.391-0.298-3.043-1.747-3.567-2.092-0.522-0.344-0.654-0.546-0.392-0.51" fill="#fff"/>
</g>
<g transform="matrix(7.3042,0,0,-6.7531,1778.1,690.36)">
<path d="m0 0c-0.078 2.137-1.046 5.418-4.726 10.452-1.27 1.738-3.057 4-4.942 6.317-0.052 0.79-0.104 1.512-0.151 2.132-0.247 3.189-1.084 9.695-1.444 13.541-0.088 0.97-0.095 2.002-0.082 2.541 0.013 0.428 0.298 0.371 0.69-0.069 0.392-0.439 0.996-1.08 1.122-1.036 0.268 0.1 0.035 1.071-0.5 2.222-0.534 1.153-2.553 5.816-2.924 5.997-0.191 0.092-1.143-2.646-1.202-3.206 0.189-0.344 0.677-0.879 0.724-2.436 0.05-1.556 0.918-10.746 1.417-16.537l0.027-0.323c-2.818 3.403-5.472 6.506-6.564 7.764-0.189 0.218-0.397 0.466-0.621 0.732-0.178 1.549-0.342 3.025-0.455 4.244-0.092 0.968-0.098 2.002-0.082 2.541 9e-3 0.427 0.296 0.369 0.688-0.071 0.394-0.439 0.996-1.08 1.122-1.034 0.268 0.098 0.035 1.069-0.501 2.222-0.533 1.153-2.638 5.923-3.011 6.104-0.189 0.092-1.185-2.864-1.244-3.42 0.191-0.346 0.678-0.881 0.726-2.438 0.019-0.661 0.178-2.665 0.39-5.194-1.868 2.401-3.697 4.915-3.827 5.426-0.046 0.252 0.349 0.097 1.08-0.031 0.728-0.126 1.411-0.363 1.294 0.027-0.055 0.181-0.333 0.633-1.03 1.101-0.698 0.467-2.486 1.677-3.816 2.531-1.333 0.855-1.993 1.574-2.268 1.369-0.136-0.101-0.015-3.032 0.063-3.395 0.335-0.033 0.954-0.302 1.348-0.872 0.398-0.57 2.946-4.434 4.961-7.047 0.58-0.752 1.488-1.918 2.551-3.264 0.208-2.407 0.426-4.894 0.606-6.972 0.409-4.74 1.879-17.241 1.893-21.304-1.085-1.101-3.304-2.637-5.587-2.669-2.283-0.031-3.535 0.619-4.455 2.455-0.284 0.569-0.548 1.141-0.81 1.659-0.622 1.231-2.01 1.922-3.348 1.583l-0.204-0.059-0.364-0.189c-0.906-0.513-1.843-1.373-2.759-2.707-1.584-2.314-2.596-4.824-3.768-6.998-1.221-2.264-2.158-3.783-4.3-3.42-1.508 0.256-2.653 1.655-3.359 3.376 1.983 1.484 3.423 3.42 4.476 6.103 1.371 3.487 1.86 7.418 1.738 11.838-0.117 4.16-1.87 13.947-2.333 17.698-0.462 3.753-1.126 6.833-1.049 7.634 0.072 0.773 1.21-1.047 1.793-1.183 0.298 0.072 0.138 1.233-0.428 2.214-0.384 0.667-1.6 3.701-2.396 5.164-0.374 0.692-0.464 1.093-0.638 1.175-0.172 0.085-1.497-2.976-1.337-3.309 0.392-0.606 0.66-0.895 0.742-1.981 0.084-1.086 0.992-9.058 1.786-14.929 0.598-4.43 1.919-12.477 2.089-18.425 0.056-1.941-0.2-3.334-0.422-4.112-0.57-1.192-1.499-2.516-4.763-5.029-0.504 3.551 0.044 6.436-0.434 6.703-0.539-0.063-0.625-1.718-0.686-3.76-0.03-0.943 8e-3 -2.249 0.172-3.652-4.009-2.898-9.305-5.537-11.792-6.946-1.459-0.828-0.933-1.021 0.302-0.608 1.235 0.415 8.022 2.34 11.645 4.401l0.39 0.234c0.184-0.691 0.407-1.36 0.681-1.977 1.219-2.74 2.961-4.367 4.848-4.208 1.587 0.132 2.738 1.969 3.742 4.16 1.015 2.218 2.73 6.43 4.412 7.997 0.646 0.604 1.314 1.082 1.964 1.369 0 0 1.149 0.415 2.206-0.332 0.379-0.27 0.662-0.654 0.841-1.084 0.417-0.987 0.91-2.243 1.918-3.295 1.776-1.85 4.632-1.468 6.774-0.392 2.139 1.077 3.231 2.757 3.707 4.753 0.812 3.415 0.682 6.914 0.527 10.022-0.179 3.547-0.703 7.172-1.001 11.013-0.096 1.235-0.283 2.953-0.498 4.816 2.086-2.604 4.252-5.247 5.566-6.692 0.453-0.499 0.931-1.053 1.422-1.638 0.392-5.814 0.769-13.089 0.968-16.142 0.197-3.042 0.07-6.866 0.047-7.531-0.024-0.665 0.318-0.551 0.809 0.925 0.658 1.981 1.071 7.176 0.927 10.621-0.086 2.047-0.275 5.779-0.479 9.309 1.619-2.081 3.156-4.182 4.156-5.6 1.778-2.518 3.411-5.512 3.982-7.38 0.57-1.87 0.633-2.424 0.744-2.757s0.602 1.031 0.524 3.168" fill="#fff"/>
</g>
</g>
<path id="sword" d="m1558.8 1170.7c-1.1729-3.3554-4.7649-5.8169-9.0607-5.8169s-7.8806 2.4615-9.0608 5.8169h-40.678c-0.4105-4.5128-0.01-9.0477 1.2683-13.465l83.981-0.051 2.3385 3.9414c2.1113 3.5531 4.7797 6.7619 7.8731 9.5751zm55.596-39.026h-100.92c7.7559-5.5971 11.824-13.766 10.732-22.029-0.6964-5.2089-5.8571-9.099-12.147-9.6264h-3.1596c-7.6532 0.7472-13.203 6.2637-12.396 12.322l0.3079 2.3297 0.3738 3.5824c0.4106 4.4982 0.015 9.0183-1.2535 13.421h-745.97c11.077 16.117 31.273 26 53.082 25.985l680.71-0.4178c-7.7852 5.6044-11.868 13.788-10.769 22.066 0.8064 6.0585 7.6533 10.374 15.307 9.6263 7.6459-0.7472 13.195-6.2637 12.396-12.33l-0.3079-2.3223h40.004c0.7037 3.9048 4.6037 6.9011 9.354 6.9011s8.6502-2.9963 9.3613-6.9011h40.693v-0.095c8.4963 6.0294 19.294 9.4946 30.716 9.4946 10.747 0 19.456-7.4652 19.456-16.681v-4.8205c0-16.842-15.922-30.506-35.569-30.506" fill="#fff"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

62
src/js/components/Shape.tsx
View file

@ -20,3 +20,65 @@ export function PauseShape({ onClick }: Props) {
</div>
);
}
export function SoundOnShape({ onClick }: Props) {
return (
<svg viewBox="0 0 100 100" className="svg sound-on" onClick={onClick}>
<g>
<polygon fill="none" stroke="#000000" strokeWidth="2" strokeMiterlimit="10" points="3,32 3,20 15,20 33,2 33,32 33,62 15,44
3,44 "/>
<path fill="none" stroke="#000000" strokeWidth="2" strokeMiterlimit="10" d="M41,42c5.522,0,10-4.478,10-10s-4.478-10-10-10"/>
<path fill="none" stroke="#000000" strokeWidth="2" strokeMiterlimit="10" d="M41,12c11.046,0,20,8.954,20,20s-8.954,20-20,20"/>
</g>
</svg>
);
}
export function SoundOffShape({ onClick }: Props) {
return (
<svg viewBox="0 0 100 100" className="svg sound-off" onClick={onClick}>
<g>
<polygon fill="none" stroke="#000000" strokeWidth="2" strokeMiterlimit="10" points="4,32 4,20 16,20 34,2 34,32 34,62 16,44
4,44 "/>
<line fill="none" stroke="#000000" strokeWidth="2" strokeMiterlimit="10" x1="42" y1="23" x2="60" y2="41"/>
<line fill="none" stroke="#000000" strokeWidth="2" strokeMiterlimit="10" x1="42" y1="41" x2="60" y2="23"/>
</g>
</svg>
);
}
export function RefreshShape({ onClick }: Props) {
return (
<svg onClick={onClick} className="shape refresh" x="0px" y="0px" width="438.542px" height="438.542px" viewBox="0 0 438.542 438.542">
<g>
<path d="M427.408,19.697c-7.803-3.23-14.463-1.902-19.986,3.999l-37.116,36.834C349.94,41.305,326.672,26.412,300.5,15.848
C274.328,5.285,247.251,0.003,219.271,0.003c-29.692,0-58.052,5.808-85.08,17.417c-27.03,11.61-50.347,27.215-69.951,46.82
c-19.605,19.607-35.214,42.921-46.824,69.949C5.807,161.219,0,189.575,0,219.271c0,29.687,5.807,58.05,17.417,85.079
c11.613,27.031,27.218,50.347,46.824,69.952c19.604,19.599,42.921,35.207,69.951,46.818c27.028,11.611,55.388,17.419,85.08,17.419
c32.736,0,63.865-6.899,93.363-20.7c29.5-13.795,54.625-33.26,75.377-58.386c1.52-1.903,2.234-4.045,2.136-6.424
c-0.089-2.378-0.999-4.329-2.711-5.852l-39.108-39.399c-2.101-1.711-4.473-2.566-7.139-2.566c-3.045,0.38-5.232,1.526-6.566,3.429
c-13.895,18.086-30.93,32.072-51.107,41.977c-20.173,9.894-41.586,14.839-64.237,14.839c-19.792,0-38.684-3.854-56.671-11.564
c-17.989-7.706-33.551-18.127-46.682-31.261c-13.13-13.135-23.551-28.691-31.261-46.682c-7.708-17.987-11.563-36.874-11.563-56.671
c0-19.795,3.858-38.691,11.563-56.674c7.707-17.985,18.127-33.547,31.261-46.678c13.135-13.134,28.693-23.555,46.682-31.265
c17.983-7.707,36.879-11.563,56.671-11.563c38.259,0,71.475,13.039,99.646,39.116l-39.409,39.394
c-5.903,5.711-7.231,12.279-4.001,19.701c3.241,7.614,8.856,11.42,16.854,11.42h127.906c4.949,0,9.23-1.807,12.848-5.424
c3.613-3.616,5.42-7.898,5.42-12.847V36.55C438.542,28.558,434.84,22.943,427.408,19.697z"/>
</g>
<g />
<g />
<g />
<g />
<g />
<g />
<g />
<g />
<g />
<g />
<g />
<g />
<g />
<g />
<g />
</svg>
);
}

24
src/js/components/Stream.tsx
View file

@ -1,26 +1,30 @@
import * as Quran from 'lib/Quran';
import React, { useEffect } from 'react';
import React, { useEffect, useRef } from 'react';
import { formatNumber, TFunction } from 'lib/i18n';
import { Slice } from 'lib/Quran/Slice';
import classNames from 'classnames';
interface Props {
reciter: Quran.Reciter
surah: Quran.Surah
stream: Quran.Ayat
locale: Quran.Locale
slice: Slice
endOfStream: boolean
isPaused: boolean
soundOn: boolean
setSoundOn: (v: boolean) => void
t: TFunction
}
export function Stream({ surah, stream, locale, slice, endOfStream, isPaused, t }: Props) {
export function Stream({ reciter, surah, stream, locale, slice, endOfStream, isPaused, setSoundOn, soundOn, t }: Props) {
const className = classNames('body', 'stream');
const style: React.CSSProperties = endOfStream || isPaused ?
{ 'overflowY': 'auto' } :
{ 'overflowY': 'hidden' };
const audioRef = useRef<HTMLAudioElement>(null);
const ayat = stream.map((ayah: Quran.Ayah) => {
const { url: baseUrl } = reciter;
return (
<li key={ayah.id} className="ayah fade">
<span className="surah-id ayah-id">
@ -31,10 +35,12 @@ export function Stream({ surah, stream, locale, slice, endOfStream, isPaused, t
{formatNumber(ayah.id, locale)}
</span>
<p>{ayah.text}</p>
<audio ref={audioRef} src={`${baseUrl}/${surah.id}/${ayah.id}.mp3`} />
</li>
);
});
useEffect(() => {
const ul: HTMLElement = document.querySelector('ul.stream')!;
if (slice.coversOneAyah) {
@ -45,6 +51,18 @@ export function Stream({ surah, stream, locale, slice, endOfStream, isPaused, t
}
}, [stream]);
useEffect(() => {
const audio = audioRef.current;
if (!audio) {
return;
} else if (isPaused || !soundOn) {
audio.pause();
} else if (soundOn) {
audio.play()
.catch(() => setSoundOn(false));
}
}, [stream, isPaused, soundOn]);
return (
<ul lang={locale} className={className} style={style}>
{ayat}

14
src/js/components/Timer.tsx
View file

@ -6,21 +6,29 @@ interface Props {
surah: Quran.Surah
locale: Quran.Locale
stream: Quran.Ayat
soundOn: boolean
setStream: (stream: Quran.Ayat) => void
isPaused: boolean
}
export function Timer ({ surah, stream, setStream, locale, isPaused }: Props) {
export function Timer ({ surah, stream, soundOn, setStream, locale, isPaused }: Props) {
const ayah = stream[stream.length - 1];
const [ms, setMs] = useState(ayah.readTimeMs);
useEffect(() => setMs(ayah.readTimeMs), [ayah.id]);
const [tid, setTid] = useState<ReturnType<typeof setTimeout>>();
useEffect(() => {
if (tid) {
clearTimeout(tid);
setTid(undefined);
}
setMs(ayah.readTimeMs);
}, [soundOn, ayah.id]);
useEffect(() => {
if (isPaused) {
return;
} else if (ms <= 0) {
setStream([...stream, surah.ayat[ayah.id]]);
} else {
setTimeout(() => setMs(ms - 100), 100);
setTid(setTimeout(() => setMs(ms - 100), 100));
}
}, [ms, isPaused]);
return (

3
src/js/lib/Quran.ts
View file

@ -4,5 +4,6 @@ import { Surah } from 'lib/Quran/Surah';
type Locale = 'ar' | 'en';
type Ayat = Ayah[];
type Reciter = { id: string, name: string, nationality: string, url: string };
export { Surah, Ayah, Ayat, Locale, JSON };
export { Surah, Ayah, Ayat, Reciter, Locale, JSON };

15
src/js/lib/Quran/Ayah.ts
View file

@ -1,5 +1,4 @@
import * as Quran from 'lib/Quran';
import { DelayBaseLine, DelayPerWord } from 'lib/i18n';
export type Ayah = {
id: number
@ -7,16 +6,14 @@ export type Ayah = {
readTimeMs: number
};
export function Ayah(ayah: Ayah): Ayah {
export function Ayah(ayah: Quran.JSON.Ayah): Ayah {
const self = Object.create(null);
self.id = ayah.id;
self.text = ayah.text;
self.readTimeMs = ayah.readTimeMs;
self.id = ayah[0];
self.text = ayah[1];
self.readTimeMs = 0;
return self;
}
Ayah.fromJSON = (locale: Quran.Locale, ayah: Quran.JSON.Ayah): Ayah => {
const [ id, text ] = ayah;
const readTimeMs = DelayBaseLine + (text.split(' ').length * DelayPerWord[locale]);
return Ayah({ id: Number(id), text, readTimeMs });
Ayah.fromJSON = (ayah: Quran.JSON.Ayah): Ayah => {
return Ayah(ayah);
};

16
src/js/lib/Quran/Surah.ts
View file

@ -1,21 +1,27 @@
import * as Quran from 'lib/Quran';
type TimeSlot = [number, number];
type TimeSlots = [TimeSlot];
export class Surah {
locale: Quran.Locale;
ayat: Quran.Ayat;
#surah: Quran.JSON.Surah;
static fromDOMNode(locale: Quran.Locale, node: HTMLScriptElement) {
static fromDOMNode(locale: Quran.Locale, node: HTMLScriptElement, timeNode: HTMLScriptElement) {
const json = JSON.parse(node.innerText);
return Surah.fromJSON(locale, json.shift(), json);
const timeSlots: TimeSlots = JSON.parse(timeNode.innerText);
const surah = Surah.fromJSON(locale, json.shift(), json);
surah.ayat.map((ayah, i) => ayah.readTimeMs = timeSlots[i][1] * 1000);
return surah;
}
static fromJSON(locale: Quran.Locale, surah: Quran.JSON.Surah, ayat: Quran.JSON.Ayat = []) {
return new Surah(locale, surah, this.mapFromJSON(locale, ayat));
return new Surah(locale, surah, this.mapFromJSON(ayat));
}
static mapFromJSON(locale: Quran.Locale, ayat: Quran.JSON.Ayat) {
return ayat.map((ayah) => Quran.Ayah.fromJSON(locale, ayah));
static mapFromJSON(ayat: Quran.JSON.Ayat) {
return ayat.map((ayah) => Quran.Ayah.fromJSON(ayah));
}
constructor(locale: Quran.Locale, surah: Quran.JSON.Surah, ayat: Quran.Ayat) {

15
src/js/lib/i18n.ts
View file

@ -1,20 +1,5 @@
import * as Quran from 'lib/Quran';
/**
* The read time baseline - as a number milliseconds -
* that all Ayah share, regardless of locale.
*/
export const DelayBaseLine = 2000;
/**
* The read time for each word in an Ayah,
* relative to the active locale.
*/
export const DelayPerWord: Record<Quran.Locale, number> = {
en: 500,
ar: 750
};
type PhraseMap<T> = {
[key: string]: undefined | string | PhraseMap<T>
};

71
src/js/pages/surah/stream.tsx
View file

@ -7,27 +7,36 @@ import { Stream } from 'components/Stream';
import { SelectOption } from 'components/Select';
import { ThemeSelect } from 'components/ThemeSelect';
import { LanguageSelect } from 'components/LanguageSelect';
import { PlayShape, PauseShape } from 'components/Shape';
import { PlayShape, PauseShape, SoundOnShape, SoundOffShape, RefreshShape } from 'components/Shape';
import * as Quran from 'lib/Quran';
import { Slice } from 'lib/Quran/Slice';
import { i18n, TFunction } from 'lib/i18n';
interface Props {
node: HTMLScriptElement
reciters: Quran.Reciter[]
locale: Quran.Locale
slice: Slice
paused: boolean
t: TFunction
}
function SurahStream({ node, locale, slice, paused, t }: Props) {
const getTimeSlots = (reciter: Quran.Reciter) => {
const selector = `script.reciter.time-slots.${reciter.id}`;
const timeSlots: HTMLScriptElement = document.querySelector(selector)!;
return timeSlots;
};
function SurahStream({ node, reciters, locale, slice, paused, t }: Props) {
const [stream, setStream] = useState<Quran.Ayat>([]);
const [isPaused, setIsPaused] = useState<boolean>(paused);
const [soundOn, setSoundOn] = useState<boolean>(false);
const [theme, setTheme] = useState(getCookie('theme') || 'moon');
const [surah] = useState<Quran.Surah>(Quran.Surah.fromDOMNode(locale, node));
const [reciter] = useState<Quran.Reciter>(reciters[0]);
const [surah] = useState<Quran.Surah>(Quran.Surah.fromDOMNode(locale, node, getTimeSlots(reciter)));
const readyToRender = stream.length > 0;
const getAyahParam = (slice: Slice, stream: Quran.Ayat) => {
if(slice.coversSubsetOfSurah) {
if (slice.coversSubsetOfSurah) {
return `${slice.begin}..${slice.end}`;
} else {
return stream.length;
@ -39,7 +48,7 @@ function SurahStream({ node, locale, slice, paused, t }: Props) {
['ayah', getAyahParam(slice, stream)],
['paused', isPaused ? 't' : null]
];
const query = params.filter(([, v]) => v).flatMap(([k,v]) => `${k}=${v}`).join('&');
const query = params.filter(([, v]) => v).flatMap(([k, v]) => `${k}=${v}`).join('&');
location.replace(`/${locale}/${surah.slug}/?${query}`);
};
const endOfStream = (function() {
@ -58,7 +67,7 @@ function SurahStream({ node, locale, slice, paused, t }: Props) {
} else {
setStream([surah.ayat[slice.begin - 1]]);
}
}, []);
}, [stream.length === 0]);
return (
<div className={classNames('content', 'theme', theme, locale)}>
@ -81,29 +90,39 @@ function SurahStream({ node, locale, slice, paused, t }: Props) {
</div>
)}
{readyToRender &&
<Stream
slice={slice}
surah={surah}
stream={stream}
locale={locale}
endOfStream={endOfStream}
isPaused={isPaused}
t={t}
/>
<Stream
reciter={reciter}
slice={slice}
surah={surah}
stream={stream}
locale={locale}
endOfStream={endOfStream}
isPaused={isPaused}
soundOn={soundOn}
setSoundOn={setSoundOn}
t={t}
/>
}
<div className="row">
<div className={classNames({ 'justify-end': readyToRender && endOfStream }, 'row')}>
{readyToRender && isPaused && !endOfStream &&
<PlayShape onClick={() => setIsPaused(false)} />}
<PlayShape onClick={() => setIsPaused(false)} />}
{readyToRender && !isPaused && !endOfStream &&
<PauseShape onClick={() => setIsPaused(true)} />}
<PauseShape onClick={() => setIsPaused(true)} />}
{readyToRender && !endOfStream && soundOn &&
<SoundOnShape onClick={() => setSoundOn(false)} />}
{readyToRender && !endOfStream && !soundOn &&
<SoundOffShape onClick={() => setSoundOn(true)} />}
{readyToRender && !endOfStream &&
<Timer
surah={surah}
setStream={setStream}
stream={stream}
locale={locale}
isPaused={isPaused}
/>}
<Timer
surah={surah}
setStream={setStream}
stream={stream}
locale={locale}
isPaused={isPaused}
soundOn={soundOn}
/>}
{readyToRender && endOfStream &&
<RefreshShape onClick={() => setStream([])} />}
</div>
</div>
);
@ -118,12 +137,14 @@ function SurahStream({ node, locale, slice, paused, t }: Props) {
const params = new URLSearchParams(location.search);
const slice = Slice.fromParam(params.get('ayah'));
const paused = toBoolean(params.get('paused'));
const reciters = JSON.parse(document.querySelector<HTMLElement>('.json.reciters')!.innerText);
const t = i18n(document.querySelector<HTMLElement>('.json.i18n')!.innerText);
ReactDOM
.createRoot(root)
.render(
<SurahStream
reciters={reciters}
node={node}
locale={locale}
slice={slice}

13
src/js/pages/surah/stream/loader.ts
View file

@ -1,21 +1,30 @@
import postman, { item } from 'postman';
import * as Quran from 'lib/Quran';
(function() {
const parent: HTMLElement = document.querySelector('.webpackage.loader')!;
const progressBar: HTMLProgressElement = parent.querySelector('progress')!;
const progressNumber: HTMLSpanElement = parent.querySelector('.percentage')!;
const inlineStyle: HTMLStyleElement = document.querySelector('.css.webpackage')!;
const inlineStyle: HTMLStyleElement = document.querySelector('.css.postman')!;
const { locale, surahId } = document.querySelector<HTMLElement>('.root')!.dataset;
const reciters = JSON.parse(document.querySelector<HTMLElement>('.json.reciters')!.innerText);
postman(
item.script('/js/pages/surah/stream.js'),
item.css('/css/pages/surah/stream.css'),
item.image('/images/moon.svg'),
item.image('/images/leaf.svg'),
item.json(`/${locale}/${surahId}/surah.json`, { className: 'surah' }),
item.font('Kanit Regular', 'url(/fonts/kanit-regular.ttf)'),
item.font('Vazirmatn Regular', 'url(/fonts/vazirmatn-regular.ttf)'),
item.font('Roboto Mono Regular', 'url(/fonts/roboto-mono-regular.ttf)'),
item.json(`/${locale}/${surahId}/surah.json`, { className: 'surah' }),
...reciters.map((reciter: Quran.Reciter) => {
const { url: baseUrl } = reciter;
return item.json(
`${baseUrl}/time_slots/${surahId}.json`,
{ className: `reciter time-slots ${reciter.id}` }
);
}),
item.progress((percent: number) => {
progressBar.value = percent;
progressNumber.innerText = `${percent.toFixed(0)}%`;

32
src/reciters.json Normal file
View file

@ -0,0 +1,32 @@
[
{
"id": "mishari_alafasy",
"name": "Mishari bin Rashed Alafasy",
"nationality": "KW",
"url": "https://al-quran.reflectslight.io/audio/alafasy/"
},
{
"id": "aziz_alili",
"name": "Aziz Alili",
"nationality": "MK",
"url": "https://al-quran.reflectslight.io/audio/aziz_alili/"
},
{
"id": "abdullah_awad_al_juhany",
"name": "Abdullah Awad Al Juhany",
"nationality": "SA",
"url": "https://al-quran.reflectslight.io/audio/abdullah_awad_al_juhany/"
},
{
"id": "ahmad_bin_ali_al_ajmi",
"name": "Ahmad bin Ali Al-Ajmi",
"nationality": "SA",
"url": "https://al-quran.reflectslight.io/audio/ahmad_bin_ali_al_ajmi/"
},
{
"id": "sahl_yassin",
"name": "Sahl Yassin",
"nationality": "SA",
"url": "https://al-quran.reflectslight.io/audio/sahl_yassin/"
}
]