Skip to content

Instantly share code, notes, and snippets.

@captproton

captproton/index.html

Created July 2, 2023 19:53
Show Gist options
  • Save captproton/5c225267b6b4afbc431b7eb9aa5f46bc to your computer and use it in GitHub Desktop.
Save captproton/5c225267b6b4afbc431b7eb9aa5f46bc to your computer and use it in GitHub Desktop.
Download ZIP
Liam for workers
Raw
index.html
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<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>Document</title>
</head>
<body>
<div class="today">
<div class="header bg-indigo-500 text-white new-shift-requests">
<h1 class="text-lg font-semibold">Today</h1>
<div class="bell count">
Bell Icon
</div>
<div class="notifications">
<ul role="list" class="divide-y divide-gray-200 text-black">
<li class="py-4 bg-white rounded border-4 border-indigo-500/100">
<!-- Your content -->
<h2>miribel wants to book</h2>
<p>sep 9 - oct 1</p>
<p>ogden UT</p>
</li>
<li class="py-4 bg-white rounded border-4 border-indigo-500/100">
<!-- Your content -->
<h2>miribel wants to book</h2>
<p>sep 9 - oct 1</p>
<p>ogden UT</p>
</li><!-- More items... -->
</ul>
</div>
</div>
<div class="shift-summary">
<h2 class="text-lg font-semibold">Your shifts</h2>
<div class=
"shift-summary flex flex-no-wrap overflow-x-scroll scrolling-touch items-start mb-8">
<!-- FIX: width of divs around button may need adjustment -->
<div class="upcoming flex-none mr-8 md:pb-4 border rounded-lg">
<button type="button" class=
"rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
Button text</button>
</div>
<div class="now flex-none mr-8 md:pb-4 border rounded-lg">
<button type="button" class=
"rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
Button text</button>
</div>
<div class="previous flex-none mr-8 md:pb-4 border rounded-lg">
<button type="button" class=
"rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
Button text</button>
</div>
</div>
<div class="shift-list">
<div class="overflow-hidden bg-white shadow sm:rounded-md">
<ul role="list" class="divide-y divide-gray-200">
<li class="px-4 py-4 sm:px-6">
<!-- Your content -->
<h3>currently working</h3>
<div class="facility-name">
Greenwich Health
</div>
<p>&nbsp;</p>
<div class="shift-description">
Maternity ward
</div>
<div class="shift-dates">
Jul 6 - 11
</div><span class="isolate inline-flex rounded-md shadow-sm"><button type=
"button" class=
"relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"><span class="isolate inline-flex rounded-md shadow-sm">Call</span>
<button type="button" class=
"relative -ml-px inline-flex items-center rounded-r-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
Message</button></button></span>
</li>
<li class="px-4 py-4 sm:px-6">
<!-- Your content -->
<h3>Starts Tomorrow</h3>
<div class="facility-name">
Greenwich Health
</div>
<p>&nbsp;</p>
<div class="shift-description">
Maternity ward
</div>
<div class="shift-dates">
Jul 6 - 11
</div><span class="isolate inline-flex rounded-md shadow-sm"><button type=
"button" class=
"relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"><span class="isolate inline-flex rounded-md shadow-sm">Call</span>
<button type="button" class=
"relative -ml-px inline-flex items-center rounded-r-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
Message</button></button></span>
</li>
<li class="px-4 py-4 sm:px-6">
<!-- Your content -->
<h3>Starts in 4 days</h3>
<div class="facility-name">
Greenwich Health
</div>
<p>&nbsp;</p>
<div class="shift-description">
Maternity ward
</div>
<div class="shift-dates">
Jul 6 - 11
</div><span class="isolate inline-flex rounded-md shadow-sm"><button type=
"button" class=
"relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"><span class="isolate inline-flex rounded-md shadow-sm">Call</span>
<button type="button" class=
"relative -ml-px inline-flex items-center rounded-r-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
Message</button></button></span>
</li><!-- More items... -->
</ul><a href="#">Show all (6)</a>
</div>
</div>
</div>
</div>
<div class="next-steps" style="background-color: hsl(0, 0%, 0%); color: hsl(0, 0%, 100%)">
<h2 class="text-xl font-bold">We're here to help</h2>
<div class="container mx-auto">
<div class="max-w-2xl mx-auto">
<div class="rounded p-4">
<!-- Article 1 -->
<div class="flex mb-4 rounded" style="background-color: hsl(0, 0%, 15%)">
<div class="w-24 h-24 flex-shrink-0">
<img src="https://via.placeholder.com/150" alt="Article 1" class="w-full h-full rounded">
</div>
<div class="ml-4" style="">
<h3 class="text-lg font-bold">The Essentials: Improve your career as you go</h3>
<p class="">Article</p>
</div>
</div>
<!-- Article 2 -->
<div class="flex mb-4 rounded" style="background-color: hsl(0, 0%, 15%)">
<div class="w-24 h-24 flex-shrink-0">
<img src="https://via.placeholder.com/150" alt="Article 2" class="w-full h-full rounded">
</div>
<div class="ml-4">
<h3 class="text-lg font-bold">How to make your employers feel special</h3>
<p class="">Video</p>
</div>
</div>
<!-- Article 3 -->
<div class="flex mb-4 rounded" style="background-color: hsl(0, 0%, 15%)">
<div class="w-24 h-24 flex-shrink-0">
<img src="https://via.placeholder.com/150" alt="Article 2" class="w-full h-full rounded">
</div>
<div class="ml-4">
<h3 class="text-lg font-bold">Why strive to be a SuperStaffer</h3>
<p class="">Article</p>
</div>
</div>
<!-- Add more articles as needed -->
</div>
</div>
</div>
</div>
<footer class="flex justify-center ">
<span class="isolate inline-flex rounded-md shadow-sm sm:w-full">
<button type="button" class="rounded-l-md relative flex flex-col items-center justify-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/></svg>
Today
</button> <button type="button" class="relative flex flex-col items-center justify-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16V352c0 8.8 7.2 16 16 16h96zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V474.7v-6.4V468v-4V416H112 64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L208 492z"/></svg>
Inbox
</button>
<button type="button" class="relative flex flex-col items-center justify-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg>
Calendar
</button>
<button type="button" class="relative flex flex-col items-center justify-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M160 80c0-26.5 21.5-48 48-48h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V80zM0 272c0-26.5 21.5-48 48-48H80c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272zM368 96h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H368c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48z"/></svg>
Insights
</button>
<button type="button" class="relative flex flex-col items-center justify-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
Menu
</button>
</span>
</footer>
</body>
</html>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment