<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calendar Merger</title> <style> body { font-family: Arial, sans-serif; } #calendars { margin-bottom: 20px; } #calendars .calendar { margin-bottom: 10px; } #calendars .calendar input[type="text"] { width: 50%; margin-right: 10px; } #calendars .calendar input[type="url"] { width: 50%; } #add-calendar { margin-bottom: 20px; } </style> </head> <body> <h1>Calendar Merger</h1> <form id="merge-form"> <input type="text" id="link-group-name" placeholder="Link Group Name"> <div id="calendars"> <div class="calendar"> <input type="text" id="prefix-0" placeholder="Prefix"> <input type="checkbox" id="override-0"> <label for="override-0">Override</label> <input type="url" id="url-0" placeholder="Calendar URL"> </div> </div> <button id="add-calendar" type="button">Add Calendar</button> <button type="submit">Merge Calendars</button> </form> <div id="result"></div> <script src="script.js"></script> </body> </html>