From 38c4faada7b7d8e77b1655afcd052ed3c764cdd4 Mon Sep 17 00:00:00 2001 From: tanaybhardwaj24 Date: Mon, 10 May 2021 07:39:34 +0000 Subject: [PATCH] added all files and new toggle is beta --- website-src/src/index.html | 5 ++++ website-src/src/index.js | 12 ++++++++++ website-src/src/styles.css | 47 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 64 insertions(+) create mode 100644 website-src/src/index.js diff --git a/website-src/src/index.html b/website-src/src/index.html index 8165910..dcd4ec3 100644 --- a/website-src/src/index.html +++ b/website-src/src/index.html @@ -7,6 +7,11 @@ +
+ + +
+

Awesome Piracy Awesome diff --git a/website-src/src/index.js b/website-src/src/index.js new file mode 100644 index 0000000..eb82a66 --- /dev/null +++ b/website-src/src/index.js @@ -0,0 +1,12 @@ +const toggle = document.getElementById('toggle'); +const body = document.body; + +toggle.addEventListener('input', e => { + const isChecked = e.target.checked; + + if (isChecked) { + body.classList.add('dark-theme'); + } else { + body.classList.remove('dark-theme'); + } +}); \ No newline at end of file diff --git a/website-src/src/styles.css b/website-src/src/styles.css index db53597..bd2aee8 100644 --- a/website-src/src/styles.css +++ b/website-src/src/styles.css @@ -7,6 +7,46 @@ box-sizing: border-box; } + .toggle input[type='checkbox'] { + display: none; +} + +.toggle label { + background-color: #777; + border: 2px solid #555; + border-radius: 50px; + cursor: pointer; + display: inline-block; + position: relative; + transition: all ease-in-out 0.3s; + width: 90px; + height: 40px; +} +.toggle label::after { + background-color: #555; + border-radius: 50%; + content: ' '; + cursor: pointer; + display: inline-block; + position: absolute; + left: 2px; + top: 2px; + transition: all ease-in-out 0.3s; + width: 32px; + height: 32px; +} +.toggle input[type='checkbox']:checked ~ label { + background-color: #00a0fc; + border-color: #006dc9; +} + +.toggle input[type='checkbox']:checked ~ label::after { + background-color: #0054b0; + transform: translateX(50px); +} +body.dark-theme { + background-color: black +} body { width: 980px; margin-right: auto; @@ -699,6 +739,13 @@ margin-bottom: 20px; } + a:link { + color: olive; + } + + a:visited{ + color: olive; + } .markdown-body .plan-choice-radio { position: absolute; left: 15px;