extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-15 14:27:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

responsive, updated interstitial layout (#704)

Browse Source
This commit is contained in:
Michael Quigley 2024-07-25 11:02:03 -04:00
parent 607ba8b69e
commit c3cf0f8668
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
1 changed files with 187 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
endpoints/publicProxy/interstitialUi/index.html
View File

@ -4,39 +4,22 @@
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="theme-color" content="#000000"/> <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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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=Russo+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<title>zrok</title> <title>zrok</title>
<style> <style>
body { body {
margin: 0; margin: 0;
padding: 25;
font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace; font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
justify-content: center;
display: flex;
} }
h1, h2, h3, h4, h5, h6 { h1, h2 {
font-family: 'Russo One', sans-serif; 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 { button {
color: purple; color: purple;
} }
@ -70,26 +53,113 @@
button:hover { button:hover {
color: #9BF316; color: #9BF316;
} }
#banner { .info {
padding: 25px; border: 1px solid #231069;
}
#info, #info2 {
width: 920px;
padding: 35px;
margin: 25px;
border: 1px solid gray;
border-radius: 10px; 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 { #hostname {
color: red; color: red;
} }
#root, #zrok {
margin-top: 25px;
}
</style> </style>
</head> </head>
<body> <body>
<div id="root"> <script>
<div id="banner"> function onClick() {
<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"> 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"/> <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"> <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" /> <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 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" /> <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> </g>
</svg> </svg></a>
</div> </div>
</div>
</div>
</body>
<script> <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; document.getElementById("hostname").innerText = document.location.host;
</script> </script>
</html> </html>