gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add splash screen

Browse Source
This commit is contained in:
Aidar Shaikhutdin @makeweb.space 2023-06-20 12:37:20 +03:00
parent 8a37644d1c
commit d27091ae67
6 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
index.html
View File

@ -10,10 +10,42 @@
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>AURA</title>
<style>
.splash-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
height: 100%;
max-width: 560px;
padding: 0 32px;
}
.splash-screen img {
width: 100%;
animation-name: loading;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes loading {
from {
transform: scale(1.5);
opacity: 0;
}
to {
transform: scale(1);
opacity: 100%;
}
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root">
<div class="splash-screen">
<img src="/leo.png" alt="Aura - Energy of your Horoscope">
</div>
</div>
<script src="https://js.chargebee.com/v2/chargebee.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>

BIN
public/leo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 301 KiB

4
public/site.webmanifest
View File

@ -1,6 +1,6 @@
{
"name": "",
"short_name": "",
"name": "Aura",
"short_name": "Aura",
"icons": [
{
"src": "/android-chrome-192x192.png",

4
src/components/Modal/close.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.7071 12.7071C12.3166 13.0976 11.6834 13.0976 11.2929 12.7071L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289L11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289C13.0976 1.68342 13.0976 2.31658 12.7071 2.70711L8.41421 7L12.7071 11.2929C13.0976 11.6834 13.0976 12.3166 12.7071 12.7071Z" fill="#858DA5" stroke="#858DA5" stroke-linecap="round" stroke-linejoin="round"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.29289 12.7071C1.68342 13.0976 2.31658 13.0976 2.70711 12.7071L7.70711 7.70711C8.09763 7.31658 8.09763 6.68342 7.70711 6.29289L2.70711 1.29289C2.31658 0.902369 1.68342 0.902369 1.29289 1.29289C0.902369 1.68342 0.902369 2.31658 1.29289 2.70711L5.58579 7L1.29289 11.2929C0.902369 11.6834 0.902369 12.3166 1.29289 12.7071Z" fill="#858DA5" stroke="#858DA5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1021 B

7
src/components/Modal/index.tsx
View File

@ -16,12 +16,7 @@ function Modal({ open, children, onClose }: ModalProps): JSX.Element {
return (
<div className='modal' onClick={handleClose}>
<div className='modal-content'>
<button className='modal-close-btn' onClick={handleClose}>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M12.7071 12.7071C12.3166 13.0976 11.6834 13.0976 11.2929 12.7071L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289L11.2929 1.29289C11.6834 0.902369 12.3166 0.902369 12.7071 1.29289C13.0976 1.68342 13.0976 2.31658 12.7071 2.70711L8.41421 7L12.7071 11.2929C13.0976 11.6834 13.0976 12.3166 12.7071 12.7071Z" fill="#858DA5" stroke="#858DA5" strokeLinecap="round" strokeLinejoin="round"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M1.29289 12.7071C1.68342 13.0976 2.31658 13.0976 2.70711 12.7071L7.70711 7.70711C8.09763 7.31658 8.09763 6.68342 7.70711 6.29289L2.70711 1.29289C2.31658 0.902369 1.68342 0.902369 1.29289 1.29289C0.902369 1.68342 0.902369 2.31658 1.29289 2.70711L5.58579 7L1.29289 11.2929C0.902369 11.6834 0.902369 12.3166 1.29289 12.7071Z" fill="#858DA5" stroke="#858DA5" strokeLinecap="round" strokeLinejoin="round"></path>
</svg>
</button>
<button className='modal-close-btn' onClick={handleClose} />
{children}
</div>
</div>

5
src/components/Modal/styles.css
View File

@ -30,7 +30,6 @@
position: absolute;
justify-content: center;
align-items: center;
background: #eff2fd;
border: none;
border-radius: 20px;
height: 32px;
@ -39,6 +38,10 @@
top: 16px;
width: 32px;
cursor: pointer;
background-color: #eff2fd;
background-image: url(./close.svg);
background-repeat: no-repeat;
background-position: center;
}
.modal .main-btn {