-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (163 loc) · 14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-i18n="tool-title">Cost-Benefit Analysis Tool</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2/dist/tailwind.min.css" rel="stylesheet">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 5 L95 50 L50 95 L5 50 Z' fill='%234f46e5'/><path d='M35 35 L65 35 L65 65 L35 65 Z' fill='white'/><path d='M45 25 L55 25 L55 75 L45 75 Z' fill='white'/><circle cx='50' cy='50' r='10' fill='%234f46e5'/></svg>">
<style>
h2 {
font-size: 1.5rem;
font-weight: bold;
color: #4f46e5;
margin-top: 1rem;
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen p-4">
<div class="container mx-auto bg-white rounded-xl shadow-lg p-4 max-w-6xl">
<h1 class="text-2xl font-bold mb-4 text-indigo-700 text-center" data-i18n="tool-title">Cost-Benefit Analysis Tool</h1>
<!-- Input Section -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4" id="analysis-form">
<!-- Costs -->
<div class="bg-white p-3 rounded-lg shadow-sm border border-gray-100" data-category="costs">
<h2 class="text-lg font-bold mb-2 text-indigo-600" data-i18n="costs">Costs</h2>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700" for="business-model">
<span data-i18n="business-model">Business Model</span><br>
<span class="text-xs text-gray-500" data-i18n="select-project-type">Select project type</span>
</label>
<select name="businessModel" id="business-model" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm">
<option value="saas" data-i18n="saas">SaaS</option>
<option value="commissioned" data-i18n="commissioned">Commissioned</option>
<option value="mixed" data-i18n="mixed">Mixed (SaaS + Commissioned)</option>
</select>
<label class="block text-sm font-medium text-gray-700" for="direct-costs">
<span data-i18n="direct-costs">Direct Costs (€)</span><br>
<span class="text-xs text-gray-500" data-i18n="direct-costs-help">Direct costs like salaries and licenses</span>
</label>
<input type="number" name="directCosts" id="direct-costs" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm" data-i18n-placeholder="example-1000" placeholder="Ex: 1000">
<label class="block text-sm font-medium text-gray-700" for="indirect-costs">
<span data-i18n="indirect-costs">Indirect Costs over 12 months (€)</span><br>
<span class="text-xs text-gray-500" data-i18n="indirect-costs-help">Other expenses not directly related to development</span>
</label>
<input type="number" name="indirectCosts" id="indirect-costs" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm" data-i18n-placeholder="example-500" placeholder="Ex: 500">
</div>
</div>
<!-- Revenues -->
<div class="bg-white p-3 rounded-lg shadow-sm border border-gray-100" data-category="revenues">
<h2 class="text-lg font-bold mb-2 text-indigo-600" data-i18n="revenues">Revenues</h2>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700" for="upfront-payment">
<span data-i18n="upfront-payment">Upfront Payment (€)</span><br>
<span class="text-xs text-gray-500" data-i18n="upfront-payment-help">Advance payment at contract signing</span>
</label>
<input type="number" name="upfrontPayment" id="upfront-payment" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm" data-i18n-placeholder="example-2000" placeholder="Ex: 2000">
<label class="block text-sm font-medium text-gray-700" for="final-payment">
<span data-i18n="final-payment">Final Payment (€)</span><br>
<span class="text-xs text-gray-500" data-i18n="final-payment-help">Final balance at project delivery</span>
</label>
<input type="number" name="finalPayment" id="final-payment" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm" data-i18n-placeholder="example-3000" placeholder="Ex: 3000">
<label class="block text-sm font-medium text-gray-700" for="recurring-revenue">
<span data-i18n="recurring-revenue">Monthly Revenue (€)</span><br>
<span class="text-xs text-gray-500" data-i18n="recurring-revenue-help">Monthly fee per user</span>
</label>
<input type="number" name="recurringRevenue" id="recurring-revenue" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm" data-i18n-placeholder="example-100" placeholder="Ex: 100">
</div>
</div>
<!-- Time and Resources -->
<div class="bg-white p-3 rounded-lg shadow-sm border border-gray-100" data-category="resources">
<h2 class="text-lg font-bold mb-2 text-indigo-600" data-i18n="time-resources">Time and Resources</h2>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700" for="dev-weeks">
<span data-i18n="dev-weeks">Development Weeks</span><br>
<span class="text-xs text-gray-500" data-i18n="dev-weeks-help">Development duration in weeks</span>
</label>
<input type="number" name="devWeeks" id="dev-weeks" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm" data-i18n-placeholder="example-8" placeholder="Ex: 8">
<label class="block text-sm font-medium text-gray-700" for="dev-occupation">
<span data-i18n="dev-occupation">Occupation (%)</span><br>
<span class="text-xs text-gray-500" data-i18n="dev-occupation-help">Workforce saturation %</span>
</label>
<input type="number" name="devOccupation" id="dev-occupation" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm" data-i18n-placeholder="example-80" placeholder="Ex: 80" min="0" max="100" value="80">
</div>
</div>
<!-- Expected Users -->
<div class="bg-white p-3 rounded-lg shadow-sm border border-gray-100" data-category="users">
<h2 class="text-lg font-bold mb-2 text-indigo-600" data-i18n="expected-users-title">Expected Users</h2>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700" for="expected-users">
<span data-i18n="expected-users">Expected Users</span><br>
<span class="text-xs text-gray-500" data-i18n="expected-users-help">Estimated number of software users</span>
</label>
<input type="number" name="expectedUsers" id="expected-users" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm" data-i18n-placeholder="example-100" placeholder="Ex: 100">
<label class="block text-sm font-medium text-gray-700" for="optimistic-users">
<span data-i18n="optimistic-users">Utenti (Scenario Ottimistico)</span><br>
<span class="text-xs text-gray-500" data-i18n="optimistic-users-help">Stima ottimistica del numero di utenti</span>
</label>
<input type="number" name="optimisticUsers" id="optimistic-users" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm" data-i18n-placeholder="example-100" placeholder="Es: 100">
<label class="block text-sm font-medium text-gray-700" for="pessimistic-users">
<span data-i18n="pessimistic-users">Utenti (Scenario Pessimistico)</span><br>
<span class="text-xs text-gray-500" data-i18n="pessimistic-users-help">Stima pessimistica del numero di utenti</span>
</label>
<input type="number" name="pessimisticUsers" id="pessimistic-users" class="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-sm" data-i18n-placeholder="example-100" placeholder="Es: 100">
</div>
</div>
</div>
<!-- Results Section -->
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mt-4">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-bold text-indigo-600" data-i18n="results">Results</h2>
<a href="#" id="share-button" class="p-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors no-underline inline-flex items-center justify-center group relative">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
</svg>
<span class="sr-only" data-i18n="share-analysis">Share analysis</span>
<span class="absolute -bottom-12 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap" data-i18n="bookmark-tooltip">
Trascina nei preferiti
</span>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-3 bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg shadow-sm border border-green-100">
<h3 class="text-lg font-bold text-green-700 mb-2" data-i18n="roi-12-months">12-month ROI</h3>
<div id="roi" class="text-2xl font-bold text-green-600">€0.00</div>
</div>
<div class="p-3 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg shadow-sm border border-blue-100">
<h3 class="text-lg font-bold text-blue-700 mb-2" data-i18n="breakeven-time">Breakeven Time</h3>
<p id="breakeven" class="text-2xl font-bold text-blue-600" data-i18n="zero-months">0 months</p>
</div>
<div class="p-3 bg-gradient-to-br from-amber-50 to-orange-50 rounded-lg shadow-sm border border-amber-100">
<h3 class="text-lg font-bold text-amber-700 mb-2" data-i18n="financial-details">Financial Details</h3>
<div class="text-sm space-y-1">
<p><span data-i18n="costs">Costs</span>: <span id="total-costs-detail" class="font-semibold">€0.00</span></p>
<p><span data-i18n="direct-revenues">Direct revenues</span>: <span id="direct-revenue-detail" class="font-semibold">€0.00</span></p>
<p><span data-i18n="recurring-annual-revenues">Annual recurring revenues</span>: <span id="yearly-revenue-detail" class="font-semibold">€0.00</span></p>
<p id="users-scenarios" class="mt-2 text-gray-600"></p>
</div>
</div>
</div>
<!-- Overall Evaluation -->
<div class="mt-4 p-4 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg shadow-sm border border-indigo-100">
<h3 class="text-lg font-bold text-indigo-700 mb-3" data-i18n="overall-evaluation">Overall Evaluation</h3>
<div id="overall-evaluation" class="prose prose-indigo max-w-none"></div>
</div>
</div>
<!-- AI Analysis Section -->
<div class="mt-6">
<div class="flex justify-center mb-4">
<button id="ai-analysis-btn" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2">
<span data-i18n="request-ai-analysis">Request AI Analysis</span>
<div id="ai-spinner" class="hidden">
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</button>
</div>
</div>
</div>
<script type="module" src="script.js"></script>
</body>
</html>