Outsource default documents to actual files
This commit is contained in:
21
res/default.html
Normal file
21
res/default.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>%1$i %2$s - %7$s</title>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="theme-color" content="%6$s"/>
|
||||
<meta name="color-scheme" content="light dark"/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
|
||||
<link rel="stylesheet" type="text/css" href="/.sesimos/style.css"/>
|
||||
%5$s <style>html{--color:var(--%4$s);}</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section>
|
||||
%3$s%9$s <div class="footer"><a href="https://%7$s/">%7$s</a> - %10$s</div>
|
||||
</section>
|
||||
%8$s </main>
|
||||
</body>
|
||||
</html>
|
||||
31
res/proxy.html
Normal file
31
res/proxy.html
Normal file
@ -0,0 +1,31 @@
|
||||
<section class="error-ctx">
|
||||
<div class="box%1$s">
|
||||
<div class="content">
|
||||
<span>Client</span>
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIsMzIgYTMwLDMwLDAsMSwwLDYwLDAgYTMwLDMwLDAsMSwwLC02MCwwIEw2MiwzMiBNNiwxNiBMNTgsMTYgTTYsNDggTDU4LDQ4IE0zMiwyIEwzMiw2MiBhMTUsMzAsMCwxLDAsMCwtNjAgYTE1LDMwLDAsMSwwLDAsNjAgWiIgc3Ryb2tlPSIjMDA4MDAwIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9IiMwMDAwMDAwMCIvPjwvc3ZnPgo="/>
|
||||
<span>Your Browser</span>
|
||||
</div>
|
||||
<div class="arrow request%2$s"></div>
|
||||
</div>
|
||||
<div class="border%8$s"></div>
|
||||
<div class="box%3$s">
|
||||
<div class="content">
|
||||
<span>Reverse Proxy</span>
|
||||
<h3>%10$03i</h3>
|
||||
<h4>%11$s</h4>
|
||||
<span>%15$s</span>
|
||||
</div>
|
||||
<div class="arrow request%4$s"></div>
|
||||
<div class="arrow response%5$s"></div>
|
||||
</div>
|
||||
<div class="border%9$s"></div>
|
||||
<div class="box%6$s">
|
||||
<div class="content">
|
||||
<span>Server</span>
|
||||
<h3>%12$s</h3>
|
||||
<h4>%13$s</h4>
|
||||
<span>%14$s</span>
|
||||
</div>
|
||||
<div class="arrow response%7$s"></div>
|
||||
</div>
|
||||
</section>
|
||||
66
res/style.css
Normal file
66
res/style.css
Normal file
@ -0,0 +1,66 @@
|
||||
html{
|
||||
font-family:"Arial",sans-serif;
|
||||
--error:#C00000;
|
||||
--warning:#E0C000;
|
||||
--success:#008000;
|
||||
--info:#606060;
|
||||
--soft:#808080;
|
||||
}
|
||||
|
||||
body{background-color:#F0F0F0;margin:0;}
|
||||
main{max-width:650px;margin:2em auto;}
|
||||
section{margin:2em 1em;background-color:#FFFFFF;border: 1px solid var(--color);border-radius:4px;padding:1em;}
|
||||
h1,h2,h3,h4,h5,h6{text-align:center;color:var(--color);font-weight:normal;}
|
||||
h1{font-size:3em;margin:0.125em 0;}
|
||||
h2{font-size:1.5em;margin:0.25em 0 1em 0;}
|
||||
p{text-align:center;font-size:0.875em;}
|
||||
div.footer{color:var(--soft);font-size:0.75em;text-align:center;margin:2em 0 0.5em 0;}
|
||||
div.footer a{color:var(--soft);}
|
||||
ul,ol{width:fit-content;margin:auto;}
|
||||
pre{width:fit-content;margin:2em auto 0 auto;}
|
||||
|
||||
section.error-ctx{display:flex;padding:0;border:none;}
|
||||
div.box{flex:100% 1 1;border:1px solid var(--info);color:var(--info);position:relative;padding:1em;box-sizing:border-box;text-align:center;}
|
||||
div.box.error{border-color:var(--error);color:var(--error);}
|
||||
div.box.success{border-color:var(--success);color:var(--success);}
|
||||
div.arrow{position:absolute;height:20px;width:30px;z-index:10;background-repeat:no-repeat;background-size:contain;}
|
||||
div.arrow.response{left:-17.5px;bottom:calc(33.3333% - 10px);}
|
||||
div.arrow.request{right:-17.5px;top:calc(33.3333% - 10px);}
|
||||
div.border{flex:1px 0 0;background-color:var(--info);}
|
||||
div.border.error{background-color:var(--error);}
|
||||
div.border.success{background-color:var(--success);}
|
||||
div.content>span{display:block;color:var(--soft);font-size:0.75em;}
|
||||
div.content>img{height:3.75rem;margin:0.75rem auto;display:block;}
|
||||
h3{font-size:2.25em;margin:0.75rem 0 0 0;color:unset;height:2.5rem;}
|
||||
h4{font-size:1em;margin:0 0 0.75rem 0;color:unset;height:1.25rem;}
|
||||
|
||||
div.arrow.request.success{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEsMSBMMjUsMSBMMjksMTAgTDI1LDE5IEwxLDE5IiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMDgwMDAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPgo=');}
|
||||
div.arrow.request.error{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEsMSBMMjUsMSBMMjksMTAgTDI1LDE5IEwxLDE5IiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiNDMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPgo=');}
|
||||
div.arrow.response.success{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI5LDE5IEw1LDE5IEwxLDEwIEw1LDEgTDI5LDEiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iIzAwODAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+Cg==');}
|
||||
div.arrow.response.error{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI5LDE5IEw1LDE5IEwxLDEwIEw1LDEgTDI5LDEiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iI0MwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+Cg==');}
|
||||
|
||||
@media(prefers-color-scheme:dark){
|
||||
html{color:#FFFFFF;--soft:#404040;}
|
||||
body{background-color:#101010;}
|
||||
section{background-color:#181818;}
|
||||
|
||||
div.arrow.request.success{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEsMSBMMjUsMSBMMjksMTAgTDI1LDE5IEwxLDE5IiBmaWxsPSIjMTgxODE4IiBzdHJva2U9IiMwMDgwMDAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPgo=');}
|
||||
div.arrow.request.error{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEsMSBMMjUsMSBMMjksMTAgTDI1LDE5IEwxLDE5IiBmaWxsPSIjMTgxODE4IiBzdHJva2U9IiNDMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPgo=');}
|
||||
div.arrow.response.success{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI5LDE5IEw1LDE5IEwxLDEwIEw1LDEgTDI5LDEiIGZpbGw9IiMxODE4MTgiIHN0cm9rZT0iIzAwODAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+Cg==');}
|
||||
div.arrow.response.error{background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI5LDE5IEw1LDE5IEwxLDEwIEw1LDEgTDI5LDEiIGZpbGw9IiMxODE4MTgiIHN0cm9rZT0iI0MwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+Cg==');}
|
||||
}
|
||||
|
||||
@media(min-width:650px){
|
||||
div.box:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none;}
|
||||
div.box:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none;}
|
||||
div.box:not(:last-child):not(:first-child){border-left:none;border-right:none;}
|
||||
}
|
||||
|
||||
@media(max-width:650px){
|
||||
section.error-ctx{flex-direction:column;height:unset;}
|
||||
div.box:first-child{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:none;padding-top:1em;}
|
||||
div.box:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top:none;padding-bottom:1em;}
|
||||
div.box:not(:last-child):not(:first-child){border-top:none;border-bottom:none;}
|
||||
div.arrow.response{transform:rotate(90deg);top:-10px;left:calc(33.3333% - 22.5px);right:unset;}
|
||||
div.arrow.request{transform:rotate(90deg);bottom:-10px;right:calc(33.3333% - 22.5px);top:unset;}
|
||||
}
|
||||
Reference in New Issue
Block a user