mirror of
https://github.com/QuiteAFancyEmerald/Holy-Unblocker.git
synced 2025-05-12 11:30:01 -04:00
add: some wip style changes
This commit is contained in:
Quite A Fancy Emerald
parent
618b29934c
commit
b0744f6505
4 changed files with 182 additions and 35 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"title": "HU LTS",
|
"title": "HU LTS",
|
||||||
"host": "0.0.0.0",
|
"host": "0.0.0.0",
|
||||||
"minifyScripts": true,
|
"minifyScripts": false,
|
||||||
"randomizeIdentifiers": true,
|
"randomizeIdentifiers": true,
|
||||||
"production": false
|
"production": false
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -389,7 +389,7 @@ details[open] summary {
|
||||||
background-image: url('/assets/svg/new.svg');
|
background-image: url('/assets/svg/new.svg');
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
image-rendering: -webkit-optimize-contrast; /* Better SVG rendering */
|
image-rendering: -webkit-optimize-contrast;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -527,9 +527,9 @@ details[open] summary {
|
||||||
font-family: 'Figtree', sans-serif;
|
font-family: 'Figtree', sans-serif;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
backdrop-filter: blur(10px); /* Frosted glass effect */
|
backdrop-filter: blur(10px);
|
||||||
-webkit-backdrop-filter: blur(10px); /* For Safari */
|
-webkit-backdrop-filter: blur(10px);
|
||||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add some shadow for depth */
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-header {
|
.settings-header {
|
||||||
|
|
@ -970,10 +970,10 @@ input[type='text'] {
|
||||||
.no-select,
|
.no-select,
|
||||||
.comment,
|
.comment,
|
||||||
.mac-content br {
|
.mac-content br {
|
||||||
user-select: none; /* Prevent text selection */
|
user-select: none;
|
||||||
-webkit-user-select: none; /* For Safari */
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none; /* For Firefox */
|
-moz-user-select: none;
|
||||||
-ms-user-select: none; /* For Internet Explorer/Edge */
|
-ms-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mac-content {
|
.mac-content {
|
||||||
|
|
@ -1330,8 +1330,8 @@ iner .splashstrokeheader {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
backdrop-filter: blur(10px); /* Frosted glass effect */
|
backdrop-filter: blur(10px);
|
||||||
-webkit-backdrop-filter: blur(10px); /* For Safari */
|
-webkit-backdrop-filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-card::after {
|
.box-card::after {
|
||||||
|
|
@ -1615,18 +1615,35 @@ iner .splashstrokeheader {
|
||||||
/* -----------------------------------------------
|
/* -----------------------------------------------
|
||||||
/* Proxy Pages
|
/* Proxy Pages
|
||||||
/* ----------------------------------------------- */
|
/* ----------------------------------------------- */
|
||||||
|
.pr-logo {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 310px;
|
||||||
|
height: auto;
|
||||||
|
margin: 0 auto 30px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr-tippy {
|
||||||
|
color: rgb(255, 136, 142);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advanced-settings, label {
|
||||||
|
vertical-align: auto;
|
||||||
|
margin-inline-end: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.pr-form {
|
.pr-form {
|
||||||
|
margin-top: 30px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pr-form input {
|
.pr-form input {
|
||||||
background-color: var(--nord0);
|
background-color: var(--nord0);
|
||||||
border: 1px solid var(--nord0);
|
border: 1px solid var(--nord1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pr-form input,
|
.pr-form input,
|
||||||
.pr-form a {
|
.pr-form a,
|
||||||
|
.pr-form select {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
@ -1656,6 +1673,7 @@ iner .splashstrokeheader {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: var(--nord0);
|
background-color: var(--nord0);
|
||||||
|
border: 1px solid var(--nord1) !important;
|
||||||
transition: 0.3s ease-in-out;
|
transition: 0.3s ease-in-out;
|
||||||
-webkit-transition: 0.3s ease-in-out;
|
-webkit-transition: 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
@ -1664,6 +1682,40 @@ iner .splashstrokeheader {
|
||||||
background-color: var(--nord2);
|
background-color: var(--nord2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#wisp-box .table-header {
|
||||||
|
display: flex;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wisp-box .table-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 8px;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wisp-box .table-cell {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wisp-box .table-cell:nth-child(1) {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wisp-box .table-cell:nth-child(2) {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wisp-box .table-cell:nth-child(3) {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wisp-box .table-cell:nth-child(4) {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
/* Used on the Games and YouTube pages. */
|
/* Used on the Games and YouTube pages. */
|
||||||
.responsive-fix {
|
.responsive-fix {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
|
||||||
|
|
@ -98,34 +98,101 @@
|
||||||
<script src="
|
<script src="
|
||||||
https://cdn.jsdelivr.net/npm/tsparticles@3.5/tsparticles.bundle.min.js
|
https://cdn.jsdelivr.net/npm/tsparticles@3.5/tsparticles.bundle.min.js
|
||||||
"></script>
|
"></script>
|
||||||
|
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
||||||
|
<script src="https://unpkg.com/tippy.js@6"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- IMPORTANT-HUCOOKINGINSERT-DONOTDELETE -->
|
<!-- IMPORTANT-HUCOOKINGINSERT-DONOTDELETE -->
|
||||||
<div id="header" class="fullwidth"><!--HEADER--></div>
|
<div id="header" class="fullwidth"><!--HEADER--></div>
|
||||||
<div id="particles-js" class="fullwidth"></div>
|
<div id="particles-js" class="fullwidth"></div>
|
||||||
|
<div data-aos="fade-right" class="hero-grid-container">
|
||||||
|
<div class="box-hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="proxy-header text-center">
|
||||||
|
<img class="pr-logo" src="/assets/img/scramjet.png" alt="Scramjet Web Proxy" />
|
||||||
|
<p>
|
||||||
|
Scramjet is a web proxy designed with performance and security in mind to evade internet censorship,<br>bypass arbitrary web browser restrictions and innovate web proxy technologies.<br><br>
|
||||||
|
This allows you to browse various websites with higher level of privacy<br> and access popular resources like Discord, GeForce NOW, Twitter and YouTube on restricted networks.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="proxy-form text-center">
|
||||||
|
<div id="pr-sj" class="pr-form">
|
||||||
|
<select id="engine" class="pr-button glowbutton">
|
||||||
|
<option value="google">Google</option>
|
||||||
|
<option value="duckduckgo">DuckDuckGo</option>
|
||||||
|
<option value="bing">Bing</option>
|
||||||
|
<option value="brave">Brave</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
spellcheck="false"
|
||||||
|
autocomplete="off"
|
||||||
|
placeholder="Type a URL here or enter a search query!"
|
||||||
|
id="search-input"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<a href="#" class="pr-button glowbutton pr-go2" id="search-btn">SEARCH</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Advanced Settings ▼</h3>
|
||||||
|
<div id="settings-panel" class="pr-settings">
|
||||||
|
<div class="advanced-settings"></div>
|
||||||
|
<label>
|
||||||
|
Tor Browsing Mode <span class="pr-tippy" data-tippy-content="Choose your Tor browsing mode. This allows you to use Tor routing in any browser. TLDR: You can access any .onion link in any browser.">(?) </span>
|
||||||
|
<select>
|
||||||
|
<option value="off">Off</option>
|
||||||
|
<option value="safe">Enabled</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Hide Ads <span class="pr-tippy" data-tippy-content="Enable or disable ad blocking.">(?) </span>
|
||||||
|
<select>
|
||||||
|
<option value="off">Off</option>
|
||||||
|
<option value="safe">Enabled</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Region Selection <span class="pr-tippy" data-tippy-content="Enable or select regional proxies.">(?) </span>
|
||||||
|
<select>
|
||||||
|
<option value="off">Off</option>
|
||||||
|
<option value="safe">Enabled</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="wisp-box">
|
||||||
|
<p class="cseltitle">Wisp Protocol Transport <span class="pr-tippy" data-tippy-content="Wisp is designed to be a low-overhead, easy to implement protocol for proxying multiple TCP sockets over a single websocket connection. TLDR: Selecting a specific option will provide a focus on either speed, security or both at once. Just options for the user to select when utilizing Scramjet.">(?) </span></p>
|
||||||
|
<div class="box-hero radio-group" id="uv-transport-list">
|
||||||
|
<label>
|
||||||
|
<p>
|
||||||
|
Libcurl <span class="pr-tippy" data-tippy-content="Libcurl transport focuses on full TLS encryption but has slightly slower speeds than Epoxy. [ALTERNATIVE/FIREFOX DEFAULT]">(?) </span>
|
||||||
|
<span class="default-badge">Cross-Browser/Secure (Firefox)</span>
|
||||||
|
</p>
|
||||||
|
<input type="radio" name="uv-transport" value="libcurl" checked />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<p>
|
||||||
|
Epoxy <span class="pr-tippy" data-tippy-content="Expoxy allows you to make requests that bypass CORS without compromising security by running SSL/TLS inside webassembly with incredible performance. [HIGHLY RECOMMEND AND OPTIMIZED FOR SPEED].">(?) </span>
|
||||||
|
<span class="bare-badge">Fastest/Secure (Chromium, Apple)</span>
|
||||||
|
</p>
|
||||||
|
<input type="radio" name="uv-transport" value="epoxy" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<p>Bare <span class="pr-tippy" data-tippy-content="Bare is NOT recommend and a last resort for unsupported sites.">(?) </span>
|
||||||
|
<span class="beta-badge">Least Secure (All)</span></p>
|
||||||
|
<input type="radio" name="uv-transport" value="bare" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div id="mainbody" class="fullwidth">
|
<div id="mainbody" class="fullwidth">
|
||||||
<div class="ad" id="ad-left"></div>
|
|
||||||
<div class="ad" id="ad-right"></div>
|
|
||||||
<!-- IMPORTANT-HUCOOKINGINSERT-DONOTDELETE -->
|
<!-- IMPORTANT-HUCOOKINGINSERT-DONOTDELETE -->
|
||||||
<div class="box box-medium text-center textm">
|
<div class="box box-medium text-center textm">
|
||||||
<h1 class="bigtitle">Scramjet (Beta)</h1>
|
|
||||||
<p>
|
|
||||||
Scramjet is an experimental interception based web proxy that aims to
|
|
||||||
be the successor to Ultraviolet.<br>
|
|
||||||
</p>
|
|
||||||
<div id="pr-sj" class="pr-form">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
spellcheck="false"
|
|
||||||
autocomplete="off"
|
|
||||||
placeholder="Search or enter in a target site!"
|
|
||||||
/>
|
|
||||||
<a href="#" style="display: none" class="pr-button glowbutton pr-go1"
|
|
||||||
>Stea­lth</a
|
|
||||||
>
|
|
||||||
<a href="#" class="pr-button glowbutton pr-go2">Stea­lth</a>
|
|
||||||
</div>
|
|
||||||
<h3>
|
<h3>
|
||||||
N<wbr />etwo<wbr />rk fi<wbr />x i<wbr />f erro<wbr />rs occ<wbr />urs
|
N<wbr />etwo<wbr />rk fi<wbr />x i<wbr />f erro<wbr />rs occ<wbr />urs
|
||||||
or bla<wbr />nk pa<wbr />ge:
|
or bla<wbr />nk pa<wbr />ge:
|
||||||
|
|
@ -162,6 +229,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="footer" class="fullwidth"><!--FOOTER--></div>
|
<div id="footer" class="fullwidth"><!--FOOTER--></div>
|
||||||
<!-- IMPORTANT-HUCOOKINGINSERT-DONOTDELETE -->
|
<!-- IMPORTANT-HUCOOKINGINSERT-DONOTDELETE -->
|
||||||
|
<script>
|
||||||
|
tippy('.pr-tippy', {
|
||||||
|
delay: 50,
|
||||||
|
animateFill: true,
|
||||||
|
placement: 'bottom'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
<script src="/scram/scramjet.controller.js"></script>
|
<script src="/scram/scramjet.controller.js"></script>
|
||||||
<script src="assets/js/common.js"></script>
|
<script src="assets/js/common.js"></script>
|
||||||
<script src="assets/js/csel.js"></script>
|
<script src="assets/js/csel.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,9 @@
|
||||||
<script src="
|
<script src="
|
||||||
https://cdn.jsdelivr.net/npm/tsparticles@3.5/tsparticles.bundle.min.js
|
https://cdn.jsdelivr.net/npm/tsparticles@3.5/tsparticles.bundle.min.js
|
||||||
"></script>
|
"></script>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/backdrop.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-away.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -59,10 +62,28 @@
|
||||||
customizable blacklist settings, leak prevention mechanisms, and
|
customizable blacklist settings, leak prevention mechanisms, and
|
||||||
advanced security measures.
|
advanced security measures.
|
||||||
</h2>
|
</h2>
|
||||||
|
<h2 class="box-description">
|
||||||
|
Select a proxy service below to get started!
|
||||||
|
</h2>
|
||||||
<div class="box-button-container">
|
<div class="box-button-container">
|
||||||
<a href="/scramjet" class="box-button">Scramjet (Beta)</a>
|
<a id="sjtooltip" href="/scramjet" class="box-button">Scramjet (BETA)</a>
|
||||||
<a href="/ultraviolet" class="box-button">Ultraviolet</a>
|
<a id="uvtooltip" href="/ultraviolet" class="box-button">Ultraviolet</a>
|
||||||
<a href="/rammerhead" class="box-button">Rammerhead</a>
|
<a id="rhtooltip" href="/rammerhead" class="box-button">Rammerhead</a>
|
||||||
|
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
||||||
|
<script src="https://unpkg.com/tippy.js@6"></script>
|
||||||
|
<script>
|
||||||
|
const tooltipContent = {
|
||||||
|
sjtooltip: 'Scramjet [Recommended]: Fast, secure, and frequently updated.',
|
||||||
|
uvtooltip: 'Ultraviolet [Fallback]: Popular, but use as fallback for CAPTCHA support.',
|
||||||
|
rhtooltip: 'Rammerhead [Optional]: Not secure and has many leaks. Use as alternative fallback.',
|
||||||
|
};
|
||||||
|
|
||||||
|
tippy.setDefaultProps({delay: 50, animateFill: true, placement: 'bottom'});
|
||||||
|
|
||||||
|
tippy('#sjtooltip', { content: tooltipContent.sjtooltip });
|
||||||
|
tippy('#uvtooltip', { content: tooltipContent.uvtooltip });
|
||||||
|
tippy('#rhtooltip', { content: tooltipContent.rhtooltip });
|
||||||
|
</script>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-image-container">
|
<div class="box-image-container">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue