Update sleeky

plugins/sleeky-frontend/frontend/assets/sass/styles.scss

@@ -0,0 +1,35 @@
+// Font Imports
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans&display=swap');
+
+$open-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$montserrat: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+// Bootstrap Overrides
+$enable-negative-margins: true;
+$font-family-sans-serif: $open-sans;
+$input-btn-font-family: $montserrat;
+$headings-font-family: $montserrat;
+$input-bg: #ebebeb;
+$input-font-weight: 700;
+$btn-font-weight: 700;
+$input-border-width: 0;
+$border-radius: 6px;
+
+// Bootstrap Imports
+@import '../../node_modules/bootstrap/scss/bootstrap.scss';
+
+// Custom Styles
+.bold-link {
+    font-family: $montserrat;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+@include media-breakpoint-down(md) {
+    .input-group-block {
+        input, button {
+            width: 100%;
+            border-radius: $border-radius !important;
+        }
+    }
+}

plugins/sleeky-frontend/frontend/assets/svg/custom-url.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#757575"><path clip-rule="evenodd" fill="none" d="M0 0h24v24H0z"/><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>

plugins/sleeky-frontend/frontend/config.php

@@ -0,0 +1,59 @@
+<?php 
+// CONFIG - These control the look and details on your site. Consult documentation for more details.
+
+// GENERAL
+
+// Page title for your site
+define('title', 'Sleeky theme for YOURLS'); 
+
+// The short title of your site, used in the footer and in some sub pages
+define('shortTitle', 'Sleeky');
+
+// A description of your site, shown on the homepage.
+define('description', 'A quick description on why your site is so fantastic, what it does and why people should definitely start using it. Oh, and how it’s free.'); 
+
+// The favicon for your site
+define('favicon', '/frontend/assets/img/favicon.ico');
+
+// Logo for your site, displayed on home page
+define('logo', '/frontend/assets/img/logo-black.png');
+
+// Enable reCAPTCHA V3
+// It is highly recommended you use reCAPTCHA V3. It will stop spam. You can get a site and secret key from here: https://www.google.com/recaptcha/admin/create
+define("enableRecaptcha", false);
+
+// reCAPTCHA V3 Site Key
+define("recaptchaV3SiteKey", 'YOUR_SITE_KEY_HERE');
+
+// reCAPTCHA V3 Secret Key
+define("recaptchaV3SecretKey", 'YOUR_SECRET_KEY_HERE');
+
+// Enables the custom URL field
+// true or false
+define('enableCustomURL', true);
+
+// Optional
+// Set a primary colour to be used. Default: #007bff
+// Here are some other colours you could try:
+// #f44336: red, #9c27b0: purple, #00bcd4: teal, #ff5722: orange
+define('colour', '#007bff');
+
+// Optional
+// Set a background image to be used.
+// default: unsplash.com random daily photo of the day
+// More possibilities of photo embedding from unsplash could be found at: https://source.unsplash.com
+// define('backgroundImage', 'https://source.unsplash.com/daily');
+
+// FOOTER
+
+// These are the links in the footer. Add a new link for each new link.
+// The array follows a title link structure:
+// "TITLE" => "LINK",
+$footerLinks = [
+    "About"   =>  "https://sleeky.flynntes.com/",
+    "Contact" =>  "https://yourls.org/",
+    "Legal"   =>  "https://yourls.org/",
+    "Admin"   =>  "/admin"
+];
+
+?>

plugins/sleeky-frontend/frontend/footer.php

@@ -0,0 +1,86 @@
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+
+<script>
+	// From https://stackoverflow.com/a/30810322
+	function fallbackCopyTextToClipboard(text) {
+		var textArea = document.createElement("textarea");
+		textArea.value = text;
+		
+		// Avoid scrolling to bottom
+		textArea.style.top = "0";
+		textArea.style.left = "0";
+		textArea.style.position = "fixed";
+
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+
+		try {
+			var successful = document.execCommand('copy');
+			var msg = successful ? 'successful' : 'unsuccessful';
+			console.log('Fallback: Copying text command was ' + msg);
+		} catch (err) {
+			console.error('Fallback: Oops, unable to copy', err);
+		}
+
+		document.body.removeChild(textArea);
+	}
+
+	function copyTextToClipboard(text) {
+		if (!navigator.clipboard) {
+			fallbackCopyTextToClipboard(text);
+			return;
+		}
+		navigator.clipboard.writeText(text).then(function() {
+			console.log('Async: Copying to clipboard was successful!');
+		}, function(err) {
+			console.error('Async: Could not copy text: ', err);
+		});
+	}
+
+	const copyBtn = document.querySelector('button#copy-button');
+
+	if (copyBtn) {
+		copyBtn.addEventListener('click', function(event) {
+			copyTextToClipboard(event.target.dataset.shorturl);
+		});
+	}
+
+	const closeShortenedLinkScreenButton = document.querySelector('button#close-shortened-screen');
+
+	if (closeShortenedLinkScreenButton) {
+		closeShortenedLinkScreenButton.addEventListener('click', function(event) {
+			window.location.href=window.location.href;
+		});
+	}
+</script>
+
+<?php if (enableRecaptcha) : ?>
+	<script src="https://www.google.com/recaptcha/api.js?render=<?php echo recaptchaV3SiteKey ?>"></script>
+	<script>
+		const shortenForm = document.querySelector("form#shortenlink");
+
+		if (shortenForm) {
+			shortenForm.addEventListener("submit", function(e){
+				e.preventDefault();
+				grecaptcha.ready(function() {
+					grecaptcha.execute('<?php echo recaptchaV3SiteKey ?>', {action: 'shorten_link'}).then(function(token) {
+						const tokenInput = document.createElement("input");
+						tokenInput.setAttribute("type", "hidden");
+						tokenInput.setAttribute("name", "token");
+						tokenInput.setAttribute("value", token);
+						
+						const actionInput = document.createElement("input");
+						actionInput.setAttribute("type", "hidden");
+						actionInput.setAttribute("name", "action");
+						actionInput.setAttribute("value", "shorten_link");
+						
+						shortenForm.prepend(tokenInput);
+						shortenForm.prepend(actionInput);
+						shortenForm.submit();
+					});
+				});
+			});
+		}
+	</script>
+<?php endif; ?>

plugins/sleeky-frontend/frontend/functions.php

@@ -0,0 +1,26 @@
+<?php 
+  // Darken or lighten a hex code
+  // Full credit goes to: https://stackoverflow.com/a/11951022
+  function adjustBrightness($hex, $steps) {
+    // Steps should be between -255 and 255. Negative = darker, positive = lighter
+    $steps = max(-255, min(255, $steps));
+
+    // Normalize into a six character long hex string
+    $hex = str_replace('#', '', $hex);
+    if (strlen($hex) == 3) {
+        $hex = str_repeat(substr($hex,0,1), 2).str_repeat(substr($hex,1,1), 2).str_repeat(substr($hex,2,1), 2);
+    }
+
+    // Split into three parts: R, G and B
+    $color_parts = str_split($hex, 2);
+    $return = '#';
+
+    foreach ($color_parts as $color) {
+        $color   = hexdec($color); // Convert to decimal
+        $color   = max(0,min(255,$color + $steps)); // Adjust color
+        $return .= str_pad(dechex($color), 2, '0', STR_PAD_LEFT); // Make two char hex code
+    }
+
+    return $return;
+  }
+?>

plugins/sleeky-frontend/frontend/gulpfile.js

@@ -0,0 +1,14 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass')(require('sass'));
+
+gulp.task('sass', () => {
+    return gulp.src("./assets/sass/*.scss")
+        .pipe(sass())
+        .pipe(gulp.dest("dist/"))
+});
+
+gulp.task('start', gulp.series('sass', function () {
+    gulp.watch("sass/*.scss", gulp.series('sass'));
+}));
+
+gulp.task('default', gulp.series('start'));

plugins/sleeky-frontend/frontend/header.php

@@ -0,0 +1,45 @@
+<?php
+    include 'config.php';
+    include 'functions.php';
+?>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-patible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="<?php echo description ?>">
+        <link rel="icon" href="<?php echo favicon ?>">
+
+        <title><?php echo title ?></title>
+
+        <link rel="stylesheet" href="<?php echo $YOURLS_SITE ?>/frontend/dist/styles.css">
+
+        <?php if (defined('backgroundImage')) : ?>
+            <style>
+                body {
+                    background: url(<?php echo backgroundImage ?>) no-repeat center center fixed !important; 
+                    background-size: cover !important;
+                }
+            </style>
+        <?php else : ?>
+            <style>
+                body {
+                    background-color: <?php echo colour ?>;
+                }
+            </style>
+        <?php endif; ?>
+
+        <style>
+            .btn-primary {
+                background-color: <?php echo colour ?>;
+                border-color: <?php echo colour ?>;
+            }
+
+            .btn-primary:hover,
+            .btn-primary:focus,
+            .btn-primary:active {
+                background-color: <?php echo adjustBrightness(colour, -15) ?>;
+                border-color: <?php echo adjustBrightness(colour, -15) ?>;
+            }
+        </style>
+    </head>

plugins/sleeky-frontend/frontend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "sleeky-frontend",
+  "version": "2.5.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "gulp",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-sass": "^5.0.0",
+    "sass": "^1.35.1"
+  },
+  "dependencies": {
+    "bootstrap": "^5.0.2",
+    "popper.js": "^1.16.1"
+  }
+}

plugins/sleeky-frontend/index.php

@@ -72,77 +72,79 @@
 	}
 ?>
 
-	
-<?php if( isset($status) && $status == 'success' ):  ?>
+	<div class="container-fluid h-100">
+		<div class="row justify-content-center align-items-center h-100">
+			<div class="col-12 col-lg-10 col-xl-8 col-xxl-5 mt-5">
+				<div class="card border-0 mt-5">
+					<?php if( isset($status) && $status == 'success' ):  ?>
+						<?php $url = preg_replace("(^https?://)", "", $shorturl );  ?>
 
-	<?php $url = preg_replace("(^https?://)", "", $shorturl );  ?>
+						<div class="close-container text-end mt-3 me-3">
+							<button type="button" class="btn-close" id="close-shortened-screen" aria-label="Close"></button>
+						</div>
 
-	<section class="success-screen">
-		<div class="container verticle-center">
-			<div class="main-content">
-				<div class="close noselect">
-				    <a href="javascript:window.location.href=window.location.href;"><i class="material-icons">close</i></a>
-				</div>
-				<section class="head">
-					<h2>YOUR SHORTENED LINK:</h2>
-				</section>
-				<section class="link-section">
-					<input type="text" class="short-url" disabled style="text-transform:none;" value="<?php echo $shorturl; ?>">
-					<button class="short-url-button noselect" data-clipboard-text="<?php echo $shorturl; ?>">Copy</button>
-					<span class="info">View info &amp; stats at <a href="<?php echo $shorturl; ?>+"><?php echo $url; ?>+</a></span>
-				</section>
-			</div>
-	</section>
+						<div class="card-body px-5 pb-5">
+							<h2 class="text-uppercase text-center">Your shortened link</h2>
+							
+							<div class="row justify-content-center">
+								<div class="col-10">
+									<div class="input-group input-group-block mt-4 mb-3">
+										<input type="text" class="form-control text-uppercase" value="<?php echo $shorturl; ?>" required>
+										<button class="btn btn-primary text-uppercase py-2 px-5 mt-2 mt-md-0" type="submit" id="copy-button" data-shorturl="<?php echo $shorturl; ?>">Copy</button>
+									</div>
+									<span class="info">View info &amp; stats at <a href="<?php echo $shorturl; ?>+"><?php echo $url; ?>+</a></span>
+								</div>
+							</div>
+						</div>
+					<?php else: ?>
+						<div class="text-center">
+							<img src="<?php echo YOURLS_SITE ?><?php echo logo ?>" alt="Logo" width="95px" class="mt-n5">
+						</div>
+						<div class="card-body px-md-5">
+							<p><?php echo description ?></p>
 
-    <script>
-	    var clipboard = new ClipboardJS('.short-url-button');
-    </script>
+							<?php if ( isset( $_REQUEST['url'] ) && $_REQUEST['url'] != 'http://' ): ?>
+								<?php if (strpos($message,'added') === false): ?>
+									<div class="alert alert-danger alert-dismissible fade show" role="alert">
+										<span>Oh no, <?php echo $message; ?>!</span>
+										<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+									</div>	    
+								<?php endif; ?>
+							<?php endif; ?>
 
-<?php else: ?>
-
-	<?php $site = YOURLS_SITE; ?>
-
-	<div class="container verticle-center main">
-		<div class="main-content">
-			<div class="above">
-				<img class="noselect" src="<?php echo siteURL ?><?php echo logo ?>" alt="Logo" width="95px">
-			</div>
-			<section class="head">
-				<p><?php echo description ?></p>
-			</section>
-			<section class="field-section">
-				<?php if ( isset( $_REQUEST['url'] ) && $_REQUEST['url'] != 'http://' ): ?>
-					<?php if (strpos($message,'added') === false): ?>
-						<div id="error" class="alert alert-warning error" role="alert">
-							<h5>Oh no, <?php echo $message; ?>!</h5>
-						</div>	    
-					<?php endif; ?>
-				<?php endif; ?>
-				<form id="shortenlink" method="post" action="">
-					<input type="url" name="url" class="url" id="url" placeholder="PASTE URL, SHORTEN &amp; SHARE" required>
-					<input type="submit" value="Shorten">
-					<?php if (enableCustomURL): ?>
-						<span class="customise-button noselect" id="customise-toggle"><img src="<?php echo siteURL ?>/frontend/assets/svg/custom-url.svg" alt="Options"> Customise Link</span>
-						<div class="customise-container" id="customise-link" style="display:none;">
-							<span><?php echo preg_replace("(^https?://)", "", siteURL ); ?>/</span>
-							<input type="text" name="keyword" class="custom" placeholder="CUSTOM URL">
+							<form id="shortenlink" method="post" action="">
+								<div class="input-group input-group-block mt-4 mb-3">
+									<input type="url" name="url" id="url" class="form-control text-uppercase" placeholder="PASTE URL, SHORTEN &amp; SHARE" aria-label="PASTE URL, SHORTEN &amp; SHARE" aria-describedby="shorten-button" required>
+									<input class="btn btn-primary text-uppercase py-2 px-4 mt-2 mt-md-0" type="submit" id="shorten-button" value="Shorten" />
+								</div>
+								<?php if (enableCustomURL): ?>
+									<a class="btn btn-sm btn-white text-black-50 text-uppercase" data-bs-toggle="collapse" href="#customise-link" role="button" aria-expanded="false" aria-controls="customise-link">
+										<img src="<?php echo YOURLS_SITE ?>/frontend/assets/svg/custom-url.svg" alt="Options"> Customise Link
+									</a>
+									<div class="collapse" id="customise-link">
+										<div class="mt-2 card card-body">
+											<div class="d-flex  align-items-center">
+												<span class="me-2"><?php echo preg_replace("(^https?://)", "", YOURLS_SITE ); ?>/</span>
+												<input type="text" name="keyword" class="form-control form-control-sm text-uppercase" placeholder="CUSTOM URL" aria-label="CUSTOM URL">
+											</div>
+										</div>
+									</div>
+								<?php endif; ?>
+							</form>
 						</div>
 					<?php endif; ?>
-				</form>
-			</section>
-			<section class="footer">
-		<div>
-			<span class="light">&copy; <?php echo date("Y"); ?> <?php echo shortTitle ?></span>
-			<div class="footer-links">
-				<?php foreach ($footerLinks as $key => $val): ?>
-					<a href="<?php echo $val ?>"><span><?php echo $key ?></span></a>
-				<?php endforeach ?>
+				</div>
+				<div class="d-flex flex-column flex-md-row align-items-center my-3">
+					<span class="text-white fw-light">&copy; <?php echo date("Y"); ?> <?php echo shortTitle ?></span>
+					<div class="ms-3">
+						<?php foreach ($footerLinks as $key => $val): ?>
+							<a class="bold-link me-3 text-white text-decoration-none" href="<?php echo $val ?>"><span><?php echo $key ?></span></a>
+						<?php endforeach ?>
+					</div>
+				</div>
 			</div>
 		</div>
-	</section>
-		</div>
 	</div>
-<?php endif; ?>
-<?php include 'frontend/footer.php'; ?>
+	<?php include 'frontend/footer.php'; ?>
 </body>
 </html>