Repository navigation
Expand file tree
/
Copy pathpopup.html
More file actions
140 lines (129 loc) · 8.11 KB
/
Copy pathpopup.html
File metadata and controls
140 lines (129 loc) · 8.11 KB
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
<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
<meta charset="UTF-8"/>
<title>True Cost</title>
<link href="./assets/style/fonts.css" rel="stylesheet">
<link href="./assets/style/popup.css" rel="stylesheet">
<script src="./assets/script/popup.js"></script>
</head>
<body>
<div class="glow glow-cyan"></div>
<div class="glow glow-orange"></div>
<div class="glow glow-amber"></div>
<div class="shell rainbow-border" role="main">
<!-- Header: brand + status + actions -->
<header class="header" id="popup_header">
<div class="brand_side">
<div class="beacon_wrap">
<span class="beacon" id="status_beacon"></span>
<span class="beacon_ping" id="status_beacon_ping"></span>
</div>
<div class="brand_col">
<div class="brand_line">
<img class="logo" src="./assets/img/truecost-logo.svg" alt="">
<span class="brand">True Cost</span>
<span class="status_chip" id="status_chip">فعال</span>
</div>
<span class="brand_sub">قیمت واقعی = ساعت کار شما</span>
</div>
</div>
<div class="header_actions">
<button id="open_settings_btn" type="button" class="icon_btn" title="تنظیمات پیشرفته" aria-label="تنظیمات">
<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
</button>
<a class="icon_btn" href="https://github.com/alirezach/TrueCost" target="_blank" title="راهنما و سایت‌های پشتیبانی‌شده" aria-label="راهنما">
<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
</a>
</div>
</header>
<!-- Supported-site notice (shown only when the current tab is not supported) -->
<a class="btn_supported" id="supported_notice" href="https://github.com/alirezach/TrueCost/blob/main/data/sites.csv" target="_blank">
این سایت پشتیبانی نمی‌شود — لیست سایت‌های پشتیبانی‌شده
</a>
<!-- Form -->
<main class="form" id="popup_form">
<!-- Hourly wage -->
<div class="field_group">
<div class="field_head">
<label class="field_label" for="hourly_wages"><span class="accent_bar orange"></span>دستمزد شما به ساعت:</label>
</div>
<div class="input_box wage_box">
<span class="input_badge amber">₮</span>
<input type="text" id="hourly_wages" maxlength="8" autocomplete="off" placeholder="230,000">
<span class="input_suffix">تومان</span>
</div>
<div class="chips">
<span class="chips_label">پیش‌فرض:</span>
<button type="button" class="chip chip-hot" data-wage="75605">حداقل قانونی (۱۴۰۵)</button>
</div>
</div>
<!-- Daily hours -->
<div class="field_group">
<div class="field_head">
<label class="field_label" for="daily_hours"><span class="accent_bar cyan"></span>میزان ساعت کار در روز:</label>
</div>
<div class="input_box hours_box">
<span class="input_badge cyan">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</span>
<input type="number" id="daily_hours" max="20" min="1" autocomplete="off" placeholder="8">
<span class="input_suffix">ساعت در روز</span>
<span class="stepper">
<button type="button" id="hours_down" title="کاهش">−</button>
<button type="button" id="hours_up" title="افزایش">+</button>
</span>
</div>
</div>
<!-- Calculation mode: hour / day / month -->
<div class="field_group">
<div class="field_head">
<span class="field_label"><span class="accent_bar amber"></span>محاسبه بر اساس:</span>
</div>
<div class="seg" id="calc_mode" role="radiogroup" aria-label="محاسبه بر اساس">
<button type="button" class="seg_btn" data-mode="0">ساعت</button>
<button type="button" class="seg_btn" data-mode="1">روز</button>
<button type="button" class="seg_btn" data-mode="2">ماه</button>
</div>
</div>
<!-- Toggles -->
<div class="toggle_row">
<div class="toggle_meta">
<span class="toggle_title">پاپ‌آپ شناور روی قیمت‌ها</span>
<span class="toggle_sub">نمایش بج شناور هنگام هاور روی قیمت</span>
</div>
<label class="toggle">
<input type="checkbox" id="show_popup">
<span class="track"><span class="thumb"></span></span>
</label>
</div>
<div class="toggle_row">
<div class="toggle_meta">
<span class="toggle_title">فعال‌سازی افزونه</span>
<span class="toggle_sub" id="active_sub">آماده جایگزینی قیمت در صفحات</span>
</div>
<label class="toggle">
<input type="checkbox" id="switch">
<span class="track"><span class="thumb"></span></span>
</label>
</div>
<!-- Manual picker -->
<button id="pick_price_btn" type="button" class="pick_btn">
<span class="pick_icon">
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l7.07 17 2.51-7.39L21 11.07z"/></svg>
</span>
<span>انتخاب دستی قیمت روی این صفحه</span>
</button>
<p id="pick_price_status" class="pick_status" hidden></p>
</main>
<!-- Footer -->
<footer class="footer">
<a href="https://github.com/alirezach" target="_blank" class="gh_link">
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-1.02-.78-.735-.505-.045-.495-.045-.495.81-.045 1.245.825 1.245.825.735 1.245 1.92.885 2.385.675.075-.54.285-.915.51-1.125-1.785-.195-3.645-.885-3.645-3.96 0-.87.315-1.59.825-2.145-.075-.21-.36-1.05.075-2.16 0 0 .675-.21 2.235.81a7.68 7.68 0 0 1 2.04-.27c.69 0 1.395.09 2.04.27 1.56-1.02 2.235-.81 2.235-.81.435 1.11.15 1.95.075 2.16.51.555.825 1.275.825 2.145 0 3.075-1.875 3.75-3.645 3.96.285.24.54.72.54 1.455 0 1.05-.015 1.905-.015 2.16 0 .21.15.465.6.39A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
<span>Made with ❤ on Github</span>
</a>
<span class="version_badge" id="version_badge">v2.0.0</span>
</footer>
</div>
</body>
</html>