-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[improvements] progress bar and display feature added
- Loading branch information
Showing
2 changed files
with
217 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,61 +1,171 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Agrotourism Service Generator</title> | ||
<script src="https://cdn.tailwindcss.com"></script> | ||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet"> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | ||
<link rel="stylesheet" href="../static/styles.css"> | ||
|
||
</head> | ||
<body class="bg-gray-50 text-gray-800"> | ||
<link | ||
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" | ||
rel="stylesheet" | ||
/> | ||
<link | ||
rel="stylesheet" | ||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" | ||
/> | ||
<link rel="stylesheet" href="../static/styles.css" /> | ||
</head> | ||
<body class="bg-gray-50 text-gray-800"> | ||
<nav class="flex justify-between items-center py-6"> | ||
<a href="#" class="text-2xl font-bold text-gray-800">Chalo Kisaan</a> | ||
<div class="menu-toggle" onclick="toggleMenu()"> | ||
<i class="fas fa-bars fa-2x"></i> | ||
</div> | ||
<div class="nav-links hidden md:flex"> | ||
<a href="/predict" class="text-gray-600 mx-2">Start Planning</a> | ||
<a href="/generate" class="text-gray-600 mx-2">Generate</a> | ||
<a href="#" class="text-blue-600 mx-2">How it works?</a> | ||
</div> | ||
</nav> | ||
<a href="#" class="text-2xl font-bold text-gray-800">Chalo Kisaan</a> | ||
<div class="menu-toggle" onclick="toggleMenu()"> | ||
<i class="fas fa-bars fa-2x"></i> | ||
</div> | ||
<div class="nav-links hidden md:flex"> | ||
<a href="/predict" class="text-gray-600 mx-2">Start Planning</a> | ||
<a href="/generate" class="text-gray-600 mx-2">Generate</a> | ||
<a href="#" class="text-blue-600 mx-2">How it works?</a> | ||
</div> | ||
</nav> | ||
|
||
<div class="container mx-auto px-4 py-8"> | ||
<h2 class="text-xl font-bold text-green-600">Agrotourism Service Description Generator</h2> | ||
<form method="post" class="mt-4"> | ||
<label for="service_name" class="block text-gray-700 text-sm font-bold mb-2">Enter the Agrotourism Service Name:</label> | ||
<input type="text" id="service_name" name="service_name" required value="{{ service_name }}" class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full"> | ||
<input type="submit" value="Start Generation" class="mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer"> | ||
<h2 class="text-xl font-bold text-green-600"> | ||
Agrotourism Service Description Generator | ||
</h2> | ||
<div class="my-4"> | ||
<div class="flex items-center mb-2"> | ||
<div class="text-sm font-medium text-green-500 leading-none mr-2"> | ||
Progress: | ||
</div> | ||
<div class="flex-1 h-2 bg-gray-200 rounded-full"> | ||
<div | ||
class="h-2 bg-green-500 rounded-full" | ||
style="width: {{ '%d%%' | format(progress) }}" | ||
></div> | ||
</div> | ||
</div> | ||
<div class="flex justify-between text-xs font-medium text-gray-600"> | ||
<div | ||
class="{{ 'text-green-600' if progress >= 25 else 'text-gray-600' }}" | ||
> | ||
Description | ||
</div> | ||
<div | ||
class="{{ 'text-green-600' if progress >= 50 else 'text-gray-600' }}" | ||
> | ||
Business Model | ||
</div> | ||
<div | ||
class="{{ 'text-green-600' if progress >= 75 else 'text-gray-600' }}" | ||
> | ||
Setup Process | ||
</div> | ||
<div | ||
class="{{ 'text-green-600' if progress == 100 else 'text-gray-600' }}" | ||
> | ||
Budget | ||
</div> | ||
</div> | ||
</div> | ||
<form method="post" class="mt-4"> | ||
<label | ||
for="service_name" | ||
class="block text-gray-700 text-sm font-bold mb-2" | ||
>Enter the Agrotourism Service Name:</label | ||
> | ||
<input | ||
type="text" | ||
id="service_name" | ||
name="service_name" | ||
required | ||
value="{{ service_name }}" | ||
class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full" | ||
/> | ||
<input | ||
type="submit" | ||
value="Start Generation" | ||
class="mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer" | ||
/> | ||
</form> | ||
{% if sections %} | ||
<div class="mt-8"> | ||
{% for section in sections %} | ||
<div class="mb-8 p-4 shadow-lg rounded-lg bg-white"> | ||
<h3 class="font-bold text-green-600"> | ||
Generated {{ section.name.replace('_', ' ').title() }} for {{ | ||
service_name }}: | ||
</h3> | ||
<div class="mt-2 text-gray-600">{{ section.content | safe }}</div> | ||
</div> | ||
{% endfor %} {% if not is_final_section %} | ||
<form method="post" class="flex justify-between items-center mt-4"> | ||
<input type="hidden" name="service_name" value="{{ service_name }}" /> | ||
<input type="hidden" name="section" value="{{ sections[-1].name }}" /> | ||
<input | ||
type="submit" | ||
name="accept" | ||
value="Yes, loved it!" | ||
class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer" | ||
/> | ||
<input | ||
type="submit" | ||
name="regenerate" | ||
value="Generate Again" | ||
class="ml-2 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer" | ||
/> | ||
</form> | ||
{% if sections %} | ||
<div class="mt-8"> | ||
{% for section in sections %} | ||
<div class="mb-8 p-4 shadow-lg rounded-lg bg-white"> | ||
<h3 class="font-bold text-green-600">Generated {{ section.name.replace('_', ' ').title() }} for {{ service_name }}:</h3> | ||
<div class="mt-2 text-gray-600">{{ section.content | safe }}</div> | ||
</div> | ||
{% endfor %} | ||
{% if not is_final_section %} | ||
<form method="post" class="flex justify-between items-center mt-4"> | ||
<input type="hidden" name="service_name" value="{{ service_name }}"> | ||
<input type="hidden" name="section" value="{{ sections[-1].name }}"> | ||
<input type="submit" name="accept" value="Yes, loved it!" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer"> | ||
<input type="submit" name="regenerate" value="Generate Again" class="ml-2 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer"> | ||
</form> | ||
{% else %} | ||
<p class="mt-4 text-green-600">Thank you for using our service!</p> | ||
{% endif %} | ||
</div> | ||
{% else %} | ||
<p class="mt-4 text-green-600">Thank you for using our service!</p> | ||
{% endif %} | ||
</div> | ||
{% endif %} | ||
|
||
{% if is_final_section %} | ||
<!-- Display Button --> | ||
<div class="flex justify-end mt-4"> | ||
<button | ||
id="displayButton" | ||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer" | ||
> | ||
Display | ||
</button> | ||
</div> | ||
|
||
<!-- Your Agrotourism Service Plan Section, hidden by default --> | ||
<div id="approvedSections" class="mt-8 hidden"> | ||
<h3 class="text-xl font-bold text-green-600"> | ||
Your Agrotourism Service Plan: | ||
</h3> | ||
<!-- Approved Sections will be displayed here --> | ||
{% for section_name, section_content in approved_sections.items() %} | ||
<div class="mb-8 p-4 shadow-lg rounded-lg bg-white"> | ||
<h4 class="font-bold text-green-600"> | ||
{{ section_name.replace('_', ' ').title() }}: | ||
</h4> | ||
<div class="mt-2 text-gray-600">{{ section_content | safe }}</div> | ||
</div> | ||
{% endfor %} | ||
</div> | ||
|
||
<form method="POST" action="/download"> | ||
<input type="hidden" name="service_name" value="{{ service_name }}"> | ||
<button type="submit" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer"> | ||
Download | ||
</button> | ||
</form> | ||
|
||
{% endif %} | ||
</div> | ||
<script> | ||
function toggleMenu() { | ||
var navigation = document.querySelector('.nav-links'); | ||
navigation.classList.toggle('mobile-menu'); | ||
} | ||
</script> | ||
</body> | ||
function toggleMenu() { | ||
var navigation = document.querySelector(".nav-links"); | ||
navigation.classList.toggle("mobile-menu"); | ||
} | ||
|
||
document.getElementById('displayButton').addEventListener('click', function() { | ||
var approvedSections = document.getElementById('approvedSections'); | ||
approvedSections.classList.toggle('hidden'); | ||
}); | ||
</script> | ||
</body> | ||
</html> |