| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>WebGenUI - Web Page UI Generator</title> |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> |
| <style> |
| |
| .form-container { |
| max-width: 600px; |
| margin: 0 auto; |
| padding: 20px; |
| border: 1px solid #ccc; |
| border-radius: 5px; |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
| } |
| |
| |
| h1 { |
| font-size: 24px; |
| font-weight: bold; |
| margin-bottom: 20px; |
| } |
| |
| |
| .form-icon { |
| margin-right: 10px; |
| } |
| |
| |
| h2 { |
| font-size: 20px; |
| font-weight: bold; |
| margin-bottom: 10px; |
| padding: 10px; |
| border: 1px solid #ccc; |
| border-radius: 5px; |
| } |
| |
| |
| .group-icon { |
| margin-right: 5px; |
| } |
| |
| |
| .form-field { |
| margin-bottom: 10px; |
| } |
| |
| |
| .form-field label { |
| font-weight: bold; |
| } |
| |
| |
| .form-field input, |
| .form-field textarea, |
| .form-field select { |
| width: 100%; |
| } |
| |
| |
| .form-field input[type="checkbox"], |
| .form-field input[type="radio"] { |
| margin-right: 5px; |
| } |
| |
| |
| .form-field label[for] { |
| display: inline; |
| font-weight: normal; |
| } |
| |
| |
| .form-field .error-message { |
| color: red; |
| font-size: 12px; |
| margin-top: 5px; |
| } |
| |
| |
| .form-buttons { |
| margin-top: 20px; |
| } |
| |
| .form-buttons button { |
| padding: 10px 20px; |
| border: none; |
| border-radius: 5px; |
| cursor: pointer; |
| } |
| |
| .form-buttons button[type="submit"] { |
| background-color: #4CAF50; |
| color: white; |
| margin-right: 10px; |
| } |
| |
| .form-buttons button[type="reset"] { |
| background-color: #f44336; |
| color: white; |
| } |
| |
| |
| .form-container { |
| border: none; |
| box-shadow: none; |
| padding: 2rem; |
| background-color: #f8f9fa; |
| border-radius: 0.25rem; |
| } |
| |
| h1 { |
| font-size: 2.5rem; |
| margin-bottom: 2rem; |
| } |
| |
| h2 { |
| font-size: 1.5rem; |
| margin-bottom: 1rem; |
| padding: 0.5rem 1rem; |
| background-color: #e9ecef; |
| border-radius: 0.25rem; |
| border: none; |
| } |
| |
| .form-field { |
| margin-bottom: 1rem; |
| } |
| |
| .form-field label { |
| font-weight: bold; |
| margin-bottom: 0.25rem; |
| } |
| |
| .form-field input, |
| .form-field textarea, |
| .form-field select { |
| border-radius: 0.25rem; |
| } |
| |
| .form-buttons button { |
| padding: 0.5rem 1rem; |
| border-radius: 0.25rem; |
| } |
| |
| .form-buttons button[type="submit"] { |
| background-color: #007bff; |
| border-color: #007bff; |
| } |
| |
| .form-buttons button[type="reset"] { |
| background-color: #dc3545; |
| border-color: #dc3545; |
| } |
| |
| |
| </style> |
| </head> |
| <body> |
| <div class="container" style="margin-top: 50px;"> |
| <form id="messageForm"> |
| <div class="input-group mb-3"> |
| <input type="text" class="form-control" id="messageInput" placeholder="Type your website details here..."> |
| |
| <div class="input-group-append"> |
| <button class="btn btn-outline-secondary" type="submit" id="sendButton"> |
| <i id="buttonIcon" class="fas fa-paper-plane"></i> |
| </button> |
| <button id="downloadButton"><i class="fas fa-download"></i> Download HTML</button> |
| </div> |
| </div> |
| </form> |
| </div> |
|
|
| <div class="container-fluid" id="htmlDiv"> |
| <div class=" embed-responsive-16by9"> |
| <iframe id="myIframe" class="embed-responsive-item" style="width: 100%;border: none;"></iframe> |
| </div> |
| </div> |
|
|
| <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
| <script> |
| |
| |
| |
| |
| |
| |
| var iframe = document.getElementById('myIframe'); |
| iframe.onload = function() { |
| iframe.contentWindow.document.body.style.margin = '0'; |
| iframe.contentWindow.document.body.style.padding = '0'; |
| iframe.style.height = document.getElementById('myIframe').contentWindow.document.body.scrollHeight + 'px'; |
| |
| } |
| |
| document.getElementById('downloadButton').addEventListener('click', function() { |
| var iframeDoc = document.getElementById('myIframe').contentWindow.document; |
| if (iframeDoc.body.innerHTML.trim() !== '') { |
| var html = iframeDoc.documentElement.outerHTML; |
| var blob = new Blob([html], { type: 'text/html' }); |
| var url = URL.createObjectURL(blob); |
| var a = document.createElement('a'); |
| a.href = url; |
| a.download = 'output.html'; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| URL.revokeObjectURL(url); |
| } else { |
| alert('No content to download.'); |
| } |
| }); |
| |
| $(document).ready(function() { |
| $('#messageForm').on('submit', function(e) { |
| e.preventDefault(); |
| var message = $('#messageInput').val(); |
| var buttonIcon = $('#buttonIcon'); |
| |
| |
| document.getElementById('myIframe').srcdoc = ''; |
| buttonIcon.removeClass('fa-paper-plane').addClass('fa-spinner fa-spin'); |
| |
| $.ajax({ |
| url: 'https://nakheeltech.com:8030/api/v1/prediction/9b2e5787-04ce-404c-981f-a69bbfce6035', |
| type: 'POST', |
| data: JSON.stringify({"question": message }), |
| contentType: 'application/json', |
| success: function(data) { |
| |
| $('#messageInput').val(''); |
| var text=data.text |
| var startIndex = text.indexOf("<"); |
| var endIndex = text.lastIndexOf(">") + 1; |
| var htmlString = text.substring(startIndex, endIndex); |
| document.getElementById('myIframe').srcdoc = htmlString; |
| |
| buttonIcon.removeClass('fa-spinner fa-spin').addClass('fa-paper-plane'); |
| |
| }, |
| error: function(jqXHR, textStatus, errorThrown) { |
| |
| buttonIcon.removeClass('fa-spinner fa-spin').addClass('fa-paper-plane'); |
| |
| } |
| }); |
| }); |
| }); |
| </script> |
|
|
| |
| |
| |
| </body> |
| </html> |
|
|
