From 3d75b400189086d57f1f3faedb5d4d2cd3d7c6b8 Mon Sep 17 00:00:00 2001
From: Ryan Mwangi <ryannganga13325@gmail.com>
Date: Wed, 2 Oct 2024 02:15:52 +0300
Subject: [PATCH] update html to accept an unlimited number of links

---
 index.html | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)
diff --git a/index.html b/index.html
index 964e6a4..684b800 100644
--- a/index.html
+++ b/index.html
@@ -4,23 +4,43 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Calendar Merger</title>
-    <link rel="stylesheet" href="/styles.css">
+    <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">
-        <label for="cal1-url">Calendar 1 URL:</label>
-        <input type="url" id="cal1-url" name="cal1-url"><br><br>
-        <label for="cal1-prefix">Calendar 1 Prefix:</label>
-        <input type="text" id="cal1-prefix" name="cal1-prefix"><br><br>
-        <label for="cal2-url">Calendar 2 URL:</label>
-        <input type="url" id="cal2-url" name="cal2-url"><br><br>
-        <label for="cal2-prefix">Calendar 2 Prefix:</label>
-        <input type="text" id="cal2-prefix" name="cal2-prefix"><br><br>
+        <div id="calendars">
+            <div class="calendar">
+                <input type="text" id="prefix-0" placeholder="Prefix">
+                <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>
\ No newline at end of file
+</html>
+
