Skip to content

Instantly share code, notes, and snippets.

@tscritch
Last active February 11, 2022 15:33
Show Gist options
  • Select an option

  • Save tscritch/2344442cab8e6adb7d231fd89b0d4c4f to your computer and use it in GitHub Desktop.

Select an option

Save tscritch/2344442cab8e6adb7d231fd89b0d4c4f to your computer and use it in GitHub Desktop.
A template to create a ui based tool
#! /bin/bash
filename="$HOME/Documents/tools/$1.html"
cp $HOME/Documents/tools/tool-template.html $filename
sed -i '' "s/{NAME}/$1/" "$filename"
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{NAME}</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
* {
font-family: "FiraCode Nerd Font";
}
</style>
</head>
<body class="bg-slate-100">
<button
id="button"
class="block bg-sky-500 text-white px-4 py-2 m-2 rounded-lg"
>
DO THING
</button>
<div id="output" class="mt-4"></div>
<script>
const button = document.getElementById("button");
const output = document.getElementById("output");
convert.addEventListener("click", () => {
output.innerText = "Surprise! 🔨";
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment