mirror of
https://github.com/VickScarlet/lifeRestart.git
synced 2026-04-10 19:57:28 +08:00
change hint, summary, data
This commit is contained in:
Vick Scarlet
@@ -10,7 +10,35 @@
|
||||
<script>window.json = async fileName=>(await axios(`../data/${fileName}.json`)).data;</script>
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body style="margin: 0; height: 100%"></body>
|
||||
<body style="margin: 0; height: 100%">
|
||||
<div class="banners-container">
|
||||
<div class="banners">
|
||||
<div class="banner error">
|
||||
<div class="banner-icon"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" class="eva eva-alert-circle-outline" fill="#ffffff"><g data-name="Layer 2"><g data-name="alert-circle"><rect width="24" height="24" opacity="0"></rect><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"></path><circle cx="12" cy="16" r="1"></circle><path d="M12 7a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"></path></g></g></svg></div>
|
||||
<div class="banner-message">Oops! Something went wrong!</div>
|
||||
<div class="banner-close" onclick="hideBanners()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="eva eva-close-outline" fill="#ffffff"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"></rect><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path></g></g></svg></div>
|
||||
</div>
|
||||
<div class="banner success">
|
||||
<div class="banner-icon"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" class="eva eva-checkmark-circle-outline" fill="#ffffff"><g data-name="Layer 2"><g data-name="checkmark-circle"><rect width="24" height="24" opacity="0"></rect><path d="M9.71 11.29a1 1 0 0 0-1.42 1.42l3 3A1 1 0 0 0 12 16a1 1 0 0 0 .72-.34l7-8a1 1 0 0 0-1.5-1.32L12 13.54z"></path><path d="M21 11a1 1 0 0 0-1 1 8 8 0 0 1-8 8A8 8 0 0 1 6.33 6.36 7.93 7.93 0 0 1 12 4a8.79 8.79 0 0 1 1.9.22 1 1 0 1 0 .47-1.94A10.54 10.54 0 0 0 12 2a10 10 0 0 0-7 17.09A9.93 9.93 0 0 0 12 22a10 10 0 0 0 10-10 1 1 0 0 0-1-1z"></path></g></g></svg></div>
|
||||
<div class="banner-message">Everything was fine!</div>
|
||||
<div class="banner-close" onclick="hideBanners()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="eva eva-close-outline" fill="#ffffff"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"></rect><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path></g></g></svg></div>
|
||||
</div>
|
||||
<div class="banner info">
|
||||
<div class="banner-icon"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" class="eva eva-info-outline" fill="#ffffff"><g data-name="Layer 2"><g data-name="info"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"></rect><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"></path><circle cx="12" cy="8" r="1"></circle><path d="M12 10a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0v-5a1 1 0 0 0-1-1z"></path></g></g></svg></div>
|
||||
<div class="banner-message">Here is some useful information</div>
|
||||
<div class="banner-close" onclick="hideBanners()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="eva eva-close-outline" fill="#ffffff"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"></rect><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path></g></g></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
// Pssst, I've created a github package - https://github.com/brookesb91/dismissible
|
||||
const hideBanners = (e) => {
|
||||
document
|
||||
.querySelectorAll(".banner.visible")
|
||||
.forEach((b) => b.classList.remove("visible"));
|
||||
};
|
||||
</script>
|
||||
<script type="module">
|
||||
import App from '../src/app.js';
|
||||
const app = new App();
|
||||
|
||||
222
view/style.css
222
view/style.css
@@ -101,20 +101,6 @@ html {
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
.hint {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
padding: 0.3rem 2rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
background-color:gray;
|
||||
font-size: 1.4rem;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.head {
|
||||
position: fixed;
|
||||
font-size: 1.4rem;
|
||||
@@ -255,4 +241,210 @@ html {
|
||||
height: calc(100% - 1rem);
|
||||
padding: 0.5rem 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
|
||||
:root {
|
||||
font-family: "Montserrat";
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
i {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.banners-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.banner {
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.banner .banner-message {
|
||||
flex: 1;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
.banner .banner-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.banner .banner-close:hover {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.banner.success {
|
||||
background: lightgreen;
|
||||
}
|
||||
.banner.success::after {
|
||||
background: lightgreen;
|
||||
}
|
||||
.banner.error {
|
||||
background: #ed1c24;
|
||||
}
|
||||
.banner.error::after {
|
||||
background: #ed1c24;
|
||||
}
|
||||
.banner.info {
|
||||
background: skyblue;
|
||||
}
|
||||
.banner.info::after {
|
||||
background: skyblue;
|
||||
}
|
||||
|
||||
.banner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.banner:not(.visible) {
|
||||
display: none;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.banner.visible {
|
||||
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
|
||||
animation-name: banner-in;
|
||||
animation-direction: forwards;
|
||||
animation-duration: 0.6s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@keyframes banner-in {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.show-banner {
|
||||
appearance: none;
|
||||
background: #ededed;
|
||||
border: 0;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
.eva-animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both; }
|
||||
|
||||
.eva-infinite {
|
||||
animation-iteration-count: infinite; }
|
||||
|
||||
.eva-icon-shake {
|
||||
animation-name: eva-shake; }
|
||||
|
||||
.eva-icon-zoom {
|
||||
animation-name: eva-zoomIn; }
|
||||
|
||||
.eva-icon-pulse {
|
||||
animation-name: eva-pulse; }
|
||||
|
||||
.eva-icon-flip {
|
||||
animation-name: eva-flipInY; }
|
||||
|
||||
.eva-hover {
|
||||
display: inline-block; }
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-shake, .eva-parent-hover:hover .eva-icon-hover-shake {
|
||||
animation-name: eva-shake; }
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-zoom, .eva-parent-hover:hover .eva-icon-hover-zoom {
|
||||
animation-name: eva-zoomIn; }
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-pulse, .eva-parent-hover:hover .eva-icon-hover-pulse {
|
||||
animation-name: eva-pulse; }
|
||||
|
||||
.eva-hover:hover .eva-icon-hover-flip, .eva-parent-hover:hover .eva-icon-hover-flip {
|
||||
animation-name: eva-flipInY; }
|
||||
|
||||
@keyframes eva-flipInY {
|
||||
from {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0; }
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
|
||||
animation-timing-function: ease-in; }
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
|
||||
opacity: 1; }
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
|
||||
to {
|
||||
transform: perspective(400px); } }
|
||||
|
||||
@keyframes eva-shake {
|
||||
from,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0); }
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translate3d(-3px, 0, 0); }
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translate3d(3px, 0, 0); } }
|
||||
|
||||
@keyframes eva-pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1); }
|
||||
50% {
|
||||
transform: scale3d(1.2, 1.2, 1.2); }
|
||||
to {
|
||||
transform: scale3d(1, 1, 1); } }
|
||||
|
||||
@keyframes eva-zoomIn {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.5, 0.5, 0.5); }
|
||||
50% {
|
||||
opacity: 1; } }
|
||||
Reference in New Issue
Block a user