<!DOCTYPE html>
<html>
<head>
<style>
/* Styles to make elements full width and properly spaced */
.form-line {
display: block;
width: 100%;
margin-bottom: 15px;
}
.full-width-input {
width: 100%;
box-sizing: border-box;
}
.button-group {
display: inline-block;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left: 0;
top: 100%;
}
.dropdown-content button {
display: block;
width: 100%;
text-align: left;
padding: 8px 16px;
border: none;
background: none;
cursor: pointer;
}
.dropdown-content button:hover {
background-color: #f1f1f1;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="form-line">
<label for="podcast_id">Podcast Search Term</label>
<input type="text" id="podcast_id" name="podcast_id" class="full-width-input">
</div>
<div class="form-line">
<select id="builtin_id" onchange="chain_action()" class="full-width-input">
<option disabled>Select Program</option>
<option value="Nutrition Facts with Dr. Greger" selected="selected">Nutrition Facts with Dr. Greger</option>
<option value="The Real Truth About Health">The Real Truth About Health</option>
</select>
</div>
<div class="form-line">
<label for="cors_proxy">CORS Proxy</label>
<input type="text" id="cors_proxy" name="cors_proxy" value="https://cors-anywhere.herokuapp.com/" class="full-width-input">
<div style="margin-top: 10px;">
<!-- Run button to fetch podcasts -->
<button onclick="run_it()">Run</button>
<!-- More button with dropdown -->
<div class="button-group">
<button onclick="toggleMoreOptions()">More</button>
<div id="moreOptionsDropdown" class="dropdown-content">
<button onclick="addPodcast()">Add</button>
<button onclick="removePodcast()">Remove</button>
<button onclick="savePodcastsToStorage()">Save to Storage</button>
<button onclick="loadPodcastsFromStorage()">Load from Storage</button>
<button onclick="savePodcastsToFile()">Export to File</button>
<button onclick="importPodcastsFromFile()">Import from File</button>
</div>
</div>
<input type="file" id="fileInput" style="display: none;" onchange="handleFileImport()" accept=".json">
</div>
</div>
<script>
// JavaScript function to toggle the dropdown
function toggleMoreOptions() {
document.getElementById("moreOptionsDropdown").classList.toggle("show");
}
// Close the dropdown if clicked outside
window.onclick = function(event) {
if (!event.target.matches('.button-group button')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
// Placeholder functions
function chain_action() { console.log("chain_action called"); }
function run_it() { console.log("run_it called"); }
function addPodcast() { console.log("addPodcast called"); }
function removePodcast() { console.log("removePodcast called"); }
function savePodcastsToStorage() { console.log("savePodcastsToStorage called"); }
function loadPodcastsFromStorage() { console.log("loadPodcastsFromStorage called"); }
function savePodcastsToFile() { console.log("savePodcastsToFile called"); }
function importPodcastsFromFile() { console.log("importPodcastsFromFile called"); }
function handleFileImport() { console.log("handleFileImport called"); }
</script>
</body>
</html>