From 2738833c5404031ed06c5e1985ee6f2dd5b359e5 Mon Sep 17 00:00:00 2001 From: Simon Brazell Date: Sun, 29 Sep 2019 23:04:24 +1000 Subject: Add popup & options pages --- pages/options/options.html | 27 +++++++++ pages/popup/popup.css | 140 +++++++++++++++++++++++++++++++++++++++++++++ pages/popup/popup.html | 48 ++++++++++++++++ pages/popup/popup.js | 7 +++ 4 files changed, 222 insertions(+) create mode 100644 pages/options/options.html create mode 100644 pages/popup/popup.css create mode 100644 pages/popup/popup.html create mode 100644 pages/popup/popup.js (limited to 'pages') diff --git a/pages/options/options.html b/pages/options/options.html new file mode 100644 index 00000000..f51f7201 --- /dev/null +++ b/pages/options/options.html @@ -0,0 +1,27 @@ + + + + + My Test Extension Options + + + + + Favorite color: + + + + +
+ + + + \ No newline at end of file diff --git a/pages/popup/popup.css b/pages/popup/popup.css new file mode 100644 index 00000000..eebab8e3 --- /dev/null +++ b/pages/popup/popup.css @@ -0,0 +1,140 @@ +:root { + --text-main: #FFF; + --text-secondary: #000; + --dark-grey: #3C4043; + --white: #FFF; + --active: #FF5B56; + --space: 5px; +} + +body { + color: var(--text-secondary); + margin: 0; + max-width: 400px; + min-width: 240px; + background-color: var(--dark-grey) +} + +header { + background-color: var(--white); + color: var(--text-secondary); + display: flex; + padding: var(--space); +} + +header h1 { + font-size: 2em; +} + +header .logo-container { + margin: var(--space); +} + +header .logo-container img { + width: 100%; +} + +header small { + display: block; + font-size: .70em; + font-weight: bold; + margin: 1%; + width: 100%; + text-align: right; +} + +h1 { + font-size: 14px; + margin: var(--space) auto +} + +h2 { + clear: both; + font-size: 12px; + font-weight: normal; + margin: 0; +} + +h3 { + font-size: 16px; +} + +h1, +h2 { + color: var(--text-main); +} + +footer { + width: 100%; +} + +footer a.button { + margin: var(--space); +} + +/* Elements */ +input[type=checkbox] { + opacity: 0; +} + +label { + background: grey; + border-radius: 25px; + color: var(--text-main); + cursor: pointer; + display: block; + float: right; + font-weight: bold; + height: 30px; + position: relative; + text-indent: -400px; + width: 50px; +} + +label:after { + background: #fff; + border-radius: 90px; + content: ''; + height: 20px; + left: 5px; + position: absolute; + top: 5px; + transition: 0.3s; /* Acts on transform below */ + width: 20px; +} +input:checked+label { + background: var(--active); +} +/* position when active*/ +input:checked+label:after { + left: calc(100% - 5px); + transform: translateX(-100%); +} + +.settings_block { + display: block; + padding: 5px 1em 20px 1em; + border-bottom: var(--dark-grey) solid 1px; +} + +.settings_block h1 { + float: left; +} + +.button { + border: var(--active) solid 1px; + color: var(--text-main); + display: block; + font-size: 12px; + font-weight: bold; + margin: var(--space) auto; + padding: 10px; + text-align: center; + text-decoration: none; +} + +.button:hover { + background-color: var(--active); + color: #fff +} + diff --git a/pages/popup/popup.html b/pages/popup/popup.html new file mode 100644 index 00000000..0e28a99a --- /dev/null +++ b/pages/popup/popup.html @@ -0,0 +1,48 @@ + + + + + + + + + + + +
+
+ Privacy Redirect logo +
+ + Version: 1.0.2 + +
+ +
+
+

Nitter Redirects

+ + +
+
+ +
+
+

Invidious Redirects

+ + +
+
+ + + + + + + \ No newline at end of file diff --git a/pages/popup/popup.js b/pages/popup/popup.js new file mode 100644 index 00000000..0dddb49c --- /dev/null +++ b/pages/popup/popup.js @@ -0,0 +1,7 @@ +document.querySelector('#options').addEventListener('click', function () { + if (chrome.runtime.openOptionsPage) { + chrome.runtime.openOptionsPage(); + } else { + window.open(chrome.runtime.getURL('../options/options.html')); + } +}); \ No newline at end of file -- cgit 1.4.1