iportal
Version:
web-portal
294 lines (286 loc) • 9.7 kB
HTML
<html>
<head>
<style>
html, body {
background: var(--background, #000);
}
#figure {
height: 170px;
padding-bottom: 12px;
}
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
#figure-container {
position: relative;
width: 100%;
height: 80%;
margin-top: 60px;
background: var(--logoBg, #000);
font-family: "Montserrat", sans-serif;
color: var(--logoText, #fff);
font-size: 120px;
filter: contrast(15);
transition: transform 0.3s ease;
}
@media screen and (max-width: 700px) {
#figure-container {
zoom: .7;
}
}
@media screen and (max-width: 360px) {
#figure-container {
zoom: .6;
}
}
.word {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: blur(6px);
-webkit-animation: change 8s infinite ease-in-out;
animation: change 8s infinite ease-in-out;
}
.word:nth-child(1) {
font-size: 124px;
-webkit-animation-delay: -8s;
animation-delay: -8s;
}
.word:nth-child(2) {
font-size: 128px;
-webkit-animation-delay: -6.4s;
animation-delay: -6.4s;
}
.word:nth-child(3) {
font-size: 132px;
-webkit-animation-delay: -4.8s;
animation-delay: -4.8s;
}
.word:nth-child(4) {
font-size: 122px;
-webkit-animation-delay: -3.2s;
animation-delay: -3.2s;
}
@-webkit-keyframes change {
0%, 5%, 100% {
filter: blur(6px);
opacity: 1;
}
50%, 80% {
filter: blur(12px);
opacity: 0;
}
}
@keyframes change {
0%, 5%, 100% {
filter: blur(6px);
opacity: 1;
}
50%, 80% {
filter: blur(12px);
opacity: 0;
}
}
.subtitle {
position: relative;
margin-top: 20px;
width: 100%;
text-align: center;
z-index: 9;
color: rgba(255, 255, 255, .3);
font-size: 12px;
-webkit-font-smoothing: antialiased;
}
.placeholder {
height: var(--application-safe-area-top)
}
.card {
min-height: 100px;
max-width: 500px;
margin: auto;
margin-bottom: 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .05);
background: var(--cardbg, rgba(255, 255, 255, .1));
backdrop-filter: blur(20px);
}
.card-title {
font-size: 28px;
padding: 5px 20px;
color: rgba(255, 255, 255, .3);
-webkit-font-smoothing: antialiased;
}
.card-list {
padding: 0;
margin: 0;
}
.card-list a {
display: block;
position: relative;
font-size: 18px;
padding: 12px 20px;
list-style: none;
font-weight: 400;
color: var(--cardTextColor, rgba(255, 255, 255, .92));
border-bottom: 1px solid rgba(255, 255, 255, .1);
align-content: space-between;
cursor: pointer;
text-decoration: none;
}
.card-list a:hover {
background: rgba(255, 255, 255, .1);
}
@media (pointer: coarse) {
.card-list a:hover {
background: none;
}
}
.card-list a:last-child {
border-bottom: 0;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.card-list a:after {
position: absolute;
right: 15px;
top: 50%;
content: ' ';
display: block;
width: 20px;
height: 20px;
margin-top: -10px;
background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyBmaWxsPScjY2NjY2NjJyB2ZXJzaW9uPScxLjEnIGlkPSflm77lsYJfMScgeD0nMHB4JyB5PScwcHgnIHZpZXdCb3g9JzAgMCA1NCA1NCcgZW5hYmxlLWJhY2tncm91bmQ9J25ldyAwIDAgNTQgNTQnIHhtbDpzcGFjZT0ncHJlc2VydmUnPjxzY3JpcHQgeG1sbnM9JycgdHlwZT0ndGV4dC9qYXZhc2NyaXB0JyBjcm9zc29yaWdpbj0nYW5vbnltb3VzJy8+PHBhdGggZD0nTTQ0LjYsMjguNWMwLTAuMSwwLjEtMC4xLDAuMS0wLjJjMC42LTEuMywwLjQtMi45LTAuNy0zLjlMMTkuMiwwLjljLTEuNC0xLjMtMy41LTEuMi00LjgsMC4xcy0xLjIsMy41LDAuMSw0LjhsMjIuMiwyMSBMMTQuNyw0OC4yYy0xLjMsMS4zLTEuNCwzLjQtMC4xLDQuOGMwLjcsMC43LDEuNSwxLDIuNCwxYzAuOCwwLDEuNy0wLjMsMi4zLTAuOWwyNC42LTIzLjdjMCwwLDAuMS0wLjEsMC4xLTAuMmMwLDAsMC4xLTAuMSwwLjEtMC4xIEM0NC4zLDI4LjksNDQuNCwyOC43LDQ0LjYsMjguNUw0NC42LDI4LjV6Jy8+PC9zdmc+");
}
.card-list a span {
font-size: 13px;
color: rgba(255, 255, 255, .3);
-webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 700px) {
.card-title {
font-size: 18px;
}
.card-list a {
font-size: 16px;
}
.card-list a:after {
width: 16px;
height: 16px;
margin-top: -8px;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const figure = document.getElementById("figure-container");
window.addEventListener('scroll', (event) => {
figure.style.transform = `scale(${window.scrollY > 40 ? 1.3 : 1})`
})
})
const _to = (id) => {
window.parent.postMessage({ action: 'to', data: { module: id } }, '*')
}
</script>
</head>
<body>
<div class="placeholder"></div>
<figure id="figure">
<div id="figure-container">
<div class="word">iPortal</div>
<div class="word">iPortal</div>
<div class="word">iPortal</div>
<div class="word">iPortal</div>
</div>
<div class="subtitle">一个页面无缝连接容器</div>
</figure>
<div class="card">
<div class="card-title">Start</div>
<div class="card-list">
<a href="?id=install#doc">Install</a>
<a href="?id=start#doc">Start</a>
</div>
</div>
<div class="card">
<div class="card-title">Base</div>
<div class="card-list">
<a href="?id=rel#doc">Rel</a>
<a href="?id=title#doc">Title</a>
<a href="?id=source#doc">Source</a>
<a href="?id=index#doc">Index</a>
</div>
</div>
<div class="card">
<div class="card-title">Viewport</div>
<div class="card-list">
<a href="?id=free#doc">Free</a>
<a href="?id=level#doc">Level</a>
<a href="?id=color#doc">Color</a>
</div>
</div>
<div class="card">
<div class="card-title">Animate Effect</div>
<div class="card-list">
<a href="?id=preset#doc">Slide</a>
<a href="?id=preset#doc" preset-effect="slide-right" clone-as="doc-right">SlideRight</a>
<a href="?id=preset#doc" preset-effect="slide-up" clone-as="doc-up">SlideUp</a>
<a href="?id=preset#doc" preset-effect="slide-down" clone-as="doc-down">SlideDown</a>
<a href="?id=preset#doc" preset-effect="zoom" clone-as="doc-zoom">Zoom</a>
<a href="?id=preset#doc" preset-effect="flip" clone-as="doc-flip">Flip</a>
<a href="?id=preset#doc" preset-effect="flip-left" clone-as="doc-flip-left">FlipLeft</a>
<a href="?id=preset#doc" preset-effect="flip-right" clone-as="doc-flip-right">FlipRight</a>
<a href="?id=preset#doc" preset-effect="flip-up" clone-as="doc-flip-up">FlipUp</a>
<a href="?id=preset#doc" preset-effect="flip-down" clone-as="doc-flip-down">FlipDown</a>
<a href="?id=customEffect#doc" preset-effect="slide" clone-as="doc-flip-down">Custom Effect</a>
</div>
</div>
<div class="card">
<div class="card-title">Lifecycle</div>
<ul class="card-list">
<a href="?id=background#doc">Background</a>
<a href="?id=timeout#doc">Timeout</a>
<a href="?id=limit#doc">Limit</a>
</ul>
</div>
<div class="card">
<div class="card-title">Performance</div>
<ul class="card-list">
<a href="?id=resource#doc">Resource</a>
<a href="?id=prerender#doc">Prerender</a>
<a href="?id=components#doc">Components</a>
<a href="?id=mediaGuard#doc">MediaGuard</a>
<a href="?id=portals#doc">Portals</a>
</ul>
</div>
<div class="card">
<div class="card-title">Safest</div>
<ul class="card-list">
<a href="?id=allowHost#doc">AllowHost</a>
<a href="?id=sandbox#doc">Sandbox</a>
<a href="?id=capture#doc">Capture</a>
</ul>
</div>
<div class="card">
<div class="card-title">Other</div>
<ul class="card-list">
<a href="?id=apply#doc">Apply</a>
<a href="?id=events#doc">Events</a>
<a href="?id=preindex#doc">Preindex</a>
<a href="?id=notFind#doc">NotFind</a>
<a href="?id=singleFlow#doc">SingleFlow</a>
<a href="?id=singleLock#doc">SingleLock</a>
<a href="?id=holdBack#doc">HoldBack</a>
<a href="?id=transient#doc">Transient</a>
</ul>
</div>
<div class="card">
<div class="card-title">Advance</div>
<ul class="card-list">
<a href="?id=moduleManifestProcess#doc">ModuleManifestProcess</a>
<a href="?id=touchBorder#doc">TouchBorder</a>
<a href="?id=inject#doc">Inject</a>
<a href="?id=render#doc">Render</a>
<a href="?id=safeArea#doc">SafeArea</a>
<a href="?id=globalCSSVariables#doc">GlobalCSSVariables</a>
</ul>
</div>
</body>
</html>