sam/ThermalTodos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
0188280ce1
ThermalTodos/application/static/index.html

288 lines
19 KiB
HTML
Raw Normal View History

Init
2023-08-22 23:51:39 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
api link v1
2023-08-24 20:56:55 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
Init
2023-08-22 23:51:39 +00:00
<title>Test</title>
optimize for production according to tailwindcss
2023-08-29 23:47:14 +00:00
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" /> -->
Init
2023-08-22 23:51:39 +00:00
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
show login page
2023-08-24 20:58:12 +00:00
<div id="loginPanel" class="flex flex-row items-center justify-center fixed w-full h-full overflow-y-hidden overflow-x-hidden bg-white">
Init
2023-08-22 23:51:39 +00:00
<button id='loginButton' class="p-2 pl-8 pr-8 bg-purple-500 rounded-lg text-white text-xl font-semibold">Login</button>
</div>
inital google calendar integration
2023-08-25 23:43:38 +00:00
Google Calendar API Autherization
2023-08-27 03:26:55 +00:00
<div id="googleAuthModel" class="absolute w-full h-full overflow-y-hidden top-0 left-0 hidden">
<div class="flex flex-row w-full justify-center items-center text-center h-screen">
<div class="absolute w-full h-full bg-slate-800 opacity-40 top-0 left-0"></div>
<div class="bg-white inline-block rounded-lg overflow-hidden align-bottom transition-all transform shadow-2xl sm:my-8 sm:align-middle sm:max-w-xl sm:w-full pt-6 pb-6">
<h3 class="font-semibold ">Link your google calendar: </h3><br>
<button class="bg-indigo-500 text-white p-4 rounded-md" onclick="client.requestCode();">Authorize with Google</button>
</div>
</div>
</div>
inital google calendar integration
2023-08-25 23:43:38 +00:00
Init
2023-08-22 23:51:39 +00:00
<!-- <div id="testToken"></div> -->
first stages of linking front/back
2023-08-24 18:34:08 +00:00
<div id="printModel" class="absolute w-full h-full overflow-y-hidden top-0 left-0 hidden">
<div class="flex flex-row w-full justify-center items-center text-center h-screen">
<div class="absolute w-full h-full bg-slate-800 opacity-40 top-0 left-0"></div>
<div class="bg-white inline-block text-left rounded-lg overflow-hidden align-bottom transition-all transform shadow-2xl sm:my-8 sm:align-middle sm:max-w-xl sm:w-full">
<div class="flex flex-col items-center pt-6 pr-6 pb-6 pl-6">
<!-- <div class="grid grid-cols-2 items-center pt-6 pr-6 pb-6 pl-6"> -->
<p class="text-2xl font-semibold leading-none tracking-tighter lg:text-3xl">Print?</p>
<!-- <div class="flex flex-col space-y-2 mt-6"> -->
<div class="grid grid-cols-2 mt-6 gap-2">
<a id="printGreeting" class="cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print Greeting
</a>
<a id="printTodos" class="cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print<br>To-dos
</a>
<a id="printSudoku" class="cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print Sudoku
</a>
<a id="printWordsearch" class="cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print Wordsearch
</a>
<a id="printQuote" class="cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print Quote
</a>
<a id="printSentence" class="cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print Sentence
</a>
<a id="printAll" class="col-span-2 cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Print All
</a>
</div>
<!-- <p class="mt-3 text-base leading-relaxed text-center">I am a fullstack software developer with ReactJS for frontend and NodeJS for backend</p> -->
<!-- <div class="rese"> -->
<!-- <div id="radios"> -->
<!-- <input id="rad1" type="radio" name="radioBtn" checked>
<label class="labels" for="rad1">
<span class="flex flex-col">
<span class="font-semibold">Start</span>
<span id="startTimeLabel">12:59 am</span>
</span>
</label>
<input id="rad2" type="radio" name="radioBtn">
<label class="labels" for="rad2">
<span class="flex flex-col">
<span class="font-semibold">End</span>
<span id="endTimeLabel">12:59 pm</span>
</span>
</label>
<input id="rad3" type="radio" name="radioBtn">
<label class="labels" for="rad3">Third Option</label> -->
<!-- <div id="bckgrnd"></div> -->
<!-- </div> -->
<!-- <div class="mt-6 w-full h-full"> -->
<!-- <div class="flex flex-row space-x-1 items-center justify-center"> -->
<!-- <input id="timeInput" class="h-11 rounded-lg p-4" style="background-color:rgba(239,239,240,1);" type="time" name="time" value="12:59"> -->
<!-- </div> -->
<!-- <div id="quickSelectButtons" class="flex flex-row space-x-1 items-center justify-center flex-wrap"> -->
<!-- </div> -->
<!-- </div> -->
<div class="w-full mt-6">
<a id="printExitButton" class="cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-slate-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">Exit</a>
<!-- <input class="bg-blue-400 z-99" type="number" inputmode="numeric"/> -->
<!-- <input type="number" pattern="[0-9]*" /> -->
<!-- <input class="w-full bg-slate-200 absolute top-0 left-0 z-50" type="number" name="test" inputmode="decimal"> -->
</div>
<div>
<!-- <input type="number" inputmode="numeric"/> -->
<!-- <input type="number" pattern="\d*"/> -->
<!-- <input class="fixed bg-slate-200 top-0 left-0 z-50" type="number" name="test" inputmode="decimal"> -->
</div>
</div>
</div>
</div>
</div>
Init
2023-08-22 23:51:39 +00:00
<!-- nice colour: bg-gray-800 -->
<div id="timePickerWindow" class="absolute w-full h-full overflow-y-hidden top-0 left-0 hidden">
<div class="flex flex-row w-full justify-center items-center text-center h-screen">
<div class="absolute w-full h-full bg-slate-800 opacity-40 top-0 left-0"></div>
<div class="bg-white inline-block text-left rounded-lg overflow-hidden align-bottom transition-all transform shadow-2xl sm:my-8 sm:align-middle sm:max-w-xl sm:w-full">
<div class="flex flex-col items-center pt-6 pr-6 pb-6 pl-6">
<p class="text-2xl font-semibold leading-none tracking-tighter lg:text-3xl">When?</p>
<!-- <p class="mt-3 text-base leading-relaxed text-center">I am a fullstack software developer with ReactJS for frontend and NodeJS for backend</p> -->
<!-- <div class="rese"> -->
<div id="radios">
<input id="rad1" type="radio" name="radioBtn" checked>
<label class="labels" for="rad1">
<span class="flex flex-col">
<span class="font-semibold">Start</span>
<span id="startTimeLabel">12:59 am</span>
</span>
</label>
<input id="rad2" type="radio" name="radioBtn">
<label class="labels" for="rad2">
<span class="flex flex-col">
<span class="font-semibold">End</span>
<span id="endTimeLabel">12:59 pm</span>
</span>
</label>
<input id="rad3" type="radio" name="radioBtn">
<!-- <label class="labels" for="rad3">Third Option</label>
-->
<div id="bckgrnd"></div>
</div>
<div class="mt-6 w-full h-full">
<div class="flex flex-row space-x-1 items-center justify-center">
<input id="timeInput" class="h-11 rounded-lg p-4" style="background-color:rgba(239,239,240,1);" type="time" name="time" value="12:59">
<!-- <input id="hourInput" class="bg-blue-400 z-99 w-11 h-11 text-center text-xl font-semibold" type="number" inputmode="numeric" value="12" />
<span class="text-xl font-semibold">:</span>
<input id="minuteInput" class="bg-blue-400 z-99 w-11 h-11 text-center text-xl font-semibold" type="number" inputmode="numeric" value="59" />
<input id="amPmInput" class="bg-blue-400 z-99 w-11 h-11 text-center text-xl font-semibold" type="text" value="AM" /> -->
</div>
<div id="quickSelectButtons" class="flex flex-row space-x-1 items-center justify-center flex-wrap">
<ul class="donate-now flex flex-col items-center justify-center sm:flex-row space-y-7 sm:space-y-0 sm:space-x-4 mt-12 mb-3">
<li>
<input class="quickButton" type="radio" id="t15" name="amount" />
<label class="cursor-pointer border-2 border-slate-300 p-3 pl-5 pr-5 rounded-lg hover:border-indigo-300" for="t15">15 min</label>
</li>
<li>
<input class="quickButton" type="radio" id="t30" name="amount" />
<label class="cursor-pointer border-2 border-slate-300 p-3 pl-5 pr-5 rounded-lg hover:border-indigo-300" for="t30">30 min</label>
</li>
<li>
<input class="quickButton" type="radio" id="t60" name="amount" checked="checked" />
<label class="cursor-pointer border-2 border-slate-300 p-3 pl-5 pr-5 rounded-lg hover:border-indigo-300" for="t60">1 hour</label>
</li>
<li>
<input class="quickButton" type="radio" id="t120" name="amount" />
<label class="cursor-pointer border-2 border-slate-300 p-3 pl-5 pr-5 rounded-lg hover:border-indigo-300" for="t120">2 hours</label>
</li>
</ul>
</div>
</div>
<div class="w-full mt-6">
<a id="saveButton" onclick="saveButtonListener()" class="cursor-pointer flex text-center items-center justify-center w-full pt-4 pr-10 pb-4 pl-10 text-base
font-medium text-white bg-indigo-600 rounded-xl transition duration-500 ease-in-out transform
hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</a>
<!-- <input class="bg-blue-400 z-99" type="number" inputmode="numeric"/> -->
<!-- <input type="number" pattern="[0-9]*" /> -->
<!-- <input class="w-full bg-slate-200 absolute top-0 left-0 z-50" type="number" name="test" inputmode="decimal"> -->
</div>
<div>
<!-- <input type="number" inputmode="numeric"/> -->
<!-- <input type="number" pattern="\d*"/> -->
<!-- <input class="fixed bg-slate-200 top-0 left-0 z-50" type="number" name="test" inputmode="decimal"> -->
</div>
</div>
</div>
</div>
</div>
<ul class="p-2 bg-white shadow-md rounded-lg border m-2" id="table">
<!-- <input type="time"> -->
add save/print button
2023-08-24 02:42:27 +00:00
<div class="flex flex-row">
<!-- <h2 class="font-semibold text-2xl ml-2">Tasks • <span id="date-view">Sat Aug 12, 2023</span></h2> -->
<h2 class="font-semibold text-2xl ml-2"><span id="date-view">Sat Aug 12, 2023</span></h2>
<button id="savePrintButton" class="h-fit border ml-auto mr-2 p-1 pl-4 pr-4 rounded-md bg-indigo-200 border-2 border-indigo-300">
<span id="savePrintButtonText">Print</span>
</button>
</div>
Init
2023-08-22 23:51:39 +00:00
<!-- <h2 class="font-normal text-sm ml-3">Last Synced: <span id="date-view">Sat Aug 12, 2023</span></h2> -->
remove default <li> from todo list
2023-08-25 01:46:31 +00:00
<!-- <li class="task-row p-2 m-1 shadow-md border bg-white min-h-11 rounded-lg flex space-x-2 flex-col" data-editor-shown="false" data-recurring="false">
Init
2023-08-22 23:51:39 +00:00
<div class="flex grow space-x-2 h-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 handle cursor-grab shrink-0">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<span id="timeslot" class="font-semibold text-sm shrink-0 grow-0 h-fit bg-slate-200 text-slate-600 rounded-md p-0.5 pl-1.5 pr-1.5">12pm</span>
<span id="task" class="flex grow">Walk to school while jumping on one leg and scratching your head.</span>
</div>
<div id="expanded-info" class="flex flex-row space-x-1 items-center hidden mt-6 space-x-3">
<div class="timePickerWindowButton hover:bg-slate-200 cursor-pointer rounded-md flex flex-row space-x-1 items-center pr-1">
<span class="w-8 h-8 flex space-x-2 space-y-2 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
<span id="timeButtonDisplay" class="text-sm font-semibold">12:15pm to 1:15pm</span>
</div>
<div class="recurringButton hover:bg-slate-200 cursor-pointer rounded-md flex flex-row space-x-1 items-center">
<span class="w-8 h-8 flex space-x-2 space-y-2 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-black">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" />
</svg>
</span>
</div>
</div>
remove default <li> from todo list
2023-08-25 01:46:31 +00:00
</li> -->
Init
2023-08-22 23:51:39 +00:00
<!-- font-semibold text-sm shrink-0 grow-0 h-fit bg-slate-200 text-slate-600 rounded-md p-0.5 pl-1.5 pr-1.5 -->
<div class="p-2 m-1 font-semibold text-slate-600 align-text-top">
<div onclick="addTask();" class="cursor-pointer flex flex-row space-x-1 hover:bg-slate-200 w-fit p-2 rounded-lg text-center items-center">
<span class="">+</span>
<span>Add Task</span>
</div>
</div>
</ul>
first stages of linking front/back
2023-08-24 18:34:08 +00:00
<div class="p-2 bg-white shadow-md rounded-lg border m-2 flex flex-row space-x-2">
<button id="prevDayButton" class="bg-slate-200 p-2 w-1/4 rounded-md font-semibold"><- Prev</button>
<button id="nextDayButton" class="bg-slate-200 p-2 w-3/4 rounded-md font-semibold">Next -></button>
</div>
Init
2023-08-22 23:51:39 +00:00
<!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script type="text/javascript">
var ta = document.getElementById("table")
Sortable.create(ta, {
handle: '.handle',
animation: 150
});
</script>
<!-- jsDelivr :: Day.js :: Latest (https://www.jsdelivr.com/package/npm/dayjs) -->
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/customParseFormat.js"></script>
<script type="text/javascript">
dayjs.extend(window.dayjs_plugin_customParseFormat)
let now = dayjs()
document.getElementById("startTimeLabel").innerHTML = now.format("h:mm a")
document.getElementById("endTimeLabel").innerHTML = now.add(1, 'h').format("h:mm a")
document.getElementById("timeInput").value = dayjs().format("HH:mm")
</script>
optimize for production according to tailwindcss
2023-08-29 23:47:14 +00:00
<!-- Auth0 for login prompt -->
Init
2023-08-22 23:51:39 +00:00
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
optimize for production according to tailwindcss
2023-08-29 23:47:14 +00:00
<!-- Google auth for calendar access on first launch -->
<script src="https://accounts.google.com/gsi/client" defer></script>
inital google calendar integration
2023-08-25 23:43:38 +00:00
Init
2023-08-22 23:51:39 +00:00
<script src="scripts.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink