src/main/webapp/app/home/home.component.html

@@ -4,8 +4,8 @@
     </div>
     <div class="col-md-9">
 
-        <h1 class="display-1" jhiTranslate="home.title">Welcome to Elliott!</h1>
-        <p class="lead" jhiTranslate="home.subtitle">This is your homepage</p>
+        <h1 class="display-1" jhiTranslate="home.title">Welcome to Faeboo!</h1>
+        <h2 class="lead" jhiTranslate="home.subtitle">This is your homepage</h2>
 
         <div [ngSwitch]="isAuthenticated()">
             <div class="alert alert-success" *ngSwitchCase="true">
@@ -13,9 +13,11 @@
                     translateValues="{username: '{{account.login}}'}"> You are logged in as user "{{account.login}}". </span>
             </div>
 
+            <br>
             <div class="alert alert-warning" *ngSwitchCase="false">
-                <span jhiTranslate="global.messages.info.authenticated.prefix">If you want to </span>
-                <a class="alert-link" (click)="login()" jhiTranslate="global.messages.info.authenticated.link">sign in</a><span jhiTranslate="global.messages.info.authenticated.suffix">, you can try the default accounts:<br/>- Administrator (login="admin" and password="admin") <br/>- User (login="user" and password="user").</span>
+
+                <span>You can sign in by clicking</span>
+                <a class="alert-link" (click)="login()" >sign in</a>
             </div>
             <div class="alert alert-warning" *ngSwitchCase="false">
                 <span jhiTranslate="global.messages.info.register.noaccount">You don't have an account yet?</span>&nbsp;
@@ -23,13 +25,10 @@
             </div>
         </div>
 
-        <p jhiTranslate="home.question">
-            If you have any question on JHipster:
-        </p>
+
 
 
         <p>
-            <span jhiTranslate="home.like">If you like JHipster, don't forget to give us a star on</span> <a href="https://github.com/jhipster/generator-jhipster" target="_blank" rel="noopener" jhiTranslate="home.github">GitHub</a>!
         </p>
     </div>
 </div>

src/main/webapp/app/home/home.scss

@@ -6,7 +6,7 @@ Main page styles
     display: inline-block;
     width: 347px;
     height: 497px;
-    background: url('../../content/images/faceofbooks1.jpg') no-repeat center top;
+    background: url('../../content/images/faceofbooks1.png') no-repeat center top;
     background-size: contain;
 }
 
@@ -17,7 +17,7 @@ Main page styles
     only screen and (min-resolution: 192dpi),
     only screen and (min-resolution: 2dppx) {
     .hipster {
-        background: url('../../content/images/faceofbooks1.jpg') no-repeat center top;
+        background: url('../../content/images/faceofbooks1.png') no-repeat center top;
         background-size: contain;
     }
 }

src/main/webapp/app/layouts/footer/footer.component.html

@@ -1,3 +1 @@
-<div class="footer">
-    <p jhiTranslate="footer">This is your footer</p>
-</div>
+

src/main/webapp/app/layouts/main/main.component.html

@@ -1,4 +1,3 @@
-<jhi-page-ribbon></jhi-page-ribbon>
 <div>
     <router-outlet name="navbar"></router-outlet>
 </div>

src/main/webapp/app/layouts/navbar/navbar.component.html

@@ -5,8 +5,7 @@
         </a>
         <a class="navbar-brand logo float-left" routerLink="/" (click)="collapseNavbar()">
             <span class="logo-img"></span>
-            <span jhiTranslate="global.title" class="navbar-title">FaeBoo</span> <span class="navbar-version">{{version}}</span>
-        </a>
+            <span jhiTranslate="global.title" class="navbar-title">FaeBoo</span>
     </div>
     <div class="navbar-collapse collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed" [ngSwitch]="isAuthenticated()">
         <ul class="navbar-nav ml-auto">

src/main/webapp/content/css/loading.css

@@ -1,155 +1,235 @@
-@keyframes lds-pacman-1 {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    50% {
-        -webkit-transform: rotate(-45deg);
-        transform: rotate(-45deg);
-    }
-    100% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
+/*@keyframes lds-pacman-1 {*/
+/*0% {*/
+/*-webkit-transform: rotate(0deg);*/
+/*transform: rotate(0deg);*/
+/*}*/
+/*50% {*/
+/*-webkit-transform: rotate(-45deg);*/
+/*transform: rotate(-45deg);*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: rotate(0deg);*/
+/*transform: rotate(0deg);*/
+/*}*/
+/*}*/
+/*@-webkit-keyframes lds-pacman-1 {*/
+/*0% {*/
+/*-webkit-transform: rotate(0deg);*/
+/*transform: rotate(0deg);*/
+/*}*/
+/*50% {*/
+/*-webkit-transform: rotate(-45deg);*/
+/*transform: rotate(-45deg);*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: rotate(0deg);*/
+/*transform: rotate(0deg);*/
+/*}*/
+/*}*/
+/*@keyframes lds-pacman-2 {*/
+/*0% {*/
+/*-webkit-transform: rotate(180deg);*/
+/*transform: rotate(180deg);*/
+/*}*/
+/*50% {*/
+/*-webkit-transform: rotate(225deg);*/
+/*transform: rotate(225deg);*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: rotate(180deg);*/
+/*transform: rotate(180deg);*/
+/*}*/
+/*}*/
+/*@-webkit-keyframes lds-pacman-2 {*/
+/*0% {*/
+/*-webkit-transform: rotate(180deg);*/
+/*transform: rotate(180deg);*/
+/*}*/
+/*50% {*/
+/*-webkit-transform: rotate(225deg);*/
+/*transform: rotate(225deg);*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: rotate(180deg);*/
+/*transform: rotate(180deg);*/
+/*}*/
+/*}*/
+/*@keyframes lds-pacman-3 {*/
+/*0% {*/
+/*-webkit-transform: translate(190px, 0);*/
+/*transform: translate(190px, 0);*/
+/*opacity: 0;*/
+/*}*/
+/*20% {*/
+/*opacity: 1;*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: translate(70px, 0);*/
+/*transform: translate(70px, 0);*/
+/*opacity: 1;*/
+/*}*/
+/*}*/
+/*@-webkit-keyframes lds-pacman-3 {*/
+/*0% {*/
+/*-webkit-transform: translate(190px, 0);*/
+/*transform: translate(190px, 0);*/
+/*opacity: 0;*/
+/*}*/
+/*20% {*/
+/*opacity: 1;*/
+/*}*/
+/*100% {*/
+/*-webkit-transform: translate(70px, 0);*/
+/*transform: translate(70px, 0);*/
+/*opacity: 1;*/
+/*}*/
+/*}*/
+
+/*.app-loading {*/
+/*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
+/*position: relative;*/
+/*display: flex;*/
+/*flex-direction: column;*/
+/*align-items: center;*/
+/*justify-content: center;*/
+/*top: 10em;*/
+/*}*/
+/*.app-loading p {*/
+/*display: block;*/
+/*font-size: 1.17em;*/
+/*margin-inline-start: 0px;*/
+/*margin-inline-end: 0px;*/
+/*font-weight: normal;*/
+/*}*/
+
+/*.app-loading .lds-pacman {*/
+/*position: relative;*/
+/*margin: auto;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(2) div {*/
+/*position: absolute;*/
+/*top: 40px;*/
+/*left: 40px;*/
+/*width: 120px;*/
+/*height: 60px;*/
+/*border-radius: 120px 120px 0 0;*/
+/*background: #bbcedd;*/
+/*-webkit-animation: lds-pacman-1 1s linear infinite;*/
+/*animation: lds-pacman-1 1s linear infinite;*/
+/*-webkit-transform-origin: 60px 60px;*/
+/*transform-origin: 60px 60px;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(2) div:nth-child(2) {*/
+/*-webkit-animation: lds-pacman-2 1s linear infinite;*/
+/*animation: lds-pacman-2 1s linear infinite;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(1) div {*/
+/*position: absolute;*/
+/*top: 92px;*/
+/*left: -8px;*/
+/*width: 24px;*/
+/*height: 24px;*/
+/*border-radius: 50%;*/
+/*background-image: url('../images/hipster192.png');*/
+/*background-size: contain;*/
+/*-webkit-animation: lds-pacman-3 1s linear infinite;*/
+/*animation: lds-pacman-3 1.5s linear infinite;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(1) div:nth-child(1) {*/
+/*-webkit-animation-delay: -0.67s;*/
+/*animation-delay: -1s;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(1) div:nth-child(2) {*/
+/*-webkit-animation-delay: -0.33s;*/
+/*animation-delay: -0.5s;*/
+/*}*/
+/*.app-loading .lds-pacman > div:nth-child(1) div:nth-child(3) {*/
+/*-webkit-animation-delay: 0s;*/
+/*animation-delay: 0s;*/
+/*}*/
+/*.app-loading .lds-pacman {*/
+/*width: 200px !important;*/
+/*height: 200px !important;*/
+/*-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);*/
+/*transform: translate(-100px, -100px) scale(1) translate(100px, 100px);*/
+/*}*/
+.sk-cube-grid {
+    position: absolute;
+    top: calc(100vh - 50% - 40px / 2);
+    left: calc(100vw - 50% - 40px / 2);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    margin: auto;
 }
-@-webkit-keyframes lds-pacman-1 {
-    0% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    50% {
-        -webkit-transform: rotate(-45deg);
-        transform: rotate(-45deg);
-    }
-    100% {
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
+
+.sk-cube-grid .sk-cube {
+    width: 33%;
+    height: 33%;
+    background-color: #333;
+    float: left;
+    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+}
+.sk-cube-grid .sk-cube1 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+.sk-cube-grid .sk-cube2 {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube3 {
+    -webkit-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+}
+.sk-cube-grid .sk-cube4 {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
+}
+.sk-cube-grid .sk-cube5 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+.sk-cube-grid .sk-cube6 {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube7 {
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
 }
-@keyframes lds-pacman-2 {
-    0% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
-    50% {
-        -webkit-transform: rotate(225deg);
-        transform: rotate(225deg);
-    }
-    100% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
+.sk-cube-grid .sk-cube8 {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
 }
-@-webkit-keyframes lds-pacman-2 {
-    0% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
-    50% {
-        -webkit-transform: rotate(225deg);
-        transform: rotate(225deg);
-    }
-    100% {
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
+.sk-cube-grid .sk-cube9 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
 }
-@keyframes lds-pacman-3 {
-    0% {
-        -webkit-transform: translate(190px, 0);
-        transform: translate(190px, 0);
-        opacity: 0;
-    }
-    20% {
-        opacity: 1;
-    }
+
+@-webkit-keyframes sk-cubeGridScaleDelay {
+    0%,
+    70%,
     100% {
-        -webkit-transform: translate(70px, 0);
-        transform: translate(70px, 0);
-        opacity: 1;
-    }
-}
-@-webkit-keyframes lds-pacman-3 {
-    0% {
-        -webkit-transform: translate(190px, 0);
-        transform: translate(190px, 0);
-        opacity: 0;
+        -webkit-transform: scale3D(1, 1, 1);
+        transform: scale3D(1, 1, 1);
     }
-    20% {
-        opacity: 1;
-    }
-    100% {
-        -webkit-transform: translate(70px, 0);
-        transform: translate(70px, 0);
-        opacity: 1;
+    35% {
+        -webkit-transform: scale3D(0, 0, 1);
+        transform: scale3D(0, 0, 1);
     }
 }
 
-.app-loading {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    top: 10em;
-}
-.app-loading p {
-    display: block;
-    font-size: 1.17em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    font-weight: normal;
-}
-
-.app-loading .lds-pacman {
-    position: relative;
-    margin: auto;
-}
-.app-loading .lds-pacman > div:nth-child(2) div {
-    position: absolute;
-    top: 40px;
-    left: 40px;
-    width: 120px;
-    height: 60px;
-    border-radius: 120px 120px 0 0;
-    background: #bbcedd;
-    -webkit-animation: lds-pacman-1 1s linear infinite;
-    animation: lds-pacman-1 1s linear infinite;
-    -webkit-transform-origin: 60px 60px;
-    transform-origin: 60px 60px;
-}
-.app-loading .lds-pacman > div:nth-child(2) div:nth-child(2) {
-    -webkit-animation: lds-pacman-2 1s linear infinite;
-    animation: lds-pacman-2 1s linear infinite;
-}
-.app-loading .lds-pacman > div:nth-child(1) div {
-    position: absolute;
-    top: 92px;
-    left: -8px;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    background-image: url('../images/hipster192.png');
-    background-size: contain;
-    -webkit-animation: lds-pacman-3 1s linear infinite;
-    animation: lds-pacman-3 1.5s linear infinite;
-}
-.app-loading .lds-pacman > div:nth-child(1) div:nth-child(1) {
-    -webkit-animation-delay: -0.67s;
-    animation-delay: -1s;
-}
-.app-loading .lds-pacman > div:nth-child(1) div:nth-child(2) {
-    -webkit-animation-delay: -0.33s;
-    animation-delay: -0.5s;
-}
-.app-loading .lds-pacman > div:nth-child(1) div:nth-child(3) {
-    -webkit-animation-delay: 0s;
-    animation-delay: 0s;
-}
-.app-loading .lds-pacman {
-    width: 200px !important;
-    height: 200px !important;
-    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
-    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
+@keyframes sk-cubeGridScaleDelay {
+    0%,
+    70%,
+    100% {
+        -webkit-transform: scale3D(1, 1, 1);
+        transform: scale3D(1, 1, 1);
+    }
+    35% {
+        -webkit-transform: scale3D(0, 0, 1);
+        transform: scale3D(0, 0, 1);
+    }
 }

src/main/webapp/index.html

@@ -21,9 +21,16 @@
     <jhi-main>
         <div class="app-loading">
             <div class="lds-css ng-scope">
-                <div class="lds-pacman">
-                    <div><div></div><div></div><div></div></div>
-                    <div><div></div><div></div><div></div></div>
+                <div class="sk-cube-grid">
+                    <div class="sk-cube sk-cube1"></div>
+                    <div class="sk-cube sk-cube2"></div>
+                    <div class="sk-cube sk-cube3"></div>
+                    <div class="sk-cube sk-cube4"></div>
+                    <div class="sk-cube sk-cube5"></div>
+                    <div class="sk-cube sk-cube6"></div>
+                    <div class="sk-cube sk-cube7"></div>
+                    <div class="sk-cube sk-cube8"></div>
+                    <div class="sk-cube sk-cube9"></div>
                 </div>
             </div>
         </div>