RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added themes, Massive UI improvements in settings

Browse source
This commit is contained in:
Green! 2022-06-13 22:36:07 -04:00
parent 2b2d199596
commit c566989c8b
9 changed files with 401 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored
View file

Binary file not shown.

BIN
static/.DS_Store vendored
View file

Binary file not shown.

16
static/index.html
View file

@ -6,6 +6,7 @@
<link rel="icon" type="image/x-icon" href="/images/logo.png"> <link rel="icon" type="image/x-icon" href="/images/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheets --> <!-- Stylesheets -->
<script src="resources/options.js"></script>
<link rel="stylesheet" href="style/master.css"> <link rel="stylesheet" href="style/master.css">
<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/main.css">
<!-- Embed --> <!-- Embed -->
@ -21,21 +22,20 @@
<script src="uv/uv.bundle.js"></script> <script src="uv/uv.bundle.js"></script>
<script src="uv/uv.config.js"></script> <script src="uv/uv.config.js"></script>
<div id="navbar"> <div id="navbar">
<img src='/images/logo.png' id="thumbImg" style='height: 90%; margin-left: 5%; border-radius: 5px; '> <img src='images/logo.png' id="thumbImg" style='height: 90%; margin-left: 5%; border-radius: 5px; '>
<h1 style='margin-left: .5%; font-family: "Roboto"; color: #4de0fa'>nebula</h1> <h1 class="nebHeader" style='margin-left: .5%; font-family: "Roboto"; color: #4de0fa'>nebula.</h1>
<ul> <ul>
<!--
<li> <li>
<a onclick="href = '/go/' + __uv$config.encodeUrl('https://discord.gg/neb')">C <ubr>hat </a> <a class="a-navbutton" onclick="href = '/go/' + __uv$config.encodeUrl('https://hamburgerham.tk/games/')">Games</a>
</li> </li>
-->
<li> <li>
<a href="options">Settings</a> <a class="a-navbutton" href="options">Settings</a>
</li> </li>
<li> <li>
<a href="https://discord.gg/bZQxg6SkVp">Need Support?</a> <a class="a-navbutton" href="https://discord.gg/bZQxg6SkVp">Need Support?</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -44,7 +44,7 @@
<script src="resources/deviceHandler.js"></script> <script src="resources/deviceHandler.js"></script>
<div id="content"> <div id="content">
<form class="url" action="" method="POST" id="unblocker-form"> <form class="url" action="" method="POST" id="unblocker-form">
<input type="text" id="url" name="url" autocomplete="off" placeholder="Explore the web freely"> <input class="omnibox" type="text" id="url" name="url" autocomplete="off" placeholder="Explore the web freely">
</form> </form>
</div> </div>

BIN
static/mobile/.DS_Store vendored
View file

Binary file not shown.

49
static/options/index.html
View file

@ -10,6 +10,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" href="../style/master.css"> <link rel="stylesheet" href="../style/master.css">
<link rel="stylesheet" href="../style/main.css"> <link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/options.css"> <link rel="stylesheet" href="../style/options.css">
@ -25,34 +26,43 @@
<body> <body>
<!-- Scripts --> <!-- Scripts -->
<script src="../uv/uv.bundle.js"></script> <script src="../uv/uv.bundle.js"></script>
<script src="../uv/uv.config.js"></script> <script src="../uv/uv.config.js"></script>
<div>
</div>
<div id="navbar" style='background: none;'>
<div> <div>
</div> </div>
<div class="container">
<div id="navbar" style='background: none;'>
<div id="notifhere">
</div> </div>
<div class="setting">
<div onclick="window.location ='/';" class="bk-btn"> <div onclick="window.location ='/';" class="bk-btn">
<div onclick="window.location ='/';" class="bk-btn-triangle"></div> <div onclick="window.location ='/';" class="bk-btn-triangle"></div>
<div onclick="window.location ='/';" class="bk-btn-bar"></div> <div onclick="window.location ='/';" class="bk-btn-bar"></div>
</div> </div>
<img src='../images/logo.png' id="thumbImg" style='height: 90%; margin-left: 2%; border-radius: 5px; '>
<h1 class="nebHeader" style='margin-left: .5%; font-family: "Roboto"; color: #4de0fa'>nebula.</h1>
</div>
<div class="setting">
<div class="settings-cont"> <div class="settings-cont">
<p class="name"> Stealth Mode <b class='new-tag'> NEW </b> </p> <p class="name"> Stealth Mode</p>
<p class="description"> Prevents teachers, administrators and analytic collection extensions from gathering information, viewing your screen via Browser extension, or browser recording (history) </p> <p class="description">Stops extensions from peeping</p>
<input class="setting-input" id="undefined" type="checkbox" onclick="saveIc();toggleNoGG()"> <input class="setting-input" id="undefined" type="checkbox" onclick="saveIc();toggleNoGG()">
<label for="undefined" class="toogle-button"></label> <label for="undefined" class="toogle-button"></label>
</div> </div>
</div> </div>
<div class="settings-cont" style="display: inline-block;"> <div class="settings-cont">
<p class="name"> Proxy <b class='new-tag'> NEW </b> </p> <p class="name"> Proxy <b class='new-tag'> NEW </b> </p>
<p class="description"> Choose the proxy that fits you! </p> <p class="description"> Choose the proxy that fits you! </p>
<p class="expiramental"><b>This feature is extremely experimental </b></p>
<span class="custom-dropdown big"> <span class="custom-dropdown big">
<a onclick="unsavedChanges();"> <select id="proxySwitcher"> <a onclick="unsavedChanges();"> <select class="dropdown" id="proxySwitcher">
<option value="uv">UltraViolet</option> <option value="uv">UltraViolet</option>
<option value="cyclone">Cyclone</option> <option value="cyclone">Cyclone</option>
</select> </select>
@ -60,7 +70,24 @@
</span> </span>
<button onclick="saveIc();switchProxy()" class="button-save"> Save! </button> <button onclick="saveIc();switchProxy()" class="button-save"> Save! </button>
<p class="expiramental"><b>This feature is extremely experimental </b></p>
</div>
<div class="settings-cont">
<p class="name"> Theme <b class='new-tag'> NEW </b> </p>
<p class="description"> Choose from our themes so your eyes don't hate us. </p>
<span class="custom-dropdown big">
<a onclick="unsavedChanges();"> <select class="dropdown" id="themeSwitcher">
<option value="dark">Shades</option>
<option value="light">Blizzard</option>
<option value="hacker">Hacker</option>
</select>
</a>
</span>
<button onclick="saveIc();switchTheme();" class="button-save"> Save! </button>
</div> </div>
@ -87,7 +114,7 @@
site: 'AZa75ZyiRRZ' site: 'AZa75ZyiRRZ'
}); });
</script> </script>
</div>
</body> </body>

338
static/resources/options.js
View file

@ -21,13 +21,13 @@ function saveIc() {
var notification = ` var notification = `
<div class="notification-container" id="notification-container"> <div class="notification-container" id="notification-container">
<div class="notification notification-success"> <div class="notification notification-success">
<strong>Success!</strong> Your settings have been saved! <strong>Success!</strong> Your settings have been saved - Reloading.
</div> </div>
</div> </div>
`; `;
document.getElementById('navbar').innerHTML = notification document.getElementById('notifhere').innerHTML = notification
setTimeout(() => { setTimeout(() => {
var NotificationOBJ = document.getElementById('notif') var NotificationOBJ = document.getElementById('notifhere')
}, 2000); }, 2000);
}; };
@ -40,29 +40,13 @@ function unsavedChanges() {
</div> </div>
</div> </div>
`; `;
document.getElementById('navbar').innerHTML = notification document.getElementById('notifhere').innerHTML = notification
setTimeout(() => { setTimeout(() => {
var NotificationOBJ = document.getElementById('notif') var NotificationOBJ = document.getElementById('notifhere')
}, 2000); }, 2000);
}; };
// Update the CheckBox to match the settings
window.onload = function() {
console.log("Current Settings: ")
console.log("NoGG = ", localStorage.getItem('nogg'))
if (localStorage.getItem('nogg') == 'on') {
setTimeout(() => {
var item = document.getElementById("undefined");
document.getElementById("undefined").checked = true;
}, 600);
}
var selecter = document.getElementById("proxySwitcher");
var storedChoice = localStorage.getItem('proxy');
selecter.value = storedChoice;
};
@ -75,3 +59,315 @@ function switchProxy() {
console.log(selectedOption) console.log(selectedOption)
} }
function switchTheme() {
var selecter = document.getElementById("themeSwitcher");
var selectedOption = selecter.value
localStorage.setItem("theme", selectedOption);
var storedChoice = localStorage.getItem('theme');
console.log(selectedOption)
if (storedChoice == 'light') {
//LIGHT
console.log("loaded theme:", storedChoice);
document.body.style.backgroundColor = " #d8d8d8";
const descriptions = document.getElementsByClassName('description');
for (const element of descriptions) {
element.style.color = "#000000";
}
const names = document.getElementsByClassName('name');
for (const element of names) {
element.style.color = "#000000";
}
const dropdowns = document.getElementsByClassName('dropdown');
for (const element of dropdowns) {
element.style.backgroundColor = "#606b69";
}
const buttons = document.getElementsByClassName('button-save');
for (const element of buttons) {
element.style.backgroundColor = "#606b69";
}
const switches = document.getElementsByClassName('toogle-button');
for (const element of switches) {
element.style.backgroundColor = "#606b69";
}
//DARK
} else if (storedChoice == 'dark') {
console.log("loaded theme:", storedChoice);
document.body.style.backgroundColor = "#191724";
const descriptions = document.getElementsByClassName('description');
for (const element of descriptions) {
element.style.color = "#6e6a86";
}
const names = document.getElementsByClassName('name');
for (const element of names) {
element.style.color = "#e0def4";
}
const dropdowns = document.getElementsByClassName('dropdown');
for (const element of dropdowns) {
element.style.backgroundColor = "#1abc9c";
}
const buttons = document.getElementsByClassName('button-save');
for (const element of buttons) {
element.style.backgroundColor = "#1abc9c";
}
const switches = document.getElementsByClassName('toogle-button');
for (const element of switches) {
element.style.backgroundColor = "#1abc9c";
}
document.getElementById('navbar').style.backgroundColor = "#26233a";
var storedChoice = localStorage.getItem('theme');
} else if (storedChoice == 'hacker') {
console.log("loaded theme:", storedChoice);
document.body.style.backgroundColor = "#000";
const descriptions = document.getElementsByClassName('description');
for (const element of descriptions) {
element.style.color = "#00ff0b";
}
const names = document.getElementsByClassName('name');
for (const element of names) {
element.style.color = "#00ff0b";
}
const dropdowns = document.getElementsByClassName('dropdown');
for (const element of dropdowns) {
element.style.backgroundColor = "#00ff0b";
}
const buttons = document.getElementsByClassName('button-save');
for (const element of buttons) {
element.style.backgroundColor = "#00ff0b";
}
const switches = document.getElementsByClassName('toogle-button');
for (const element of switches) {
element.style.backgroundColor = "#00ff0b";
}
const boxes = document.getElementsByClassName('settings-cont');
for (const element of boxes) {
element.style.border = "2px solid rgb(0, 255, 11)";
}
const newTags = document.getElementsByClassName('new-tag');
for (const element of newTags) {
element.style.color = "#00ff0b";
}
document.getElementById('navbar').style.backgroundColor = "#000";
const navbuttons = document.getElementsByClassName('a-navbutton');
for (const element of navbuttons) {
element.style.color = "#00ff0b";
}
const nebheader = document.getElementsByClassName('nebHeader');
for (const element of nebheader) {
element.style.color = "#00ff0b";
}
const Obox = document.getElementsByClassName('omnibox');
for (const element of Obox) {
element.style.backgroundColor = "black";
}
};
location.reload()
};
function getOption(option) {
console.log(localStorage.getItem(option));
}
window.onload = function() {
// Update the CheckBox to match the settings
console.log("Current Settings: ")
console.log("NoGG = ", localStorage.getItem('nogg'))
if (window.location.pathname == '/static/options/' || window.location.pathname == 'options/' || window.location.pathname == '/options/') {
if (localStorage.getItem('nogg') == 'on') {
setTimeout(() => {
var item = document.getElementById("undefined");
document.getElementById("undefined").checked = true;
}, 600);
}
// Update the front end to match option localstorage
var selecter = document.getElementById("proxySwitcher");
var storedChoice = localStorage.getItem('proxy');
selecter.value = storedChoice;
// ThemeSet
var themeSelector = document.getElementById("themeSwitcher");
var storedTheme = localStorage.getItem('theme');
themeSelector.value = storedTheme;
}
if (window.location.pathname == '/static/options/' || window.location.pathname == 'options/' || window.location.pathname == '/options/') {
if (storedTheme == 'light') {
console.log("loaded theme:", storedTheme);
document.body.style.backgroundColor = " #d8d8d8";
const descriptions = document.getElementsByClassName('description');
for (const element of descriptions) {
element.style.color = "#000000";
}
const names = document.getElementsByClassName('name');
for (const element of names) {
element.style.color = "#000000";
}
const dropdowns = document.getElementsByClassName('dropdown');
for (const element of dropdowns) {
element.style.backgroundColor = "#606b69";
}
const buttons = document.getElementsByClassName('button-save');
for (const element of buttons) {
element.style.backgroundColor = "#606b69";
}
const switches = document.getElementsByClassName('toogle-button');
for (const element of switches) {
element.style.backgroundColor = "#606b69";
}
} else if (storedTheme == 'dark') {
console.log("loaded theme:", storedTheme);
document.body.style.backgroundColor = "#191724";
const descriptions = document.getElementsByClassName('description');
for (const element of descriptions) {
element.style.color = "#6e6a86";
}
const names = document.getElementsByClassName('name');
for (const element of names) {
element.style.color = "#e0def4";
}
const dropdowns = document.getElementsByClassName('dropdown');
for (const element of dropdowns) {
element.style.backgroundColor = "#1abc9c";
}
const buttons = document.getElementsByClassName('button-save');
for (const element of buttons) {
element.style.backgroundColor = "#1abc9c";
}
const switches = document.getElementsByClassName('toogle-button');
for (const element of switches) {
element.style.backgroundColor = "#1abc9c";
}
document.getElementById('navbar').style.backgroundColor = "#26233a";
} else if (storedTheme == 'hacker') {
console.log("loaded theme:", storedChoice);
document.body.style.backgroundColor = "#000";
const descriptions = document.getElementsByClassName('description');
for (const element of descriptions) {
element.style.color = "#00ff0b";
}
const names = document.getElementsByClassName('name');
for (const element of names) {
element.style.color = "#00ff0b";
}
const dropdowns = document.getElementsByClassName('dropdown');
for (const element of dropdowns) {
element.style.backgroundColor = "#00ff0b";
}
const buttons = document.getElementsByClassName('button-save');
for (const element of buttons) {
element.style.backgroundColor = "#00ff0b";
}
const switches = document.getElementsByClassName('toogle-button');
for (const element of switches) {
element.style.backgroundColor = "#00ff0b";
}
const boxes = document.getElementsByClassName('settings-cont');
for (const element of boxes) {
element.style.border = "2px solid rgb(0, 255, 11)";
}
const newTags = document.getElementsByClassName('new-tag');
for (const element of newTags) {
element.style.color = "#00ff0b";
}
document.getElementById('navbar').style.backgroundColor = "#000";
const navbuttons = document.getElementsByClassName('a-navbutton');
for (const element of navbuttons) {
element.style.color = "#00ff0b";
}
const nebheader = document.getElementsByClassName('nebHeader');
for (const element of nebheader) {
element.style.color = "#00ff0b";
}
const Obox = document.getElementsByClassName('omnibox');
for (const element of Obox) {
element.style.backgroundColor = "black";
}
};
};
var storedTheme = localStorage.getItem('theme');
if (storedTheme == "light") {
document.getElementById('navbar').style.backgroundColor = "#a2a2a2";
document.body.style.backgroundColor = " #d8d8d8";
const navbuttons = document.getElementsByClassName('a-navbutton');
for (const element of navbuttons) {
element.style.color = "#000000";
}
const nebheader = document.getElementsByClassName('nebHeader');
for (const element of nebheader) {
element.style.color = "#000000";
}
const Obox = document.getElementsByClassName('omnibox');
for (const element of Obox) {
element.style.backgroundColor = "#000000";
}
const stamp = document.getElementsByClassName('stamp');
for (const element of stamp) {
element.style.color = "#000";
}
} else if (storedTheme == 'dark') {
document.getElementById('navbar').style.backgroundColor = "#26233a";
document.body.style.backgroundColor = "#191724";
} else if (storedTheme == 'hacker') {
console.log("loaded theme:", storedChoice);
document.body.style.backgroundColor = "#000";
const descriptions = document.getElementsByClassName('description');
for (const element of descriptions) {
element.style.color = "#00ff0b";
}
const names = document.getElementsByClassName('name');
for (const element of names) {
element.style.color = "#00ff0b";
}
const dropdowns = document.getElementsByClassName('dropdown');
for (const element of dropdowns) {
element.style.backgroundColor = "#00ff0b";
}
const buttons = document.getElementsByClassName('button-save');
for (const element of buttons) {
element.style.backgroundColor = "#00ff0b";
}
const switches = document.getElementsByClassName('toogle-button');
for (const element of switches) {
element.style.backgroundColor = "#00ff0b";
}
const boxes = document.getElementsByClassName('settings-cont');
for (const element of boxes) {
element.style.border = "2px solid rgb(0, 255, 11)";
}
const newTags = document.getElementsByClassName('new-tag');
for (const element of newTags) {
element.style.color = "#00ff0b";
}
document.getElementById('navbar').style.backgroundColor = "#000";
const navbuttons = document.getElementsByClassName('a-navbutton');
for (const element of navbuttons) {
element.style.color = "#00ff0b";
}
const nebheader = document.getElementsByClassName('nebHeader');
for (const element of nebheader) {
element.style.color = "#00ff0b";
}
const Obox = document.getElementsByClassName('omnibox');
for (const element of Obox) {
element.style.backgroundColor = "black";
}
document.getElementById('navbar').style.backgroundColor = "#000";
}
};

1
static/style/main.css
View file

@ -62,7 +62,6 @@ a:hover {
#navbar ul:not(.down) { #navbar ul:not(.down) {
font-family: 'Helvetica'; font-family: 'Helvetica';
background-color: var(--navbar-color);
/* box-shadow: 2px 2px rgb(0 0 0 / 20%); */ /* box-shadow: 2px 2px rgb(0 0 0 / 20%); */
color: white; color: white;
margin-left: auto; margin-left: auto;

2
static/style/master.css
View file

@ -70,6 +70,8 @@ input:focus::placeholder {
opacity: 38%; opacity: 38%;
user-select: none; user-select: none;
font-size: 13px; font-size: 13px;
padding-left: 5px;
padding-bottom: 1px;
} }
.github { .github {

28
static/style/options.css
View file

@ -27,6 +27,16 @@ body {
background-color: var(--background-primary); background-color: var(--background-primary);
}*/ }*/
.container {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: flex-end;
margin-top: 75px;
}
#sidebar { #sidebar {
animation: fadeIn 700ms ease-in 30ms forwards; animation: fadeIn 700ms ease-in 30ms forwards;
-webkit-animation: fadeIn 700ms ease-in 300ms forwards; -webkit-animation: fadeIn 700ms ease-in 300ms forwards;
@ -80,9 +90,6 @@ li {
} }
.section { .section {
display: flex;
align-items: center;
flex-direction: column;
background-color: transparent; background-color: transparent;
color: var(--sidebar-text-color); color: var(--sidebar-text-color);
font-size: var(--section-font-size); font-size: var(--section-font-size);
@ -171,9 +178,7 @@ ul li {
width: 30px; width: 30px;
height: 30px; height: 30px;
transform: translateY(-30px); transform: translateY(-30px);
justify-self: end;
font-family: var(--setting-desc-font); font-family: var(--setting-desc-font);
align-self: flex-end;
color: white; color: white;
} }
@ -198,8 +203,8 @@ ul li {
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');
.notification-container { .notification-container {
position: fixed; position: fixed;
top: 15px; top: 4px;
right: 15px; right: 5px;
width: 500px; width: 500px;
max-width: calc(100% - 30px); max-width: calc(100% - 30px);
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
@ -263,7 +268,6 @@ ul li {
} }
.stamp { .stamp {
text-align: left;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
} }
@ -304,6 +308,11 @@ ul li {
border: 2px solid rgb(121 103 221); border: 2px solid rgb(121 103 221);
border-radius: 9px; border-radius: 9px;
margin-top: 20px; margin-top: 20px;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
} }
.name { .name {
@ -335,7 +344,6 @@ ul li {
width: .7em; width: .7em;
height: .7em; height: .7em;
margin: .5em; margin: .5em;
display: inline-block;
} }
@ -425,7 +433,7 @@ ul li {
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
.expiramental { .expiramental {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-size: 14px; font-size: 10px;
color: rgb(184, 0, 0); color: rgb(184, 0, 0);
font-weight: 400; font-weight: 400;
text-decoration: underline; text-decoration: underline;