welcome page changes

This commit is contained in:
Jordy van Zeeland 2024-08-20 17:14:56 +02:00
parent e8cdfe9d64
commit ad0482fe0a
5 changed files with 68 additions and 530 deletions

BIN
.DS_Store vendored

Binary file not shown.

BIN
app/.DS_Store vendored

Binary file not shown.

BIN
assets/icon-white.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

View File

@ -5,6 +5,13 @@ body{
h2{
font-weight: 500;
color: #ffffff;
margin-bottom:30px;
}
p{
color: #ffffff;
font-weight: 200;
}
.welcome_wrapper{
@ -12,32 +19,29 @@ h2{
text-align:center;
position: absolute;
z-index:999999;
top: 50%;-ms-transform: translateY(-50%);
top: 40%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.welcome_content{
position:relative;
z-index:999999;
background:#ffffff;
width:30%;
margin:auto;
padding: 50px;
-webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69 .15);
box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
}
.logo{
width:50%;
width:20%;
margin-bottom:30px;
}
.file_location{
border:solid 2px rgb(50,70,98);
width:fit-content;
margin:auto;
border-radius:10px;
padding:5px 20px;
width: fit-content;
margin: auto;
border-radius: 10px;
padding: 10px 30px;
background: #ffffff;
}
.background {
@ -46,479 +50,46 @@ h2{
height: 100vh;
top: 0;
left: 0;
background: #22262a;
background: rgb(50,70,98);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes move {
100% {
transform: translate3d(0, 0, 1px) rotate(360deg);
}
}
.waves {
position:relative;
width: 100%;
height:15vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:100px;
max-height:150px;
}
.background .bulb {
width: 1vmin;
height: 1vmin;
border-radius: 1vmin;
backface-visibility: hidden;
position: absolute;
animation: move;
animation-duration: 35;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.background .bulb:nth-child(0) {
color: #3a4045;
top: 14%;
left: 10%;
animation-duration: 113s;
animation-delay: -68s;
transform-origin: 12vw 3vh;
box-shadow: -2vmin 0 1.2185214473465844vmin currentColor;
}
.background .bulb:nth-child(1) {
color: #3a4045;
top: 20%;
left: 86%;
animation-duration: 11s;
animation-delay: -99s;
transform-origin: -11vw 10vh;
box-shadow: 2vmin 0 0.33889471187563824vmin currentColor;
}
.background .bulb:nth-child(2) {
color: #b29a7e;
top: 79%;
left: 16%;
animation-duration: 82s;
animation-delay: -99s;
transform-origin: -11vw -12vh;
box-shadow: -2vmin 0 1.2239997998609442vmin currentColor;
}
.background .bulb:nth-child(3) {
color: #3a4045;
top: 43%;
left: 63%;
animation-duration: 40s;
animation-delay: -148s;
transform-origin: 15vw 0vh;
box-shadow: 2vmin 0 0.46435088070839003vmin currentColor;
}
.background .bulb:nth-child(4) {
color: #b29a7e;
top: 64%;
left: 47%;
animation-duration: 59s;
.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
transform-origin: 12vw 3vh;
box-shadow: 2vmin 0 0.8592983101917031vmin currentColor;
}
.background .bulb:nth-child(5) {
color: #b29a7e;
top: 87%;
left: 4%;
animation-duration: 56s;
animation-delay: -140s;
transform-origin: -15vw -6vh;
box-shadow: 2vmin 0 0.27566925688578525vmin currentColor;
}
.background .bulb:nth-child(6) {
color: #3a4045;
top: 43%;
left: 62%;
animation-duration: 49s;
animation-delay: -54s;
transform-origin: 8vw 10vh;
box-shadow: -2vmin 0 0.7414312882632275vmin currentColor;
}
.background .bulb:nth-child(7) {
color: #b29a7e;
top: 71%;
left: 82%;
animation-duration: 33s;
animation-delay: -126s;
transform-origin: -6vw 8vh;
box-shadow: 2vmin 0 0.7928593683792595vmin currentColor;
}
.background .bulb:nth-child(8) {
color: #b29a7e;
top: 46%;
left: 90%;
animation-duration: 99s;
animation-delay: -4s;
transform-origin: -12vw -7vh;
box-shadow: 2vmin 0 0.9259060365831153vmin currentColor;
}
.background .bulb:nth-child(9) {
color: #b29a7e;
top: 35%;
left: 22%;
animation-duration: 12s;
animation-delay: -70s;
transform-origin: -23vw -23vh;
box-shadow: 2vmin 0 0.9150746636339171vmin currentColor;
}
.background .bulb:nth-child(10) {
color: #3a4045;
top: 24%;
left: 13%;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
animation-delay: -137s;
transform-origin: -10vw -1vh;
box-shadow: 2vmin 0 0.8637967865307996vmin currentColor;
}
.background .bulb:nth-child(11) {
color: #3a4045;
top: 74%;
left: 65%;
animation-duration: 33s;
animation-delay: -102s;
transform-origin: -24vw -5vh;
box-shadow: -2vmin 0 0.36572700614419773vmin currentColor;
}
.background .bulb:nth-child(12) {
color: #b29a7e;
top: 26%;
left: 78%;
animation-duration: 108s;
animation-delay: -56s;
transform-origin: -1vw -17vh;
box-shadow: -2vmin 0 0.9316183318464453vmin currentColor;
}
.background .bulb:nth-child(13) {
color: #3a4045;
top: 6%;
left: 29%;
animation-duration: 129s;
animation-delay: -122s;
transform-origin: 6vw -5vh;
box-shadow: -2vmin 0 0.25732731794992936vmin currentColor;
}
.background .bulb:nth-child(14) {
color: #3a4045;
top: 66%;
left: 92%;
animation-duration: 147s;
animation-delay: -146s;
transform-origin: 9vw -17vh;
box-shadow: -2vmin 0 1.2295145334240223vmin currentColor;
}
.background .bulb:nth-child(15) {
color: #3a4045;
top: 13%;
left: 84%;
animation-duration: 75s;
animation-delay: -70s;
transform-origin: -22vw -19vh;
box-shadow: 2vmin 0 0.4956387491052643vmin currentColor;
}
.background .bulb:nth-child(16) {
color: #3a4045;
top: 32%;
left: 46%;
animation-duration: 35s;
animation-delay: -1s;
transform-origin: 17vw -3vh;
box-shadow: -2vmin 0 0.28356822695166306vmin currentColor;
}
.background .bulb:nth-child(17) {
color: #b29a7e;
top: 63%;
left: 98%;
animation-duration: 39s;
animation-delay: -15s;
transform-origin: 0vw 14vh;
box-shadow: 2vmin 0 1.2460705341524947vmin currentColor;
}
.background .bulb:nth-child(18) {
color: #b29a7e;
top: 71%;
left: 59%;
animation-duration: 29s;
animation-delay: -45s;
transform-origin: -9vw 0vh;
box-shadow: 2vmin 0 0.4571535709323129vmin currentColor;
}
.background .bulb:nth-child(19) {
color: #3a4045;
top: 72%;
left: 35%;
animation-duration: 9s;
animation-delay: -21s;
transform-origin: -1vw -19vh;
box-shadow: -2vmin 0 0.8832436543597086vmin currentColor;
}
.background .bulb:nth-child(20) {
color: #b29a7e;
top: 87%;
left: 96%;
animation-duration: 90s;
animation-delay: -150s;
transform-origin: 12vw -6vh;
box-shadow: 2vmin 0 1.2258895715436955vmin currentColor;
}
.background .bulb:nth-child(21) {
color: #b29a7e;
top: 74%;
left: 55%;
animation-duration: 23s;
animation-delay: -58s;
transform-origin: -4vw 24vh;
box-shadow: -2vmin 0 0.400566542841684vmin currentColor;
}
.background .bulb:nth-child(22) {
color: #b29a7e;
top: 78%;
left: 35%;
animation-duration: 72s;
animation-delay: -139s;
transform-origin: -8vw -17vh;
box-shadow: 2vmin 0 0.7636831993144702vmin currentColor;
}
.background .bulb:nth-child(23) {
color: #b29a7e;
top: 28%;
left: 43%;
animation-duration: 75s;
animation-delay: -114s;
transform-origin: -18vw 7vh;
box-shadow: 2vmin 0 1.169158031413998vmin currentColor;
}
.background .bulb:nth-child(24) {
color: #b29a7e;
top: 19%;
left: 68%;
animation-duration: 122s;
animation-delay: -139s;
transform-origin: -20vw -14vh;
box-shadow: 2vmin 0 1.0967062677011954vmin currentColor;
}
.background .bulb:nth-child(25) {
color: #3a4045;
top: 97%;
left: 18%;
animation-duration: 74s;
animation-delay: -24s;
transform-origin: 11vw -3vh;
box-shadow: -2vmin 0 0.7059872973785506vmin currentColor;
}
.background .bulb:nth-child(26) {
color: #b29a7e;
top: 47%;
left: 37%;
animation-duration: 19s;
animation-delay: -13s;
transform-origin: 0vw 23vh;
box-shadow: -2vmin 0 0.7780720039121778vmin currentColor;
}
.background .bulb:nth-child(27) {
color: #b29a7e;
top: 86%;
left: 68%;
animation-duration: 149s;
animation-delay: -113s;
transform-origin: 15vw 18vh;
box-shadow: 2vmin 0 0.7747344366371187vmin currentColor;
}
.background .bulb:nth-child(28) {
color: #b29a7e;
top: 47%;
left: 1%;
animation-duration: 149s;
animation-delay: -137s;
transform-origin: -13vw -22vh;
box-shadow: 2vmin 0 0.6727314438445602vmin currentColor;
}
.background .bulb:nth-child(29) {
color: #3a4045;
top: 87%;
left: 73%;
animation-duration: 122s;
animation-delay: -78s;
transform-origin: -18vw -2vh;
box-shadow: -2vmin 0 1.119462335644481vmin currentColor;
}
.background .bulb:nth-child(30) {
color: #3a4045;
top: 83%;
left: 16%;
animation-duration: 136s;
animation-delay: -15s;
transform-origin: -22vw 22vh;
box-shadow: -2vmin 0 0.28470550999829225vmin currentColor;
}
.background .bulb:nth-child(31) {
color: #3a4045;
top: 69%;
left: 58%;
animation-duration: 143s;
animation-delay: -21s;
transform-origin: -21vw 21vh;
box-shadow: 2vmin 0 0.8724223854842288vmin currentColor;
}
.background .bulb:nth-child(32) {
color: #b29a7e;
top: 88%;
left: 79%;
animation-duration: 18s;
animation-delay: -116s;
transform-origin: 3vw -16vh;
box-shadow: -2vmin 0 1.0979832984657463vmin currentColor;
}
.background .bulb:nth-child(33) {
color: #3a4045;
top: 60%;
left: 85%;
animation-duration: 106s;
animation-delay: -105s;
transform-origin: 25vw -3vh;
box-shadow: 2vmin 0 0.25885159692359316vmin currentColor;
}
.background .bulb:nth-child(34) {
color: #3a4045;
top: 63%;
left: 95%;
animation-duration: 148s;
animation-delay: -28s;
transform-origin: -23vw -19vh;
box-shadow: -2vmin 0 0.963743047959482vmin currentColor;
}
.background .bulb:nth-child(35) {
color: #b29a7e;
top: 27%;
left: 99%;
animation-duration: 85s;
animation-delay: -44s;
transform-origin: 3vw 13vh;
box-shadow: -2vmin 0 0.5376273957422693vmin currentColor;
}
.background .bulb:nth-child(36) {
color: #b29a7e;
top: 93%;
left: 2%;
animation-duration: 84s;
animation-delay: -1s;
transform-origin: -12vw -18vh;
box-shadow: -2vmin 0 0.5754463731020305vmin currentColor;
}
.background .bulb:nth-child(37) {
color: #3a4045;
top: 86%;
left: 67%;
animation-duration: 91s;
animation-delay: -92s;
transform-origin: 18vw -4vh;
box-shadow: 2vmin 0 0.7136747576362781vmin currentColor;
}
.background .bulb:nth-child(38) {
color: #b29a7e;
top: 68%;
left: 82%;
animation-duration: 18s;
animation-delay: -127s;
transform-origin: 23vw -22vh;
box-shadow: 2vmin 0 0.3597961535396039vmin currentColor;
}
.background .bulb:nth-child(39) {
color: #3a4045;
top: 34%;
left: 25%;
animation-duration: 143s;
animation-delay: -91s;
transform-origin: -7vw -6vh;
box-shadow: -2vmin 0 0.9165250798122vmin currentColor;
}
.background .bulb:nth-child(40) {
color: #b29a7e;
top: 31%;
left: 42%;
animation-duration: 65s;
animation-delay: -123s;
transform-origin: 21vw 5vh;
box-shadow: -2vmin 0 0.8817838277296712vmin currentColor;
}
.background .bulb:nth-child(41) {
color: #3a4045;
top: 68%;
left: 88%;
animation-duration: 133s;
animation-delay: -142s;
transform-origin: 3vw 24vh;
box-shadow: 2vmin 0 0.25293212841377577vmin currentColor;
}
.background .bulb:nth-child(42) {
color: #b29a7e;
top: 76%;
left: 49%;
animation-duration: 23s;
animation-delay: -43s;
transform-origin: 3vw -16vh;
box-shadow: 2vmin 0 0.44318325214928533vmin currentColor;
}
.background .bulb:nth-child(43) {
color: #3a4045;
top: 2%;
left: 88%;
animation-duration: 80s;
animation-delay: -37s;
transform-origin: -13vw 0vh;
box-shadow: -2vmin 0 0.3441703765390076vmin currentColor;
}
.background .bulb:nth-child(44) {
color: #b29a7e;
top: 41%;
left: 18%;
animation-duration: 90s;
animation-delay: -29s;
transform-origin: -9vw -4vh;
box-shadow: 2vmin 0 0.7573053417869562vmin currentColor;
}
.background .bulb:nth-child(45) {
color: #b29a7e;
top: 72%;
left: 1%;
animation-duration: 108s;
animation-delay: -42s;
transform-origin: 12vw 25vh;
box-shadow: -2vmin 0 0.3952701555936149vmin currentColor;
}
.background .bulb:nth-child(46) {
color: #3a4045;
top: 64%;
left: 63%;
animation-duration: 73s;
animation-delay: -80s;
transform-origin: 0vw -3vh;
box-shadow: -2vmin 0 0.45230223345327136vmin currentColor;
}
.background .bulb:nth-child(47) {
color: #3a4045;
top: 29%;
left: 40%;
animation-duration: 6s;
animation-delay: -81s;
transform-origin: -8vw 16vh;
box-shadow: 2vmin 0 0.5546780568744116vmin currentColor;
}
.background .bulb:nth-child(48) {
color: #b29a7e;
top: 84%;
left: 21%;
animation-duration: 144s;
animation-delay: -70s;
transform-origin: 13vw -7vh;
box-shadow: 2vmin 0 0.7006685231548027vmin currentColor;
}
.background .bulb:nth-child(49) {
color: #3a4045;
top: 65%;
left: 97%;
animation-duration: 56s;
animation-delay: -88s;
transform-origin: 3vw 22vh;
box-shadow: 2vmin 0 0.6520508546711612vmin currentColor;
}
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}

View File

@ -1,65 +1,32 @@
<?php include('includes/header.php'); ?>
<div class="background">
<!-- <div class="toplogo">
<img src="../assets/logo.png" alt="logo"/>
</div> -->
<div class="welcome_wrapper">
<div class="welcome_content">
<img src="../assets/logo.png" class="logo" alt="logo"/>
<h2>Welcome to Sealandia</h2>
<img src="../assets/icon-white.png" class="logo" alt="logo"/>
<h2>Welcome to the Sealandia framework</h2>
<p>Your application is ready to go!</p>
<div class="file_location"><?php echo $_SERVER['DOCUMENT_ROOT'] ?></div>
</div>
</div>
</div>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<span class="bulb"></span>
<div style="position: absolute;bottom:0;width:100%;">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
<?php include('includes/footer.php'); ?>