Created
July 1, 2025 20:48
-
-
Save Benunc/9095daff434155f9aadc373b796984fa to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <base target="_top"> | |
| <script> | |
| function onLoad() { | |
| google.script.run.withSuccessHandler(showProgress).getProgressPercentage(); | |
| google.script.run.withSuccessHandler(showTotal).getRunningTotal(); | |
| google.script.run.withSuccessHandler(showProjEnd).getProjectedYearEnd(); | |
| } | |
| function showProgress(progress) { | |
| document.getElementById('progress').innerText = (progress >= 0 ? '+' : '') + progress.toFixed(2) + ' /day'; | |
| } | |
| function showTotal(total) { | |
| document.getElementById('total').innerText = total; | |
| } | |
| function showProjEnd(yearend) { | |
| document.getElementById('yearend').innerText = yearend; | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-size: 70px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 10px; | |
| margin: 0; | |
| background-color: #4B9CD3; /* Carolina Blue for background */ | |
| } | |
| h1, h2 { | |
| color: #13294B; /* Navy for text */ | |
| text-align: center; | |
| } | |
| button { | |
| background-color: #13294B; /* Navy background */ | |
| border: none; | |
| color: white; | |
| padding: 15px 32px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: inherit; | |
| margin: 4px 2px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #005A9C; /* Darker Navy on hover */ | |
| } | |
| input[type="number"] { | |
| font-size: inherit; /* Enlarged font for better mobile input */ | |
| padding: 20px; /* Increased padding for touch-friendly input */ | |
| width: 100%; | |
| max-width: 400px; /* Larger max-width for better visibility */ | |
| box-sizing: border-box; | |
| border: 2px solid #13294B; /* Navy border for input */ | |
| border-radius: 4px; | |
| text-align: center; | |
| background-color: white; | |
| } | |
| form { | |
| margin: 1em; | |
| } | |
| label[for="dipsInput"], input[type="number"] { | |
| display: block; | |
| margin: 20px auto; /* Increased margin for better touch target */ | |
| text-align: center; | |
| } | |
| button { | |
| margin: 10px auto; | |
| display: block; | |
| } | |
| #chart_div { | |
| width: 100%; | |
| height: 500px; | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| } | |
| @media only screen and (max-width: 600px) { | |
| body { | |
| font-size: 60px; /* Slightly smaller for smaller screens but still large */ | |
| } | |
| #chart_div { | |
| height: 300px; | |
| } | |
| input[type="number"] { | |
| font-size: 60px; /* Adjusts with body font size for consistency */ | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body onload="onLoad()"> | |
| <h1>Dip Tracker!</h1> | |
| <div style="width: 100%;"> | |
| <p style="margin: 1em 0 0 0;"> | |
| <span style="float: left;">Current Avg:</span> | |
| <span style="float: right;" id="progress"></span> | |
| </p> | |
| </div> | |
| <div style="width: 100%;margin: .5em"> | |
| <p style="margin: 0 0 1em 0;"> | |
| <span style="float: left;">Running Total:</span> | |
| <span style="float: right;" id="total"></span> | |
| </p> | |
| </div> | |
| <div style="width: 100%;"> | |
| <p style="margin: 0 0 1em 0;"> | |
| <span style="float: left;">Projected Year End:</span> | |
| <span style="float: right;" id="yearend"></span> | |
| </p> | |
| </div> | |
| <form> | |
| <label for="dips">Enter Dips:</label> | |
| <input type="number" id="dips" name="dips" required> | |
| <button type="button" onclick="logDips()">Log Dips</button> | |
| </form> | |
| <script> | |
| function logDips() { | |
| var dips = document.getElementById('dips').value; | |
| google.script.run.logDips(dips); | |
| alert("Logged " + dips + " dips! GREAT JOB!") | |
| // Refresh data after logging | |
| onLoad(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment