generated from harvanchik/tailwind-template
-
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.
- Loading branch information
1 parent
bd33b9c
commit 0d7cfe6
Showing
5 changed files
with
1,894 additions
and
9 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
2 changes: 1 addition & 1 deletion
2
docs/assets/styles/styles-6727577b08.css → docs/assets/styles/styles-17d8b10903.css
Large diffs are not rendered by default.
Oops, something went wrong.
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,4 +1,4 @@ | ||
| <!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Football Game Card</title><meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name=apple-mobile-web-app-capable content=yes><meta name=mobile-web-app-capable content=yes><link rel=apple-touch-icon href=./assets/img/app-ed73e78a4b.png><link rel=stylesheet href=./assets/styles/styles-6727577b08.css><script defer=defer src=https://unpkg.com/[email protected]/dist/cdn.min.js></script></head><body class=relative><section class="mx-auto mt-10 flex w-max lg:mt-0 lg:h-screen lg:items-center"><div class="flex max-h-[4.9in] max-w-[3.65in] flex-col space-y-1.5 rounded-xl border-2 border-black bg-gray-500/10 p-3 shadow-lg print:mt-40 print:scale-[1.75] print:shadow-none lg:h-[4.9in] lg:w-[3.65in] lg:scale-[1.8]"><div class="flex flex-col space-y-1.5"><div class="flex flex-row space-x-2"><div x-data="{ isHome: true }" class="flex w-3/5 flex-row space-x-1"><label @click="isHome = !isHome" for=team x-text="isHome ? 'home' : 'visitor'" class="cursor-pointer uppercase"></label> <input id=team type=text spellcheck=false></div><div class="flex w-2/5 flex-row space-x-1"><label for=color>COLOR</label> <input id=color type=text spellcheck=false class=!uppercase></div></div><div class="flex flex-row space-x-2"><div class="flex w-[75%] flex-row space-x-1"><label for=color>HEAD COACH</label> <input id=color type=text spellcheck=false></div><div class="flex flex-row space-x-1"><label for=color>ASST.</label> <input id=color type=text spellcheck=false></div></div></div><div x-data="{ | ||
| <!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Football Game Card</title><meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name=apple-mobile-web-app-capable content=yes><meta name=mobile-web-app-capable content=yes><link rel=apple-touch-icon href=./assets/img/app-ed73e78a4b.png><link rel=stylesheet href=./assets/styles/styles-17d8b10903.css><script defer=defer src=https://unpkg.com/[email protected]/dist/cdn.min.js></script></head><body class=relative><section class="mx-auto mt-10 flex w-max lg:mt-0 lg:h-screen lg:items-center"><div class="flex max-h-[4.9in] max-w-[3.65in] flex-col space-y-1.5 rounded-xl border-2 border-black bg-gray-500/10 p-3 shadow-lg print:mt-40 print:scale-[1.75] print:shadow-none lg:h-[4.9in] lg:w-[3.65in] lg:scale-[1.8]"><div class="flex flex-col space-y-1.5"><div class="flex flex-row space-x-2"><div x-data="{ isHome: true }" class="flex w-3/5 flex-row space-x-1"><label @click="isHome = !isHome" for=team x-text="isHome ? 'home' : 'visitor'" class="cursor-pointer uppercase"></label> <input id=team type=text spellcheck=false></div><div class="flex w-2/5 flex-row space-x-1"><label for=color>COLOR</label> <input id=color type=text spellcheck=false class=!uppercase></div></div><div class="flex flex-row space-x-2"><div class="flex w-[84%] flex-row space-x-1"><label for=color>HEAD COACH</label> <input id=color type=text spellcheck=false></div><div class="flex flex-row space-x-1"><label for=color>ASST.</label> <input id=color type=text spellcheck=false></div></div></div><div x-data="{ | ||
| lostToss: false, | ||
| first_half_option: null, | ||
| get isDefer() { return this.first_half_option === 'defer' }, | ||
|
|
@@ -13,4 +13,4 @@ | |
| set isReceive(val) { this.second_half_option = this.second_half_option === 'receive' ? null : 'receive' }, | ||
| get isDefend() { return this.second_half_option === 'defend' && this.isDefer }, | ||
| set isDefend(val) { this.second_half_option = this.second_half_option === 'defend' ? null : 'defend' } | ||
| }" class="flex flex-row"><div class="relative mt-[-2px] flex w-max border-2 border-black px-[3px] py-[1px]"><label for=2nd-half-opt class="flex flex-col" :class="isDefer || 'text-gray-600/80 print:text-black'"><span>SECOND HALF</span> <span class=ml-4>OPTION</span></label> <input id=2nd-half-opt type=checkbox :disabled=!isDefer x-model=isDefer class="absolute bottom-[2px] left-[2px]"></div><div class="relative ml-[-2px] mt-[-2px] flex w-full border-2 border-black p-[3px]"><div class="mx-auto flex w-max flex-row items-center space-x-1"><div class="5 item-center flex flex-row space-x-2"><div class="flex flex-row items-center space-x-1"><input id=receive-2 type=checkbox :disabled=!isDefer x-model=isReceive> <label for=receive-2 :disabled=!isDefer class="m-0 mb-[-1px]">RECEIVE</label></div><div class="flex flex-row items-center space-x-1"><input id=defend-2 type=checkbox :disabled=!isDefer x-model=isDefend> <label for=defend-2 :disabled=!isDefer class="m-0 mb-[-1px]">DEFEND</label></div></div><input id=goal-2 type=text spellcheck=false class="!w-7 text-center !uppercase" maxlength=2> <label for=goal-2 class="m-0 mb-[-1px]">GOAL</label></div></div></div></div><table x-data="{ captains: ['cap', 'alt'] }" class="flex flex-col space-y-1.5"><template x-for="captain in captains"><tr class="flex flex-row space-x-1" :style="captain === 'cap' && { marginTop: 0 }"><td class="flex flex-row space-x-1"><label for=captain-1><span x-text=captain class="font-mono uppercase"></span>.</label> <input id=captain-1 type=text spellcheck=false class=flex-1></td><td class="flex flex-row space-x-1"><label for=number-1>NO.</label><input id=number-1 type=number class="!w-10 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=2 min=0 max=99></td><td class="flex flex-row space-x-1"><label for=position-1>POS.</label> <input id=position-1 type=text spellcheck=false class="!w-10 text-center !uppercase" maxlength=2></td></tr></template></table><div x-data class="flex flex-col space-y-1.5 border-2 border-black px-[3px] pt-[3px] pb-[2px]"><div class="flex flex-row space-x-1"><h2><span class="font-mono font-medium tracking-tighter">1ST</span> HALF T.O.</h2><div class="mt-auto !-ml-1 flex flex-row space-x-2"><template x-for="i in 3"><input type=text pattern=[0-9]{1,2}:[0-9]{2} spellcheck=false class="!h-4 text-center" maxlength=5></template></div></div><div class="flex flex-row space-x-1"><h2><span class="font-mono font-medium tracking-tighter">2ND</span> HALF T.O.</h2><div class="mt-auto !-ml-1 flex flex-row space-x-2"><template x-for="i in 3"><input type=text pattern=[0-9]{1,2}:[0-9]{2} spellcheck=false class="!h-4 text-center" maxlength=5></template></div></div></div><div class="flex flex-col space-y-0.5"><h2 class="mx-auto mt-1 w-max">SCORING SUMMARY</h2><div class="flex flex-row"><div class="grid w-full grid-cols-2 grid-rows-2"><div class="group relative h-8 border-2 border-black bg-white"><label for=first class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">1ST</label> <input id=first type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-l-0 border-black bg-white"><label for=second class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">2ND</label> <input id=second type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-t-0 border-black bg-white"><label for=third class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">3RD</label> <input id=third type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-l-0 border-t-0 border-black bg-white"><label for=fourth class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">4TH</label> <input id=fourth type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div></div><div class="group relative flex h-16 w-12 border-2 border-l-0 border-black bg-white"><label for=final-score class="absolute top-0.5 left-[3px] group-focus-within:font-semibold group-focus-within:text-indigo-600">FINAL</label> <input id=final-score type=number class="!border-0 !bg-transparent pl-0.5 text-center" :placeholder=final_score oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div></div></div><div x-data class="flex flex-col space-y-1.5 border-2 border-black px-[3px] pt-[3px] pb-[2px]"><div class="flex flex-row space-x-1 font-mono font-medium"><h2>UNSPORTSMANLIKES</h2><div class="mt-auto flex w-full flex-row space-x-2" style=margin-right:.5rem><template x-for="i in 4"><input type=number spellcheck=false class="!h-4 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=2 min=0 max=99></template></div></div><div class="flex flex-row space-x-1"><label for=game-notes>GAME<br>NOTES</label> <textarea id=game-notes class="scrollbar-hide !h-16 resize-none !normal-case"></textarea></div></div><div class="flex flex-col space-y-2 pb-[2px]"><div class="flex flex-col space-y-1"><div class="flex flex-row space-x-1"><div class="flex flex-row space-x-1"><label for=date class=text-[0.6rem]>DATE</label> <input id=date type=text pattern="^(([0-9])|([0-2][0-9])|([3][0-1])) (jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) \d{4}$" spellcheck=false class="!w-[5rem] text-center !uppercase"></div><div class="flex flex-row space-x-1"><label for=start class=text-[0.6rem]>START</label> <input id=start type=text pattern="((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))" spellcheck=false class="text-center !uppercase"></div><div class="flex flex-row space-x-1"><label for=end class=text-[0.6rem]>END</label> <input id=end type=text pattern="((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))" spellcheck=false class="text-center !uppercase"></div></div></div></div><h3 class="mx-auto flex w-max flex-col space-y-0.5 pt-[3px]"><span class="text-[8px] font-medium uppercase">Game Card • Mark 2 • by Jake Harvanchik</span> <span class="!select-all text-center text-[7px] font-medium lowercase selection:bg-indigo-400 selection:text-white">https://jake.harvanchik.me/game-card</span></h3></div></section><a href=./assets/img/game-cards-6e1cb07f9d.pdf download class="absolute right-0 bottom-0 m-5 hidden h-12 w-12 rounded-xl bg-black/20 transition-colors duration-150 hover:bg-black/40 lg:block"><img src=./assets/img/svg/printer-13bef530c0.svg alt=printer class=p-1.5></a></body></html> | ||
| }" class="flex flex-row"><div class="relative mt-[-2px] flex w-max border-2 border-black px-[3px] py-[1px]"><label for=2nd-half-opt class="flex flex-col" :class="isDefer || 'text-gray-600/80 print:text-black'"><span>SECOND HALF</span> <span class=ml-4>OPTION</span></label> <input id=2nd-half-opt type=checkbox :disabled=!isDefer x-model=isDefer class="absolute bottom-[2px] left-[2px]"></div><div class="relative ml-[-2px] mt-[-2px] flex w-full border-2 border-black p-[3px]"><div class="mx-auto flex w-max flex-row items-center space-x-1"><div class="5 item-center flex flex-row space-x-2"><div class="flex flex-row items-center space-x-1"><input id=receive-2 type=checkbox :disabled=!isDefer x-model=isReceive> <label for=receive-2 :disabled=!isDefer class="m-0 mb-[-1px]">RECEIVE</label></div><div class="flex flex-row items-center space-x-1"><input id=defend-2 type=checkbox :disabled=!isDefer x-model=isDefend> <label for=defend-2 :disabled=!isDefer class="m-0 mb-[-1px]">DEFEND</label></div></div><input id=goal-2 type=text spellcheck=false class="!w-7 text-center !uppercase" maxlength=2> <label for=goal-2 class="m-0 mb-[-1px]">GOAL</label></div></div></div></div><table x-data="{ captains: ['cap', 'alt'] }" class="flex flex-col space-y-1.5"><template x-for="captain in captains"><tr class="flex flex-row space-x-1" :style="captain === 'cap' && { marginTop: 0 }"><td class="flex flex-row space-x-1"><label for=captain-1><span x-text=captain class="font-mono uppercase"></span>.</label> <input id=captain-1 type=text spellcheck=false class=flex-1></td><td class="flex flex-row space-x-1"><label for=number-1>NO.</label><input id=number-1 type=number class="!w-10 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=2 min=0 max=99></td><td class="flex flex-row space-x-1"><label for=position-1>POS.</label> <input id=position-1 type=text spellcheck=false class="!w-10 text-center !uppercase" maxlength=2></td></tr></template></table><div x-data class="flex flex-col space-y-1.5 border-2 border-black px-[3px] pt-[3px] pb-[2px]"><div class="flex flex-row space-x-1"><h2><span class="font-mono font-medium tracking-tighter">1ST</span> HALF T.O.</h2><div class="mt-auto !-ml-1 flex flex-row space-x-2"><template x-for="i in 3"><input type=text pattern=[0-9]{1,2}:[0-9]{2} spellcheck=false class="!h-4 text-center" maxlength=5></template></div></div><div class="flex flex-row space-x-1"><h2><span class="font-mono font-medium tracking-tighter">2ND</span> HALF T.O.</h2><div class="mt-auto !-ml-1 flex flex-row space-x-2"><template x-for="i in 3"><input type=text pattern=[0-9]{1,2}:[0-9]{2} spellcheck=false class="!h-4 text-center" maxlength=5></template></div></div></div><div class="flex flex-col space-y-0.5"><h2 class="mx-auto my-0.5 w-max">SCORING SUMMARY</h2><div class="flex flex-row"><div class="grid w-full grid-cols-2 grid-rows-2"><div class="group relative h-8 border-2 border-black bg-white"><label for=first class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">1ST</label> <input id=first type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-l-0 border-black bg-white"><label for=second class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">2ND</label> <input id=second type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-t-0 border-black bg-white"><label for=third class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">3RD</label> <input id=third type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div><div class="group relative h-8 border-2 border-l-0 border-t-0 border-black bg-white"><label for=fourth class="absolute top-0.5 left-0.5 font-mono text-[8px] group-focus-within:font-semibold group-focus-within:text-indigo-600">4TH</label> <input id=fourth type=number class="!border-0 !bg-transparent pl-0.5 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div></div><div class="group relative flex h-16 w-12 border-2 border-l-0 border-black bg-white"><label for=final-score class="absolute top-0.5 left-[3px] group-focus-within:font-semibold group-focus-within:text-indigo-600">FINAL</label> <input id=final-score type=number class="!border-0 !bg-transparent pl-0.5 text-center" :placeholder=final_score oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=3 min=0 max=999></div></div></div><div x-data class="flex flex-col space-y-1.5 border-2 border-black px-[3px] pt-[3px] pb-[2px]"><div class="flex flex-row space-x-1 font-mono font-medium"><h2>UNSPORTSMANLIKES</h2><div class="mt-auto flex w-full flex-row space-x-2" style=margin-right:.5rem><template x-for="i in 4"><input type=number spellcheck=false class="!h-4 text-center" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength=2 min=0 max=99></template></div></div><div class="flex flex-row space-x-1"><label for=game-notes>GAME<br>NOTES</label> <textarea id=game-notes class="scrollbar-hide !h-16 resize-none !normal-case"></textarea></div></div><div class="flex flex-col space-y-2 pb-[2px]"><div class="flex flex-col space-y-1"><div class="flex flex-row space-x-1"><div class="flex flex-row space-x-1"><label for=date class=text-[0.6rem]>DATE</label> <input id=date type=text pattern="^(([0-9])|([0-2][0-9])|([3][0-1])) (jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) \d{4}$" spellcheck=false class="!w-[5rem] text-center !uppercase"></div><div class="flex flex-row space-x-1"><label for=start class=text-[0.6rem]>START</label> <input id=start type=text pattern="((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))" spellcheck=false class="text-center !uppercase"></div><div class="flex flex-row space-x-1"><label for=end class=text-[0.6rem]>END</label> <input id=end type=text pattern="((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))" spellcheck=false class="text-center !uppercase"></div></div></div></div><h3 class="mx-auto flex w-max flex-col space-y-0.5 pt-[3px]"><span class="text-[8px] font-medium uppercase">Game Card • Mark 2 • by Jake Harvanchik</span> <span class="!select-all text-center text-[7px] font-medium lowercase selection:bg-indigo-400 selection:text-white">https://jake.harvanchik.me/game-card</span></h3></div></section><a href=./assets/img/game-cards-m2-fdf06ee03f.pdf download class="absolute right-0 bottom-0 m-5 hidden h-12 w-12 rounded-xl bg-black/20 transition-colors duration-150 hover:bg-black/40 lg:block"><img src=./assets/img/svg/printer-13bef530c0.svg alt=printer class=p-1.5></a></body></html> | ||
Oops, something went wrong.