|
<!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/3845925d-d239-468c-a63f-b6948afd08fd', |
|
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> |
|
|
