Hugging Face's logo

Spaces:
terastudio
/
unfollinsta
Running

App Files Community
R-Kentaren commited on
Commit
a047346
·
verified ·
1 Parent(s): 6d5500f

Create settings.html

Browse files
Files changed (1) hide show
  1. settings.html +188 -0
settings.html ADDED
@@ -0,0 +1,188 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Settings - Unfollinsta</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --bg-color: #f9f4ff;
13
+ --text-color: #1f1f1f;
14
+ --card-bg: #ffffff;
15
+ --primary-color: #6b21a8;
16
+ --border-color: #e5e7eb;
17
+ }
18
+ body.dark-mode {
19
+ --bg-color: #1c1c1c;
20
+ --text-color: #e0e0e0;
21
+ --card-bg: #2d2d2d;
22
+ --primary-color: #a78bfa;
23
+ --border-color: #4b4b4b;
24
+ }
25
+ body {
26
+ font-family: 'Inter', sans-serif;
27
+ background: var(--bg-color);
28
+ color: var(--text-color);
29
+ min-height: 100vh;
30
+ display: flex;
31
+ flex-direction: column;
32
+ align-items: center;
33
+ padding: 1rem;
34
+ transition: background-color 0.3s, color 0.3s;
35
+ }
36
+ h1 {
37
+ font-size: 1.75rem;
38
+ font-weight: 700;
39
+ margin-bottom: 1.5rem;
40
+ }
41
+ .settings-container {
42
+ max-width: 600px;
43
+ width: 100%;
44
+ background: var(--card-bg);
45
+ padding: 1.5rem;
46
+ border-radius: 12px;
47
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
48
+ }
49
+ .setting-item {
50
+ margin-bottom: 1rem;
51
+ }
52
+ label {
53
+ display: block;
54
+ font-size: 1rem;
55
+ font-weight: 500;
56
+ margin-bottom: 0.5rem;
57
+ }
58
+ select {
59
+ width: 100%;
60
+ padding: 0.75rem;
61
+ border: 1px solid var(--border-color);
62
+ border-radius: 8px;
63
+ font-size: 1rem;
64
+ background: var(--card-bg);
65
+ color: var(--text-color);
66
+ transition: border-color 0.2s;
67
+ }
68
+ select:focus {
69
+ border-color: var(--primary-color);
70
+ outline: none;
71
+ }
72
+ a {
73
+ color: var(--primary-color);
74
+ text-decoration: none;
75
+ font-weight: 500;
76
+ margin: 1rem 0;
77
+ display: inline-block;
78
+ }
79
+ a:hover {
80
+ text-decoration: underline;
81
+ }
82
+ .footer {
83
+ text-align: center;
84
+ margin-top: 2rem;
85
+ font-size: 0.9rem;
86
+ opacity: 0.7;
87
+ }
88
+ .footer-logo {
89
+ display: flex;
90
+ align-items: center;
91
+ justify-content: center;
92
+ gap: 1rem;
93
+ margin-top: 1rem;
94
+ }
95
+ .footer-logo img {
96
+ width: 120px;
97
+ height: auto;
98
+ }
99
+ .footer-logo a img {
100
+ width: 32px;
101
+ height: 32px;
102
+ transition: transform 0.2s;
103
+ }
104
+ .footer-logo a img:hover {
105
+ transform: scale(1.1);
106
+ }
107
+ @media (max-width: 600px) {
108
+ h1 {
109
+ font-size: 1.5rem;
110
+ }
111
+ .settings-container {
112
+ padding: 1rem;
113
+ }
114
+ .footer-logo img {
115
+ width: 100px;
116
+ }
117
+ }
118
+ </style>
119
+ </head>
120
+ <body>
121
+ <h1 id="title">Settings</h1>
122
+ <div class="settings-container">
123
+ <div class="setting-item">
124
+ <label for="languageSelect" id="languageLabel">Language</label>
125
+ <select id="languageSelect">
126
+ <option value="id">Indonesian</option>
127
+ <option value="en">English</option>
128
+ </select>
129
+ </div>
130
+ <div class="setting-item">
131
+ <label for="themeSelect" id="themeLabel">Theme</label>
132
+ <select id="themeSelect">
133
+ <option value="light">Light</option>
134
+ <option value="dark">Dark</option>
135
+ </select>
136
+ </div>
137
+ </div>
138
+ <a href="index.html" id="backLink">Back</a>
139
+ <div class="footer-logo">
140
+ <img id="footerLogo" src="icons/terastudio-light2.png" alt="Terastudio Logo">
141
+ <a href="http://www.youtube.com/@terastudiocilangkap" target="_blank" rel="noopener noreferrer">
142
+ <img src="icons/ytlight.png" alt="YouTube Channel">
143
+ </a>
144
+ </div>
145
+ <footer class="footer">terastudio &copy; 2025</footer>
146
+ <script>
147
+ const languageTexts = {
148
+ id: { title: 'Pengaturan', languageLabel: 'Bahasa', themeLabel: 'Tema', backLink: 'Kembali' },
149
+ en: { title: 'Settings', languageLabel: 'Language', themeLabel: 'Theme', backLink: 'Back' }
150
+ };
151
+
152
+ function applyLanguage(lang) {
153
+ const texts = languageTexts[lang];
154
+ document.getElementById('title').textContent = texts.title;
155
+ document.getElementById('languageLabel').textContent = texts.languageLabel;
156
+ document.getElementById('themeLabel').textContent = texts.themeLabel;
157
+ document.getElementById('backLink').textContent = texts.backLink;
158
+ }
159
+
160
+ function applyTheme(theme) {
161
+ document.body.classList.toggle('dark-mode', theme === 'dark');
162
+ document.getElementById('footerLogo').src = theme === 'dark' ? 'icons/terastudio-dark2.png' : 'icons/terastudio-light2.png';
163
+ document.querySelector('.footer-logo a img').src = theme === 'dark' ? 'icons/ytdark.png' : 'icons/ytlight.png';
164
+ }
165
+
166
+ const langSelect = document.getElementById('languageSelect');
167
+ const themeSelect = document.getElementById('themeSelect');
168
+ const savedLang = localStorage.getItem('lang') || 'id';
169
+ const savedTheme = localStorage.getItem('theme') || 'light';
170
+ langSelect.value = savedLang;
171
+ themeSelect.value = savedTheme;
172
+ applyLanguage(savedLang);
173
+ applyTheme(savedTheme);
174
+
175
+ langSelect.addEventListener('change', () => {
176
+ const lang = langSelect.value;
177
+ localStorage.setItem('lang', lang);
178
+ applyLanguage(lang);
179
+ });
180
+
181
+ themeSelect.addEventListener('change', () => {
182
+ const theme = themeSelect.value;
183
+ localStorage.setItem('theme', theme);
184
+ applyTheme(theme);
185
+ });
186
+ </script>
187
+ </body>
188
+ </html>