8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terms & Condition Generator</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
#chatContainer {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
width: 100%;
max-width: 800px;
margin: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#chatHeader {
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
color: white;
padding: 10px;
text-align: center;
font-size: 20px;
}
#userInputs {
padding: 20px;
text-align: center;
}
#userInputs input {
margin: 5px;
padding: 10px;
width: calc(100% - 30px);
border-radius: 5px;
border: 1px solid #ccc;
}
button {
width: calc(100% - 40px);
padding: 10px;
margin: 20px;
border-radius: 8px;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
transition: all 0.3s ease;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
#chatBody {
padding: 20px;
max-height: 300px;
overflow-y: auto;
}
.messageContainer {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.message {
background-color: #e2f0cb;
padding: 10px;
border-radius: 5px;
max-width: 70%;
word-wrap: break-word;
}
#progressOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
#progressOverlay > div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
}
/* Styles for formatted text and typewriter effect */
.formatted-text {
white-space: pre-wrap;
/* Keeps white space and line breaks */
}
.formatted-text a {
color: #007bff;
text-decoration: none;
}
.formatted-text a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="chatContainer">
<div id="chatHeader">Terms & Condition Generator</div>
<div id="userInputs">
<input type="text" id="websiteName" placeholder="Website Name">
<input type="text" id="websiteURL" placeholder="Website URL">
<input type="email" id="contactEmail" placeholder="Contact Email">
</div>
<button id="generateTerms" onclick="generateTerms()">Generate Terms & Condition</button>
<div id="chatBody"></div>
</div>
<div id="progressOverlay">
<div>Thinking...</div>
</div>
<script>
function generateTerms() {
var websiteName = $("#websiteName").val();
var websiteURL = $("#websiteURL").val();
var contactEmail = $("#contactEmail").val();
var termsPrompt = `Generate a terms and condition for the website named "${websiteName}" with URL "${websiteURL}" and contact email "${contactEmail}". Include sections for the collection of personal information, use of cookies, third-party disclosure, and user rights.`;
$('#progressOverlay').show(); // Show progress overlay
// how to get API key
// https://allfreestore.com/wp-content/uploads/2024/03/Get%20OpenAI%20API%20Key.mp4
var apiKey = 'your_api_key'; // Replace with your actual OpenAI API key
var apiUrl = 'https://api.openai.com/v1/chat/completions';
var requestBody = {
model: 'gpt-3.5-turbo',
messages: [{
role: 'user',
content: termsPrompt
}],
temperature: 0.7
};
$.ajax({
type: 'POST',
url: apiUrl,
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiKey
},
data: JSON.stringify(requestBody),
success: function(response) {
$('#progressOverlay').hide(); // Hide progress overlay
addTypewriterEffect(response.choices[0].message.content, 'chatBody');
},
error: function(error) {
$('#progressOverlay').hide(); // Hide progress overlay on error
console.error('Error generating privacy policy:', error);
}
});
}
function formatResponseText(text) {
// Convert URLs into hyperlinks
text = text.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank">$1</a>');
// Detect headings and make them bold
text = text.replace(/^##\s?(.+)/gm, '<strong>$1</strong>');
// Replace newline characters with <p> tags for paragraphs
// text = text.replace(/\n/g, '</p><p>');
// Wrap the text in <p> tags to ensure it starts and ends as a paragraph
return '<p>' + text + '</p>';
}
function addTypewriterEffect(text, elementId) {
var formattedText = formatResponseText(text);
var container = $('<div class="messageContainer"></div>').appendTo('#' + elementId);
var message = $('<div class="message formatted-text" style="background-color: #f5f5f5;"></div>').appendTo(container);
var i = 0;
var speed = 10; // Typing speed in milliseconds
function typeWriter() {
if (i < formattedText.length) {
var charToAdd = formattedText.charAt(i);
if (formattedText.substring(i).startsWith('<a href=') || formattedText.substring(i).startsWith('<br>') || formattedText.substring(i).startsWith('<strong>')) {
var tagEnd = formattedText.indexOf('>', i) + 1;
charToAdd = formattedText.substring(i, tagEnd);
i = tagEnd;
} else if (formattedText.charAt(i) === '<') {
var tagEnd = formattedText.indexOf('>', i) + 1;
charToAdd = formattedText.substring(i, tagEnd);
i = tagEnd - 1;
}
message.append(charToAdd);
i++;
setTimeout(typeWriter, speed);
} else {
var copyIcon = $('<div class="copyIcon">📋</div>').appendTo(container);
copyIcon.click(function() {
var textToCopy = message.text();
navigator.clipboard.writeText(textToCopy).then(function() {
alert('Text copied to clipboard!');
}, function(err) {
console.error('Could not copy text: ', err);
});
});
var regenerateIcon = $('<div class="regenerateIcon">🔁</div>').appendTo(container);
regenerateIcon.click(function() {
$('#chatBody').html(''); // Clear the previous messages
generateTerms(); // Call generatePrivacyPolicy function to regenerate the policy
});
}
}
typeWriter();
}
function formatResponseText(text) {
text = text.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank">$1</a>');
text = text.replace(/^##\s?(.+)/gm, '<strong>$1</strong>');
text = text.replace(/^(\s*(?:-|\*|\d+\.)\s+.+)$/gm, '$1<br>');
return text;
}
</script>
<style>
.regenerateIcon,
.copyIcon {
cursor: pointer;
display: inline-block;
margin-left: 10px;
font-size: 20px;
/* Adjust size as needed */
}
.userMessage .message {
background-color: #e2f0cb;
}
#progressOverlay {
display: none;
/* Initially hidden */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
#progressOverlay > div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
}
</style>
<div id="progressOverlay">
<div>Thinking...</div>
</div>
</script>
</body>
</html>
No comments:
Post a Comment