g1
This commit is contained in:
Turtle committed
commit
75e445ef91
3 files changed
+244
No files matched your search
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./basic.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<overlay onclose="alert('hello');" id="overlay1">test</overlay>
|
||||
|
||||
<div class="header_bar_1">
|
||||
<div>test1</div><div>test2</div><div>test3</div>
|
||||
</div>
|
||||
<div class="header_bar_1_placeholder"></div>
|
||||
|
||||
<span>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
|
||||
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
</span>
|
||||
|
||||
|
||||
<script src="./basic.js"></script>
|
||||
<script>
|
||||
|
||||
showOverlay("overlay1");
|
||||
|
||||
//setTimeout(() => hideOverlay("overlay1"), 3000);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
:root {
|
||||
--accent_color_fg: #007bff;
|
||||
--accent_color_bg: rgba(137, 197, 221, 1);
|
||||
--accent_color_bg_o: rgba(137, 197, 221, 0.5);
|
||||
--main_color_fg: white;
|
||||
--main_color_bg: black;
|
||||
--border-radius: 10px;
|
||||
--def-shadow: 10px 20px 20px rgb(128, 128, 128, 0.5);
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline-style: none;
|
||||
}
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
overscroll-behavior: none;
|
||||
touch-action: pan-x pan-y;
|
||||
font-size: 20px;
|
||||
}
|
||||
::selection {
|
||||
background-color: var(--accent_color_fg);
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* ----------- overlay ----------- */
|
||||
|
||||
overlay {
|
||||
display: none;
|
||||
}
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
.overlay > div:first-child {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.2);
|
||||
backdrop-filter: blur(1px);
|
||||
}
|
||||
.overlay > div:last-child {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 250px;
|
||||
min-height: 150px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--accent_color_bg_o);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--def-shadow);
|
||||
}
|
||||
.overlay > div:last-child > .close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--accent_color_bg);
|
||||
border-radius: var(--border-radius);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ----------- headerbar ----------- */
|
||||
|
||||
.header_bar_1 {
|
||||
position: fixed;
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
background: var(--accent_color_bg_o);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 15px;
|
||||
box-shadow: var(--def-shadow);
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.header_bar_1 > div {
|
||||
display: table-cell;
|
||||
}
|
||||
.header_bar_1 > div:nth-child(1) {
|
||||
text-align: left;
|
||||
}
|
||||
.header_bar_1 > div:nth-child(2) {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.header_bar_1 > div:nth-child(3) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.header_bar_1_placeholder {
|
||||
height: 70px;
|
||||
}
|
||||
.header_bar_1_undocked {
|
||||
width: 96%;
|
||||
top: 2%;
|
||||
border-radius: var(--border-radius);
|
||||
animation: header_bar_1_undocked_ani 0.5s ease-in-out;
|
||||
}
|
||||
.header_bar_1_docked {
|
||||
width: 100%;
|
||||
animation: header_bar_1_docked_ani 0.5s ease-in-out;
|
||||
}
|
||||
@keyframes header_bar_1_undocked_ani {
|
||||
from {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
to {
|
||||
width: 96%;
|
||||
top: 2%;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
@keyframes header_bar_1_docked_ani {
|
||||
from {
|
||||
width: 96%;
|
||||
top: 2%;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
const getId = (id) => document.getElementById(id);
|
||||
|
||||
function showOverlay(id) {
|
||||
const elm = getId(id);
|
||||
const overlay = document.createElement("div");
|
||||
overlay.classList.add("overlay");
|
||||
overlay.setAttribute("name", id);
|
||||
overlay.innerHTML = `
|
||||
<div onclick="_onOverlayDestroy(this.parentElement);"></div>
|
||||
<div>
|
||||
<button class="close" onclick="_onOverlayDestroy(this.parentElement.parentElement);">X</button>
|
||||
${elm.innerHTML}
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
function _onOverlayDestroy(elm) {
|
||||
const ori_elm = getId(elm.getAttribute("name"));
|
||||
if (ori_elm) {
|
||||
const cb = ori_elm.getAttribute("onclose");
|
||||
if (typeof(cb) == "string") {
|
||||
try { eval(cb); } catch(err) { console.error(err); }
|
||||
}
|
||||
}
|
||||
elm.remove();
|
||||
}
|
||||
function hideOverlay(id) {
|
||||
const elms = document.getElementsByName(id);
|
||||
for (var i of elms) _onOverlayDestroy(i);
|
||||
}
|
||||
|
||||
|
||||
function _main_events() {
|
||||
const header_bar_1 = document.querySelector(".header_bar_1");
|
||||
if (header_bar_1 != null) {
|
||||
let isFloating = false;
|
||||
window.addEventListener("load", function () {
|
||||
if (window.pageYOffset > 0) {
|
||||
header_bar_1.style.animationDuration = "0s";
|
||||
header_bar_1.classList.add("header_bar_1_undocked");
|
||||
isFloating = true;
|
||||
}
|
||||
});
|
||||
window.addEventListener("scroll", function() {
|
||||
if (window.pageYOffset > 0 && !isFloating) {
|
||||
header_bar_1.style.animationDuration = "0.5s";
|
||||
header_bar_1.classList.remove("header_bar_1_docked");
|
||||
header_bar_1.classList.add("header_bar_1_undocked");
|
||||
isFloating = true;
|
||||
} else if (window.pageYOffset === 0 && isFloating) {
|
||||
header_bar_1.style.animationDuration = "0.5s";
|
||||
header_bar_1.classList.remove("header_bar_1_undocked");
|
||||
header_bar_1.classList.add("header_bar_1_docked");
|
||||
isFloating = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
_main_events();
|
||||
Reference in new issue
Block a user