-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update: responsive stat page & copy shorten URL
- Loading branch information
Showing
2 changed files
with
51 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,36 @@ | ||
| <div class="flex flex-col items-center gap-2 text-lg font-mono mb-2 mt-10 text-center"> | ||
| <a class="underline text-white" href="/s/{{ .ShortUrl }}">shawty/s/{{ .ShortUrl }}</a> | ||
| <p>Long URL: <a class="underline" href="{{ .OriginalUrl }}">{{ .OriginalUrl }}</a></p> | ||
|
|
||
| <a class="my-3 hover:underline w-fit p-3 rounded-md bg-zinc-700" href="/stat/{{ .ShortUrl }}">Total clicks of your short URL</a> | ||
| <div class="flex flex-col items-center gap-4 text-lg font-mono mb-2 mt-10 text-center"> | ||
| <div class="flex items-center gap-2"> | ||
| <a class="underline text-white" href="/s/{{ .ShortUrl }}">shawty/s/{{ .ShortUrl }}</a> | ||
| <button onclick="copyToClipboard(this, '/s/{{ .ShortUrl }}')" class="bg-zinc-700 hover:bg-zinc-600 text-white font-bold py-1 px-3 rounded transition duration-300"> | ||
| Copy | ||
| </button> | ||
| </div> | ||
| <p class="text-sm sm:text-base">Long URL: <a class="underline break-all" href="{{ .OriginalUrl }}">{{ .OriginalUrl }}</a></p> | ||
| <div class="flex gap-2"> | ||
| <a class="hover:underline p-2 rounded-md bg-zinc-700 transition duration-300 hover:bg-zinc-600" href="/stat/{{ .ShortUrl }}">See the stats for your short URL here</a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| function copyToClipboard(target, text) { | ||
| const basename = window.location.origin; | ||
|
|
||
| navigator.clipboard | ||
| .writeText(basename + text) | ||
| .then(() => { | ||
| const originalText = target.textContent; | ||
| target.textContent = "Copied!"; | ||
| target.classList.add("opacity-50"); | ||
| target.classList.add("cursor-not-allowed"); | ||
|
|
||
| setTimeout(() => { | ||
| target.textContent = originalText; | ||
| target.classList.remove("opacity-50"); | ||
| target.classList.remove("cursor-not-allowed"); | ||
| }, 500); | ||
| }) | ||
| .catch((err) => { | ||
| console.error("Failed to copy: ", err); | ||
| }); | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,5 @@ | ||
| <!doctype html> | ||
| <html> | ||
|
|
||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
@@ -9,28 +8,27 @@ | |
| <script src="https://unpkg.com/[email protected]" | ||
| integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" | ||
| crossorigin="anonymous"></script> | ||
| <title>Shawty</title> | ||
| <title>Shawty - URL Statistics</title> | ||
| <link rel="stylesheet" href="/static/dist.css"> | ||
| </head> | ||
|
|
||
| <body class="bg-[#090909] text-[#ada9a9] mt-8"> | ||
| <h1 class="text-5xl text-center text-white font-bold">Shawty</h1> | ||
| <div class="w-[56rem] flex flex-col gap-3 my-8 mx-auto"> | ||
| <h2 class="text-3xl font-bold font-mono">Total number of clicks</h2> | ||
| <p class="text-lg">The number of clicks from the shortened URL that redirected the user to the destination page.</p> | ||
| <a class="underline bg-[#292929] font-mono p-2 w-fit rounded-md text-white" href="/s/{{ .ShortUrl }}">shawty/s/{{ | ||
| .ShortUrl }}</a> | ||
| <p class="text-lg font-bold flex gap-3">Original URL : <a class="underline font-mono" href="{{ .OriginalUrl }}">{{ | ||
| .OriginalUrl }}</a></p> | ||
| <h3 class="font-bold text-xl font-mono">Count: {{ .Count }}</h3> | ||
| <h3 class="font-bold text-xl font-mono">Last Accessed: {{ .LastAccessed }}</h3> | ||
| <body class="bg-[#090909] text-[#ada9a9] min-h-screen flex flex-col items-center px-4 sm:px-6 lg:px-8 py-8 mt-8"> | ||
| <h1 class="text-4xl md:text-5xl text-center text-white font-bold mb-8">Shawty</h1> | ||
| <div class="fw-full max-w-4xl flex flex-col gap-3 my-4 mx-auto"> | ||
| <h2 class="text-2xl sm:text-3xl font-bold font-mono">Total number of clicks</h2> | ||
| <p class="text-base sm:text-lg">The number of clicks from the shortened URL that redirected the user to the destination page.</p> | ||
| <a class="underline bg-[#292929] font-mono p-2 w-fit rounded-md text-white break-all" href="/s/{{ .ShortUrl }}">shawty/s/{{ .ShortUrl }}</a> | ||
| <p class="text-base sm:text-lg font-bold flex flex-col sm:flex-row gap-2 sm:gap-3"> | ||
| <span>Original URL:</span> | ||
| <a class="underline font-mono break-all" href="{{ .OriginalUrl }}">{{ .OriginalUrl }}</a> | ||
| </p> | ||
| <h3 class="font-bold text-lg sm:text-xl font-mono">Count: {{ .Count }}</h3> | ||
| <h3 class="font-bold text-lg sm:text-xl font-mono">Last Accessed: {{ .LastAccessed }}</h3> | ||
| </div> | ||
| <div class="flex justify-center mt-4"> | ||
| <div class="mt-8"> | ||
| <a href="/" | ||
| class="px-4 py-2 font-semibold rounded-full transition duration-300 ease-in-out bg-gray-700 hover:bg-gray-600 text-white"> | ||
| Go Home | ||
| </a> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> | ||
| </html> | ||