Add demo site

This commit is contained in:
Harry Stuart 2024-06-08 10:48:56 +10:00
parent ad53ce97ff
commit 79fcee4b68
41 changed files with 10853 additions and 1 deletions

View File

@ -2,6 +2,6 @@
Site Falcon IO was a business ideas that I decided to make open source. It comprises a Web Component widget developed using raw HTML, JS and CSS. This repository is still in testing and not yet publicised.
The widget is a simple web component that can be embedded into any website and allows users to provide feedback by interacting with it. The feedback can also include screenshots of the website. This has proven to be the most challenging component of the project due to cross-origin content. The W3C spec that most browsers implement prohibits the downloading of content originating outside the origin of the current site-hosting server. Thus, any images on a website that are served from a different origin will taint any HTML canvases that are painted with their content. The work-around is to either use a proxy-server or the `getDisplayMedia` JS API. The latter requires asking for user permission each invocation which is sub-optimal. In summary, this project is still ongoing.
The widget is a simple web component that can be embedded into any website and allows users to provide feedback by interacting with it. The feedback can also include screenshots of the website. This has proven to be the most challenging component of the project due to cross-origin content. The W3C spec that most browsers implement prohibits the downloading of content originating outside the origin of the current site-hosting server. Thus, **any images on a website that are served from a different origin will taint any HTML canvases that are painted with their content**. The work-around is to either use a proxy-server or the `getDisplayMedia` JS API. The latter requires asking for user permission each invocation which is sub-optimal. In summary, this project is still ongoing.
In its completed form, this widget will save web developers considerable time and hassle when it comes to ascertaining beta/alpha testing feedback from users because such users can provide feedback directly on the site, thus preventing bogged down email chain discussions.

BIN
demo/assets/.DS_Store vendored Normal file

Binary file not shown.

BIN
demo/assets/css/.DS_Store vendored Normal file

Binary file not shown.

3123
demo/assets/css/animate.css vendored Normal file

File diff suppressed because it is too large Load Diff

7
demo/assets/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

2170
demo/assets/css/main.css Normal file

File diff suppressed because it is too large Load Diff

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 580 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
demo/assets/img/.DS_Store vendored Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -0,0 +1 @@
<svg height="638.601" viewBox="0 0 494.836 638.601" width="494.836" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m319.3 0c176.345 0-67.066 208.923 88.593 319.3s87.752 319.3-88.593 319.3-319.3-142.955-319.3-319.3 142.956-319.3 319.3-319.3z" transform="translate(297.858 1341)"/></clipPath><linearGradient id="b" gradientUnits="objectBoundingBox" x1=".5" x2=".5" y2="1"><stop offset="0" stop-color="#dddff9"/><stop offset="1" stop-color="#5864ff"/></linearGradient><path d="m319.3 0c176.345 0-67.066 208.923 88.593 319.3s87.752 319.3-88.593 319.3-319.3-142.955-319.3-319.3 142.956-319.3 319.3-319.3z" fill="#5864ff"/><g clip-path="url(#a)" transform="translate(-297.858 -1341)"><path d="m319.3 0c176.345 0-67.066 208.923 88.593 319.3s87.752 319.3-88.593 319.3-319.3-142.955-319.3-319.3 142.956-319.3 319.3-319.3z" fill="url(#b)" opacity=".3" transform="matrix(-1 0 0 -1 792.694 1979.601)"/></g></svg>

After

Width:  |  Height:  |  Size: 957 B

View File

@ -0,0 +1 @@
<svg height="638.601" viewBox="0 0 494.836 638.601" width="494.836" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m175.536 0c-176.345 0 67.064 208.923-88.593 319.3s-87.752 319.3 88.593 319.3 319.3-142.956 319.3-319.3-142.955-319.3-319.3-319.3z"/></clipPath><linearGradient id="b" gradientUnits="objectBoundingBox" x1=".5" x2=".5" y1="1"><stop offset="0" stop-color="#dddff9"/><stop offset="1" stop-color="#5864ff"/></linearGradient><path d="m175.536 0c-176.345 0 67.064 208.923-88.593 319.3s-87.752 319.3 88.593 319.3 319.3-142.956 319.3-319.3-142.955-319.3-319.3-319.3z" fill="#5864ff"/><g clip-path="url(#a)"><path d="m319.3 638.6c176.345 0-67.066-208.922 88.593-319.3s87.752-319.3-88.593-319.3-319.3 142.956-319.3 319.3 142.956 319.3 319.3 319.3z" fill="url(#b)" opacity=".3"/></g></svg>

After

Width:  |  Height:  |  Size: 848 B

View File

@ -0,0 +1 @@
<svg height="160" viewBox="0 0 370 160" width="370" xmlns="http://www.w3.org/2000/svg"><g fill="#00909e"><circle cx="365" cy="5" r="5"/><circle cx="335" cy="5" r="5"/><circle cx="305" cy="5" r="5"/><circle cx="275" cy="5" r="5"/><circle cx="245" cy="5" r="5"/><circle cx="215" cy="5" r="5"/><circle cx="185" cy="5" r="5"/><circle cx="155" cy="5" r="5"/><circle cx="125" cy="5" r="5"/><circle cx="95" cy="5" r="5"/><circle cx="65" cy="5" r="5"/><circle cx="35" cy="5" r="5"/><circle cx="5" cy="5" r="5"/><circle cx="365" cy="35" r="5"/><circle cx="335" cy="35" r="5"/><circle cx="305" cy="35" r="5"/><circle cx="275" cy="35" r="5"/><circle cx="245" cy="35" r="5"/><circle cx="215" cy="35" r="5"/><circle cx="185" cy="35" r="5"/><circle cx="155" cy="35" r="5"/><circle cx="125" cy="35" r="5"/><circle cx="95" cy="35" r="5"/><circle cx="65" cy="35" r="5"/><circle cx="35" cy="35" r="5"/><circle cx="5" cy="35" r="5"/></g><circle cx="365" cy="65" fill="#5864ff" r="5"/><circle cx="335" cy="65" fill="#5864ff" r="5"/><circle cx="305" cy="65" fill="#5864ff" r="5"/><circle cx="275" cy="65" fill="#5864ff" r="5"/><circle cx="245" cy="65" fill="#5864ff" r="5"/><circle cx="215" cy="65" fill="#5864ff" r="5"/><circle cx="185" cy="65" fill="#fff" r="5"/><circle cx="155" cy="65" fill="#fff" r="5"/><circle cx="125" cy="65" fill="#fff" r="5"/><circle cx="95" cy="65" fill="#fff" r="5"/><circle cx="65" cy="65" fill="#fff" r="5"/><circle cx="35" cy="65" fill="#fff" r="5"/><circle cx="5" cy="65" fill="#fff" r="5"/><circle cx="365" cy="95" fill="#5864ff" r="5"/><circle cx="335" cy="95" fill="#5864ff" r="5"/><circle cx="305" cy="95" fill="#5864ff" r="5"/><circle cx="275" cy="95" fill="#5864ff" r="5"/><circle cx="245" cy="95" fill="#5864ff" r="5"/><circle cx="215" cy="95" fill="#5864ff" r="5"/><circle cx="185" cy="95" fill="#fff" r="5"/><circle cx="155" cy="95" fill="#fff" r="5"/><circle cx="125" cy="95" fill="#fff" r="5"/><circle cx="95" cy="95" fill="#fff" r="5"/><circle cx="65" cy="95" fill="#fff" r="5"/><circle cx="35" cy="95" fill="#fff" r="5"/><circle cx="5" cy="95" fill="#fff" r="5"/><circle cx="365" cy="125" fill="#5864ff" r="5"/><circle cx="335" cy="125" fill="#5864ff" r="5"/><circle cx="305" cy="125" fill="#5864ff" r="5"/><circle cx="275" cy="125" fill="#5864ff" r="5"/><circle cx="245" cy="125" fill="#5864ff" r="5"/><circle cx="215" cy="125" fill="#5864ff" r="5"/><circle cx="185" cy="125" fill="#5864ff" r="5"/><circle cx="155" cy="125" fill="#fff" r="5"/><circle cx="125" cy="125" fill="#fff" r="5"/><circle cx="95" cy="125" fill="#fff" r="5"/><circle cx="65" cy="125" fill="#fff" r="5"/><circle cx="35" cy="125" fill="#fff" r="5"/><circle cx="5" cy="125" fill="#fff" r="5"/><circle cx="365" cy="155" fill="#5864ff" r="5"/><circle cx="335" cy="155" fill="#5864ff" r="5"/><circle cx="305" cy="155" fill="#5864ff" r="5"/><circle cx="275" cy="155" fill="#5864ff" r="5"/><circle cx="245" cy="155" fill="#5864ff" r="5"/><circle cx="215" cy="155" fill="#5864ff" r="5"/><circle cx="185" cy="155" fill="#5864ff" r="5"/><circle cx="155" cy="155" fill="#5864ff" r="5"/><circle cx="125" cy="155" fill="#fff" r="5"/><circle cx="95" cy="155" fill="#fff" r="5"/><circle cx="65" cy="155" fill="#fff" r="5"/><circle cx="35" cy="155" fill="#fff" r="5"/><circle cx="5" cy="155" fill="#fff" r="5"/></svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -0,0 +1 @@
<svg height="160" viewBox="0 0 370 160" width="370" xmlns="http://www.w3.org/2000/svg"><g fill="#00909e"><circle cx="5" cy="5" r="5"/><circle cx="35" cy="5" r="5"/><circle cx="65" cy="5" r="5"/><circle cx="95" cy="5" r="5"/><circle cx="125" cy="5" r="5"/><circle cx="155" cy="5" r="5"/><circle cx="185" cy="5" r="5"/><circle cx="215" cy="5" r="5"/><circle cx="245" cy="5" r="5"/><circle cx="275" cy="5" r="5"/><circle cx="305" cy="5" r="5"/><circle cx="335" cy="5" r="5"/><circle cx="365" cy="5" r="5"/><circle cx="5" cy="35" r="5"/><circle cx="35" cy="35" r="5"/><circle cx="65" cy="35" r="5"/><circle cx="95" cy="35" r="5"/><circle cx="125" cy="35" r="5"/><circle cx="155" cy="35" r="5"/><circle cx="185" cy="35" r="5"/><circle cx="215" cy="35" r="5"/><circle cx="245" cy="35" r="5"/><circle cx="275" cy="35" r="5"/><circle cx="305" cy="35" r="5"/><circle cx="335" cy="35" r="5"/><circle cx="365" cy="35" r="5"/></g><circle cx="5" cy="65" fill="#5864ff" r="5"/><circle cx="35" cy="65" fill="#5864ff" r="5"/><circle cx="65" cy="65" fill="#5864ff" r="5"/><circle cx="95" cy="65" fill="#5864ff" r="5"/><circle cx="125" cy="65" fill="#5864ff" r="5"/><circle cx="155" cy="65" fill="#5864ff" r="5"/><circle cx="185" cy="65" fill="#fff" r="5"/><circle cx="215" cy="65" fill="#fff" r="5"/><circle cx="245" cy="65" fill="#fff" r="5"/><circle cx="275" cy="65" fill="#fff" r="5"/><circle cx="305" cy="65" fill="#fff" r="5"/><circle cx="335" cy="65" fill="#fff" r="5"/><circle cx="365" cy="65" fill="#fff" r="5"/><circle cx="5" cy="95" fill="#5864ff" r="5"/><circle cx="35" cy="95" fill="#5864ff" r="5"/><circle cx="65" cy="95" fill="#5864ff" r="5"/><circle cx="95" cy="95" fill="#5864ff" r="5"/><circle cx="125" cy="95" fill="#5864ff" r="5"/><circle cx="155" cy="95" fill="#5864ff" r="5"/><circle cx="185" cy="95" fill="#fff" r="5"/><circle cx="215" cy="95" fill="#fff" r="5"/><circle cx="245" cy="95" fill="#fff" r="5"/><circle cx="275" cy="95" fill="#fff" r="5"/><circle cx="305" cy="95" fill="#fff" r="5"/><circle cx="335" cy="95" fill="#fff" r="5"/><circle cx="365" cy="95" fill="#fff" r="5"/><circle cx="5" cy="125" fill="#5864ff" r="5"/><circle cx="35" cy="125" fill="#5864ff" r="5"/><circle cx="65" cy="125" fill="#5864ff" r="5"/><circle cx="95" cy="125" fill="#5864ff" r="5"/><circle cx="125" cy="125" fill="#5864ff" r="5"/><circle cx="155" cy="125" fill="#5864ff" r="5"/><circle cx="185" cy="125" fill="#5864ff" r="5"/><circle cx="215" cy="125" fill="#fff" r="5"/><circle cx="245" cy="125" fill="#fff" r="5"/><circle cx="275" cy="125" fill="#fff" r="5"/><circle cx="305" cy="125" fill="#fff" r="5"/><circle cx="335" cy="125" fill="#fff" r="5"/><circle cx="365" cy="125" fill="#fff" r="5"/><circle cx="5" cy="155" fill="#5864ff" r="5"/><circle cx="35" cy="155" fill="#5864ff" r="5"/><circle cx="65" cy="155" fill="#5864ff" r="5"/><circle cx="95" cy="155" fill="#5864ff" r="5"/><circle cx="125" cy="155" fill="#5864ff" r="5"/><circle cx="155" cy="155" fill="#5864ff" r="5"/><circle cx="185" cy="155" fill="#5864ff" r="5"/><circle cx="215" cy="155" fill="#5864ff" r="5"/><circle cx="245" cy="155" fill="#fff" r="5"/><circle cx="275" cy="155" fill="#fff" r="5"/><circle cx="305" cy="155" fill="#fff" r="5"/><circle cx="335" cy="155" fill="#fff" r="5"/><circle cx="365" cy="155" fill="#fff" r="5"/></svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
demo/assets/img/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 961 B

View File

@ -0,0 +1 @@
<svg height="44.274" viewBox="0 0 44.274 44.274" width="44.274" xmlns="http://www.w3.org/2000/svg"><path d="m44.274 22.137q0 1.026-.092 2.028-.07.793-.2 1.567a22.153 22.153 0 1 1 .291-3.594z" fill="#fff"/><text fill="#5a65ff" font-family="SegoeUI, Segoe UI" font-size="19" transform="translate(5 28)"><tspan x="0" y="0">Saas</tspan></text></svg>

After

Width:  |  Height:  |  Size: 345 B

View File

@ -0,0 +1 @@
<svg height="517" viewBox="0 0 1692 517" width="1692" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m159 5841h1692v517h-1692z"/></clipPath><linearGradient id="b" gradientUnits="objectBoundingBox" x1=".404" x2=".411" y1="-.343" y2=".819"><stop offset="0" stop-color="#737dfc"/><stop offset="1" stop-color="#5864ff"/></linearGradient><g clip-path="url(#a)" transform="translate(-159 -5841)"><path d="m-52.41 1302c62.21-79.011 157.84-232.31 251.61-305.49 347.561-270.678 504.052 31.946 1066.283-204.393 356.452-149.838 405.56 239.187 393.783 508.735z" fill="#5864ff" transform="translate(190 5091)"/><path d="m-113.148 1297.79c-41.4-185.711 96.459-247.977 228.027-344.267 255.548-186.624 370.256-9.856 783.643-172.8s264.57 517.071 264.57 517.071z" fill="#fff" opacity=".05" transform="translate(515.633 5267.644)"/><path d="m1181.684 1297.789c41.4-185.71-96.459-247.977-228.027-344.266-255.548-186.623-370.257-9.856-783.643-172.804s-264.57 517.07-264.57 517.07z" fill="url(#b)" transform="translate(633.633 5267.644)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1 @@
<svg height="796.067" viewBox="0 0 1781.408 796.067" width="1781.408" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="objectBoundingBox" x1=".5" x2=".5" y2="1"><stop offset="0" stop-color="#5864ff"/><stop offset="1" stop-color="#6a74ff"/></linearGradient><path d="m1650.595 755.5c56.3 272.618-131.189 364.024-310.13 505.374-347.561 273.959-503.57 14.469-1065.8 253.673s-359.832-759.047-359.832-759.047z" fill="#5864ff" transform="translate(120.633 -755.5)"/><path d="m-113.148 755.5c-41.4 185.71 96.459 247.977 228.027 344.266 255.548 186.624 370.256 9.856 783.643 172.8s264.57-517.07 264.57-517.07z" fill="url(#a)" transform="translate(286.464 -753.856)"/></svg>

After

Width:  |  Height:  |  Size: 731 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -0,0 +1 @@
<svg height="160" viewBox="0 0 220 160" width="220" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" fill="#fff" r="5"/><circle cx="35" cy="5" fill="#fff" r="5"/><circle cx="65" cy="5" fill="#fff" r="5"/><circle cx="95" cy="5" fill="#40bad5" r="5"/><circle cx="125" cy="5" fill="#40bad5" r="5"/><circle cx="155" cy="5" fill="#40bad5" r="5"/><circle cx="185" cy="5" fill="#40bad5" r="5"/><circle cx="215" cy="5" fill="#40bad5" r="5"/><circle cx="5" cy="35" fill="#fff" r="5"/><circle cx="35" cy="35" fill="#fff" r="5"/><circle cx="65" cy="35" fill="#fff" r="5"/><circle cx="95" cy="35" fill="#40bad5" r="5"/><circle cx="125" cy="35" fill="#40bad5" r="5"/><circle cx="155" cy="35" fill="#40bad5" r="5"/><circle cx="185" cy="35" fill="#40bad5" r="5"/><circle cx="215" cy="35" fill="#40bad5" r="5"/><g fill="#5864ff"><circle cx="5" cy="65" r="5"/><circle cx="35" cy="65" r="5"/><circle cx="65" cy="65" r="5"/><circle cx="95" cy="65" r="5"/><circle cx="125" cy="65" r="5"/><circle cx="155" cy="65" r="5"/><circle cx="185" cy="65" r="5"/><circle cx="215" cy="65" r="5"/><circle cx="5" cy="95" r="5"/><circle cx="35" cy="95" r="5"/><circle cx="65" cy="95" r="5"/><circle cx="95" cy="95" r="5"/><circle cx="125" cy="95" r="5"/><circle cx="155" cy="95" r="5"/><circle cx="185" cy="95" r="5"/><circle cx="215" cy="95" r="5"/><circle cx="5" cy="125" r="5"/><circle cx="35" cy="125" r="5"/><circle cx="65" cy="125" r="5"/><circle cx="95" cy="125" r="5"/><circle cx="125" cy="125" r="5"/><circle cx="155" cy="125" r="5"/><circle cx="185" cy="125" r="5"/><circle cx="215" cy="125" r="5"/><circle cx="5" cy="155" r="5"/><circle cx="35" cy="155" r="5"/><circle cx="65" cy="155" r="5"/><circle cx="95" cy="155" r="5"/><circle cx="125" cy="155" r="5"/><circle cx="155" cy="155" r="5"/><circle cx="185" cy="155" r="5"/><circle cx="215" cy="155" r="5"/></g></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
demo/assets/img/logo/.DS_Store vendored Normal file

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.1 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -0,0 +1 @@
<svg height="256" viewBox="0 0 1170 256" width="1170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="objectBoundingBox" x1=".506" x2=".5" y1="1.061"><stop offset="0" stop-color="#6b75fb"/><stop offset="1" stop-color="#5864ff"/></linearGradient><clipPath id="b"><rect height="256" rx="29" transform="translate(0 .493)" width="1170"/></clipPath><rect fill="#5864ff" height="256" rx="29" width="1170"/><g clip-path="url(#b)" transform="translate(0 -.493)"><path d="m0 181.607 9.75 14.277c9.75 14.277 29.25 42.831 48.75 23.825 19.5-19.363 39-85.394 58.5-99.939 19.5-14.009 39 23.468 58.5 38.013 19.5 14.009 39 5.086 58.5 0 19.5-4.729 39-4.729 58.5-14.277 19.5-9.191 39-28.822 58.5-4.729s39 90.123 58.5 123.763c19.5 33.283 39 33.283 58.5 4.729s39-85.662 58.5-114.216 39-28.554 58.5-38.1c19.5-9.191 39-28.822 58.5-4.729s39 90.124 58.5 123.764c19.5 33.283 39 33.283 58.5 4.729s39-85.662 58.5-104.668c19.5-19.363 39 .268 58.5 28.554 19.5 28.822 39 66.3 58.5 95.121 19.5 28.286 39 47.917 58.5 14.277 19.5-33.283 39-118.945 58.5-128.493 19.5-9.191 39 56.84 58.5 57.108 19.5-.268 39-66.3 48.75-99.939l9.75-33.286v-28.554h-1170z" fill="url(#a)" transform="translate(0 -74.675)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -0,0 +1 @@
<svg height="160" viewBox="0 0 370 160" width="370" xmlns="http://www.w3.org/2000/svg"><g fill="#5864ff"><circle cx="365" cy="5" r="5"/><circle cx="335" cy="5" r="5"/><circle cx="305" cy="5" r="5"/><circle cx="275" cy="5" r="5"/><circle cx="245" cy="5" r="5"/><circle cx="215" cy="5" r="5"/><circle cx="185" cy="5" r="5"/><circle cx="155" cy="5" r="5"/><circle cx="125" cy="5" r="5"/><circle cx="95" cy="5" r="5"/><circle cx="65" cy="5" r="5"/><circle cx="35" cy="5" r="5"/></g><circle cx="5" cy="5" fill="#fff" r="5"/><circle cx="365" cy="35" fill="#5864ff" r="5"/><circle cx="335" cy="35" fill="#5864ff" r="5"/><circle cx="305" cy="35" fill="#5864ff" r="5"/><circle cx="275" cy="35" fill="#5864ff" r="5"/><circle cx="245" cy="35" fill="#5864ff" r="5"/><circle cx="215" cy="35" fill="#fff" r="5"/><circle cx="185" cy="35" fill="#fff" r="5"/><circle cx="155" cy="35" fill="#fff" r="5"/><circle cx="125" cy="35" fill="#fff" r="5"/><circle cx="95" cy="35" fill="#fff" r="5"/><circle cx="65" cy="35" fill="#fff" r="5"/><circle cx="35" cy="35" fill="#fff" r="5"/><circle cx="5" cy="35" fill="#fff" r="5"/><circle cx="365" cy="65" fill="#5864ff" r="5"/><circle cx="335" cy="65" fill="#5864ff" r="5"/><circle cx="305" cy="65" fill="#5864ff" r="5"/><circle cx="275" cy="65" fill="#5864ff" r="5"/><circle cx="245" cy="65" fill="#5864ff" r="5"/><circle cx="215" cy="65" fill="#fff" r="5"/><circle cx="185" cy="65" fill="#fff" r="5"/><circle cx="155" cy="65" fill="#fff" r="5"/><circle cx="125" cy="65" fill="#fff" r="5"/><circle cx="95" cy="65" fill="#fff" r="5"/><circle cx="65" cy="65" fill="#fff" r="5"/><circle cx="35" cy="65" fill="#fff" r="5"/><circle cx="5" cy="65" fill="#fff" r="5"/><circle cx="365" cy="95" fill="#5864ff" r="5"/><circle cx="335" cy="95" fill="#5864ff" r="5"/><circle cx="305" cy="95" fill="#5864ff" r="5"/><circle cx="275" cy="95" fill="#5864ff" r="5"/><circle cx="245" cy="95" fill="#5864ff" r="5"/><circle cx="215" cy="95" fill="#fff" r="5"/><circle cx="185" cy="95" fill="#fff" r="5"/><circle cx="155" cy="95" fill="#fff" r="5"/><circle cx="125" cy="95" fill="#fff" r="5"/><circle cx="95" cy="95" fill="#fff" r="5"/><circle cx="65" cy="95" fill="#fff" r="5"/><circle cx="35" cy="95" fill="#fff" r="5"/><circle cx="5" cy="95" fill="#fff" r="5"/><circle cx="365" cy="125" fill="#5864ff" r="5"/><circle cx="335" cy="125" fill="#5864ff" r="5"/><circle cx="305" cy="125" fill="#5864ff" r="5"/><circle cx="275" cy="125" fill="#5864ff" r="5"/><circle cx="245" cy="125" fill="#5864ff" r="5"/><circle cx="215" cy="125" fill="#fff" r="5"/><circle cx="185" cy="125" fill="#fff" r="5"/><circle cx="155" cy="125" fill="#fff" r="5"/><circle cx="125" cy="125" fill="#fff" r="5"/><circle cx="95" cy="125" fill="#fff" r="5"/><circle cx="65" cy="125" fill="#fff" r="5"/><circle cx="35" cy="125" fill="#fff" r="5"/><circle cx="5" cy="125" fill="#fff" r="5"/><circle cx="365" cy="155" fill="#5864ff" r="5"/><circle cx="335" cy="155" fill="#5864ff" r="5"/><circle cx="305" cy="155" fill="#5864ff" r="5"/><circle cx="275" cy="155" fill="#5864ff" r="5"/><circle cx="245" cy="155" fill="#5864ff" r="5"/><circle cx="215" cy="155" fill="#5864ff" r="5"/><circle cx="185" cy="155" fill="#fff" r="5"/><circle cx="155" cy="155" fill="#fff" r="5"/><circle cx="125" cy="155" fill="#fff" r="5"/><circle cx="95" cy="155" fill="#fff" r="5"/><circle cx="65" cy="155" fill="#fff" r="5"/><circle cx="35" cy="155" fill="#fff" r="5"/><circle cx="5" cy="155" fill="#fff" r="5"/></svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -0,0 +1 @@
<svg height="638.601" viewBox="0 0 494.836 638.601" width="494.836" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m319.3 0c176.345 0-67.066 208.923 88.593 319.3s87.752 319.3-88.593 319.3-319.3-142.955-319.3-319.3 142.956-319.3 319.3-319.3z"/></clipPath><linearGradient id="b" gradientUnits="objectBoundingBox" x1=".5" x2=".5" y1="1"><stop offset="0" stop-color="#dddff9"/><stop offset="1" stop-color="#5864ff"/></linearGradient><path d="m319.3 0c176.345 0-67.066 208.923 88.593 319.3s87.752 319.3-88.593 319.3-319.3-142.955-319.3-319.3 142.956-319.3 319.3-319.3z" fill="#5864ff"/><g clip-path="url(#a)"><path d="m175.536 638.6c-176.345 0 67.064-208.922-88.593-319.3s-87.752-319.3 88.593-319.3 319.3 142.956 319.3 319.3-142.955 319.3-319.3 319.3z" fill="url(#b)" opacity=".3"/></g></svg>

After

Width:  |  Height:  |  Size: 844 B

BIN
demo/assets/js/.DS_Store vendored Normal file

Binary file not shown.

File diff suppressed because one or more lines are too long

97
demo/assets/js/main.js Normal file
View File

@ -0,0 +1,97 @@
(function () {
//===== Prealoder
window.onload = function () {
window.setTimeout(fadeout, 500);
};
function fadeout() {
document.querySelector(".preloader").style.opacity = "0";
document.querySelector(".preloader").style.display = "none";
}
/*=====================================
Sticky
======================================= */
window.onscroll = function () {
const header_navbar = document.querySelector(".navbar-area");
const sticky = header_navbar.offsetTop;
const logo = document.querySelector(".navbar-brand img");
if (window.pageYOffset > sticky) {
header_navbar.classList.add("sticky");
logo.src = "assets/img/logo/logo-2.svg";
} else {
header_navbar.classList.remove("sticky");
logo.src = "assets/img/logo/logo.svg";
}
// show or hide the back-top-top button
const backToTo = document.querySelector(".scroll-top");
if (
document.body.scrollTop > 50 ||
document.documentElement.scrollTop > 50
) {
backToTo.style.display = "flex";
} else {
backToTo.style.display = "none";
}
};
// for menu scroll
const pageLink = document.querySelectorAll(".page-scroll");
pageLink.forEach((elem) => {
elem.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(elem.getAttribute("href")).scrollIntoView({
behavior: "smooth",
offsetTop: 1 - 60,
});
});
});
// section menu active
function onScroll(event) {
const sections = document.querySelectorAll(".page-scroll");
const scrollPos =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
for (let i = 0; i < sections.length; i++) {
const currLink = sections[i];
const val = currLink.getAttribute("href");
const refElement = document.querySelector(val);
const scrollTopMinus = scrollPos + 73;
if (
refElement.offsetTop <= scrollTopMinus &&
refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
) {
document.querySelector(".page-scroll").classList.remove("active");
currLink.classList.add("active");
} else {
currLink.classList.remove("active");
}
}
}
window.document.addEventListener("scroll", onScroll);
//===== close navbar-collapse when a clicked
let navbarToggler = document.querySelector(".navbar-toggler");
const navbarCollapse = document.querySelector(".navbar-collapse");
document.querySelectorAll(".page-scroll").forEach((e) =>
e.addEventListener("click", () => {
navbarToggler.classList.remove("active");
navbarCollapse.classList.remove("show");
})
);
navbarToggler.addEventListener("click", function () {
navbarToggler.classList.toggle("active");
});
// WOW active
new WOW().init();
})();

3
demo/assets/js/wow.min.js vendored Normal file

File diff suppressed because one or more lines are too long

BIN
demo/icon_open.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

1606
demo/index.html Normal file

File diff suppressed because it is too large Load Diff