Hi
I conducted some experiments with the idea of using an HTML form, which was posted by @davidbures@mstdn.social. in the same thread Carlo mentioned. His solution didn’t work on macOS, but it served as a good starting point for me to create a slightly different solution.
He proposed a shortcut that runs twice. The first time without any input. In this case it open an embedded HTML form in Safari that includes as well a submit button, which triggers the shortcut a second time with the values of the form fields. Since there is input this time, another branch of the if/then statements is executed.
For my solution, I created an HTML form page instead of using the embedded HTML, which looks like this:
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vital Signs Recording</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
label { display: block; margin-top: 10px; }
input, select { width: 100%; padding: 5px; margin-top: 5px; }
button { margin-top: 20px; background-color: #4CAF50; color: white; border: none; padding: 10px; cursor: pointer; width: 100%; }
</style>
</head>
<body>
<h1>Vital Signs Recording</h1>
<form id="vitalSignsForm">
<label for="heartRate">Heart Rate (BPM):</label>
<input type="range" id="heartRate" name="heartRate" min="40" max="180" value="70">
<output for="heartRate"></output>
<label for="bloodPressure">Blood Pressure (systolic/diastolic):</label>
<input type="text" id="bloodPressure" name="bloodPressure" placeholder="120/80">
<label for="temperature">Body Temperature (°C):</label>
<input type="number" id="temperature" name="temperature" min="35" max="42" step="0.1" value="36.5">
<label for="respiration">Respiration Rate (per minute):</label>
<input type="range" id="respiration" name="respiration" min="10" max="30" value="15">
<output for="respiration"></output>
<label for="Mood">Mood:</label>
<select id="Mood" name="mood">
<option value="euphoric">Euphoric</option>
<option value="neutral">Neutral</option>
<option value="frustrated">Frustrated</option>
</select>
<button type="button" onclick="sendData()">Submit Data</button>
</form>
<script>
// Updates the display of the slider values
document.querySelectorAll('input[type="range"]').forEach(function(slider) {
slider.nextElementSibling.value = slider.value;
slider.oninput = function() {
this.nextElementSibling.value = this.value;
}
});
function sendData() {
var form = document.getElementById('vitalSignsForm');
var formData = new FormData(form);
var jsonObject = {};
for (var pair of formData.entries()) {
jsonObject[pair[0]] = pair[1];
}
var jsonString = JSON.stringify(jsonObject);
var shortcutURL = "shortcuts://run-shortcut?name=vital&input=" + encodeURIComponent(jsonString);
window.location.href = shortcutURL;
}
</script>
</body>
</html>
For testing purposes, the “Submit Data” button also sends the values as json. Since the data processing requires input, I leave it as it is for the moment.
The shortcut uses the beta version of the ‘Browser Action’. Currently (as of 10/14/2024), it does not work with Safari but is compatible with all other supported browsers. I haven’t found a way to handle the select options; perhaps Carlo has a tip on how to retrieve these value.
This is a first attempt to test the idea. In any case, I think it looks nicer than this dictionary popup! 
The HTML page can remain local in the file system and can be opened with file://pathToHTML, or it can be accessed, as in my example, from a web server. The solution will not work on iOS/iPadOS because ‘Browser Action’ is a Mac-only extension for Shortcuts. However, in the next few days, I will investigate whether the JSON could be used on iOS/iPadOS.
I hope this is also a viable way to handle your request. With HTML, you have more flexibility in terms of UI elements; however, It could also be that Carlo still has some adjustments to make to Browser Actions. Nevertheless it works already with simple UI elements.
