Add files via upload

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;
+        }
+    }
+}

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>

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', 'DarkSleeky theme for YOURLS'); 
+
+// The short title of your site, used in the footer and in some sub pages
+define('shortTitle', 'DarkSleeky');
+
+// 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', '#7289DA');
+
+// 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"
+];
+
+?>

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; ?>

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;
+  }
+?>

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'));

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>

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"
+  }
+}