From 21ab49f970a84d1258c2df484d3d842a16ca780c Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Sat, 25 Nov 2023 20:29:42 +0530
Subject: [PATCH] (feat): improved shareqr window styling better added
 copyurlbar

---
 htdocs/assets/_floatingbar.php |  8 +--
 htdocs/assets/style.css        | 94 +++++++++++++++-------------------
 2 files changed, 46 insertions(+), 56 deletions(-)

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index 8e55603..91191fa 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -102,15 +102,17 @@
 </div>
 <div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto h-[45vh] md:h-[60vh] py-6 fixed inset-x-0 top-[20vh] z-40 justify-between items-center bg-bg_secondary rounded-xl hidden">
     <div class="shareviaqr w-fit h-full flex flex-col items-center py-3 px-7">
-        <p class="self-start">Scan to Share</p>
+        <p class="self-start text-xl">Scan to Share</p>
         <div class="bg-bg_primary p-5 rounded-lg my-3">
             <div class="qrwrapper w-[150px] h-[150px]">
-                <img src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&color=38BDF8&bgcolor=0F172A" alt="shareqrcode">
+                <img id="pageqrcode" src="https://api.qrserver.com/v1/create-qr-code/?data=https://neosubhamoy.dev&color=38BDF8&bgcolor=0F172A" alt="qrcode">
             </div>
         </div>
+        <button class="w-[97%] px-4 py-2 rounded-lg border-[2px] border-accent_primary text-accent_primary my-2"><i class="fa-solid fa-download"></i>&nbsp; Download QR</button>
     </div>
     <div class="extrashareopt w-full h-full flex flex-col items-center py-3 px-7 border-l-[1px] border-[rgba(255,_255,_255,_0.15)]">
-        <p class="self-start">Other Sharing Options</p>
+        <p class="self-start text-lg"><i class="fa-solid fa-user-group text-accent_primary"></i>&nbsp; Sharing Options</p>
+        <div class="urlinputbar w-full flex justify-between items-center py-2 px-3 my-3 bg-bg_primary rounded-full overflow-hidden"><input id="urlinput" class="w-[85%] bg-bg_primary caret-accent_primary text-accent_four font-[300] outline-none" type="text" value="https://localhost/neosubhamoy/htdocs/" readonly><button class="urlcopybtn px-3 border-l-[1px] border-accent_secondary_transparent" title="Copy link"><i class="fa-regular fa-copy"></i></button></div>
     </div>
 </div>
 <div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index 65f7d89..8ec3035 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -874,6 +874,10 @@ video {
   height: 10px;
 }
 
+.h-\[150px\] {
+  height: 150px;
+}
+
 .h-\[200px\] {
   height: 200px;
 }
@@ -922,10 +926,6 @@ video {
   height: 100vh;
 }
 
-.h-\[150px\] {
-  height: 150px;
-}
-
 .w-0 {
   width: 0px;
 }
@@ -934,6 +934,10 @@ video {
   width: 0.5rem;
 }
 
+.w-\[150px\] {
+  width: 150px;
+}
+
 .w-\[200px\] {
   width: 200px;
 }
@@ -999,16 +1003,16 @@ video {
   width: 100vw;
 }
 
-.w-\[40\%\] {
-  width: 40%;
+.w-\[97\%\] {
+  width: 97%;
 }
 
-.w-\[60\%\] {
-  width: 60%;
+.w-\[15\%\] {
+  width: 15%;
 }
 
-.w-\[150px\] {
-  width: 150px;
+.w-\[85\%\] {
+  width: 85%;
 }
 
 .rotate-\[15deg\] {
@@ -1138,6 +1142,10 @@ video {
   border-top-width: 5px;
 }
 
+.border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
 .border-accent_primary {
   --tw-border-opacity: 1;
   border-color: rgb(56 189 248 / var(--tw-border-opacity));
@@ -1161,10 +1169,6 @@ video {
   border-color: rgb(217 217 217 / var(--tw-border-opacity));
 }
 
-.border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] {
-  border-color: rgba(255, 255, 255, 0.15);
-}
-
 .border-l-accent_primary {
   --tw-border-opacity: 1;
   border-left-color: rgb(56 189 248 / var(--tw-border-opacity));
@@ -1234,18 +1238,14 @@ video {
   padding: 0.75rem;
 }
 
-.p-\[0\.30rem\] {
-  padding: 0.30rem;
-}
-
-.p-4 {
-  padding: 1rem;
-}
-
 .p-5 {
   padding: 1.25rem;
 }
 
+.p-\[0\.30rem\] {
+  padding: 0.30rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1286,6 +1286,11 @@ video {
   padding-right: 0.80rem;
 }
 
+.px-\[0\.85rem\] {
+  padding-left: 0.85rem;
+  padding-right: 0.85rem;
+}
+
 .px-\[1rem\] {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1301,11 +1306,21 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .py-\[0\.05rem\] {
   padding-top: 0.05rem;
   padding-bottom: 0.05rem;
@@ -1321,37 +1336,6 @@ video {
   padding-bottom: 0.30rem;
 }
 
-.px-\[0\.85rem\] {
-  padding-left: 0.85rem;
-  padding-right: 0.85rem;
-}
-
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
-.pr-4 {
-  padding-right: 1rem;
-}
-
-.pr-7 {
-  padding-right: 1.75rem;
-}
-
-.pl-7 {
-  padding-left: 1.75rem;
-}
-
-.text-left {
-  text-align: left;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1442,6 +1426,10 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
+.text-accent_secondary_transparent {
+  color: rgba(255, 255, 255, 0.30);
+}
+
 .caret-accent_primary {
   caret-color: #38BDF8;
 }