254 lines
No EOL
10 KiB
HTML
254 lines
No EOL
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="darkreader-lock">
|
|
<title>web-proxy</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MSKNET/Fork-Fork-Awesome@d4e848e3f69322233482cdd40ab657087e177fbd/css/fork-awesome.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/KaKi87-2/brands.css@f8868e0e59ef52f5d944837f5c313d0f3cf2c103/Discord/Discord_Whitney.css">
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
.App {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--color-darker);
|
|
padding: var(--size-small);
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-areas:
|
|
'App__Url App__Url'
|
|
'App__IframeContainer App__Aside';
|
|
grid-gap: var(--size-small);
|
|
}
|
|
.App__Url {
|
|
display: flex;
|
|
}
|
|
.App__Url__Label {
|
|
flex: 1;
|
|
}
|
|
.App__Url__Label__Input,
|
|
.App__Url__Button,
|
|
.App__IframeContainer,
|
|
.App__Aside {
|
|
color: var(--color-light);
|
|
background-color: var(--color-dark);
|
|
}
|
|
.App__Url__Label__Input {
|
|
outline: none;
|
|
border-top-left-radius: var(--size-smaller);
|
|
border-bottom-left-radius: var(--size-smaller);
|
|
width: 100%;
|
|
padding: var(--size-smaller);
|
|
}
|
|
.App__Url__Label__Input:hover,
|
|
.App__Url__Label__Input:focus-visible {
|
|
color: var(--color-lighter);
|
|
background-color: var(--color-medium);
|
|
}
|
|
.App__Url__Button {
|
|
border-top-right-radius: var(--size-smaller);
|
|
border-bottom-right-radius: var(--size-smaller);
|
|
width: var(--size-bigger);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.App__Url__Button:hover,
|
|
.App__Aside__List__Item:hover {
|
|
color: var(--color-dark);
|
|
background-color: var(--color-light);
|
|
}
|
|
.App__Url__Button--loading {
|
|
cursor: not-allowed;
|
|
}
|
|
.App__Url__Button--loading .App__Url__Button__Submit,
|
|
.App__Url__Button:not(.App__Url__Button--loading) .App__Url__Button__Loading {
|
|
display: none;
|
|
}
|
|
.App__IframeContainer,
|
|
.App__IframeContainer__Iframe,
|
|
.App__Aside {
|
|
border-radius: var(--size-smaller);
|
|
}
|
|
.App__IframeContainer {
|
|
padding: var(--size-smaller);
|
|
}
|
|
.App__IframeContainer__Iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.App__Aside__List {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.App__Aside__List__Item:first-child {
|
|
border-top-left-radius: var(--size-smaller);
|
|
border-top-right-radius: var(--size-smaller);
|
|
}
|
|
.App__Aside__List__Item__Button {
|
|
width: var(--size-bigger);
|
|
height: var(--size-bigger);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.App__Aside__List__Item__Button--active,
|
|
.App__Aside__List__Item__Button--inactive {
|
|
color: var(--color-lighter);
|
|
}
|
|
.App__Aside__List__Item__Button--active {
|
|
background-color: var(--color-primary);
|
|
}
|
|
.App__Aside__List__Item__Button--inactive {
|
|
background-color: var(--color-warning);
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
.App {
|
|
padding: var(--size-smaller);
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr auto;
|
|
grid-template-areas:
|
|
'App__Url'
|
|
'App__IframeContainer'
|
|
'App__Aside';
|
|
}
|
|
.App__Aside__List {
|
|
flex-direction: row;
|
|
}
|
|
.App__Aside__List__Item:first-child {
|
|
border-top-right-radius: 0;
|
|
border-bottom-left-radius: var(--size-smaller);
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
window.addEventListener(
|
|
'DOMContentLoaded',
|
|
() => {
|
|
let
|
|
isEruda,
|
|
isCss,
|
|
isJs;
|
|
const
|
|
formElement = document.querySelector('.App__Url'),
|
|
inputElement = document.querySelector('.App__Url__Label__Input'),
|
|
buttonElement = document.querySelector('.App__Url__Button'),
|
|
iframeElement = document.querySelector('.App__IframeContainer__Iframe'),
|
|
erudaButtonElement = document.querySelector('.App__Aside__List__Item__Button--eruda'),
|
|
cssButtonElement = document.querySelector('.App__Aside__List__Item__Button--css'),
|
|
jsButtonElement = document.querySelector('.App__Aside__List__Item__Button--js');
|
|
formElement.addEventListener(
|
|
'submit',
|
|
event => {
|
|
event.preventDefault();
|
|
if(buttonElement.classList.contains('App__Url__Button--loading')) return;
|
|
const
|
|
{
|
|
value: url
|
|
} = inputElement,
|
|
data = {
|
|
url,
|
|
isEruda,
|
|
isCss,
|
|
isJs
|
|
};
|
|
iframeElement.setAttribute('src', `/${btoa(JSON.stringify(data))}`);
|
|
}
|
|
);
|
|
iframeElement.addEventListener(
|
|
'load',
|
|
() => {
|
|
buttonElement.classList.remove('App__Url__Button--loading');
|
|
const {
|
|
url
|
|
} = JSON.parse(atob(iframeElement.contentWindow.location.pathname.slice(1)));
|
|
inputElement.value = url;
|
|
iframeElement.contentWindow.addEventListener(
|
|
'beforeunload',
|
|
() => {
|
|
buttonElement.classList.add('App__Url__Button--loading');
|
|
}
|
|
);
|
|
}
|
|
);
|
|
erudaButtonElement.addEventListener('click', () => isEruda = erudaButtonElement.classList.toggle('App__Aside__List__Item__Button--active'));
|
|
cssButtonElement.addEventListener('click', () => isCss = !cssButtonElement.classList.toggle('App__Aside__List__Item__Button--inactive'));
|
|
jsButtonElement.addEventListener('click', () => isJs = !jsButtonElement.classList.toggle('App__Aside__List__Item__Button--inactive'));
|
|
}
|
|
);
|
|
</script>
|
|
</head>
|
|
<body class="App">
|
|
<form
|
|
class="App__Url"
|
|
style="grid-area: App__Url"
|
|
>
|
|
<label
|
|
class="App__Url__Label"
|
|
><input
|
|
class="App__Url__Label__Input"
|
|
type="url"
|
|
></label>
|
|
<button class="App__Url__Button App__Url__Button--loading">
|
|
<i class="App__Url__Button__Submit fa fa-arrow-right"></i>
|
|
<i class="App__Url__Button__Loading fa fa-circle-o-notch fa-spin fa-fw"></i>
|
|
</button>
|
|
</form>
|
|
<main
|
|
class="App__IframeContainer"
|
|
style="grid-area: App__IframeContainer"
|
|
><iframe
|
|
class="App__IframeContainer__Iframe"
|
|
src="/eyJ1cmwiOiJodHRwczovL2V4YW1wbGUuY29tIn0="
|
|
></iframe></main>
|
|
<aside
|
|
class="App__Aside"
|
|
style="grid-area: App__Aside"
|
|
><nav><ul
|
|
class="App__Aside__List"
|
|
>
|
|
<li
|
|
class="App__Aside__List__Item"
|
|
><a
|
|
class="App__Aside__List__Item__Button"
|
|
title="About"
|
|
href="https://git.kaki87.net/KaKi87/web-proxy"
|
|
target="_blank"
|
|
><i
|
|
class="fa fa-info"
|
|
></i></a></li>
|
|
<li
|
|
class="App__Aside__List__Item"
|
|
><button
|
|
class="App__Aside__List__Item__Button App__Aside__List__Item__Button--eruda"
|
|
title="Toggle Eruda DevTools"
|
|
><i
|
|
class="fa fa-code"
|
|
></i></button></li>
|
|
<li
|
|
class="App__Aside__List__Item"
|
|
><button
|
|
class="App__Aside__List__Item__Button App__Aside__List__Item__Button--css"
|
|
title="Toggle CSS"
|
|
><i
|
|
class="fa fa-css3"
|
|
></i></button></li>
|
|
<li
|
|
class="App__Aside__List__Item"
|
|
><button
|
|
class="App__Aside__List__Item__Button App__Aside__List__Item__Button--js"
|
|
title="Toggle JS"
|
|
><i
|
|
class="fa fa-javascript"
|
|
></i></button></li>
|
|
</ul></nav></aside>
|
|
</body>
|
|
</html> |