Skip to content

Commit 5d1c368

Browse files
PymmdrzaPymmdrza
authored
Create insights_widget.html
1 parent fc83a49 commit 5d1c368

File tree

1 file changed

+101
-0
lines changed

1 file changed

+101
-0
lines changed

‎templates/components/insights_widget.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{% macro insights_widget(user_preferences={}) %}
2+
<div class="card insights-widget mb-4">
3+
<div class="card-header d-flex justify-content-between align-items-center">
4+
<h5 class="card-title mb-0">Personalized Insights</h5>
5+
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#preferencesModal">
6+
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
7+
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
8+
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
9+
</svg>
10+
Customize
11+
</button>
12+
</div>
13+
<div class="card-body">
14+
<div id="insights-content">
15+
{% if user_preferences %}
16+
<div class="alert alert-info mb-3">
17+
<h6 class="alert-heading">Key Metrics Overview</h6>
18+
<div class="metric-list">
19+
{% if user_preferences.get('price_alerts', False) %}
20+
<div class="metric-item">
21+
<span class="metric-label">Price Alert Status:</span>
22+
<span class="metric-value" id="price-alert-status">Active</span>
23+
</div>
24+
{% endif %}
25+
{% if user_preferences.get('transaction_volume', False) %}
26+
<div class="metric-item">
27+
<span class="metric-label">24h Transaction Volume:</span>
28+
<span class="metric-value" id="tx-volume">Loading...</span>
29+
</div>
30+
{% endif %}
31+
{% if user_preferences.get('network_health', False) %}
32+
<div class="metric-item">
33+
<span class="metric-label">Network Health:</span>
34+
<span class="metric-value" id="network-health">Loading...</span>
35+
</div>
36+
{% endif %}
37+
</div>
38+
</div>
39+
<div id="insights-charts"></div>
40+
{% else %}
41+
<div class="text-center py-4">
42+
<p>Customize your insights by selecting metrics to track</p>
43+
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#preferencesModal">
44+
Set Preferences
45+
</button>
46+
</div>
47+
{% endif %}
48+
</div>
49+
</div>
50+
</div>
51+
52+
<!-- Preferences Modal -->
53+
<div class="modal fade" id="preferencesModal" tabindex="-1">
54+
<div class="modal-dialog">
55+
<div class="modal-content">
56+
<div class="modal-header">
57+
<h5 class="modal-title">Customize Insights</h5>
58+
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
59+
</div>
60+
<div class="modal-body">
61+
<form id="preferences-form">
62+
<div class="mb-3">
63+
<label class="form-label">Select Metrics to Track</label>
64+
<div class="form-check">
65+
<input class="form-check-input" type="checkbox" id="price-alerts" name="price_alerts">
66+
<label class="form-check-label" for="price-alerts">
67+
Price Alerts
68+
</label>
69+
</div>
70+
<div class="form-check">
71+
<input class="form-check-input" type="checkbox" id="transaction-volume" name="transaction_volume">
72+
<label class="form-check-label" for="transaction-volume">
73+
Transaction Volume
74+
</label>
75+
</div>
76+
<div class="form-check">
77+
<input class="form-check-input" type="checkbox" id="network-health" name="network_health">
78+
<label class="form-check-label" for="network-health">
79+
Network Health
80+
</label>
81+
</div>
82+
</div>
83+
<div class="mb-3">
84+
<label class="form-label">Update Frequency</label>
85+
<select class="form-select" name="update_frequency">
86+
<option value="1">Every minute</option>
87+
<option value="5">Every 5 minutes</option>
88+
<option value="15">Every 15 minutes</option>
89+
<option value="30">Every 30 minutes</option>
90+
</select>
91+
</div>
92+
</form>
93+
</div>
94+
<div class="modal-footer">
95+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
96+
<button type="button" class="btn btn-primary" id="save-preferences">Save Preferences</button>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
{% endmacro %}

0 commit comments

Comments
 (0)