From e308b7b4486499d265b189c26370854b1c5a8614 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Tue, 17 Aug 2021 19:41:54 +0200
Subject: [PATCH] Added error alert

---
 index.html | 114 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 73 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index 7e2c896..f7ec1a0 100644
--- a/index.html
+++ b/index.html
@@ -18,55 +18,87 @@
 	<div class="p-4 flex items-center justify-center bg-white">
 		<div class="w-full mx-auto">
 			<h1 class="text-lg text-center">LinkyLinky</h1>
-			<div>
-				<div id="target_container">
-					<div class="mt-1 flex rounded-md shadow-sm">
-						<input type="url" name="target" id="target" required
-							class="flex-1 min-w-0 block rounded-lg w-full px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
-							placeholder="target url" />
+
+			<div class="rounded-md bg-red-100 p-4 hidden" id="error_container">
+				<div class="flex">
+					<div class="flex-shrink-0">
+						<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" viewBox="0 0 20 20"
+							fill="currentColor">
+							<path fill-rule="evenodd"
+								d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+								clip-rule="evenodd" />
+						</svg>
 					</div>
-				</div>
-				<div id="shortcode_container">
-					<div class="mt-1 flex rounded-md shadow-sm">
-						<span
-							class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
-							https://kauf.es/
-						</span>
-						<input type="text" name="shortcode" id="shortcode"
-							class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
-							placeholder="custom url" />
-					</div>
-				</div>
-				<div class="hidden" name="shorturl_container" id="shorturl_container">
-					<div class="inline-flex w-full" id="shorturl_copy" data-clipboard-target="#shorturl">
-						<p name="shorturl" id="shorturl" class:bg-green-200={copied}
-							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2">
-							link
+					<div class="ml-3">
+						<p class="text-sm font-medium text-red-800" id="error_text">
+							
 						</p>
-						<div
-							class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
-							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-								<path fill="none" d="M0 0h24v24H0z" />
-								<path fill="currentColor"
-									d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" />
-							</svg>
+					</div>
+					<div class="ml-auto pl-3">
+						<div class="-mx-1.5 -my-1.5">
+							<button
+								id="error_dismiss"
+								class="inline-flex bg-red-100 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
+								<span class="sr-only">Dismiss</span>
+								<svg class="h-5 w-5" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+									<path fill-rule="evenodd"
+										d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+										clip-rule="evenodd"></path>
+								</svg>
+							</button>
 						</div>
 					</div>
-					<p class="text-gray-500 text-xs">
-						Click to copy url to keyboard
-					</p>
 				</div>
-				<button type="submit" id="create"
-					class="mt-1 w-full items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-					Create
-				</button>
-				<button type="button" id="reset"
-					class="hidden mt-1 w-full items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-					Reset
-				</button>
 			</div>
+			<div id="target_container">
+				<div class="mt-1 flex rounded-md shadow-sm">
+					<input type="url" name="target" id="target" required
+						class="flex-1 min-w-0 block rounded-lg w-full px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
+						placeholder="target url" />
+				</div>
+			</div>
+			<div id="shortcode_container">
+				<div class="mt-1 flex rounded-md shadow-sm">
+					<span
+						class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
+						https://kauf.es/
+					</span>
+					<input type="text" name="shortcode" id="shortcode"
+						class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
+						placeholder="custom url" />
+				</div>
+			</div>
+			<div class="hidden" name="shorturl_container" id="shorturl_container">
+				<div class="inline-flex w-full" id="shorturl_copy" data-clipboard-target="#shorturl">
+					<p name="shorturl" id="shorturl" class:bg-green-200={copied}
+						class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2">
+						link
+					</p>
+					<div
+						class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+							<path fill="none" d="M0 0h24v24H0z" />
+							<path fill="currentColor"
+								d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" />
+						</svg>
+					</div>
+				</div>
+				<p class="text-gray-500 text-xs">
+					Click to copy url to keyboard
+				</p>
+			</div>
+			<button type="submit" id="create"
+				class="mt-1 w-full items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+				Create
+			</button>
+			<button type="button" id="reset"
+				class="hidden mt-1 w-full items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+				Reset
+			</button>
 		</div>
 	</div>
+	</div>
 
 	<script src="./clipboard.min.js"></script>
 	<script src="./main.js"></script>