mirror of
https://github.com/openziti/zrok.git
synced 2025-06-12 04:46:41 +02:00
responsive, updated interstitial layout (#704)
This commit is contained in:
Michael Quigley
parent
607ba8b69e
commit
c3cf0f8668
@ -4,39 +4,22 @@
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="theme-color" content="#000000"/>
|
||||
<meta name="description" content="zrok ui"/>
|
||||
<meta name="description" content="zrok interstitial"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
|
||||
<title>zrok</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 25;
|
||||
font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1, h2 {
|
||||
font-family: 'Russo One', sans-serif;
|
||||
}
|
||||
table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
td:last-child {
|
||||
width: 80%;
|
||||
overflow: clip;
|
||||
}
|
||||
td:first-child {
|
||||
width: 20%;
|
||||
overflow: auto;
|
||||
}
|
||||
button {
|
||||
color: purple;
|
||||
}
|
||||
@ -70,26 +53,113 @@
|
||||
button:hover {
|
||||
color: #9BF316;
|
||||
}
|
||||
#banner {
|
||||
padding: 25px;
|
||||
}
|
||||
#info, #info2 {
|
||||
width: 920px;
|
||||
padding: 35px;
|
||||
margin: 25px;
|
||||
border: 1px solid gray;
|
||||
.info {
|
||||
border: 1px solid #231069;
|
||||
border-radius: 10px;
|
||||
text-align: left;
|
||||
padding: 30px;
|
||||
}
|
||||
.container {
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.row {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.row [class^="col"] {
|
||||
float: left;
|
||||
margin: 0.5rem 2%;
|
||||
min-height: 0.125rem;
|
||||
}
|
||||
.col {
|
||||
width: 96%;
|
||||
}
|
||||
.row::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
@media only screen and (min-width: 33.75em) { /* 540px */
|
||||
.container {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 45em) { /* 720px */
|
||||
.col {
|
||||
margin-top: 25px;
|
||||
width: 96%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 60em) { /* 960px */
|
||||
.container {
|
||||
width: 75%;
|
||||
max-width: 60rem;
|
||||
}
|
||||
}
|
||||
#hostname {
|
||||
color: red;
|
||||
}
|
||||
#root, #zrok {
|
||||
margin-top: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div id="banner">
|
||||
<svg width="25%" height="25%" viewBox="0 0 100 30" xml:space="default" style="clip-rule:evenodd;fill-rule:evenodd;stroke-miterlimit:10" id="svg48" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<script>
|
||||
function onClick() {
|
||||
let e=new Date; e.setTime(e.getTime()+6048e5);
|
||||
document.cookie = 'zrok_interstitial = 1; expires=${e}; path=/; SameSite=None';
|
||||
window.location.reload();
|
||||
}
|
||||
</script>
|
||||
<div id="root">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div id="warning" class="col info">
|
||||
<h1>You are about to visit a zrok share located at:</h1>
|
||||
<h2 id="hostname"></h2>
|
||||
|
||||
<ul>
|
||||
<li>This share is made available for free through <a href="https://zrok.io/" target="_">zrok</a>.</li>
|
||||
<li>You should only visit this share if you trust whoever sent you the link.</li>
|
||||
<li><strong>Be careful about disclosing any personal or financial information like passwords, phone numbers, or credit cards.</strong></li>
|
||||
</ul>
|
||||
|
||||
<button onClick="onClick()">Visit Share</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2>Non-interactive clients:</h2>
|
||||
<ul>
|
||||
<li>This warning can be bypassed by setting the <strong>skip_zrok_interstitial</strong> HTTP
|
||||
header with any value set.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col info">
|
||||
<h1>Are you the owner of this zrok share?</h1>
|
||||
<p>
|
||||
We display this page to prevent abuse of zrok shares. Visitors to your share will only see it once.
|
||||
</p>
|
||||
|
||||
<h2>To remove this page:</h2>
|
||||
<ul>
|
||||
<li>If you are using the global zrok service at zrok.io, you can upgrade to any paid account to have this
|
||||
page removed.</li>
|
||||
<li>If you are using a zrok instance hosted elsewhere, contact the administrator of your instance for
|
||||
options to have this page removed.</li>
|
||||
<li>If you are operating a self-hosted zrok instance, see the
|
||||
<a href="https://docs.zrok.io/" target="_">documentation</a> for configuration options
|
||||
to remove the interstitial page.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="zrok" class="col">
|
||||
<a href="https://zrok.io/" target="_"><svg width="25%" height="25%" viewBox="0 0 100 30" xml:space="default" style="clip-rule:evenodd;fill-rule:evenodd;stroke-miterlimit:10" id="svg48" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs id="defs48" /><namedview id="namedview48" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"/>
|
||||
<g transform="matrix(0.0639619,0,0,0.0388212,-1.65041,-1.44321)" id="g1">
|
||||
<path d="m 1589.31,230.468 c 0,-106.573 -52.51,-193.096 -117.2,-193.096 H 143.033 c -64.683,0 -117.198,86.523 -117.198,193.096 v 386.191 c 0,106.573 52.515,193.096 117.198,193.096 H 1472.11 c 64.69,0 117.2,-86.523 117.2,-193.096 z" style="fill:#170549" id="path1" />
|
||||
@ -169,48 +239,12 @@
|
||||
<path d="m 1300.79,381.047 c 0,34.64 -10.69,61.776 -32.07,81.405 -21.38,19.63 -50.93,29.445 -88.66,29.445 H 1006.5 c -37.723,0 -67.277,-9.815 -88.657,-29.445 -21.379,-19.629 -32.069,-46.765 -32.069,-81.405 V 221.7 c 0,-34.641 10.69,-61.776 32.069,-81.405 21.38,-19.63 50.934,-29.445 88.657,-29.445 h 173.56 c 37.73,0 67.28,9.815 88.66,29.445 21.38,19.629 32.07,46.764 32.07,81.405 z M 1168.74,232.092 c 0,-18.475 -10.06,-27.712 -30.18,-27.712 h -90.55 c -20.13,0 -30.19,9.237 -30.19,27.712 v 138.563 c 0,18.475 10.06,27.712 30.19,27.712 h 90.55 c 20.12,0 30.18,-9.237 30.18,-27.712 z" style="fill:#7bf600;fill-rule:nonzero" id="path47" />
|
||||
<path d="M 1500.75,339.478 V 484.969 H 1368.7 V 0 h 132.05 v 245.948 h 60.37 l 83,-128.17 h 139.59 l -113.18,176.667 113.18,190.524 h -139.59 l -86.78,-145.491 z" style="fill:#7bf600;fill-rule:nonzero" id="path48" />
|
||||
</g>
|
||||
</svg>
|
||||
</svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
function onClick() {
|
||||
let e=new Date; e.setTime(e.getTime()+6048e5);
|
||||
document.cookie = 'zrok_interstitial = true; expires=${e}; path=/; SameSite=None';
|
||||
window.location.reload();
|
||||
}
|
||||
</script>
|
||||
<div id="container">
|
||||
<div id="info">
|
||||
<h1>You are about to visit a zrok share served at:</h1>
|
||||
<h2 id="hostname"></h2>
|
||||
|
||||
<ul>
|
||||
<li>This share is made available for free through zrok.</li>
|
||||
<li>You should only visit this shared website if you trust whoever sent you the link.</li>
|
||||
<li>Be careful about disclosing any personal or financial information like passwords, phone numbers, or credit cards.</li>
|
||||
</ul>
|
||||
|
||||
<button onClick="onClick()">Visit Share</button>
|
||||
</div>
|
||||
<div id="info2">
|
||||
<h1>Are you the owner of this zrok share?</h1>
|
||||
<p>
|
||||
We display this page to prevent abuse of zrok shares. Visitors to your share will only see it once.
|
||||
</p>
|
||||
|
||||
<h2>To remove this page:</h2>
|
||||
<ul>
|
||||
<li>If you are using the global zrok service at zrok.io, you can upgrade to any paid account to have this
|
||||
page removed.</li>
|
||||
<li>If you are using a zrok instance hosted elsewhere, contact the administrator of your instance for
|
||||
options to have this page removed.</li>
|
||||
<li>If you are operating a self-hosted zrok instance, see the documentation for configuration options
|
||||
to remove the interstitial page.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
document.getElementById("hostname").innerText = document.location.host;
|
||||
</script>
|
||||
</script>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user