diff --git a/src/app/service-unavailable/service-unavailable.component.css b/src/app/service-unavailable/service-unavailable.component.css index 0e1cb58f25937e6781cd02dcad8a9dc342c40b24..2834642a3bc863ecee6caa8c8eecd95656984225 100644 --- a/src/app/service-unavailable/service-unavailable.component.css +++ b/src/app/service-unavailable/service-unavailable.component.css @@ -33,3 +33,19 @@ right: 0; left: auto; } +.position{ + flex-direction: column; + width: 90%; +} +.size{ + width: 100%; +} +@media (min-width: 700px){ + .position{ + flex-direction: row; + width: 60%; + } + .size{ + width: 50%; + } +} diff --git a/src/app/service-unavailable/service-unavailable.component.html b/src/app/service-unavailable/service-unavailable.component.html index ae8f1cc0a0c84a03c5a491f67cb31bef4517ccef..e491fa18040e8e81faf3a3b618e4abc3ee141e8d 100644 --- a/src/app/service-unavailable/service-unavailable.component.html +++ b/src/app/service-unavailable/service-unavailable.component.html @@ -1,32 +1,41 @@ <div> - <div id="service-denied" class="col-md-offset-4 col-sm-offset-3 col-xs-offset-1 col-md-4 col-sm-6 col-xs-10"> - <div class="border-denied col-xs-12" style="width: 100%; height: 100%;"> - <div class="col-xs-9"><h1 class="text-danger">Ooops!</h1></div> - <div class="col-xs-3"> - <div class="dropdown"> - <a style="display: inline-block" class="dropdown-toggle dropdown-lang" aria-expanded="false" aria-haspopup="true" - data-toggle="dropdown" href="#" role="button"> - <img alt="language" class="lang-circle-icon" src="{{[getPathToCurrent()]}}"/> - </a> - <ul class="dropdown-menu pull-right-drop"> - <li *ngFor="let lang of languages" [ngClass]="{'active': getCurrent() == lang}"> - <a (click)="useLanguage(lang)"> - <img alt="lang flag" class="lang-circle-icon" - src="assets/images/country/{{lang}}_circle.png"/> - <span>{{lang.toUpperCase()}}</span> + <div> + <div id="service-denied" style="display: flex; justify-content: center"> + <div class="position" style=" height: 100%; display: flex; justify-content: center"> + <div class="size"> + <img src="assets/images/error/500.gif" width="60%"> + </div> + <div class="size"> + <div class="col-xs-9"><h1 class="text-danger">Ooops!</h1></div> + <div class="col-xs-3"> + <div class="dropdown"> + <a style="display: inline-block" class="dropdown-toggle dropdown-lang" aria-expanded="false" aria-haspopup="true" + data-toggle="dropdown" href="#" role="button"> + <img alt="language" class="lang-circle-icon" src="{{[getPathToCurrent()]}}"/> </a> - </li> - </ul> + <ul class="dropdown-menu pull-right-drop"> + <li *ngFor="let lang of languages" [ngClass]="{'active': getCurrent() == lang}"> + <a (click)="useLanguage(lang)"> + <img alt="lang flag" class="lang-circle-icon" + src="assets/images/country/{{lang}}_circle.png"/> + <span>{{lang.toUpperCase()}}</span> + </a> + </li> + </ul> + </div> + </div> + <div class="col-xs-12"> + <h2>{{ "SERVICE_UNAVAILABLE.HEADER" | translate }}</h2> + <p> + {{ "SERVICE_UNAVAILABLE.TEXT_FIRST_PART" | translate }} + <br> + {{ "SERVICE_UNAVAILABLE.TEXT_SECOND_PART" | translate }} + </p> + </div> </div> - </div> - <div class="col-xs-12"> - <h2>{{ "SERVICE_UNAVAILABLE.HEADER" | translate }}</h2> - <p> - {{ "SERVICE_UNAVAILABLE.TEXT_FIRST_PART" | translate }} - <br> - {{ "SERVICE_UNAVAILABLE.TEXT_SECOND_PART" | translate }} - </p> + </div> </div> </div> -</div> \ No newline at end of file + +</div> diff --git a/src/app/shared/page-not-found/page-not-found.component.css b/src/app/shared/page-not-found/page-not-found.component.css index 4b95259c1d5ed91b207078afdcffa3a2bd3c9224..81255a0b4ffd0b6f3f6e72de771581796a4648da 100644 --- a/src/app/shared/page-not-found/page-not-found.component.css +++ b/src/app/shared/page-not-found/page-not-found.component.css @@ -1,8 +1,15 @@ .container-fluid { min-height: 100vh; + padding: 25px; background-repeat: no-repeat; background-color: rgb(255, 255, 255); display: flex; justify-content: center; align-items: center; + flex-direction: column; +} +@media (min-width: 700px){ + .container-fluid{ + flex-direction: row; + } } diff --git a/src/app/shared/page-not-found/page-not-found.component.html b/src/app/shared/page-not-found/page-not-found.component.html index 750a137980ea08e1d838a24feabbebf5cd9ef8bc..64b11d2695c7b7e0c9db9c59d82fe8b5b026bc11 100644 --- a/src/app/shared/page-not-found/page-not-found.component.html +++ b/src/app/shared/page-not-found/page-not-found.component.html @@ -1,7 +1,10 @@ <div class="container-fluid"> + <div> + <img src="assets/images/error/404.gif" width="60%"> + </div> <div class="row"> - <h1>Page not found</h1> - <p>The page you requested was not found. Click button below to go back to previous page.</p> + <h1>Oops! Something went wrong.</h1> + <p>Our robot couldn't find this page. Try a different link or head back to the homepage.</p> <button class="btn btn-primary" type="button" (click)="redirect()">Go back</button> </div> </div> diff --git a/src/assets/images/error/404.gif b/src/assets/images/error/404.gif new file mode 100644 index 0000000000000000000000000000000000000000..735645ca42011910dbdbe352acd506c32c78fb4b Binary files /dev/null and b/src/assets/images/error/404.gif differ diff --git a/src/assets/images/error/500.gif b/src/assets/images/error/500.gif new file mode 100644 index 0000000000000000000000000000000000000000..97436222cfeb880ec883389a582ef6349858cb0a Binary files /dev/null and b/src/assets/images/error/500.gif differ