Removed selection colouring + preview and copy btns

index.html

@@ -82,7 +82,10 @@ <h3>Give it a name (optional)<i class="fa-solid fa-caret-down"></i></h3>
 					<h3>Copy the embed link</h3>
 					<div class="input_wrapper">
 						<input type="text" id="linkTextInput" />
-						<button type="button" id="linkTextInputBtn">Copy</button>
+						<div>
+							<button type="button" id="copyLinkBtn">Copy Link</button>
+							<button type="button" id="widgetPagePreviewBtn">Page Preview</button>
+						</div>
 					</div>
 				</div>
 			</section>

index.js

@@ -27,7 +27,8 @@ document.addEventListener("DOMContentLoaded", function () {
 		const titleFontItems = document.querySelectorAll(".select_font_title .select_item");
 		const bodyFontItems = document.querySelectorAll(".select_font_body .select_item");
 		const linkTextInput = document.querySelector("#linkTextInput");
-		const linkTextInputBtn = document.querySelector("#linkTextInputBtn");
+		const widgetPagePreviewBtn = document.querySelector("#widgetPagePreviewBtn");
+		const copyLinkBtn = document.querySelector("#copyLinkBtn");
 		const uniqueNameTextInput = document.querySelector("#uniqueNameTextInput");
 
 		//  Render Box variables
@@ -259,7 +260,7 @@ document.addEventListener("DOMContentLoaded", function () {
 			uniqueNameTextInput.style.borderColor = "#cbb7ac";
 			document.querySelector("#errorMsg").style.opacity = 0;
 			document.querySelector("#errorMsg").dataset.error = "off";
-			linkTextInputBtn.style.cursor = "pointer";
+			widgetPagePreviewBtn.style.cursor = "pointer";
 			linkTextInput.style.cursor = "text";
 
 			if (widgetID == "") {
@@ -279,7 +280,7 @@ document.addEventListener("DOMContentLoaded", function () {
 			uniqueNameTextInput.style.borderColor = "#ba1616";
 			document.querySelector("#errorMsg").innerHTML = `<i class="fa-solid fa-triangle-exclamation"></i> ` + error;
 			linkTextInput.value = "";
-			linkTextInputBtn.style.cursor = "no-drop";
+			widgetPagePreviewBtn.style.cursor = "no-drop";
 			linkTextInput.style.cursor = "no-drop";
 			document.querySelector("#errorMsg").dataset.error = "on";
 		}
@@ -302,14 +303,27 @@ document.addEventListener("DOMContentLoaded", function () {
 			linkTextInput.value = newLink;
 		}
 
-		linkTextInputBtn.addEventListener("click", () => {
+		widgetPagePreviewBtn.addEventListener("click", () => {
 			if (document.querySelector("#errorMsg").dataset.error == "off") {
 				let link = linkTextInput.value;
 				let a = document.createElement("a");
 				a.href = link;
 				a.click();
 			}
 		});
+
+		copyLinkBtn.addEventListener("click", () => {
+			if (document.querySelector("#errorMsg").dataset.error == "off") {
+				linkTextInput.select();
+				linkTextInput.setSelectionRange(0, 99999); // For mobile devices
+				navigator.clipboard.writeText(linkTextInput.value);
+				linkTextInput.style.boxShadow = "0px 0px 4px #58ac5cdf";
+
+				setTimeout(() => {
+					linkTextInput.style.boxShadow = "none";
+				}, 1500);
+			}
+		});
 	}
 
 	function renderMode() {

scss/_miscs.scss

@@ -21,10 +21,6 @@
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
-
-	&::selection {
-		background-color: #cbb7ac;
-	}
 }
 
 @mixin flex($type) {

scss/main.scss

@@ -26,7 +26,7 @@
 	--text-colour: #ba5e70;
 }
 .dark {
-	--bg-colour: #201e1e;
+	--bg-colour: #202020;
 	--main-colour: #c8c8c8;
 	--secondary-colour: #d5cfcf;
 	--text-colour: #dad7d7;
@@ -44,7 +44,6 @@
 	--text-colour: #5d4e3f;
 }
 
-
 body {
 	display: grid;
 	grid-template-columns: 50% 50%;
@@ -173,7 +172,8 @@ body {
 				.give_unique_name .select_wrapper {
 					display: block;
 
-					#extraInfo, #errorMsg {
+					#extraInfo,
+					#errorMsg {
 						font-size: 0.9rem;
 					}
 
@@ -185,6 +185,7 @@ body {
 					#errorMsg {
 						color: #ba1616;
 						padding: 6px 0;
+						color: #58ac5cdf;
 					}
 
 					p {
@@ -284,7 +285,7 @@ body {
 				width: 100%;
 
 				.input_wrapper {
-					@include flex(jcen);
+					@include flex(column);
 					width: 100%;
 					gap: 10px;
 
@@ -344,6 +345,10 @@ body {
 		padding: 15px;
 		border-radius: 20px;
 
+		&::selection {
+			background-color: var(--main-colour) !important;
+		}
+
 		min-width: 450px;
 		max-width: 450px;
 		min-height: 220px;

src/main.css

@@ -6,12 +6,6 @@
   padding: 0;
   box-sizing: border-box;
 }
-*::-moz-selection {
-  background-color: #cbb7ac;
-}
-*::selection {
-  background-color: #cbb7ac;
-}
 
 :root {
   --bg-colour: #ffffff;
@@ -42,7 +36,7 @@
 }
 
 .dark {
-  --bg-colour: #201e1e;
+  --bg-colour: #202020;
   --main-colour: #c8c8c8;
   --secondary-colour: #d5cfcf;
   --text-colour: #dad7d7;
@@ -186,7 +180,8 @@ body .left_side #menu_section .options_container h3:hover {
 body .left_side #menu_section .options_container .give_unique_name .select_wrapper {
   display: block;
 }
-body .left_side #menu_section .options_container .give_unique_name .select_wrapper #extraInfo, body .left_side #menu_section .options_container .give_unique_name .select_wrapper #errorMsg {
+body .left_side #menu_section .options_container .give_unique_name .select_wrapper #extraInfo,
+body .left_side #menu_section .options_container .give_unique_name .select_wrapper #errorMsg {
   font-size: 0.9rem;
 }
 body .left_side #menu_section .options_container .give_unique_name .select_wrapper #extraInfo {
@@ -196,6 +191,7 @@ body .left_side #menu_section .options_container .give_unique_name .select_wrapp
 body .left_side #menu_section .options_container .give_unique_name .select_wrapper #errorMsg {
   color: #ba1616;
   padding: 6px 0;
+  color: rgba(88, 172, 92, 0.8745098039);
 }
 body .left_side #menu_section .options_container .give_unique_name .select_wrapper p {
   text-align: justify;
@@ -286,6 +282,8 @@ body .left_side #menu_section .embed_link_container {
 body .left_side #menu_section .embed_link_container .input_wrapper {
   display: flex;
   justify-content: center;
+  align-items: center;
+  flex-direction: column;
   width: 100%;
   gap: 10px;
 }
@@ -342,6 +340,12 @@ body #render_section {
   -o-border-radius: 20px;
   box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
 }
+body #render_section::-moz-selection {
+  background-color: var(--main-colour) !important;
+}
+body #render_section::selection {
+  background-color: var(--main-colour) !important;
+}
 body #render_section h1 {
   text-align: center;
   padding: 7px 10px;