styled message

This commit is contained in:
Alfredo Oliviero 2024-11-26 12:08:09 +01:00
parent 90c228d8c3
commit 94dc0aa92e
1 changed files with 319 additions and 151 deletions

View File

@ -1,5 +1,6 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html lang="en"> <html lang="en">
<head> <head>
<title>D4Science Maintenance</title> <title>D4Science Maintenance</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -9,159 +10,326 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700%7CPoppins:400,500" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700%7CPoppins:400,500" rel="stylesheet">
<!-- <link href="./extra/css/styles.css" rel="stylesheet">
<link href="./extra/css/responsive.css" rel="stylesheet"> -->
<style> <style>
html {
font-size: 100%;
height: 100%;
width: 100%;
overflow-x: hidden;
margin: 0px;
padding: 0px;
touch-action: manipulation;
}
/* body {
==================================================== font-size: 16px;
font-family: 'Open Sans', sans-serif;
width: 100%;
height: 100%;
margin: 0;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-wrap: break-word;
overflow-x: hidden;
color: #333;
background-color: #f4f4f4;
}
* [Master Stylesheet] h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
span,
li,
img,
input,
button {
margin: 0;
padding: 0;
}
Theme Name : h1,
Version : h2,
Author : h3,
Author URI : h4,
h5,
h6 {
line-height: 1.5;
font-weight: inherit;
}
==================================================== h1,
h2,
h3 {
font-family: 'Poppins', sans-serif;
}
TOC p {
line-height: 1.6;
font-size: 1.05em;
font-weight: 400;
color: #555;
margin-bottom: 1em;
}
1. PRIMARY STYLES h1 {
2. COMMONS FOR PAGE DESIGN font-size: 3.5em;
JQUERY LIGHT BOX line-height: 1;
3. MAIN SECTION color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
==================================================== h2 {
font-size: 3em;
line-height: 1.1;
}
/* --------------------------------- h3 {
1. PRIMARY STYLES font-size: 2.5em;
--------------------------------- */ }
html{ font-size: 100%; height: 100%; width: 100%; overflow-x: hidden; margin: 0px; padding: 0px; touch-action: manipulation; } h4 {
font-size: 1.5em;
}
h5 {
font-size: 1.2em;
}
body{ font-size: 16px; font-family: 'Open Sans', sans-serif; width: 100%; height: 100%; margin: 0; font-weight: 400; h6 {
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; overflow-x: hidden; font-size: .9em;
color: #333; } letter-spacing: 1px;
}
h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img, inpot, button{ margin: 0; padding: 0; } a,
button {
display: inline-block;
text-decoration: none;
color: inherit;
transition: all .3s;
line-height: 1;
}
h1,h2,h3,h4,h5,h6{ line-height: 1.5; font-weight: inherit; } a:focus,
a:active,
a:hover,
button:focus,
button:active,
button:hover,
a b.light-color:hover {
text-decoration: none;
color: #E45F74;
}
h1,h2,h3{ font-family: 'Poppins', sans-serif; } b {
font-weight: 500;
}
p{ line-height: 1.6; font-size: 1.05em; font-weight: 400; color: #555; } img {
width: 100%;
}
h1{ font-size: 3.5em; line-height: 1; } li {
h2{ font-size: 3em; line-height: 1.1; } /* list-style: none; */
h3{ font-size: 2.5em; } /* display: inline-block; */
h4{ font-size: 1.5em; } }
h5{ font-size: 1.2em; }
h6{ font-size: .9em; letter-spacing: 1px; }
a, button{ display: inline-block; text-decoration: none; color: inherit; transition: all .3s; line-height: 1; } span {
display: inline-block;
}
a:focus, a:active, a:hover, button {
button:focus, button:active, button:hover, outline: 0;
a b.light-color:hover{ text-decoration: none; color: #E45F74; } border: 0;
background: none;
cursor: pointer;
}
b{ font-weight: 500; } b.light-color {
color: #444;
}
img{ width: 100%; } .icon {
font-size: 1.1em;
display: inline-block;
line-height: inherit;
}
li{ list-style: none; display: inline-block; } [class^="icon-"]:before,
[class*=" icon-"]:before {
line-height: inherit;
}
span{ display: inline-block; } *,
*::before,
button{ outline: 0; border: 0; background: none; cursor: pointer; } *::after {
b.light-color{ color: #444; }
.icon{ font-size: 1.1em; display: inline-block; line-height: inherit; }
[class^="icon-"]:before, [class*=" icon-"]:before{ line-height: inherit; }
*, *::before, *::after {
-webkit-box-sizing: inherit; -webkit-box-sizing: inherit;
box-sizing: inherit; box-sizing: inherit;
} }
*, *::before, *::after { .center-text {
-webkit-box-sizing: inherit; text-align: center;
box-sizing: inherit;} }
.display-table {
display: table;
height: 100%;
width: 100%;
}
/* --------------------------------- .display-table-cell {
2. COMMONS FOR PAGE DESIGN display: table-cell;
--------------------------------- */ vertical-align: middle;
}
.center-text{ text-align: center; } .main-area {
position: relative;
height: 100vh;
z-index: 1;
padding: 0 20px;
background-size: cover;
color: #fff;
}
.display-table{ display: table; height: 100%; width: 100%; } .main-area:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
opacity: .4;
background: #000;
}
.display-table-cell{ display: table-cell; vertical-align: middle; } .main-area p,
.main-area ul {
margin: 20px auto;
max-width: 800px;
color: #fff;
}
.main-area .notify-btn {
padding: 13px 35px;
border-radius: 50px;
border: 2px solid #F84982;
color: #fff;
background: #F84982;
}
.main-area .notify-btn:hover {
background: none;
}
::-webkit-input-placeholder { font-size: .9em; letter-spacing: 1px; } .main-area .social-btn {
position: absolute;
bottom: 40px;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
::-moz-placeholder { font-size: .9em; letter-spacing: 1px; } .main-area .social-btn>li>a {
margin: 0 10px;
padding-bottom: 7px;
position: relative;
overflow: hidden;
}
:-ms-input-placeholder { font-size: .9em; letter-spacing: 1px; } .main-area .social-btn>li>a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: all .2s;
height: 2px;
background: #F84982;
}
:-moz-placeholder { font-size: .9em; letter-spacing: 1px; } .main-area .social-btn>li>a:hover:after {
transform: translateX(100%);
}
.highlight {
font-weight: bold;
}
.full-height{ height: 100%; } div.description {
background-color: rgba(0, 0, 0, 0.5);
.position-static{ position: static; } padding: 20px;
border-radius: 10px;
.font-white{ color: #fff; } }
/* ---------------------------------
3. MAIN SECTION
--------------------------------- */
.main-area{ position: relative; height: 100vh; z-index: 1; padding: 0 20px; background-size: cover; color: #fff; }
.main-area:after{ content:''; position: absolute; top: 0; bottom: 0;left: 0; right: 0; z-index: -1;
opacity: .4; background: #000; }
.main-area .desc{ margin: 20px auto; max-width: 500px; }
.main-area .notify-btn{ padding: 13px 35px; border-radius: 50px; border: 2px solid #F84982;
color: #fff; background: #F84982; }
.main-area .notify-btn:hover{ background: none; }
.main-area .social-btn{ position: absolute; bottom: 40px; width: 100%; left: 50%; transform: translateX(-50%); }
.main-area .social-btn > li > a{ margin: 0 10px; padding-bottom: 7px; position: relative; overflow: hidden; }
.main-area .social-btn > li > a:after{ content:''; position: absolute; bottom: 0; left: 0; right: 0;
transition: all .2s; height: 2px; background: #F84982; }
.main-area .social-btn > li > a:hover:after{ transform: translateX(100%); }
</style> </style>
</head> </head>
<body> <body>
<div class="main-area center-text" style="background-image:url(https://code-repo.d4science.org/gCubeSystem/d4science-static-pages/raw/branch/master/src/main/webapp/downtime/extra/countdown-6-1600x900.jpg);"> <div class="main-area center-text"
style="background-image:url(https://code-repo.d4science.org/gCubeSystem/d4science-static-pages/raw/branch/master/src/main/webapp/downtime/extra/countdown-6-1600x900.jpg);">
<div class="display-table"> <div class="display-table">
<div class="display-table-cell"> <div class="display-table-cell">
<p><img style="width: 50%;" src="https://code-repo.d4science.org/gCubeSystem/d4science-static-pages/raw/branch/master/src/main/webapp/downtime/extra/D4Science-Logo-512px.png"></p> <img style="width: 50%;"
src="https://code-repo.d4science.org/gCubeSystem/d4science-static-pages/raw/branch/master/src/main/webapp/downtime/extra/D4Science-Logo-512px.png">
<div class="description">
<h1 class="title font-white"><b>We&rsquo;ll be back soon!</b></h1> <h1 class="title font-white"><b>We&rsquo;ll be back soon!</b></h1>
<p class="desc font-white"><a href="https://www.d4science.org/" target="_blank" style="text-decoration: underline;">The D4Science infrastructure</a> is currently undergoing scheduled maintenance. <p class="highlight"></span><a href="https://www.d4science.org/" target="_blank"
We Should be back at 5pm CET.<br> Thank you for your patience.</p> style="text-decoration: underline;">The
<ul class="social-btn font-white"> D4Science infrastructure</a> is currently undergoing scheduled maintenance, period lasting
<li><a href="https://twitter.com/d4science" target="_blank">Get updates on Twitter</a></li> approximately 4 hours on 26 November 2024 from 13:00 CET to 17:00 CET.</p>
</ul><!-- social-btn -->
</div><!-- display-table --> <p class="highlight">We Should be back at 17:00 CET.<br> Thank you for your patience.</p>
</div><!-- display-table-cell -->
</div><!-- main-area --> <p>
This downtime is crucial to implement significant improvements across various core services,
enhancing performance, reliability, and security for all users.
During this maintenance window:</p>
<ul>
<li><span class="highlight">Initial 45 Minutes:</span> The D4Science Gateways will be completely
inaccessible. You will be unable
to log in, access your workspace, or utilise any D4Science services.</li>
<li><span class="highlight">Remaining Time:</span> The D4Science Gateways will be back online.
However, you may experience
limitations or intermittent disruptions in certain services while the upgrade processes are
finalised.</li>
</ul>
<p>Services undergoing upgrades include, but are not limited to:</p>
<ul>
<li><span class="highlight">StorageHub:</span> D4Science's centralised cloud storage solution
will receive updates to
improve data
management, security, and integration with other services. This might affect uploading,
managing, and accessing your data during the latter part of the downtime.</li>
<li><span class="highlight">Geoportal:</span> the service and its GeoServer, which handles
geospatial data, will be
upgraded.
Expect potential limitations in publishing, editing, and sharing spatial data during this
time.
</li>
<li><span class="highlight">Social Networking Service:</span> The platform's social features,
allowing interaction with
other
members of your Virtual Labs, will be enhanced. This might result in temporary disruptions
in
posting, commenting, or messaging functionalities.</li>
<li><span class="highlight">Cloud Computing Platform (CCP):</span> The CCP, enabling you to run
and share data analyses on
the D4Science infrastructure, will be upgraded. This might cause temporary interruptions in
running or accessing your analyses.</li>
</ul>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>