Revamped Desktop version to better match mobile version

This commit is contained in:
Garrett Brown 2020-08-30 01:23:45 -05:00
parent b5ceacec78
commit 180e049646
24 changed files with 816 additions and 504 deletions

1
CNAME
View File

@ -1 +0,0 @@
beta.nymbus.xyz

View File

@ -1,73 +0,0 @@
window.isUpdateAvailable = new Promise(function(resolve, reject) {
// lazy way of disabling service workers while developing
if ('serviceWorker' in navigator && ['localhost', '127'].indexOf(location.hostname) === -1) {
// register service worker file
navigator.serviceWorker.register('service-worker.js')
.then(reg => {
reg.onupdatefound = () => {
const installingWorker = reg.installing;
installingWorker.onstatechange = () => {
switch (installingWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) {
// new update available
resolve(true);
} else {
// no update available
resolve(false);
}
break;
}
};
};
})
.catch(err => console.error('[SW ERROR]', err));
}
});
window['isUpdateAvailable']
.then(isAvailable => {
if (isAvailable) {
const toast = this.toastCtrl.create({
message: 'New Update available! Reload the webapp to see the latest juicy changes.',
position: 'bottom',
showCloseButton: true,
});
toast.present();
}
});
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
window.location.href = 'mobile/index.html';
}
function pswdgen() {
var prt1 = prompt('Please type in a word. Recomended length is 2-3 sylables');
if (prt1 == null) {
return;
}
var prt2 = prompt('Please type in another word');
if (prt2 == null) {
return;
}
var prt3 = prompt('Please type in one more word');
if (prt3 == null) {
return;
}
var num = Math.floor(Math.random() * 99) + 1;
alert('Your new password is: ' + prt1 + prt2 + prt3 + num + ' Please enter this into a password manager to remeber it.');
}

View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#002e58">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Nimbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Security Services</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="manifest" href="manifest.json">
<title>Nymbus Security Services</title>
</head>
<body>
<nav id="top">
<ul>
<li><img id="topLogo" src="icon1.png" onclick="window.location.href = 'index.html';"></img></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'pswdgen.html';">Passphrase Generator</button></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'privacy.html';">Privacy services</button></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'breach.html';">Security Services</button></li>
<li><button type="button" class="topButton" onclick="window.open('https://phishingquiz.withgoogle.com')">Scam Email Quiz</button></li>
<li><button type="button" class="topButton" onclick="window.open('donate.html')">Donate</button></li>
</ul>
</nav>
<div id="main2">
<h1 class="title">Password Managers</h1>
<div class="icons2">
<button type="button" class ="group" onclick="window.open('https://1password.com')">1Password</button>
<button type="button" class ="group" onclick="window.open('https://bitwarden.com')">BitWarden</button>
<button type="button" class ="group" onclick="window.open('https://lastpass.com')">LastPass</button>
</div>
<h1 class="title">Breach Checker</h1>
<div class="icons2">
<button type="button" class="group" onclick="window.open('https://haveibeenpwned.com')">Have I Been Pwned?</button>
<button type="button" class="group" onclick="window.open('https://monitor.firefox.com')">Firefox Monitor</button>
</div>
</div>
<script src="Scripts.js"></script>
</body>
</html>

BIN
breachicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -1,38 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<title> Nymbus Donate</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav id="top">
<ul>
<li><img id="topLogo" src="icon1.png" onclick="window.location.href = 'index.html';"></img></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'pswdgen.html';">Passphrase Generator</button></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'privacy.html';">Privacy services</button></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'breach.html';">Security Services</button></li>
<li><button type="button" class="topButton" onclick="window.open('https://phishingquiz.withgoogle.com')">Scam Email Quiz</button></li>
<li><button type="button" class="topButton" onclick="window.open('donate.html')">Donate</button></li>
</ul>
</nav>
<div id="main">
<h1 class="title">Donate</h1>
<div id="icons">
<p>If you enjoy this app, then consider donating! At the moment, we are only taking crypto donations, but we are working on setting up other ways of donation that will be available soon.</p>
<div id="main2">
<h2 class="title">Dogecoin</h2>
<p>DJjhuWY6iR9MHHpVgntRn8ciVcLsWX48Ee</p>
</div>
<div id="main2">
<h2 class="title">Bitcoin</h2>
<p>13NbnAWLb4m8UMSWGPQLZoZZZj33CNA6Ui</p>
</div>
<div id="main2">
<h2 class="title">Paypal</h2>
<p>Coming Soon...</p>
</div>
</div>
</div>
</div>
</body>
</html>
<! DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#002e58">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title content="Nymbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Donate </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div class="top">
<nav>
<ul>
<li><img id="logo" src="icon1.png"/></li>
<li><img id="logo" class="nav" id="pswdgen" src="passicon.png" onclick="window.location.href = 'index.html';"></img></li>
<li><img id="logo" class="nav-idle" id="finder" src="scamicon.png" onclick="window.location.href='scam.html';"></img></li>
<li><img id="logo" src="breachicon.png" class="nav-idle" id="monitor" onclick="window.location.href = 'security.html';"></img></li>
</ul>
</nav>
</div>
<div id="main">
<h1 class="title">Donate</h1>
<p>If you enjoy this app, then consider donating!</p>
<div id="spacer2"></div>
<div class="tips">
<div id="spacer2"></div>
<div id="main">
<h2 class="title">Dogecoin</h2>
<p>DJjhuWY6iR9MHHpVgntRn8ciVcLsWX48Ee</p>
</div>
<div id="spacer2"></div>
<div id="main">
<h2 class="title">Bitcoin</h2>
<p>13NbnAWLb4m8UMSWGPQLZoZZZj33CNA6Ui</p>
</div>
<div id="spacer2"></div>
<div id="main">
<h2 class="title">Buy Me a Coffee!</h2>
<div class="bmcdiv">
<style>.bmc-button img{height: 34px !important;width: 35px !important;margin-bottom: 1px !important;box-shadow: none !important;border: none !important;vertical-align: middle !important;}.bmc-button{padding: 7px 15px 7px 10px !important;line-height: 35px !important;height:51px !important;text-decoration: none !important;display:inline-flex !important;color:#ffffff !important;background-color:#5F7FFF !important;border-radius: 5px !important;border: 1px solid transparent !important;padding: 7px 15px 7px 10px !important;font-size: 20px !important;letter-spacing:0.6px !important;box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;margin: 0 auto !important;font-family:'Arial', cursive !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;}.bmc-button:hover, .bmc-button:active, .bmc-button:focus {-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;text-decoration: none !important;box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;opacity: 0.85 !important;color:#ffffff !important;}</style>
<link href="https://fonts.googleapis.com/css?family=Arial" rel="stylesheet"><a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/groovy0nion"><img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee"><span style="margin-left:5px;font-size:19px !important;">Buy me a coffee</span></a>
</div>
</div>
<div id="spacer2"></div>
</div>
</div>
</body>
</html>

BIN
icon1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -1,35 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#002e58">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Nimbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Nymbus Home </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="main">
<img id="logo" src="nimbus.png"></img>
<div id="icons">
<button type="button" class="group" id="pswdgen" onclick="window.location.href = 'pswdgen.html';">Passphrase Generator</button>
<button type="button" class="group" id="finder" onclick="window.location.href='privacy.html';">Privacy Services</button>
<button type="button" class="group" id="monitor" onclick="window.location.href = 'breach.html';">Security Services</button>
<button type="button" class="group" id="phishing" onclick="window.open('https://phishingquiz.withgoogle.com')">Scam Email Quiz</button>
</div>
<button type="button" class="about" id="about" onclick="window.location.href = 'donate.html';">Donate</button>
</div>
<script src="Scripts.js"></script>
</body>
</html>
<! DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#002e58">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title content="Nymbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Password Checker </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="manifest" href="manifest.json">
</head>
<body ng-app="pswdgen" ng-controller="generate">
<div class="top">
<nav>
<ul>
<li><img id="logo" src="icon1.png"/></li>
<li><img id="logo" class="nav" id="pswdgen" src="passicon.png" onclick="window.location.href = 'index.html';"></img></li>
<li><img id="logo" class="nav-idle" id="finder" src="scamicon.png" onclick="window.location.href='scam.html';"></img></li>
<li><img id="logo" src="breachicon.png" class="nav-idle" id="monitor" onclick="window.location.href = 'security.html';"></img></li>
</ul>
</nav>
</div>
<div class="main">
<h1 class="title">{{passphrase}}</h1>
<input class="input" type="text" ng-model="word1" placeholder="Enter word 1"/>
<input class="input" type="text" ng-model="word2" placeholder="Enter word 2"/>
<input class="input" type="text" ng-model="word3" placeholder="Enter word 3"/>
<button class="group" type="button" ng-click="passphrase = word1 + word2 + word3 + num">Generate</button>
<div class="tips">
<div id="spacer2"></div>
<div class="main">
<h2>Why this is important</h2>
<p>A strong password helps keep your accounts and devices safe, so having a strong password is important.<br/><br/> The best password is a password with a few random words clumped together, with a number to add some more variety. This type of password is not only strong, but easy to remember.</p>
</div>
<div id="spacer2"></div>
</div>
<div class="tips">
<div id="spacer2"></div>
<div class="main">
<h2>Password tips</h2>
<p>-Avoid reusing passwords.<br/> If your password is compromised on one account, it can be used to access other accounts that use the same password. Using different passwords for different accounts can help keep this from happening.<br/><br/>-Use a password manager. <br/>This can help you keep track of different passwords for multiple accounts. All you need to remember is one secure password to access the password manager, and you can use autofill to log into your accounts.<br/><br/>-Use 2FA or OTP. <br/>This adds a second layer of security to your accounts, which uses a one time password to protect your account. This is done either through an authenticator app, text messages, or even a physical USB key if you want to invest in one.</p>
</div>
<div id="spacer2"></div>
</div>
<button class="donate" type="button" onclick="window.location.href = 'donate.html';">Donate</button>
</div>
</body>
<script>
var app = angular.module('pswdgen', []);
app.controller('generate', function ($scope){
$scope.num = Math.floor((Math.random() * 99) + 1);
$scope.passphrase = "Passphrase Generator ";
});
</script>
</html>

View File

@ -1,6 +1,6 @@
{
"background_color": "#1c77c3ff",
"theme_color": "#1c77c3ff",
"background_color": "#002e58",
"theme_color": "#002e58",
"display": "standalone",
"icons": [
{
@ -15,7 +15,7 @@
"purpose": "any maskable"
}
],
"name": "Nimbus Security",
"short_name": "Nimbus",
"name": "Nymbus Security",
"short_name": "Nymbus",
"start_url": "index.html"
}

View File

@ -1,66 +0,0 @@
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#ff751a">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Nymbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Privacy Tools</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" type="text/css" href="mobile.css">
<meta name="theme-color" content="#000000"/>
</head>
<body>
<div class="top">
<img id="logo" src="icon1.png" />
</div>
<div class="main">
<h1 class="title">Privacy Services</h1>
<div id="mail">
<h2 class="title" >Mail</h2>
<div class="app_row">
<button type="button" class ="group" onclick="window.open('https://protonmail.com')">ProtonMail</button>
<button type="button" class ="group" onclick="window.open('https://dmail.online')">Dmail</button>
<button type="button" class ="group" onclick="window.open('https://fastmail.com')">Fastmail</button>
</div>
</div>
<div id="search">
<h2 class="title">Search Engines</h2>
<div class="app_row">
<button type="button" class ="group" onclick="window.open('https://duckduckgo.com')">DuckDuckGo</button>
<button type="button" class ="group" onclick="window.open('https://presearch.org')">Presearch</button>
<button type="button" class ="group" onclick="window.open('https://onesearch.com')">OneSearch</button>
</div>
</div>
<div id="social">
<h2 class="title">Social Networks</h2>
<div class="app_row">
<button type="button" class ="group" onclick="window.open('https://steemit.com')">Steemit</button>
<button type="button" class ="group" onclick="window.open('https://mastodon.social')">Mastodon</button>
<button type="button" class ="group" onclick="window.open('https://vero.co')">Vero</button>
</div>
</div>
<button class="donate" type="button" onclick="window.location.href = 'donate.html';">Donate</button>
</div>
<div id="spacer">
</div>
<div class="bottom">
<div id="buttons">
<img class="nav-idle" id="finder" src="passicon.png" onclick="window.location.href='index.html';"></img>
<img class="nav" id="finder" src="privicon.png" onclick="window.location.href='privacy.html';"></img>
<img src="breachicon.png" class="nav-idle" id="monitor" onclick="window.location.href = 'security.html';"></img>
<!--<img src="scamicon.png" class="nav-idle" id="phishing" onclick="window.open('https://phishingquiz.withgoogle.com')"></img>-->
</div>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.7 KiB

View File

@ -43,7 +43,7 @@
</div>
</div>
<div id="spacer2"></div>
<div id="social">
<div id="search">
<h2 class="title">Breach Checker</h2>
<button type="button" class="group" onclick="window.open('https://haveibeenpwned.com')">Have I Been Pwned?</button>
<button type="button" class="group" onclick="window.open('https://monitor.firefox.com')">Firefox Monitor</button>
@ -56,6 +56,20 @@
<div id="spacer2"></div>
</div>
</div>
<div id="social">
<h2 class="title">VPNs</h2>
<button type="button" class="group" onclick="window.open('https://nordvpn.com')">Nord VPN</button>
<button type="button" class="group" onclick="window.open('https://surfshark.com')">Surfshark</button>
<button type="button" class="group" onclick="window.open('https://protonvpn.com')">ProtonVPN</button>
<div class="tips">
<div id="spacer2"></div>
<h2>About VPNs</h2>
<div class="main">
<p>VPNs (Virtual Private Networks) are tools used to secure your web traffic and make you more anonymous against trackers. They route your internet traffic through an encrypted tunnel to a server of your choosing. This encrypts your internet connection, thus keeping your data safe. It also hides your real IP address by sending your web traffic through a server, making it harder to track you.</p>
</div>
<div id="spacer2"></div>
</div>
</div>
<button class="donate" type="button" onclick="window.location.href = 'donate.html';">Donate</button>
</div>
<div id="spacer">

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

BIN
passicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title> Nymbus Privacy Services </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav id="top">
<ul>
<li><img id="topLogo" src="icon1.png" onclick="window.location.href = 'index.html';"></img></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'pswdgen.html';">Passphrase Generator</button></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'privacy.html';">Privacy services</button></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'breach.html';">Security Services</button></li>
<li><button type="button" class="topButton" onclick="window.open('https://phishingquiz.withgoogle.com')">Scam Email Quiz</button></li>
<li><button type="button" class="topButton" onclick="window.open('donate.html')">Donate</button></li>
</ul>
</nav>
<div id="main2">
<h1 class="title">Mail</h1>
<div class="icons2">
<button type="button" class ="group" onclick="window.open('https://protonmail.com')">ProtonMail</button>
<button type="button" class ="group" onclick="window.open('https://dmail.online')">Dmail</button>
<button type="button" class ="group" onclick="window.open('https://fastmail.com)">Fastmail</button>
</div>
<h1 class="title">Search Engines</h1>
<div class="icons2">
<button type="button" class ="group" onclick="window.open('https://duckduckgo.com')">DuckDuckGo</button>
<button type="button" class ="group" onclick="window.open('https://presearch.org')">Presearch</button>
<button type="button" class ="group" onclick="window.open('https://onesearch.com')">OneSearch</button>
</div>
<h1 class="title">Social Networks</h1>
<div class="icons2">
<button type="button" class ="group" onclick="window.open('https://steemit.com')">Steemit</button>
<button type="button" class ="group" onclick="window.open('https://mastodon.social')">Mastodon</button>
<button type="button" class ="group" onclick="window.open('https://vero.co')">Vero</button>
</div>
</div>
<script src="Scripts.js"></script>
</body>
</html>

View File

@ -1,52 +0,0 @@
<! DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#002e58">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title content="Nymbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Nymbus Password Generator </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="manifest" href="manifest.json">
</head>
<body>
<nav id="top">
<ul>
<li><img id="topLogo" src="icon1.png" onclick="window.location.href = 'index.html';"></img></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'pswdgen.html';">Passphrase Generator</button></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'privacy.html';">Privacy services</button></li>
<li><button type="button" class="topButton" onclick="window.location.href = 'breach.html';">Security Services</button></li>
<li><button type="button" class="topButton" onclick="window.open('https://phishingquiz.withgoogle.com')">Scam Email Quiz</button></li>
<li><button type="button" class="topButton" onclick="window.open('donate.html')">Donate</button></li>
</ul>
</nav>
<div id="main">
<div id="icons" ng-app = "pswdgen" ng-controller="generate">
<h1 class="title">{{passphrase}}</h1>
<input class="input" type=text ng-model="word1" placeholder="Enter Word 1">
<input class="input" type=text ng-model="word2" placeholder="Enter Word 2">
<input class="input" type=text ng-model="word3" placeholder="Enter Word 3">
<button id="about" type=button ng-click="passphrase = word1 + word2 + word3 + num">Generate</button>
<script>
var app = angular.module('pswdgen', []);
app.controller('generate', function ($scope){
$scope.num = Math.floor((Math.random() * 99) + 1);
$scope.passphrase = "Please enter three words into the fields bellow: ";
});
</script>
</div>
</div>
</body>
</html>

44
questions.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#ff751a">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Nymbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scam Checker</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="theme-color" content="#000000"/>
</head>
<body ng-app="scamchecker" ng-controller="check">
<div class="top">
<nav>
<ul>
<li><img id="logo" src="icon1.png"/></li>
<li><img id="logo" class="nav" id="pswdgen" src="passicon.png" onclick="window.location.href = 'index.html';"></img></li>
<li><img id="logo" class="nav-idle" id="finder" src="scamicon.png" onclick="window.location.href='scam.html';"></img></li>
<li><img id="logo" src="breachicon.png" class="nav-idle" id="monitor" onclick="window.location.href = 'security.html';"></img></li>
</ul>
</nav>
</div>
</div>
<div class="main">
<h1 class="title" id="question">Was the email sent by a person or a company?</h1>
<input class="input" type="text" id="answer" placeholder="Enter 'Person' or 'Company'"/>
<button type="button" class="group" id="next">Next</button>
</div>
<div id="spacer">
</div>
</body>
<script src=script.js></script>
</html>

55
resultN.html Normal file
View File

@ -0,0 +1,55 @@
<! DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#002e58">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title content="Nymbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Not a scam! </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div class="top">
<nav>
<ul>
<li><img id="logo" src="icon1.png"/></li>
<li><img id="logo" class="nav" id="pswdgen" src="passicon.png" onclick="window.location.href = 'index.html';"></img></li>
<li><img id="logo" class="nav-idle" id="finder" src="scamicon.png" onclick="window.location.href='scam.html';"></img></li>
<li><img id="logo" src="breachicon.png" class="nav-idle" id="monitor" onclick="window.location.href = 'security.html';"></img></li>
</ul>
</nav>
</div>
<div class="main">
<h1 class="title">Probably not a scam!</h1>
<p>There's a good chance this isn't a scam! Just to be on the safe side, its a good idea to double check.</p>
<div class="tips">
<div id="spacer2"></div>
<div class="main">
<h2>What to do now</h2>
<p>Double check with the guidelines below just to be on the safe side.
</p>
</div>
<div id="spacer2"></div>
</div>
<div class="tips">
<div id="spacer2"></div>
<div class="main">
<h2>How to spot scams</h2>
<p>Spotting scam emails, even the most convincing ones, is easier than you'd think. One way to check if an email is a scam is to look at the email address. If the email is from a company like Facebook or Google, check the extension (part after the @) and see if it matches the website's url. For example, if it is from facebook, then check to see if the email address ends in "facebook.com" or "*any word*.facebook.com. If it's different (like facebook.social) then it's a scam. If it's an email from within your own company or school, then check if the extension matches your work or school email. And if it's from a person, make sure it's actually the person they say they are. If it's someone you don't know, or you don't have a way to confirm, be careful. If they're asking for banking info, login info, or any other peronal info, then DON'T GIVE IT TO THEM!</p>
</div>
<div id="spacer2"></div>
</div>
</div>
</body>
</html>

55
resultS.html Normal file
View File

@ -0,0 +1,55 @@
<! DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#002e58">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title content="Nymbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> It's a scam! </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div class="top">
<nav>
<ul>
<li><img id="logo" src="icon1.png"/></li>
<li><img id="logo" class="nav" id="pswdgen" src="passicon.png" onclick="window.location.href = 'index.html';"></img></li>
<li><img id="logo" class="nav-idle" id="finder" src="scamicon.png" onclick="window.location.href='scam.html';"></img></li>
<li><img id="logo" src="breachicon.png" class="nav-idle" id="monitor" onclick="window.location.href = 'security.html';"></img></li>
</ul>
</nav>
</div>
<div class="main">
<h1 class="title">It's a scam!</h1>
<p>There's a good chance this is a scam! Don't click on any of the links or files attatcked to this email!</p>
<div class="tips">
<div id="spacer2"></div>
<div class="main">
<h2>What to do now</h2>
<p>If the sender was pretending to be a friend or a coworker, then let them know so you can double check that if for sure wasn't them, and they can let others who might have gotten the email that it's a scam. If its from a company like Facebook or Google, check that you or your friends or family havent gotten or fallen for this email. DELETE THIS EMAIL! If you or someone else has fallen for a scam, change your passwords and make sure nothing unusual has happened in your bank accounts or online accounts.
</p>
</div>
<div id="spacer2"></div>
</div>
<div class="tips">
<div id="spacer2"></div>
<div class="main">
<h2>How to spot scams</h2>
<p>Spotting scam emails, even the most convincing ones, is easier than you'd think. One way to check if an email is a scam is to look at the email address. If the email is from a company like Facebook or Google, check the extension (part after the @) and see if it matches the website's url. For example, if it is from facebook, then check to see if the email address ends in "facebook.com" or "*any word*.facebook.com. If it's different (like facebook.social) then it's a scam. If it's an email from within your own company or school, then check if the extension matches your work or school email. And if it's from a person, make sure it's actually the person they say they are. If it's someone you don't know, or you don't have a way to confirm, be careful. If they're asking for banking info, login info, or any other peronal info, then DON'T GIVE IT TO THEM!</p>
</div>
<div id="spacer2"></div>
</div>
</div>
</body>
</html>

50
scam.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#ff751a">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Nymbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scam Checker</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="theme-color" content="#000000"/>
</head>
<body ng-app="scamchecker" ng-controller="check">
<div class="top">
<nav>
<ul>
<li><img id="logo" src="icon1.png"/></li>
<li><img id="logo" class="nav" id="pswdgen" src="passicon.png" onclick="window.location.href = 'index.html';"></img></li>
<li><img id="logo" class="nav-idle" id="finder" src="scamicon.png" onclick="window.location.href='scam.html';"></img></li>
<li><img id="logo" src="breachicon.png" class="nav-idle" id="monitor" onclick="window.location.href = 'security.html';"></img></li>
</ul>
</nav>
</div>
<div class="main">
<h1 class="title">Scam Checker</h1>
<p>This tool will take information from any email to determine whether or not an email is a scam or not.</p>
<button type="button" class="group" onclick="window.location.href = 'questions.html';">Start</button>
<div class="tips">
<div id="spacer2"></div>
<div class="main">
<h2>How this works</h2>
<p>This takes information from the email you received to determine if it is a scam. It uses info like the senders email, and checks it against other emails from companies in our database, or an email from your workplace if its from a coworker. It will then offer tips to avoid falling for scams to make them easier to spot in the future.</p>
</div>
<div id="spacer2"></div>
</div>
</div>
<div id="spacer">
</div>
</body>
</html>

BIN
scamicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

102
script.js Normal file
View File

@ -0,0 +1,102 @@
document.getElementById("next").addEventListener("click", personCompany);
function personCompany(){
document.getElementById("next").removeEventListener("click", personCompany);
if (document.getElementById("answer").value == "Person" || document.getElementById("answer").value == "person"){
document.getElementById("question").innerHTML = "Do you know the person who sent this email?";
document.getElementById("answer").placeholder = "Yes or No";
document.getElementById("next").addEventListener("click", knowPerson);
}
else if (document.getElementById("answer").value == "Company" || document.getElementById("answer").value == "company"){
document.getElementById("question").innerHTML = "Do you work for this company?";
document.getElementById("answer").placeholder = "Yes or No";
document.getElementById("next").addEventListener("click", yourCompany);
}
document.getElementById("answer").value = "";
}
//Stuff for the person section
function knowPerson(){
document.getElementById("next").removeEventListener("click", knowPerson);
if (document.getElementById("answer").value == "Yes" || document.getElementById("answer").value == "yes"){
document.getElementById("question").innerHTML = "Are you certain this email is from this person? Maybe contact them through another means of communication if possible to ask.";
document.getElementById("next").addEventListener("click", doubleCheck);
}
else if (document.getElementById("answer").value == "No" || document.getElementById("answer").value == "no"){
document.getElementById("question").innerHTML = "Is this email regarding something you were expecting an email about?";
document.getElementById("next").addEventListener("click", expectingEmail);
}
document.getElementById("answer").value = "";
}
function doubleCheck(){
document.getElementById("next").removeEventListener("click", doubleCheck);
if (document.getElementById("answer").value == "Yes" || document.getElementById("answer").value == "yes"){
window.location.href = "resultN.html";
}
else if (document.getElementById("answer").value == "No" || document.getElementById("answer").value == "no"){
window.location.href = "resultS.html";
}
}
function expectingEmail(){
document.getElementById("next").removeEventListener("click", expectingEmail);
if (document.getElementById("answer").value == "Yes" || document.getElementById("answer").value == "yes"){
window.location.href = "resultN.html";
}
else if (document.getElementById("answer").value == "No" || document.getElementById("answer").value == "no"){
window.location.href = "resultS.html";
}
}
//stuff for the company section
var CheckEmail = "";
var trustedExtensions = ["facebook.com", "google.com", "microsoft.com", "instagram.com", "twitter.com", "apple.com"]
function yourCompany() {
document.getElementById("next").removeEventListener("click", yourCompany);
if (document.getElementById("answer").value == "Yes" || document.getElementById("answer").value == "yes"){
document.getElementById("question").innerHTML = "What is the extension of your work email address? (The part after the '@')";
document.getElementById("answer").placeholder = "Enter work email extension";
document.getElementById("next").addEventListener("click", getWorkEmail);
}
else if (document.getElementById("answer").value == "No" || document.getElementById("answer").value == "no"){
document.getElementById("question").innerHTML = "Please enter the extension of the sender's email address (The part after the '@')";
document.getElementById("answer").placeholder = "Enter sender's email extension";
document.getElementById("next").addEventListener("click", checkExtension);
}
document.getElementById("answer").value = "";
}
function getWorkEmail() {
document.getElementById("next").removeEventListener("click", getWorkEmail);
CheckEmail = document.getElementById("answer").value;
document.getElementById("question").innerHTML = "Please enter the extension of the sender's email address (The part after the '@')";
document.getElementById("answer").placeholder = "Enter sender's email extenion";
document.getElementById("next").addEventListener("click", checkExtension);
document.getElementById("answer").value = "";
}
function checkExtension() {
document.getElementById("next").removeEventListener("click", checkExtension);
var senderEmail = document.getElementById("answer").value;
var match = false;
if (CheckEmail != ""){
if (CheckEmail == senderEmail){
match = true;
}
}
else{
for (i = 0; i < trustedExtensions.length; ++i){
if (trustedExtensions[i] == senderEmail){
match = true;
}
}
}
if (match == true){
window.location.href = "resultN.html";
}
else if (match == false){
window.location.href = "resultS.html";
}
}

83
security.html Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<!--Windows info-->
<meta name="msapplication-TileImage" content="icon.png">
<meta name="msapplication-TileColor" content="#ff751a">
<!--iOS info-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Nymbus">
<link rel="apple-touch-icon" href="icon.png">
<!--Android info-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Security Tools</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="theme-color" content="#000000"/>
</head>
<body>
<div class="top">
<nav>
<ul>
<li><img id="logo" src="icon1.png"/></li>
<li><img id="logo" class="nav" id="pswdgen" src="passicon.png" onclick="window.location.href = 'index.html';"></img></li>
<li><img id="logo" class="nav-idle" id="finder" src="scamicon.png" onclick="window.location.href='scam.html';"></img></li>
<li><img id="logo" src="breachicon.png" class="nav-idle" id="monitor" onclick="window.location.href = 'security.html';"></img></li>
</ul>
</nav>
</div>
<div class="main">
<h1 class="title">Security Services</h1>
<div id="mail">
<h2 class="title">Password Managers</h2>
<div class="app_row">
<button type="button" class ="group" onclick="window.open('https://1password.com')">1Password</button>
<button type="button" class ="group" onclick="window.open('https://bitwarden.com')">BitWarden</button>
<button type="button" class ="group" onclick="window.open('https://lastpass.com')">LastPass</button>
</div>
<div class="tips">
<div id="spacer2"></div>
<h2>About Password Managers</h2>
<div class="main">
<p>Password managers securely store passwords, and allow you to autofill your information when loging in to an account. This allows you to use different passwords for each of your accounts to keep them more secure.</p>
</div>
<div id="spacer2"></div>
</div>
</div>
<div id="spacer2"></div>
<div id="search">
<h2 class="title">Breach Checker</h2>
<button type="button" class="group" onclick="window.open('https://haveibeenpwned.com')">Have I Been Pwned?</button>
<button type="button" class="group" onclick="window.open('https://monitor.firefox.com')">Firefox Monitor</button>
<div class="tips">
<div id="spacer2"></div>
<h2>About Breach Checkers</h2>
<div class="main">
<p>These services use data collected from known data breaches to check if your information might have been compromised in a data breach. You enter your email address in, and it will check it with a database of breaches and show you if it finds any breaches your email was a part of, nd what information might have been compromised.</p>
</div>
<div id="spacer2"></div>
</div>
</div>
<div id="social">
<h2 class="title">VPNs</h2>
<button type="button" class="group" onclick="window.open('https://nordvpn.com')">Nord VPN</button>
<button type="button" class="group" onclick="window.open('https://surfshark.com')">Surfshark</button>
<button type="button" class="group" onclick="window.open('https://protonvpn.com')">ProtonVPN</button>
<div class="tips">
<div id="spacer2"></div>
<h2>About VPNs</h2>
<div class="main">
<p>VPNs (Virtual Private Networks) are tools used to secure your web traffic and make you more anonymous against trackers. They route your internet traffic through an encrypted tunnel to a server of your choosing. This encrypts your internet connection, thus keeping your data safe. It also hides your real IP address by sending your web traffic through a server, making it harder to track you.</p>
</div>
<div id="spacer2"></div>
</div>
</div>
<button class="donate" type="button" onclick="window.location.href = 'donate.html';">Donate</button>
</div>
</body>
</html>

View File

@ -1,17 +0,0 @@
self.addEventListener('fetch', event=> {
let response=fetch(event.request);
event.respondWith(response);
});
let deferredPrompt;
self.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
});
self.addEventListener('appinstalled', (evt) => {
console.log('a2hs installed');
});

409
style.css
View File

@ -5,46 +5,206 @@ background-size: cover;
margin: 0 auto;
}
#tips {
display: block;
margin-top: 10px;
width: 50%;
height: auto;
margin: 0 auto;
margin-bottom: 15px;
border-radius: 15px;
#pswdgen{
background-image: url("/mobile/passicon.png");
}
#mail {
position:relative;
margin-top: 5px;
margin-bottom: 5px;
width: 94%;
margin: 0 auto;
margin-top: 30px;
}
#search {
position:relative;
margin-top: 5px;
margin-bottom: 5px;
width: 94%;
margin: 0 auto;
}
#social {
position:relative;
margin-top: 5px;
margin-bottom: 85px;
width: 94%;
margin: 0 auto;
}
#spacer {
height: 85px;
width: 100%;
}
#spacer2 {
height: 25px;
width: 100%;
}
#spacer3 {
height: 55px;
width: 100%;
}
.app_row {
position:relative;
width: auto;
margin: 0 auto;
margin-bottom: 15px;
}
.nav {
position: static;
top: 0;
size: relative;
width: 24%;
height: 70px;
margin-left: 4%;
margin-top: 5px;
margin-right: 4%;
font-size: 15px;
border-width: 0;
border-radius: 50px;
background: #003565;
box-shadow: inset 5px 5px 6px #002d56,
inset -5px -5px 6px #003d74;
text-align: center;
outline: none;
color: white;
}
.nav-idle{
position: static;
top: 0;
size: relative;
width: auto;
height: 70px;
margin-left: 4%;
margin-top: 5px;
margin-right: 4%;
font-size: 15px;
border-width: 0;
border-radius: 50px;
background: linear-gradient(145deg, #00305b, #00396c);
box-shadow: 5px 5px 0px #003464,
-5px -5px 0px #003666;
text-align: center;
outline: none;
color: white;
}
.bmcdiv{
width: 216px;
margin-left: auto;
margin-right: auto;
}
#buttons {
width: auto;
display: block;
margin: 0 auto;
margin-left: auto;
}
.bottom{
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 80px;
background: #003565;
box-shadow: 5px 0px 10px #002d56;
}
li{
float: left;
height: 100%;
}
nav {
height: 100%;
}
ul{
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
}
.group {
position: relative;
top: 0px;
top: 10px;
size: relative;
width: 110px;
height: 110px;
margin-left: 5px;
margin-right: 5px;
width: 100%;
height: 80px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
font-size: 15px;
border-color: #002e58ff;
text-align: center;
border-color: #00000000;
border-width: 0px;
color: white;
border-width: 0;
border-radius: 15px;
border-radius: 50px;
background: #003565;
box-shadow: 5px 5px 10px #002d56,
-5px -5px 10px #003d74;
border-style: solid;
outline: none;
vertical-align: bottom;
}
.group:active{
border-radius: 15px;
.donate {
top: 10px;
size: relative;
width:20%;
height: 45px;
margin-left: 40%;
margin-right: 40%;
margin-bottom: auto;
margin-top: auto;
font-size: 15px;
text-align: center;
border-color: #00000000;
border-width: 0px;
color: #ebcf34;
border-radius: 50px;
background: #003565;
box-shadow: 5px 5px 10px #002d56,
-5px -5px 10px #003d74;
border-style: solid;
outline: none;
}
.group:active {
border-radius: 50px;
background: #003565;
box-shadow: inset 5px 5px 6px #002d56,
inset -5px -5px 6px #003d74;
color: #1c77c3;
color: #1c77c3;;
}
nav-idle:active {
border-radius: 50px;
background: #003565;
box-shadow: inset 5px 5px 6px #002d56,
inset -5px -5px 6px #003d74;
color: #1c77c3;;
}
.donate:active {
border-radius: 50px;
background: #003565;
box-shadow: inset 5px 5px 6px #002d56,
inset -5px -5px 6px #003d74;
color: #1c77c3;;
}
.input {
@ -52,7 +212,7 @@ vertical-align: bottom;
position: relative;
top: 0px;
size: relative;
width: 496px;
width: 100%;
height: 80px;
margin-left: auto;
margin-right: auto;
@ -69,136 +229,129 @@ vertical-align: bottom;
text-align: center;
}
#main {
height: auto;
margin: 0 auto;
margin-top: 200px;
}
#main2 {
height: auto;
margin: 0 auto;
margin-top: 50px;
}
#logo {
display: block;
height: 75px;
margin: 0 auto;
margin-bottom: 10px;
}
#icons {
display: block;
margin-top: 10px;
width: 496px;
height: auto;
margin: 0 auto;
margin-bottom: 15px;
}
.icons2 {
display: block;
width: 380px;
height: auto;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
}
#top {
position: sticky;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 55px;
background-color: #003565;
box-shaddow: 5px 0px 10px #002d56;
}
#about {
display: block;
position: relative;
top: 5px;
size: relative;
width: 500px;
height: 80px;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
margin-bottom: 25px;
font-size: 15px;
color: white;
border-color: #003565;
border-width: 0px;
border-radius: 15px;
background: #003565;
box-shadow: 5px 5px 10px #002d56,
-5px -5px 10px #003d74;
border-style: solid;
outline: none;
}
#about:active {
.tips {
display: block;
position: relative;
top: 0px;
size: relative;
width: 95%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
font-size: 15px;
color: white;
border-color: #003565;
border-width: 10px;
border-radius: 15px;
background: #003565;
box-shadow: inset 5px 5px 6px #002d56,
inset -5px -5px 6px #003d74;
color: #1c77c3;
border-style: solid;
outline: none;
text-align: center;
}
.title {
text-align: center;
margin: 0 auto;
font-family: Arial;
color: white;
}
li #topLogo {
height: 45px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
#logo {
display: block;
position: relative;
top: 8px;
height: 34px;
width: auto;
margin-left: 10px;
margin-right: 10px;
border-style: solid;
border-color:#00000000;
margin-top: 0;
border-width:5px;
border-radius: 150px;
background: #003565;
box-shadow: 5px 5px 8px #002d56,
-5px -5px 8px #003d74;
}
ul {
.search {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
width: 100%;
height: 55px;
background-color: #4fb9c6ff;
}
li {
float: left;
height: 100%;
.top {
position: sticky;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 60px;
margin-bottom: 10px;
background: #003565;
box-shadow: 5px 0px 10px #002d56;
}
.main{
width: 65%;
margin: 0 auto;
margin-bottom: 15px;
}
li .topButton {
position: relative;
bottom: 0;
width: auto;
height: 100%;
border-style: solid;
border-color: #00000000;
#back {
background-color: #00000000;
color: white;
height: 100%;
border-style: solid;
border-color: #00000000;
border-radius: 15px;
background: #003565;
box-shadow: inset 5px 5px 10px #002d56,
inset -5px -5px 10px #003d74;
outline: none;
}
#back:active {
border-radius: 15px;
border-color: #002e58;
background: #1c77c3;
box-shadow: inset 5px 5px 0px #1c77c3,
inset -5px -5px 0px #1c77c3;
color: white;
}
p {
text-align: center;
margin: 0 auto;
font-family: Arial;
color: white;
h1 {
top: 0;
text-align: center;
margin: 0 auto;
margin-top: 10px;
font-family: Arial;
color: white;
}
h2 {
top: 0;
text-align: center;
margin: 0 auto;
font-family: Arial;
color: white;
}
h3 {
top: 0;
text-align: center;
margin: 0 auto;
font-family: Arial;
color: white;
}
p {
top: 0;
position: relative;
text-align: center;
margin: 0 auto;
font-family: Arial;
color: white;
}
a {
color: white;
margin: 0 auto;
}