| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Flask API Interface</title> |
| <style> |
| body { font-family: Arial, sans-serif; } |
| .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } |
| .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } |
| .tab button:hover { background-color: #ddd; } |
| .tab button.active { background-color: #ccc; } |
| .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } |
| </style> |
| <script> |
| function openTab(evt, tabName) { |
| var i, tabcontent, tablinks; |
| tabcontent = document.getElementsByClassName("tabcontent"); |
| for (i = 0; i < tabcontent.length; i++) { |
| tabcontent[i].style.display = "none"; |
| } |
| tablinks = document.getElementsByClassName("tablinks"); |
| for (i = 0; i < tablinks.length; i++) { |
| tablinks[i].className = tablinks[i].className.replace(" active", ""); |
| } |
| document.getElementById(tabName).style.display = "block"; |
| evt.currentTarget.className += " active"; |
| } |
| |
| async function submitForm(event, endpoint) { |
| event.preventDefault(); |
| const formData = new FormData(event.target); |
| const jsonData = JSON.stringify(Object.fromEntries(formData)); |
| |
| const response = await fetch(endpoint, { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json' |
| }, |
| body: jsonData |
| }); |
| |
| const result = await response.json(); |
| const resultContainer = event.target.querySelector('.result'); |
| resultContainer.innerHTML = `<pre>${JSON.stringify(result, null, 2)}</pre>`; |
| } |
| </script> |
| </head> |
| <body> |
| <h1>Flask API with Tabs</h1> |
| <div class="tab"> |
| <button class="tablinks" onclick="openTab(event, 'Factorize')">Factorize</button> |
| <button class="tablinks" onclick="openTab(event, 'Solve')">Solve</button> |
| <button class="tablinks" onclick="openTab(event, 'Calculate')">Calculate</button> |
| <button class="tablinks" onclick="openTab(event, 'Custom')">Custom</button> |
| <button class="tablinks" onclick="openTab(event, 'DaysRemaining')">Days Remaining</button> |
| <button class="tablinks" onclick="openTab(event, 'Combination')">Combination</button> |
| <button class="tablinks" onclick="openTab(event, 'Permutation')">Permutation</button> |
| <button class="tablinks" onclick="openTab(event, 'Random')">Random</button> |
| <button class="tablinks" onclick="openTab(event, 'Statistics')">Statistics</button> |
| <button class="tablinks" onclick="openTab(event, 'Regression')">Regression</button> |
| <button class="tablinks" onclick="openTab(event, 'Plot')">Plot</button> |
| </div> |
|
|
| <div id="Factorize" class="tabcontent"> |
| <h3>Factorize</h3> |
| <form onsubmit="submitForm(event, '/api/factorize')"> |
| <label for="equation">Equation:</label> |
| <input type="text" id="equation" name="equation" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
|
|
| <div id="Solve" class="tabcontent"> |
| <h3>Solve</h3> |
| <form onsubmit="submitForm(event, '/api/solve')"> |
| <label for="equation">Equation:</label> |
| <input type="text" id="equation" name="equation" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
|
|
| <div id="Calculate" class="tabcontent"> |
| <h3>Calculate</h3> |
| <form onsubmit="submitForm(event, '/api/calculate')"> |
| <label for="expression">Expression:</label> |
| <input type="text" id="expression" name="expression" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
|
|
| <div id="Custom" class="tabcontent"> |
| <h3>Custom</h3> |
| <form onsubmit="submitForm(event, '/api/custom')"> |
| <label for="expression">Custom Expression:</label> |
| <input type="text" id="expression" name="expression" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
|
|
| <div id="DaysRemaining" class="tabcontent"> |
| <h3>Days Remaining</h3> |
| <form onsubmit="submitForm(event, '/api/days_remaining')"> |
| <label for="target_date">Target Date (YYYY-MM-DD):</label> |
| <input type="text" id="target_date" name="target_date" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
|
|
| <div id="Combination" class="tabcontent"> |
| <h3>Combination</h3> |
| <form onsubmit="submitForm(event, '/api/combination')"> |
| <label for="n">n:</label> |
| <input type="number" id="n" name="n" required> |
| <label for="m">m:</label> |
| <input type="number" id="m" name="m" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
|
|
| <div id="Permutation" class="tabcontent"> |
| <h3>Permutation</h3> |
| <form onsubmit="submitForm(event, '/api/permutation')"> |
| <label for="n">n:</label> |
| <input type="number" id="n" name="n" required> |
| <label for="m">m:</label> |
| <input type="number" id="m" name="m" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
|
|
| <div id="Random" class="tabcontent"> |
| <h3>Random Numbers</h3> |
| <form onsubmit="submitForm(event, '/api/random')"> |
| <label for="start">Start:</label> |
| <input type="number" id="start" name="start" required> |
| <label for="end">End:</label> |
| <input type="number" id="end" name="end" required> |
| <label for="num_samples">Number of Samples:</label> |
| <input type="number" id="num_samples" name="num_samples" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
|
|
| <div id="Statistics" class="tabcontent"> |
| <h3>Statistics</h3> |
| <form onsubmit="submitForm(event, '/api/statistics')"> |
| <label for="data">Data (comma-separated):</label> |
| <input type="text" id="data" name="data" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
|
|
| <div id="Regression" class="tabcontent"> |
| <h3>Linear Regression</h3> |
| <form onsubmit="submitForm(event, '/api/regression')"> |
| <label for="data">Data (comma-separated x,y pairs):</label> |
| <input type="text" id="data" name="data" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
|
|
| <div id="Plot" class="tabcontent"> |
| <h3>Plot Functions</h3> |
| <form onsubmit="submitForm(event, '/api/plot')"> |
| <label for="functions">Functions (comma-separated):</label> |
| <input type="text" id="functions" name="functions" required> |
| <label for="x_range">X Range (min,max,points):</label> |
| <input type="text" id="x_range" name="x_range" value="-10,10,1000" required> |
| <label for="x_label">X Label:</label> |
| <input type="text" id="x_label" name="x_label" value="X" required> |
| <label for="y_label">Y Label:</label> |
| <input type="text" id="y_label" name="y_label" value="Y" required> |
| <button type="submit">Submit</button> |
| <div class="result"></div> |
| </form> |
| </div> |
| </body> |
| </html> |
|
|
