Spaces:

yasserrmd
/

webUIGen

Running

App Files Files Community

webUIGen / index.html

yasserrmd

Update index.html

8398b03 verified 12 months ago

raw

history blame contribute delete

7.33 kB

	<!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>
	/* Style the form container */
	.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);
	}

	/* Style the form heading */
	h1 {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
	}

	/* Style the form icon */
	.form-icon {
	margin-right: 10px;
	}

	/* Style the group headings */
	h2 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	}

	/* Style the group icon */
	.group-icon {
	margin-right: 5px;
	}

	/* Style the form fields */
	.form-field {
	margin-bottom: 10px;
	}

	/* Style the form field labels */
	.form-field label {
	font-weight: bold;
	}

	/* Style the form field inputs */
	.form-field input,
	.form-field textarea,
	.form-field select {
	width: 100%;
	}

	/* Style the form field checkboxes and radios */
	.form-field input[type="checkbox"],
	.form-field input[type="radio"] {
	margin-right: 5px;
	}

	/* Style the form field checkbox and radio labels */
	.form-field label[for] {
	display: inline;
	font-weight: normal;
	}

	/* Style the form field error messages */
	.form-field .error-message {
	color: red;
	font-size: 12px;
	margin-top: 5px;
	}

	/* Style the form submit and cancel buttons */
	.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;
	}

	/* Use Bootstrap classes to style the form and group headings */
	.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...">
	<!-- <textarea class="form-control" id="messageInput" placeholder="Type your message here..." rows="7"></textarea> -->
	<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>
	// document.getElementById('myIframe').onload = function() {
	// document.getElementById('myIframe').style.height = document.getElementById('myIframe').contentWindow.document.body.scrollHeight + 'px';
	// //document.getElementById('htmlDiv').style.height = document.getElementById('myIframe').contentWindow.document.body.scrollHeight + 'px';

	// }

	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');
	//$("#htmlPreview").html('');
	// Change icon to loading spinner
	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) {
	// Change icon back to paper plane
	$('#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;
	//$("#htmlPreview").html(htmlString);
	buttonIcon.removeClass('fa-spinner fa-spin').addClass('fa-paper-plane');
	// Handle success here
	},
	error: function(jqXHR, textStatus, errorThrown) {
	// Change icon back to paper plane
	buttonIcon.removeClass('fa-spinner fa-spin').addClass('fa-paper-plane');
	// Handle error here
	}
	});
	});
	});
	</script>

	<!-- <div class="container" id="htmlPreview">

	</div> -->
	</body>
	</html>