Spaces:
Running
Running
Make a UI for a report creator. The main idea is to be able to create report layouts that would later be run in another place. For this UI, is not needed to run them, maybe just show a preview of how it would look.
Browse filesThe report creator should have the following:
-Select the type of report to create (PDF or XLS)
-Select the report template to use (there will be reports previously created that will be used as templates, that way it doesn't need to be created from scratch)
-Select at which level the report will run and execution modules (both are just a list of: Project Plan, Department, Room, Item, Purchase Order)
-Let the user pick the fields and put them in a table to arrange them (the reports show information in a table that dynamically grows based on the data used, the idea of this table will be to mimic the one in the report. That way the user can chose where the fields will be placed in the report)
-Select the fields to be used to group the report
-Select fields used for the table of contents if needed (in other words, the index)
-Select page header and footer from a list (there will be templates of both to chose from)
-Select some styles for the report (color, font, etc)
-Generate 3 previews for the user to pick (in later iterations, the report creator will use AI to make 3 different reports based on the previous parameters)
-Select which checkboxes will be displayed and which will be checked by default (the report will have some checkboxes that would change the result when used/generated)
-Select the name of the report and the file name when generated
- README.md +8 -5
- index.html +436 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: ReportCraft Studio
|
| 3 |
+
colorFrom: blue
|
| 4 |
+
colorTo: pink
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,437 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>ReportCraft Studio</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
| 13 |
+
body {
|
| 14 |
+
font-family: 'Poppins', sans-serif;
|
| 15 |
+
background-color: #f8fafc;
|
| 16 |
+
}
|
| 17 |
+
.card-shadow {
|
| 18 |
+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 19 |
+
}
|
| 20 |
+
.preview-card {
|
| 21 |
+
transition: all 0.3s ease;
|
| 22 |
+
}
|
| 23 |
+
.preview-card:hover {
|
| 24 |
+
transform: translateY(-5px);
|
| 25 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 26 |
+
}
|
| 27 |
+
.field-item {
|
| 28 |
+
cursor: grab;
|
| 29 |
+
}
|
| 30 |
+
.field-item:active {
|
| 31 |
+
cursor: grabbing;
|
| 32 |
+
}
|
| 33 |
+
.table-cell {
|
| 34 |
+
min-height: 50px;
|
| 35 |
+
}
|
| 36 |
+
.vanta-bg {
|
| 37 |
+
position: fixed;
|
| 38 |
+
top: 0;
|
| 39 |
+
left: 0;
|
| 40 |
+
width: 100%;
|
| 41 |
+
height: 100%;
|
| 42 |
+
z-index: -1;
|
| 43 |
+
opacity: 0.1;
|
| 44 |
+
}
|
| 45 |
+
</style>
|
| 46 |
+
</head>
|
| 47 |
+
<body class="bg-gray-50">
|
| 48 |
+
<div id="vanta-bg" class="vanta-bg"></div>
|
| 49 |
+
|
| 50 |
+
<!-- Header -->
|
| 51 |
+
<header class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg">
|
| 52 |
+
<div class="container mx-auto px-4 py-6 flex justify-between items-center">
|
| 53 |
+
<div class="flex items-center space-x-3">
|
| 54 |
+
<i data-feather="file-text" class="w-8 h-8"></i>
|
| 55 |
+
<h1 class="text-2xl font-bold">ReportCraft Studio</h1>
|
| 56 |
+
</div>
|
| 57 |
+
<div class="flex items-center space-x-4">
|
| 58 |
+
<button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-indigo-50 transition flex items-center">
|
| 59 |
+
<i data-feather="save" class="mr-2 w-4 h-4"></i> Save Template
|
| 60 |
+
</button>
|
| 61 |
+
<button class="bg-indigo-800 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center">
|
| 62 |
+
<i data-feather="download" class="mr-2 w-4 h-4"></i> Export
|
| 63 |
+
</button>
|
| 64 |
+
</div>
|
| 65 |
+
</div>
|
| 66 |
+
</header>
|
| 67 |
+
|
| 68 |
+
<main class="container mx-auto px-4 py-8">
|
| 69 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
| 70 |
+
<!-- Left Panel - Configuration -->
|
| 71 |
+
<div class="lg:col-span-2 space-y-8">
|
| 72 |
+
<!-- Report Type & Template -->
|
| 73 |
+
<div class="bg-white rounded-xl card-shadow p-6">
|
| 74 |
+
<h2 class="text-xl font-semibold mb-4 flex items-center">
|
| 75 |
+
<i data-feather="settings" class="mr-2 text-indigo-600"></i> Report Configuration
|
| 76 |
+
</h2>
|
| 77 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 78 |
+
<div>
|
| 79 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Report Type</label>
|
| 80 |
+
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
|
| 81 |
+
<option>PDF Report</option>
|
| 82 |
+
<option>Excel Spreadsheet</option>
|
| 83 |
+
</select>
|
| 84 |
+
</div>
|
| 85 |
+
<div>
|
| 86 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Template</label>
|
| 87 |
+
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
|
| 88 |
+
<option>Annual Financial Summary</option>
|
| 89 |
+
<option>Project Status Overview</option>
|
| 90 |
+
<option>Department Performance</option>
|
| 91 |
+
<option>Resource Allocation</option>
|
| 92 |
+
<option>Custom Template</option>
|
| 93 |
+
</select>
|
| 94 |
+
</div>
|
| 95 |
+
</div>
|
| 96 |
+
</div>
|
| 97 |
+
|
| 98 |
+
<!-- Execution Level & Modules -->
|
| 99 |
+
<div class="bg-white rounded-xl card-shadow p-6">
|
| 100 |
+
<h2 class="text-xl font-semibold mb-4 flex items-center">
|
| 101 |
+
<i data-feather="layers" class="mr-2 text-indigo-600"></i> Execution Scope
|
| 102 |
+
</h2>
|
| 103 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 104 |
+
<div>
|
| 105 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Execution Level</label>
|
| 106 |
+
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
|
| 107 |
+
<option>Project Plan</option>
|
| 108 |
+
<option>Department</option>
|
| 109 |
+
<option>Room</option>
|
| 110 |
+
<option>Item</option>
|
| 111 |
+
<option>Purchase Order</option>
|
| 112 |
+
</select>
|
| 113 |
+
</div>
|
| 114 |
+
<div>
|
| 115 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Execution Modules</label>
|
| 116 |
+
<div class="space-y-2">
|
| 117 |
+
<div class="flex items-center">
|
| 118 |
+
<input type="checkbox" id="module1" class="rounded text-indigo-600 focus:ring-indigo-500">
|
| 119 |
+
<label for="module1" class="ml-2 text-gray-700">Project Plan</label>
|
| 120 |
+
</div>
|
| 121 |
+
<div class="flex items-center">
|
| 122 |
+
<input type="checkbox" id="module2" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
|
| 123 |
+
<label for="module2" class="ml-2 text-gray-700">Department</label>
|
| 124 |
+
</div>
|
| 125 |
+
<div class="flex items-center">
|
| 126 |
+
<input type="checkbox" id="module3" class="rounded text-indigo-600 focus:ring-indigo-500">
|
| 127 |
+
<label for="module3" class="ml-2 text-gray-700">Room</label>
|
| 128 |
+
</div>
|
| 129 |
+
</div>
|
| 130 |
+
</div>
|
| 131 |
+
</div>
|
| 132 |
+
</div>
|
| 133 |
+
|
| 134 |
+
<!-- Field Selection & Table Layout -->
|
| 135 |
+
<div class="bg-white rounded-xl card-shadow p-6">
|
| 136 |
+
<h2 class="text-xl font-semibold mb-4 flex items-center">
|
| 137 |
+
<i data-feather="layout" class="mr-2 text-indigo-600"></i> Data Fields & Layout
|
| 138 |
+
</h2>
|
| 139 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
| 140 |
+
<div>
|
| 141 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Available Fields</label>
|
| 142 |
+
<div class="border border-gray-300 rounded-lg p-4 h-64 overflow-y-auto bg-gray-50">
|
| 143 |
+
<div class="grid grid-cols-2 gap-2">
|
| 144 |
+
<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
|
| 145 |
+
<i data-feather="database" class="w-4 h-4 mr-2 text-indigo-500"></i>
|
| 146 |
+
<span>Project Name</span>
|
| 147 |
+
</div>
|
| 148 |
+
<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
|
| 149 |
+
<i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
|
| 150 |
+
<span>Start Date</span>
|
| 151 |
+
</div>
|
| 152 |
+
<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
|
| 153 |
+
<i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-500"></i>
|
| 154 |
+
<span>End Date</span>
|
| 155 |
+
</div>
|
| 156 |
+
<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
|
| 157 |
+
<i data-feather="dollar-sign" class="w-4 h-4 mr-2 text-indigo-500"></i>
|
| 158 |
+
<span>Budget</span>
|
| 159 |
+
</div>
|
| 160 |
+
<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
|
| 161 |
+
<i data-feather="users" class="w-4 h-4 mr-2 text-indigo-500"></i>
|
| 162 |
+
<span>Team Size</span>
|
| 163 |
+
</div>
|
| 164 |
+
<div class="field-item bg-white p-3 rounded-lg border border-gray-200 shadow-sm flex items-center">
|
| 165 |
+
<i data-feather="percent" class="w-4 h-4 mr-2 text-indigo-500"></i>
|
| 166 |
+
<span>Completion %</span>
|
| 167 |
+
</div>
|
| 168 |
+
</div>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
<div>
|
| 172 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Report Layout Preview</label>
|
| 173 |
+
<div class="border border-gray-300 rounded-lg overflow-hidden">
|
| 174 |
+
<div class="bg-gray-100 p-2 border-b border-gray-300 font-medium">Report Header</div>
|
| 175 |
+
<div class="p-4">
|
| 176 |
+
<div class="grid grid-cols-3 gap-2 mb-2">
|
| 177 |
+
<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>
|
| 178 |
+
<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>
|
| 179 |
+
<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>
|
| 180 |
+
</div>
|
| 181 |
+
<div class="grid grid-cols-3 gap-2">
|
| 182 |
+
<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>
|
| 183 |
+
<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>
|
| 184 |
+
<div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">78%</div>
|
| 185 |
+
</div>
|
| 186 |
+
<div class="grid grid-cols-3 gap-2 mt-2">
|
| 187 |
+
<div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">Beta Initiative</div>
|
| 188 |
+
<div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">$89,500</div>
|
| 189 |
+
<div class="table-cell bg-white border border-gray-200 rounded flex items-center justify-center p-2 text-center text-sm">45%</div>
|
| 190 |
+
</div>
|
| 191 |
+
</div>
|
| 192 |
+
</div>
|
| 193 |
+
</div>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
|
| 197 |
+
<!-- Grouping & Index -->
|
| 198 |
+
<div class="bg-white rounded-xl card-shadow p-6">
|
| 199 |
+
<h2 class="text-xl font-semibold mb-4 flex items-center">
|
| 200 |
+
<i data-feather="folder" class="mr-2 text-indigo-600"></i> Grouping & Index
|
| 201 |
+
</h2>
|
| 202 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 203 |
+
<div>
|
| 204 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Group By Fields</label>
|
| 205 |
+
<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">
|
| 206 |
+
<option selected>Department</option>
|
| 207 |
+
<option>Project Manager</option>
|
| 208 |
+
<option>Status</option>
|
| 209 |
+
</select>
|
| 210 |
+
</div>
|
| 211 |
+
<div>
|
| 212 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Table of Contents Fields</label>
|
| 213 |
+
<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">
|
| 214 |
+
<option selected>Project Name</option>
|
| 215 |
+
<option>Department</option>
|
| 216 |
+
<option>Completion Status</option>
|
| 217 |
+
</select>
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
</div>
|
| 222 |
+
|
| 223 |
+
<!-- Right Panel - Styling & Previews -->
|
| 224 |
+
<div class="space-y-8">
|
| 225 |
+
<!-- Styling Options -->
|
| 226 |
+
<div class="bg-white rounded-xl card-shadow p-6">
|
| 227 |
+
<h2 class="text-xl font-semibold mb-4 flex items-center">
|
| 228 |
+
<i data-feather="droplet" class="mr-2 text-indigo-600"></i> Styling
|
| 229 |
+
</h2>
|
| 230 |
+
<div class="space-y-4">
|
| 231 |
+
<div>
|
| 232 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Primary Color</label>
|
| 233 |
+
<div class="flex space-x-2">
|
| 234 |
+
<div class="w-8 h-8 rounded-full bg-indigo-600 cursor-pointer border-2 border-white shadow"></div>
|
| 235 |
+
<div class="w-8 h-8 rounded-full bg-blue-600 cursor-pointer border-2 border-white shadow"></div>
|
| 236 |
+
<div class="w-8 h-8 rounded-full bg-green-600 cursor-pointer border-2 border-white shadow"></div>
|
| 237 |
+
<div class="w-8 h-8 rounded-full bg-purple-600 cursor-pointer border-2 border-white shadow"></div>
|
| 238 |
+
<div class="w-8 h-8 rounded-full bg-red-600 cursor-pointer border-2 border-white shadow"></div>
|
| 239 |
+
</div>
|
| 240 |
+
</div>
|
| 241 |
+
<div>
|
| 242 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Font Family</label>
|
| 243 |
+
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
|
| 244 |
+
<option>Poppins (Default)</option>
|
| 245 |
+
<option>Roboto</option>
|
| 246 |
+
<option>Open Sans</option>
|
| 247 |
+
<option>Lato</option>
|
| 248 |
+
<option>Montserrat</option>
|
| 249 |
+
</select>
|
| 250 |
+
</div>
|
| 251 |
+
<div>
|
| 252 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Header/Footer Templates</label>
|
| 253 |
+
<div class="grid grid-cols-2 gap-3">
|
| 254 |
+
<select class="w-full p-2 border border-gray-300 rounded-lg text-sm">
|
| 255 |
+
<option>Corporate Header</option>
|
| 256 |
+
<option>Minimal Header</option>
|
| 257 |
+
<option>Modern Header</option>
|
| 258 |
+
</select>
|
| 259 |
+
<select class="w-full p-2 border border-gray-300 rounded-lg text-sm">
|
| 260 |
+
<option>Standard Footer</option>
|
| 261 |
+
<option>Page Numbers Only</option>
|
| 262 |
+
<option>Detailed Footer</option>
|
| 263 |
+
</select>
|
| 264 |
+
</div>
|
| 265 |
+
</div>
|
| 266 |
+
</div>
|
| 267 |
+
</div>
|
| 268 |
+
|
| 269 |
+
<!-- Checkboxes Configuration -->
|
| 270 |
+
<div class="bg-white rounded-xl card-shadow p-6">
|
| 271 |
+
<h2 class="text-xl font-semibold mb-4 flex items-center">
|
| 272 |
+
<i data-feather="check-square" class="mr-2 text-indigo-600"></i> Checkbox Options
|
| 273 |
+
</h2>
|
| 274 |
+
<div class="space-y-3">
|
| 275 |
+
<div class="flex items-center justify-between">
|
| 276 |
+
<span class="text-gray-700">Show Budget Details</span>
|
| 277 |
+
<div class="flex items-center">
|
| 278 |
+
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500 mr-2" checked>
|
| 279 |
+
<span class="text-sm text-gray-500">Default: On</span>
|
| 280 |
+
</div>
|
| 281 |
+
</div>
|
| 282 |
+
<div class="flex items-center justify-between">
|
| 283 |
+
<span class="text-gray-700">Include Charts</span>
|
| 284 |
+
<div class="flex items-center">
|
| 285 |
+
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500 mr-2">
|
| 286 |
+
<span class="text-sm text-gray-500">Default: Off</span>
|
| 287 |
+
</div>
|
| 288 |
+
</div>
|
| 289 |
+
<div class="flex items-center justify-between">
|
| 290 |
+
<span class="text-gray-700">Show Team Members</span>
|
| 291 |
+
<div class="flex items-center">
|
| 292 |
+
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500 mr-2" checked>
|
| 293 |
+
<span class="text-sm text-gray-500">Default: On</span>
|
| 294 |
+
</div>
|
| 295 |
+
</div>
|
| 296 |
+
<div class="flex items-center justify-between">
|
| 297 |
+
<span class="text-gray-700">Export Raw Data</span>
|
| 298 |
+
<div class="flex items-center">
|
| 299 |
+
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500 mr-2">
|
| 300 |
+
<span class="text-sm text-gray-500">Default: Off</span>
|
| 301 |
+
</div>
|
| 302 |
+
</div>
|
| 303 |
+
</div>
|
| 304 |
+
</div>
|
| 305 |
+
|
| 306 |
+
<!-- Previews -->
|
| 307 |
+
<div class="bg-white rounded-xl card-shadow p-6">
|
| 308 |
+
<h2 class="text-xl font-semibold mb-4 flex items-center">
|
| 309 |
+
<i data-feather="eye" class="mr-2 text-indigo-600"></i> AI Generated Previews
|
| 310 |
+
</h2>
|
| 311 |
+
<p class="text-gray-600 text-sm mb-4">Select one of the AI-generated layouts below:</p>
|
| 312 |
+
<div class="space-y-4">
|
| 313 |
+
<div class="preview-card bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl p-4 cursor-pointer hover:border-indigo-400">
|
| 314 |
+
<div class="flex justify-between items-start">
|
| 315 |
+
<div>
|
| 316 |
+
<h3 class="font-medium text-gray-800">Professional Layout</h3>
|
| 317 |
+
<p class="text-xs text-gray-500 mt-1">Clean design with detailed sections</p>
|
| 318 |
+
</div>
|
| 319 |
+
<div class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Recommended</div>
|
| 320 |
+
</div>
|
| 321 |
+
<div class="mt-3 flex space-x-2">
|
| 322 |
+
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
|
| 323 |
+
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
|
| 324 |
+
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
|
| 325 |
+
</div>
|
| 326 |
+
</div>
|
| 327 |
+
<div class="preview-card bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl p-4 cursor-pointer hover:border-indigo-400">
|
| 328 |
+
<div class="flex justify-between items-start">
|
| 329 |
+
<div>
|
| 330 |
+
<h3 class="font-medium text-gray-800">Compact Layout</h3>
|
| 331 |
+
<p class="text-xs text-gray-500 mt-1">Space-efficient with summary view</p>
|
| 332 |
+
</div>
|
| 333 |
+
<div class="text-xs text-gray-500">Option 2</div>
|
| 334 |
+
</div>
|
| 335 |
+
<div class="mt-3 flex space-x-2">
|
| 336 |
+
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
|
| 337 |
+
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
|
| 338 |
+
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
|
| 339 |
+
</div>
|
| 340 |
+
</div>
|
| 341 |
+
<div class="preview-card bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl p-4 cursor-pointer hover:border-indigo-400">
|
| 342 |
+
<div class="flex justify-between items-start">
|
| 343 |
+
<div>
|
| 344 |
+
<h3 class="font-medium text-gray-800">Visual Layout</h3>
|
| 345 |
+
<p class="text-xs text-gray-500 mt-1">Chart-focused with key metrics</p>
|
| 346 |
+
</div>
|
| 347 |
+
<div class="text-xs text-gray-500">Option 3</div>
|
| 348 |
+
</div>
|
| 349 |
+
<div class="mt-3 flex space-x-2">
|
| 350 |
+
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
|
| 351 |
+
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
|
| 352 |
+
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
|
| 353 |
+
</div>
|
| 354 |
+
</div>
|
| 355 |
+
</div>
|
| 356 |
+
</div>
|
| 357 |
+
|
| 358 |
+
<!-- Report Naming -->
|
| 359 |
+
<div class="bg-white rounded-xl card-shadow p-6">
|
| 360 |
+
<h2 class="text-xl font-semibold mb-4 flex items-center">
|
| 361 |
+
<i data-feather="tag" class="mr-2 text-indigo-600"></i> Report Details
|
| 362 |
+
</h2>
|
| 363 |
+
<div class="space-y-4">
|
| 364 |
+
<div>
|
| 365 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Report Name</label>
|
| 366 |
+
<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">
|
| 367 |
+
</div>
|
| 368 |
+
<div>
|
| 369 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">File Name</label>
|
| 370 |
+
<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">
|
| 371 |
+
</div>
|
| 372 |
+
<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">
|
| 373 |
+
<i data-feather="play" class="mr-2 w-4 h-4"></i> Generate Report
|
| 374 |
+
</button>
|
| 375 |
+
</div>
|
| 376 |
+
</div>
|
| 377 |
+
</div>
|
| 378 |
+
</div>
|
| 379 |
+
</main>
|
| 380 |
+
|
| 381 |
+
<footer class="bg-gray-800 text-white py-6 mt-12">
|
| 382 |
+
<div class="container mx-auto px-4 text-center">
|
| 383 |
+
<p>ReportCraft Studio - Create professional reports with ease</p>
|
| 384 |
+
<p class="text-gray-400 text-sm mt-2">Drag and drop fields to customize your report layout</p>
|
| 385 |
+
</div>
|
| 386 |
+
</footer>
|
| 387 |
+
|
| 388 |
+
<script>
|
| 389 |
+
feather.replace();
|
| 390 |
+
|
| 391 |
+
// Initialize Vanta.js background
|
| 392 |
+
VANTA.GLOBE({
|
| 393 |
+
el: "#vanta-bg",
|
| 394 |
+
mouseControls: true,
|
| 395 |
+
touchControls: true,
|
| 396 |
+
gyroControls: false,
|
| 397 |
+
minHeight: 200.00,
|
| 398 |
+
minWidth: 200.00,
|
| 399 |
+
scale: 1.00,
|
| 400 |
+
scaleMobile: 1.00,
|
| 401 |
+
color: 0x6366f1,
|
| 402 |
+
color2: 0x8b5cf6,
|
| 403 |
+
backgroundColor: 0xf8fafc
|
| 404 |
+
});
|
| 405 |
+
|
| 406 |
+
// Drag and drop functionality for fields
|
| 407 |
+
document.querySelectorAll('.field-item').forEach(item => {
|
| 408 |
+
item.addEventListener('dragstart', function(e) {
|
| 409 |
+
e.dataTransfer.setData('text/plain', this.innerText);
|
| 410 |
+
this.classList.add('opacity-50');
|
| 411 |
+
});
|
| 412 |
+
|
| 413 |
+
item.addEventListener('dragend', function() {
|
| 414 |
+
this.classList.remove('opacity-50');
|
| 415 |
+
});
|
| 416 |
+
});
|
| 417 |
+
|
| 418 |
+
document.querySelectorAll('.table-cell').forEach(cell => {
|
| 419 |
+
cell.addEventListener('dragover', function(e) {
|
| 420 |
+
e.preventDefault();
|
| 421 |
+
this.classList.add('bg-indigo-100');
|
| 422 |
+
});
|
| 423 |
+
|
| 424 |
+
cell.addEventListener('dragleave', function() {
|
| 425 |
+
this.classList.remove('bg-indigo-100');
|
| 426 |
+
});
|
| 427 |
+
|
| 428 |
+
cell.addEventListener('drop', function(e) {
|
| 429 |
+
e.preventDefault();
|
| 430 |
+
this.classList.remove('bg-indigo-100');
|
| 431 |
+
const data = e.dataTransfer.getData('text/plain');
|
| 432 |
+
this.innerHTML = `<div class="text-center">${data}</div>`;
|
| 433 |
+
});
|
| 434 |
+
});
|
| 435 |
+
</script>
|
| 436 |
+
</body>
|
| 437 |
</html>
|