-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathoptions.html
More file actions
141 lines (122 loc) · 9.79 KB
/
options.html
File metadata and controls
141 lines (122 loc) · 9.79 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
141
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ghost Mode Options</title>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<style>
:root {
--bg-color: #282828; --text-color: #f1f1f1;
--panel-bg: #3f3f3f; --border-color: #555;
--btn-bg: #188038; --btn-hover: #146c2e;
--danger-color: #d93025; --tab-inactive: #444;
--sidebar-bg: #1f1f1f;
}
body.light-mode {
--bg-color: #f8f9fa; --text-color: #202124;
--panel-bg: #ffffff; --border-color: #dadce0;
--btn-bg: #1a73e8; --btn-hover: #1557b0;
--tab-inactive: #e8eaed; --sidebar-bg: #f1f3f4;
}
body {
background: var(--bg-color); color: var(--text-color);
font-family: 'Segoe UI', Tahoma, sans-serif;
margin: 0; padding: 0; display: flex; height: 100vh;
transition: all 0.3s;
}
/* --- LAYOUT SIDEBAR & CONTENT --- */
.sidebar { width: 220px; background: var(--sidebar-bg); border-right: 1px solid var(--border-color); padding: 20px 0; }
.sidebar-brand { font-size: 18px; font-weight: bold; padding: 0 20px 20px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 10px;}
.nav-btn { width: 100%; text-align: left; padding: 12px 20px; background: transparent; border: none; color: var(--text-color); cursor: pointer; font-size: 14px; border-left: 3px solid transparent; border-radius: 0; }
.nav-btn:hover { background: rgba(128, 128, 128, 0.1); }
.nav-btn.active { border-left-color: var(--btn-bg); background: rgba(128, 128, 128, 0.1); font-weight: bold; }
.main-content { flex: 1; padding: 40px; overflow-y: auto; }
.section { display: none; max-width: 600px; }
.section.active { display: block; }
.card { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
input, button { padding: 10px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color); font-size: 14px; }
button.primary { background: var(--btn-bg); color: white; border: none; cursor: pointer; font-weight: bold;}
button.primary:hover { background: var(--btn-hover); }
.tabs { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-color); margin-bottom: 20px; }
.tab-btn { flex: 1; padding: 12px; background: var(--tab-inactive); color: var(--text-color); border: none; border-radius: 0; opacity: 0.7; transition: 0.2s; }
.tab-btn.active { background: var(--btn-bg); color: white; opacity: 1; }
.input-group { display: flex; gap: 10px; margin-bottom: 15px; }
.input-group input { flex: 1; }
.list-container { border: 1px solid var(--border-color); border-radius: 4px; background: rgba(0, 0, 0, 0.15); }
ul { list-style: none; padding: 0; margin: 0; }
li { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--border-color); font-family: monospace; font-size: 14px; }
.empty-state { padding: 20px; text-align: center; opacity: 0.5; font-style: italic; font-size: 13px; }
li.site-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--border-color); font-family: monospace; font-size: 14px; transition: background 0.2s; }
li.site-item:hover { background: rgba(128, 128, 128, 0.05); }
/* --- STYLE UNTUK FITUR INLINE EDIT --- */
.site-text { flex-grow: 1; word-break: break-all; }
.edit-input { flex-grow: 1; background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--btn-bg); border-radius: 4px; padding: 6px 10px; font-size: 14px; margin-right: 15px; outline: none; font-family: monospace; }
.action-buttons { display: flex; gap: 10px; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 14px; padding: 5px; opacity: 0.6; transition: all 0.2s ease; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { opacity: 1; transform: scale(1.1); background: rgba(128, 128, 128, 0.2); }
.material-symbols-outlined { font-size: 20px; }
.sidebar-brand .material-symbols-outlined { font-size: 22px; }
.nav-btn .material-symbols-outlined { font-size: 18px; justify-content: center; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
.input-error, .input-error:focus { border-color: var(--danger-color) !important; outline: 1px solid var(--danger-color) !important; animation: shake 0.3s ease-in-out; }
/* --- STYLE TOMBOL TEMA --- */
.theme-toggle-btn { position: absolute; top: 20px; right: 30px; background: var(--panel-bg); /* Mengikuti warna panel */ border: 1px solid var(--border-color); /* Garis tepi */ border-radius: 50%; /* Membuatnya bulat sempurna */ width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; opacity: 0.8; transition: all 0.2s ease-in-out; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Efek melayang */ }
.theme-toggle-btn:hover { opacity: 1; transform: scale(1.15); /* Efek membesar sedikit saat di-hover */ border-color: var(--text-color); /* Highlight border saat di-hover */ }
</style>
</head>
<body>
<button id="themeToggleBtn" class="theme-toggle-btn" title="Toggle Light/Dark Mode"><span class="material-symbols-outlined" >dark_mode</span> </button>
<select id="langSelect" style="position: absolute; top: 25px; right: 85px; background: var(--panel-bg); color: var(--text-color); padding: 5px 10px; border-radius: 20px; outline: none; border: 1px solid var(--border-color); cursor: pointer; font-family: inherit; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<option value="en">🇬🇧 EN</option>
<option value="id">🇮🇩 ID</option>
</select>
<div class="sidebar">
<div class="sidebar-brand"><span class="material-symbols-outlined">delete</span> <span data-i18n="nav_settings">Settings</span></div>
<button class="nav-btn active" data-target="section-sites"><span class="material-symbols-outlined">language</span> <span data-i18n="nav_sites">Site Management</span></button>
<button class="nav-btn" data-target="section-hotkey"><span class="material-symbols-outlined">keyboard</span> <span data-i18n="nav_shortcuts">Shortcuts</button>
</div>
<div class="main-content">
<div id="section-sites" class="section active">
<h2 data-i18n="mode_title">Operation Mode & Site List</h2>
<div class="card">
<p style="font-size: 13px; opacity: 0.8; margin-bottom: 15px;" data-i18n="mode_desc">Choose a mode, then adjust the site list:</p>
<div class="tabs" id="modeTabs">
<button class="tab-btn active" data-mode="blacklist" data-i18n="tab_blacklist">Erase Listed Only</button>
<button class="tab-btn" data-mode="whitelist" data-i18n="tab_whitelist">Never Erase Listed</button>
</div>
<div class="input-group">
<input type="text" id="siteInput" data-i18n-placeholder="ph_site" placeholder="e.g. x.com, youtube.com">
<button id="addBtn" class="primary" data-i18n="btn_add">Add Site</button>
</div>
<div class="list-container">
<ul id="siteList"></ul>
</div>
<div style="margin-top: 15px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border-color); padding-top: 15px;">
<button id="exportBtn" class="icon-btn" style="background: rgba(128,128,128,0.1); border: 1px solid var(--border-color); padding: 8px 12px; opacity: 1;">
<span class="material-symbols-outlined" style="font-size: 16px;">download</span> <span data-i18n="btn_export">
</button>
<button id="importBtn" class="icon-btn" style="background: rgba(128,128,128,0.1); border: 1px solid var(--border-color); padding: 8px 12px; opacity: 1;">
<span class="material-symbols-outlined" style="font-size: 16px;">upload</span> <span data-i18n="btn_import">
</button>
<input type="file" id="importFile" accept=".json" style="display: none;">
</div>
</div>
</div>
<div id="section-hotkey" class="section">
<h2>Keyboard Shortcuts</h2>
<div class="card">
<h3 style="margin-top: 0;">Toggle Ghost Mode</h3>
<p style="font-size: 13px; opacity: 0.8; line-height: 1.5;">
<span data-i18n="active_shortcut_now">Current Active Shortcut:</span> <kbd id="displayShortcut" style="background: var(--bg-color); padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border-color); font-weight: bold;">Loading...</kbd>
</p>
<div style="background: rgba(217, 48, 37, 0.1); border-left: 4px solid var(--danger-color); padding: 10px 15px; margin: 20px 0; font-size: 13px; border-radius: 4px;">
<strong data-i18n="caution_strong">⚠️ Caution:</strong> <span data-i18n="caution_desc">
</div>
<p style="font-size: 13px; margin-bottom: 15px;" data-i18n="caution_guide"></p>
<button id="openShortcutsBtn" class="primary" data-i18n="btn_open_shortcuts">Open Browser Shortcut Settings</button>
</div>
</div>
</div>
<script src="options.js"></script>
</body>
</html>