Skip to content

Instantly share code, notes, and snippets.

@17twenty

17twenty/index.html

Created February 11, 2024 02:22
Show Gist options
  • Save 17twenty/3e6251af1948fa74ec5bd6aea53fc832 to your computer and use it in GitHub Desktop.
Save 17twenty/3e6251af1948fa74ec5bd6aea53fc832 to your computer and use it in GitHub Desktop.
Download ZIP
Can You Lend Me - Tailwind design + HTMX + Vanilla JS to do what we want...
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Can You Lend Me?</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// formatNumber(n)
// formats a number 1234567 to 1,234,567
function formatNumber(n) {
return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
// formatCurrency
// prepends a '$' to the input value, validates the
// number is valid decimal and restores cursor
function formatCurrency(input, blur) {
var input_val = input.value;
// don't validate empty input
if (input_val === "") {
return;
}
// original length
var original_len = input_val.length;
// initial caret position
var caret_pos = input.selectionStart;
// check for decimal
if (input_val.indexOf(".") >= 0) {
// get position of first decimal
// this prevents multiple decimals from
// being entered
var decimal_pos = input_val.indexOf(".");
// split number by decimal point
var left_side = input_val.substring(0, decimal_pos);
var right_side = input_val.substring(decimal_pos);
// add commas to left side of number
left_side = formatNumber(left_side);
// validate right side
right_side = formatNumber(right_side);
// On blur make sure 2 numbers after decimal
if (blur === "blur") {
right_side += "00";
}
// Limit decimal to only 2 digits
right_side = right_side.substring(0, 2);
// join number on .
input_val = "$" + left_side + "." + right_side;
} else {
// no decimal entered
// add commas to number
// remove all non-digits
input_val = formatNumber(input_val);
input_val = "$" + input_val;
// final formatting
if (blur === "blur") {
input_val += ".00";
}
}
// send updated string to input
input.value = input_val;
// put caret at the right position
var updated_len = input_val.length;
caret_pos = updated_len - original_len + caret_pos;
input.setSelectionRange(caret_pos, caret_pos);
}
</script>
</head>
<body>
<div class="bg-gray-50 bg-gradient-to-b from-white to-slate-200">
<div
class="m-auto flex min-h-screen max-w-screen-lg flex-col overflow-hidden p-4"
>
<div class="">
<div class="flex justify-between">
<!-- logo -->
<svg
viewBox="0 0 172 65"
class="flex-no-shrink h-16 fill-current"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M39.196 27.454H28.381c-.077-.894-.282-1.706-.614-2.435a5.499 5.499 0 0 0-1.342-1.88c-.563-.536-1.247-.945-2.052-1.226-.806-.294-1.72-.441-2.742-.441-1.79 0-3.305.434-4.545 1.304-1.227.869-2.16 2.115-2.8 3.739-.626 1.623-.94 3.573-.94 5.849 0 2.403.32 4.417.96 6.04.651 1.61 1.591 2.825 2.818 3.644 1.228.805 2.704 1.208 4.43 1.208.984 0 1.867-.122 2.646-.365a6.208 6.208 0 0 0 2.033-1.093 5.661 5.661 0 0 0 1.4-1.706 6.85 6.85 0 0 0 .748-2.282l10.815.076c-.128 1.662-.594 3.356-1.4 5.082-.805 1.713-1.95 3.298-3.432 4.756-1.47 1.444-3.292 2.608-5.466 3.49-2.173.882-4.698 1.323-7.574 1.323-3.605 0-6.84-.773-9.703-2.32-2.851-1.547-5.108-3.823-6.77-6.827-1.649-3.004-2.473-6.68-2.473-11.026 0-4.372.844-8.054 2.531-11.046 1.688-3.004 3.963-5.273 6.827-6.807 2.863-1.547 6.06-2.32 9.588-2.32 2.48 0 4.762.338 6.846 1.016 2.084.677 3.912 1.668 5.484 2.972 1.573 1.291 2.838 2.883 3.797 4.775.959 1.892 1.54 4.059 1.745 6.5Zm3.226-14.727h11.89l7.67 15.955h.307l7.67-15.955h11.89l-14.42 26.924V52H56.842V39.65l-14.42-26.923ZM85.324 52V12.727h10.662V43.41h15.878V52h-26.54Zm30.85-39.273h13.27l9.128 22.245h.46l9.128-22.245h13.27V52h-10.432V29.296h-.307l-8.744 22.397h-6.29l-8.745-22.551h-.306V52h-10.432V12.727Z"
fill="#FE5106"
/>
<path
d="M47.196 27.454H36.381c-.077-.894-.282-1.706-.614-2.435a5.499 5.499 0 0 0-1.342-1.88c-.563-.536-1.247-.945-2.052-1.226-.805-.294-1.72-.441-2.742-.441-1.79 0-3.305.434-4.545 1.304-1.227.869-2.16 2.115-2.8 3.739-.626 1.623-.94 3.573-.94 5.849 0 2.403.32 4.417.96 6.04.651 1.61 1.591 2.825 2.818 3.644 1.228.805 2.704 1.208 4.43 1.208.984 0 1.867-.122 2.646-.365a6.208 6.208 0 0 0 2.033-1.093 5.661 5.661 0 0 0 1.4-1.706 6.85 6.85 0 0 0 .748-2.282l10.815.076c-.128 1.662-.594 3.356-1.4 5.082-.805 1.713-1.95 3.298-3.432 4.756-1.47 1.444-3.292 2.608-5.466 3.49-2.173.882-4.698 1.323-7.574 1.323-3.605 0-6.84-.773-9.703-2.32-2.851-1.547-5.107-3.823-6.77-6.827-1.649-3.004-2.473-6.68-2.473-11.026 0-4.372.844-8.054 2.531-11.046 1.688-3.004 3.963-5.273 6.827-6.807 2.863-1.547 6.06-2.32 9.588-2.32 2.48 0 4.762.338 6.846 1.016 2.084.677 3.912 1.668 5.484 2.972 1.573 1.291 2.838 2.883 3.797 4.775.959 1.892 1.54 4.059 1.745 6.5Zm3.226-14.727h11.89l7.67 15.955h.307l7.67-15.955h11.89l-14.42 26.924V52H64.842V39.65l-14.42-26.923ZM93.324 52V12.727h10.662V43.41h15.878V52h-26.54Zm30.85-39.273h13.27l9.128 22.245h.46l9.128-22.245h13.27V52h-10.432V29.296h-.307l-8.744 22.397h-6.29l-8.745-22.551h-.306V52h-10.432V12.727Z"
fill="#59F969"
/>
<path
d="M42.196 27.454H31.381c-.077-.894-.282-1.706-.614-2.435a5.499 5.499 0 0 0-1.342-1.88c-.563-.536-1.247-.945-2.052-1.226-.806-.294-1.72-.441-2.742-.441-1.79 0-3.305.434-4.545 1.304-1.227.869-2.16 2.115-2.8 3.739-.626 1.623-.94 3.573-.94 5.849 0 2.403.32 4.417.96 6.04.651 1.61 1.591 2.825 2.818 3.644 1.228.805 2.704 1.208 4.43 1.208.984 0 1.867-.122 2.646-.365a6.208 6.208 0 0 0 2.033-1.093 5.661 5.661 0 0 0 1.4-1.706 6.85 6.85 0 0 0 .748-2.282l10.815.076c-.128 1.662-.594 3.356-1.4 5.082-.805 1.713-1.95 3.298-3.432 4.756-1.47 1.444-3.292 2.608-5.466 3.49-2.173.882-4.698 1.323-7.574 1.323-3.605 0-6.84-.773-9.703-2.32-2.851-1.547-5.108-3.823-6.77-6.827-1.649-3.004-2.473-6.68-2.473-11.026 0-4.372.844-8.054 2.531-11.046 1.688-3.004 3.963-5.273 6.827-6.807 2.863-1.547 6.06-2.32 9.588-2.32 2.48 0 4.762.338 6.846 1.016 2.084.677 3.912 1.668 5.484 2.972 1.573 1.291 2.838 2.883 3.797 4.775.959 1.892 1.54 4.059 1.745 6.5Zm3.226-14.727h11.89l7.67 15.955h.307l7.67-15.955h11.89l-14.42 26.924V52H59.842V39.65l-14.42-26.923ZM88.324 52V12.727h10.662V43.41h15.878V52h-26.54Zm30.85-39.273h13.27l9.128 22.245h.46l9.128-22.245h13.27V52h-10.432V29.296h-.307l-8.744 22.397h-6.29l-8.745-22.551h-.306V52h-10.432V12.727Z"
fill="#000"
/>
</svg>
<div class="flex">
<ul class="flex items-center space-x-4">
<li>
<a class="text-sm hover:text-orange-600" href=""
>Terms & Privacy</a
>
</li>
<li>
<a class="text-sm hover:text-orange-600" href=""
>My Account</a
>
</li>
<li>
<a class="text-sm hover:text-orange-600" href="">FAQs</a>
</li>
</ul>
</div>
</div>
</div>
<div class="m-6 flex flex-1">
<div class="flex w-full flex-col justify-center">
<div class="md:flex md:flex-row">
<!-- I need to go left -->
<div class="md:w-full">
<div class="mb-8">
<h1 class="mb-3 text-5xl font-black">Need a hand?</h1>
<h2 class="text-sm text-gray-800">
CYLM is the mate who is always happy to spot you some cash
til payday
</h2>
<h3 class="text-sm text-gray-800">
Borrow $100 to $2,500 and get the money in your account
today
</h3>
</div>
<form class="w-full space-y-4">
<div class="">
<input
type="text"
class="outline w-full rounded-xl border border-black p-2 shadow-[rgba(0,0,15,0.5)_-5px_5px_0px_5px] shadow-black outline-2 outline-black"
pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$"
placeholder="How much? $200.00?"
hx-on:keyup="formatCurrency(this)"
/>
</div>
<div class="">
<input
type="text"
class="outline w-full rounded-xl border border-black p-2 shadow-[rgba(0,0,15,0.5)_-5px_5px_0px_5px] shadow-black outline-2 outline-black"
placeholder="Your Number?"
/>
</div>
<div class="">
<button
class="outline w-full rounded-xl border border-black bg-orange-600 p-2 text-white outline-2 outline-black hover:bg-orange-500 hover:shadow-[rgba(0,0,15,0.5)_-5px_5px_0px_5px] hover:shadow-black hover:transition-all"
>
<span
class="inline-flex items-center space-x-2 hover:space-x-4"
><span class="font-bold">Let's goooo</span
><svg
xmlns="http://www.w3.org/2000/svg"
class="flex-no-shrink h-6 fill-current"
viewBox="0 0 448 512"
>
<path
d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
/>
></span>
</button>
</div>
</form>
</div>
<div class="flex w-full">
<img
src="https://i.imgur.com/sKB2p4I.png"
class="m-auto h-48 w-96 object-contain md:h-full md:w-full"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
crossorigin="anonymous"
></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment