Merge pull request #33 from aviiciii/qr

QR functionality added

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

assets/script.js

@@ -54,6 +54,11 @@ document.getElementById("myinput").onclick = function () {
         }
         // get shortened link
         let url = String(data.shortURL);
+
+        // add url to qr code img src
+        qrimg = document.getElementById("qr-img");
+        qrimg.setAttribute('src', 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&margin=10&bgcolor=f1ede2&data=' + url);
+
         // remove https://
         url =url.replace("https://", "");
         // display shortened link
@@ -177,6 +182,10 @@ function dark() {
     // change copy-to-clipboard icon
     document.getElementById("copy-to-clipboard").setAttribute('src', 'assets/copy-dark.png');
 
+    // change qr icon
+    document.getElementById("qr").setAttribute('src', 'assets/qr-dark.png');
+
+
     // save preference
     localStorage.setItem('dark-mode', 'true');
 };
@@ -193,6 +202,9 @@ function light(){
     // change copy-to-clipboard icon
     document.getElementById("copy-to-clipboard").setAttribute('src', 'assets/copy.png');
 
+    // change qr icon
+    document.getElementById("qr").setAttribute('src', 'assets/qr.png');
+
     // save preference
     localStorage.setItem('dark-mode', 'false');
 
@@ -209,4 +221,36 @@ window.addEventListener('load', function() {
 
     // change transition effect for dark mode toggle
     document.body.style.transition = 'background-color 0.4s ease-out';
-});
+});
+
+
+
+
+
+// modal for qr code
+
+// Get the modal
+var modal = document.getElementById("myModal");
+
+// Get the button that opens the modal
+var btn = document.getElementById("qr-btn");
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
+
+// When the user clicks on the button, open the modal
+btn.onclick = function() {
+  modal.style.display = "block";
+}
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() {
+  modal.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+}

assets/styles.css

@@ -286,11 +286,11 @@ body {
 }
 
 .left {
-	width: 90%;
+	width: 80%;
 }
 
 .right {
-	width: 10%;
+	width: 20%;
 	/* not selectable */
 	user-select: none;
 	-webkit-touch-callout: none;
@@ -426,3 +426,74 @@ body {
 	margin: 20px 30px 10px 10px;
 
 }
+
+/* copy to clipboard img */
+#copy{
+	width: fit-content;
+	padding: 0;
+	margin: 0;
+}
+#copy-to-clipboard{
+	width: 30px;
+}
+
+#qr{
+	width: 30px;
+}
+
+#qr-btn{
+	width: fit-content;
+	padding: 0;
+	margin: 0;
+}
+
+
+/* modal */
+
+/* The Modal (background) */
+.modal {
+	display: none; /* Hidden by default */
+	position: fixed; /* Stay in place */
+	z-index: 1; /* Sit on top */
+	left: 0;
+	top: 0;
+	width: 100%; /* Full width */
+	height: 100%; /* Full height */
+	overflow: auto; /* Enable scroll if needed */
+	background-color: rgb(0,0,0); /* Fallback color */
+	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+/* Modal Content/Box */
+.modal-content {
+	background-color: var(--primary-color);
+	margin: 15% auto; /* 15% from the top and centered */
+	padding: 20px;
+	border: 1px solid #888;
+	width: 270px; /* Could be more or less, depending on screen size */
+	height: 270px;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.dark-mode .modal-content {
+	background-color: #f1ede2;
+}
+
+/* The Close Button */
+.close {
+	color: #aaa;
+	float: right;
+	font-size: 28px;
+	font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+	color: black;
+	text-decoration: none;
+	cursor: pointer;
+}

index.html

@@ -72,7 +72,8 @@
                     <p id="message">link.laavesh.ml/ </p>
                 </div>
                 <div class="column right">
-                    <button name="copy" id="copy"><img id="copy-to-clipboard" src="assets\copy.png" width="30px" alt="copy"  /></button>
+                    <button name="qr-btn" id="qr-btn"> <img id="qr"  src="assets/qr.png" alt="qr" /> </button>
+                    <button name="copy" id="copy"><img id="copy-to-clipboard" src="assets/copy.png" alt="copy"  /></button>
                 </div>
             </div>
 
@@ -84,8 +85,21 @@
 
 		</div>
 
+        <!-- The Modal -->
+        <div id="myModal" class="modal">
+
+            <!-- Modal content -->
+            <div class="modal-content">
+                <span class="close"></span>
+                <img id="qr-img" src="https://api.qrserver.com/v1/create-qr-code/?data=https://link.laavesh.ml/&amp;margin=10&amp;size=250x250&amp;bgcolor=f1ede2" />
+            </div>
+
+        </div>
+
         <!-- link script -->
         <script src="assets/script.js"></script>
 
+
+
 	</body>
 </html>