Better UX for prediction paste (1600c4c7) · Commits · Barthelet Thibault / horloml

forecast_app/templates/predict.html

+54 −4

Original line number	Diff line number	Diff line
		@@ -35,12 +35,13 @@
		<tr>
		<th>Month</th>
		{% for watch in watches %}
		<th class="has-text-centered watch-column-{{ watch.id }}"
		<th class="has-text-centered watch-column watch-column-{{ watch.id }}"
		tabindex="0"
		style="cursor: pointer; background-color: #f5f5f5;"
		title="Click here and paste (Ctrl+V) 12 values from Excel">
		{{ watch.name }}<br>
		<span class="has-text-grey is-size-7">(units) - Click & Paste</span>
		<span class="paste-instruction">
		<span class="click-text">Click</span> & <span class="paste-text">Paste (Ctrl+V)</span>
		</span>
		</th>
		{% endfor %}
		</tr>
		@@ -100,6 +101,55 @@
		</div>
		</section>

		<style>
		.watch-column {
		cursor: pointer;
		background-color: #f5f5f5;
		border: 2px dashed #bbb;
		padding: 12px 8px;
		transition: all 0.2s ease;
		}

		.watch-column:hover {
		background-color: #e8f4f8;
		border-color: #3273dc;
		}

		.watch-column:hover .click-text {
		font-weight: bold;
		}

		.watch-column:focus {
		outline: none;
		background-color: #d5eef7;
		border-color: #209cee;
		border-width: 3px;
		transform: scale(1.05);
		box-shadow: 0 4px 8px rgba(32, 156, 238, 0.3);
		}

		.watch-column:focus .paste-text {
		font-weight: bold;
		color: #209cee;
		font-size: 0.9rem;
		}

		.paste-instruction {
		display: block;
		font-size: 0.75rem;
		color: #666;
		margin-top: 4px;
		}

		.watch-column:focus .paste-instruction {
		font-size: 0.85rem;
		}

		.click-text, .paste-text {
		transition: all 0.2s ease;
		}
		</style>

		<script>
		const watches = {{ watches \| tojson }};
		const lastYear = {{ last_year \| tojson }};