penyesuaian UI cooming soon

This commit is contained in:
2024-06-13 23:01:28 +07:00
parent 33007acc77
commit 863a493b66
22 changed files with 527 additions and 441 deletions

View File

@@ -0,0 +1,44 @@
.bg-maintenance-image {
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.centered-card {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box-shadow-2 {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.box-shadow-3 {
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
}
.card {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 20px;
max-width: 400px;
width: 100%;
}
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View File

@@ -1,38 +1,33 @@
<div class="app-content content bg-maintenance-image">
<div class="content-wrapper">
<div class="content-body">
<section class="flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-md-4 col-10 box-shadow-2 p-0">
<div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
<div class="card-body">
<span class="card-title text-center">
<img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
width="250" alt="logo">
</span>
</div>
<div class="card-body text-center">
<h3>Coming Soon</h3>
<p>We're sorry for the inconvenience.
<br> Please check back later.</p>
<div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
</div>
<hr>
<!-- <p class="socialIcon card-text text-center pt-2 pb-2">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></a>
</p> -->
</div>
<div class="content-wrapper">
<div class="content-body">
<section class="flexbox-container">
<div class="centered-card">
<div class="card box-shadow-3">
<div class="card-body">
<span class="card-title text-center">
<img
src="assets/images/logo/logo-dark-lg.png"
class="img-fluid mx-auto d-block pt-2"
width="250"
alt="logo"
/>
</span>
</div>
<div class="card-body text-center">
<h3 style="font-weight: 600; color: #000000">Coming Soon</h3>
<p style="color: #000000">
We're working hard to bring you this page. <br />
Please check back later.
</p>
<div class="mt-2">
<i class="la la-cog spinner font-large-2"></i>
</div>
</div>
</section>
</div>
<hr />
</div>
</div>
</section>
</div>
</div>
</div>

View File

@@ -0,0 +1,44 @@
.bg-maintenance-image {
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.centered-card {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box-shadow-2 {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.box-shadow-3 {
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
}
.card {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 20px;
max-width: 400px;
width: 100%;
}
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

View File

@@ -1,38 +1,33 @@
<div class="app-content content bg-maintenance-image">
<div class="content-wrapper">
<div class="content-body">
<section class="flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-md-4 col-10 box-shadow-2 p-0">
<div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
<div class="card-body">
<span class="card-title text-center">
<img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
width="250" alt="logo">
</span>
</div>
<div class="card-body text-center">
<h3>Coming Soon</h3>
<p>We're sorry for the inconvenience.
<br> Please check back later.</p>
<div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
</div>
<hr>
<!-- <p class="socialIcon card-text text-center pt-2 pb-2">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></a>
</p> -->
</div>
<div class="content-wrapper">
<div class="content-body">
<section class="flexbox-container">
<div class="centered-card">
<div class="card box-shadow-3">
<div class="card-body">
<span class="card-title text-center">
<img
src="assets/images/logo/logo-dark-lg.png"
class="img-fluid mx-auto d-block pt-2"
width="250"
alt="logo"
/>
</span>
</div>
<div class="card-body text-center">
<h3 style="font-weight: 600; color: #000000">Coming Soon</h3>
<p style="color: #000000">
We're working hard to bring you this page. <br />
Please check back later.
</p>
<div class="mt-2">
<i class="la la-cog spinner font-large-2"></i>
</div>
</div>
</section>
</div>
<hr />
</div>
</div>
</section>
</div>
</div>
</div>