Spaces:

Davidals
/

reportcraft-studio

Running

App Files Files Community

reportcraft-studio / index.html

Davidals

Manual changes saved

f7c5ea1 verified 3 months ago

raw

history blame contribute delete

33.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ReportCraft Studio</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
	body {
	font-family: 'Poppins', sans-serif;
	background-color: #f8fafc;
	}
	.card-shadow {
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}
	.preview-card {
	transition: all 0.3s ease;
	}
	.preview-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}
	.field-item {
	cursor: grab;
	}
	.field-item:active {
	cursor: grabbing;
	}
	.table-cell {
	min-height: 50px;
	}
	.vanta-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.1;
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<div id="vanta-bg" class="vanta-bg"></div>

	<!-- Header -->
	<header class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg">
	<div class="container mx-auto px-4 py-6 flex justify-between items-center">
	<div class="flex items-center space-x-3">
	<i data-feather="file-text" class="w-8 h-8"></i>
	<h1 class="text-2xl font-bold">ReportCraft Studio</h1>
	</div>
	<div class="flex items-center space-x-4">
	<button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-indigo-50 transition flex items-center">
	<i data-feather="save" class="mr-2 w-4 h-4"></i> Save Template
	</button>
	<button class="bg-indigo-800 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center">
	<i data-feather="download" class="mr-2 w-4 h-4"></i> Export
	</button>
	</div>
	</div>
	</header>

	<main class="container mx-auto px-4 py-8">
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
	<!-- Left Panel - Configuration -->
	<div class="lg:col-span-2 space-y-8">
	<!-- Report Type & Template -->
	<div class="bg-white rounded-xl card-shadow p-6">
	<h2 class="text-xl font-semibold mb-4 flex items-center">
	<i data-feather="settings" class="mr-2 text-indigo-600"></i> Report Configuration
	</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Report Type</label>
	<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
	<option>PDF Report</option>
	<option>Excel Spreadsheet</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Template</label>
	<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
	<option>Annual Financial Summary</option>
	<option>Project Status Overview</option>
	<option>Department Performance</option>
	<option>Resource Allocation</option>
	<option>Custom Template</option>
	</select>
	</div>
	</div>
	</div>

	<!-- Execution Level & Modules -->
	<div class="bg-white rounded-xl card-shadow p-6">
	<h2 class="text-xl font-semibold mb-4 flex items-center">
	<i data-feather="layers" class="mr-2 text-indigo-600"></i> Execution Scope
	</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Execution Level</label>
	<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
	<option>Project Plan</option>
	<option>Department</option>
	<option>Room</option>
	<option>Item</option>
	<option>Purchase Order</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Execution Modules</label>
	<div class="space-y-2">
	<div class="flex items-center">
	<input type="checkbox" id="module1" class="rounded text-indigo-600 focus:ring-indigo-500">
	<label for="module1" class="ml-2 text-gray-700">Project Plan</label>
	</div>
	<div class="flex items-center">
	<input type="checkbox" id="module2" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
	<label for="module2" class="ml-2 text-gray-700">Department</label>
	</div>
	<div class="flex items-center">
	<input type="checkbox" id="module3" class="rounded text-indigo-600 focus:ring-indigo-500">
	<label for="module3" class="ml-2 text-gray-700">Room</label>
	</div>
	<div class="flex items-center">
	<input type="checkbox" id="module4" class="rounded text-indigo-600 focus:ring-indigo-500">
	<label for="module4" class="ml-2 text-gray-700">Item</label>
	</div>
	<div class="flex items-center">
	<input type="checkbox" id="module5" class="rounded text-indigo-600 focus:ring-indigo-500">
	<label for="module5" class="ml-2 text-gray-700">Purchase Order</label>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Field Selection & Table Layout -->
	<div class="bg-white rounded-xl card-shadow p-6">
	<h2 class="text-xl font-semibold mb-4 flex items-center">
	<i data-feather="layout" class="mr-2 text-indigo-600"></i> Data Fields & Layout
	</h2>
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Available Fields</label>
	<div class="border border-gray-300 rounded-lg p-4 h-80 overflow-y-auto bg-gray-50">
	<div class="grid grid-cols-1 gap-2">
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="database" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Project Name</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Start Date</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>End Date</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="dollar-sign" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Budget</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="users" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Team Size</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="percent" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Completion %</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="flag" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Status</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="user" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Project Manager</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="clock" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Hours Logged</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="trending-up" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Milestone Progress</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="alert-circle" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Risk Level</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="target" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Goals Achieved</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="bar-chart-2" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Performance Index</span>
	</div>
	<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
	<i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
	<span>Last Updated</span>
	</div>
	</div>
	</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Field Layout</label>
	<div class="border border-gray-300 rounded-lg overflow-hidden">
	<div class="bg-gray-100 p-2 border-b border-gray-300 font-medium">Report Header</div>
	<div class="p-4">
	<div class="grid grid-cols-3 gap-2 mb-2">
	<div class="table-cell bg-indigo-50 border border-indigo-200 rounded flex items-center justify-center p-2 text-center text-sm font-medium">Project Name</div>
	<div class="table-cell bg-indigo-50 border border-indigo-200 rounded flex items-center justify-center p-2 text-center text-sm font-medium">Budget</div>
	<div class="table-cell bg-indigo-50 border border-indigo-200 rounded flex items-center justify-center p-2 text-center text-sm font-medium">Completion %</div>
	</div>
	<div class="grid grid-cols-3 gap-2">
	<div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">Alpha Project</div>
	<div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">$125,000</div>
	<div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">78%</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Grouping & Index -->
	<div class="bg-white rounded-xl card-shadow p-6">
	<h2 class="text-xl font-semibold mb-4 flex items-center">
	<i data-feather="folder" class="mr-2 text-indigo-600"></i> Grouping & Index
	</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Group By Fields</label>
	<select multiple class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-32">
	<option selected>Department</option>
	<option>Project Manager</option>
	<option>Status</option>
	<option>Priority</option>
	<option>Location</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Table of Contents Fields</label>
	<select multiple class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 h-32">
	<option selected>Project Name</option>
	<option>Department</option>
	<option>Completion Status</option>
	<option>Budget</option>
	<option>Timeline</option>
	</select>
	</div>
	</div>
	</div>
	</div>

	<!-- Right Panel - Styling & Previews -->
	<div class="space-y-8">
	<!-- Styling Options -->
	<div class="bg-white rounded-xl card-shadow p-6">
	<h2 class="text-xl font-semibold mb-4 flex items-center">
	<i data-feather="droplet" class="mr-2 text-indigo-600"></i> Styling
	</h2>
	<div class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Primary Color</label>
	<div class="flex space-x-2">
	<div class="w-8 h-8 rounded-full bg-indigo-600 cursor-pointer border-2 border-white shadow"></div>
	<div class="w-8 h-8 rounded-full bg-blue-600 cursor-pointer border-2 border-white shadow"></div>
	<div class="w-8 h-8 rounded-full bg-green-600 cursor-pointer border-2 border-white shadow"></div>
	<div class="w-8 h-8 rounded-full bg-purple-600 cursor-pointer border-2 border-white shadow"></div>
	<div class="w-8 h-8 rounded-full bg-red-600 cursor-pointer border-2 border-white shadow"></div>
	</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Font Family</label>
	<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
	<option>Poppins (Default)</option>
	<option>Roboto</option>
	<option>Open Sans</option>
	<option>Lato</option>
	<option>Montserrat</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Header/Footer Templates</label>
	<div class="grid grid-cols-2 gap-3">
	<select class="w-full p-2 border border-gray-300 rounded-lg text-sm">
	<option>Corporate Header</option>
	<option>Minimal Header</option>
	<option>Modern Header</option>
	</select>
	<select class="w-full p-2 border border-gray-300 rounded-lg text-sm">
	<option>Standard Footer</option>
	<option>Page Numbers Only</option>
	<option>Detailed Footer</option>
	</select>
	</div>
	</div>
	</div>
	</div>

	<!-- Checkboxes Configuration -->
	<div class="bg-white rounded-xl card-shadow p-6">
	<h2 class="text-xl font-semibold mb-4 flex items-center">
	<i data-feather="check-square" class="mr-2 text-indigo-600"></i> Checkbox Options
	</h2>
	<div class="space-y-4">
	<div class="space-y-2">
	<div class="flex items-center justify-between">
	<span class="text-gray-700">Show Budget Details</span>
	<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
	</div>
	<div class="flex items-center justify-between ml-4">
	<span class="text-sm text-gray-600">Default checked</span>
	<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
	</div>
	</div>
	<div class="space-y-2">
	<div class="flex items-center justify-between">
	<span class="text-gray-700">Include Charts</span>
	<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
	</div>
	<div class="flex items-center justify-between ml-4">
	<span class="text-sm text-gray-600">Default checked</span>
	<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
	</div>
	</div>
	<div class="space-y-2">
	<div class="flex items-center justify-between">
	<span class="text-gray-700">Show Team Members</span>
	<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
	</div>
	<div class="flex items-center justify-between ml-4">
	<span class="text-sm text-gray-600">Default checked</span>
	<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
	</div>
	</div>
	<div class="space-y-2">
	<div class="flex items-center justify-between">
	<span class="text-gray-700">Export Raw Data</span>
	<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
	</div>
	<div class="flex items-center justify-between ml-4">
	<span class="text-sm text-gray-600">Default checked</span>
	<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
	</div>
	</div>
	</div>
	</div>
	<!-- Previews -->
	<div class="bg-white rounded-xl card-shadow p-6">
	<h2 class="text-xl font-semibold mb-4 flex items-center">
	<i data-feather="eye" class="mr-2 text-indigo-600"></i> Report Preview
	</h2>
	<p class="text-gray-600 text-sm mb-4">Final preview of your generated report:</p>
	<div class="border border-gray-300 rounded-lg p-4 bg-gray-50">


	<button class="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition">
	See Preview
	</button>
	</div>
	</div>

	<!-- Report Naming -->
	<div class="bg-white rounded-xl card-shadow p-6">
	<h2 class="text-xl font-semibold mb-4 flex items-center">
	<i data-feather="tag" class="mr-2 text-indigo-600"></i> Report Details
	</h2>
	<div class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">Report Name</label>
	<input type="text" value="Q3 Project Performance Report" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">File Name</label>
	<input type="text" value="q3-project-report-v2" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
	</div>
	<button class="w-full bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center" onclick="showPreview()">
	<i data-feather="play" class="mr-2 w-4 h-4"></i> Generate Report
	</button>
	</div>
	</div>
	</div>
	</div>
	</main>

	<footer class="bg-gray-800 text-white py-6 mt-12">
	<div class="container mx-auto px-4 text-center">
	<p>ReportCraft Studio - Create professional reports with ease</p>
	<p class="text-gray-400 text-sm mt-2">Drag and drop fields to customize your report layout</p>
	</div>
	</footer>

	<script>
	feather.replace();

	// Initialize Vanta.js background
	VANTA.GLOBE({
	el: "#vanta-bg",
	mouseControls: true,
	touchControls: true,
	gyroControls: false,
	minHeight: 200.00,
	minWidth: 200.00,
	scale: 1.00,
	scaleMobile: 1.00,
	color: 0x6366f1,
	color2: 0x8b5cf6,
	backgroundColor: 0xf8fafc
	});

	// Drag and drop functionality for fields
	document.querySelectorAll('.field-item').forEach(item => {
	item.addEventListener('dragstart', function(e) {
	e.dataTransfer.setData('text/plain', this.innerText);
	this.classList.add('opacity-50');
	});

	item.addEventListener('dragend', function() {
	this.classList.remove('opacity-50');
	});
	});

	document.querySelectorAll('.table-cell').forEach(cell => {
	cell.addEventListener('dragover', function(e) {
	e.preventDefault();
	this.classList.add('bg-indigo-100');
	});

	cell.addEventListener('dragleave', function() {
	this.classList.remove('bg-indigo-100');
	});

	cell.addEventListener('drop', function(e) {
	e.preventDefault();
	this.classList.remove('bg-indigo-100');
	const data = e.dataTransfer.getData('text/plain');
	this.innerHTML = `<div class="text-center">${data}</div>`;
	});
	});

	// Preview functionality
	function showPreview() {
	// Create preview content
	const previewContent = `
	<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
	<div class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-6">
	<h1 class="text-2xl font-bold">Q3 Project Performance Report</h1>
	<p class="mt-2">Generated on ${new Date().toLocaleDateString()}</p>
	</div>

	<div class="p-6">
	<div class="mb-8">
	<h2 class="text-xl font-semibold text-gray-800 mb-4">Executive Summary</h2>
	<p class="text-gray-600">This report provides an overview of project performance for Q3 2023. Key metrics show overall completion at 72% with budget utilization at 68%.</p>
	</div>

	<div class="mb-8">
	<h2 class="text-xl font-semibold text-gray-800 mb-4">Project Status Overview</h2>
	<div class="overflow-x-auto">
	<table class="min-w-full bg-white border border-gray-200">
	<thead>
	<tr class="bg-gray-100">
	<th class="py-2 px-4 border-b text-left">Project Name</th>
	<th class="py-2 px-4 border-b text-left">Budget</th>
	<th class="py-2 px-4 border-b text-left">Completion %</th>
	<th class="py-2 px-4 border-b text-left">Status</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td class="py-2 px-4 border-b">Alpha Project</td>
	<td class="py-2 px-4 border-b">$125,000</td>
	<td class="py-2 px-4 border-b">78%</td>
	<td class="py-2 px-4 border-b text-green-600">On Track</td>
	</tr>
	<tr>
	<td class="py-2 px-4 border-b">Beta Initiative</td>
	<td class="py-2 px-4 border-b">$89,500</td>
	<td class="py-2 px-4 border-b">45%</td>
	<td class="py-2 px-4 border-b text-yellow-600">Delayed</td>
	</tr>
	<tr>
	<td class="py-2 px-4 border-b">Gamma Upgrade</td>
	<td class="py-2 px-4 border-b">$210,000</td>
	<td class="py-2 px-4 border-b">92%</td>
	<td class="py-2 px-4 border-b text-green-600">On Track</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<div>
	<h2 class="text-xl font-semibold text-gray-800 mb-4">Department Performance</h2>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div class="bg-indigo-50 p-4 rounded-lg">
	<h3 class="font-medium text-indigo-800">Engineering</h3>
	<p class="text-2xl font-bold mt-2">82%</p>
	<p class="text-sm text-gray-600">Avg. Completion</p>
	</div>
	<div class="bg-purple-50 p-4 rounded-lg">
	<h3 class="font-medium text-purple-800">Marketing</h3>
	<p class="text-2xl font-bold mt-2">65%</p>
	<p class="text-sm text-gray-600">Avg. Completion</p>
	</div>
	<div class="bg-blue-50 p-4 rounded-lg">
	<h3 class="font-medium text-blue-800">Operations</h3>
	<p class="text-2xl font-bold mt-2">74%</p>
	<p class="text-sm text-gray-600">Avg. Completion</p>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-gray-50 p-4 text-center text-gray-500 text-sm">
	<p>Report generated by ReportCraft Studio</p>
	</div>
	</div>
	`;

	// Create modal
	const modal = document.createElement('div');
	modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
	modal.innerHTML = `
	<div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
	<div class="sticky top-0 bg-white border-b p-4 flex justify-between items-center">
	<h2 class="text-xl font-bold">Report Preview</h2>
	<button onclick="this.closest('.fixed').remove()" class="text-gray-500 hover:text-gray-700">
	<i data-feather="x"></i>
	</button>
	</div>
	<div class="p-6">
	${previewContent}
	</div>
	<div class="sticky bottom-0 bg-white border-t p-4 flex justify-end">
	<button onclick="this.closest('.fixed').remove()" class="px-4 py-2 bg-gray-200 rounded-lg mr-2">Close</button>
	<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg">Export Report</button>
	</div>
	</div>
	`;

	document.body.appendChild(modal);
	feather.replace();
	}
	</script>
	</body>
	</html>