Skip to content

Commit 850ae73

Browse files
parlandinparlandin
committed
feat: add initial HTML and JavaScript files for Pixely Sort & Save
1 parent 2bbadd6 commit 850ae73

File tree

2 files changed

+348
-0
lines changed

2 files changed

+348
-0
lines changed

‎pages/index.html‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
<!DOCTYPE html>
2+
<html lang="pt_BR">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Pixely Sort & Save</title>
7+
<style>
8+
:root {
9+
--purple-primary: #8a2be2;
10+
--purple-light: #9945e8;
11+
--dark: #1a1a1a;
12+
--gray-light: #f5f5f5;
13+
}
14+
15+
body {
16+
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
17+
background-color: var(--dark);
18+
color: var(--gray-light);
19+
margin: 0;
20+
padding: 0;
21+
min-height: 100vh;
22+
display: flex;
23+
flex-direction: column;
24+
width: 320px;
25+
height: 480px;
26+
}
27+
28+
main {
29+
flex: 1;
30+
max-width: 100%;
31+
margin: 0 auto;
32+
padding: 1rem;
33+
width: 100%;
34+
box-sizing: border-box;
35+
margin-bottom: 3rem;
36+
overflow-y: auto;
37+
}
38+
39+
.header {
40+
text-align: center;
41+
margin-bottom: 1.5rem;
42+
}
43+
44+
.header img {
45+
width: 48px;
46+
height: 48px;
47+
margin-bottom: 0.5rem;
48+
}
49+
50+
.header h1 {
51+
font-size: 1.5rem;
52+
color: var(--purple-primary);
53+
margin: 0;
54+
}
55+
56+
.toggle-section {
57+
margin: 1rem 0;
58+
}
59+
60+
.option-card {
61+
padding: 0.8rem;
62+
margin: 0.5rem 0;
63+
font-size: 0.9rem;
64+
background-color: #2a2a2a;
65+
border-radius: 8px;
66+
display: flex;
67+
align-items: center;
68+
justify-content: space-between;
69+
border-left: 4px solid var(--purple-primary);
70+
transition: all 0.3s ease;
71+
}
72+
73+
.option-card:hover {
74+
background-color: #333;
75+
transform: translateX(3px);
76+
}
77+
78+
.switch-card input[type="checkbox"] {
79+
width: 2.5rem;
80+
height: 1.2rem;
81+
appearance: none;
82+
background-color: #444;
83+
border-radius: 1rem;
84+
position: relative;
85+
cursor: pointer;
86+
border: 2px solid var(--purple-primary);
87+
}
88+
89+
.switch-card input[type="checkbox"]::before {
90+
content: "";
91+
width: 0.9rem;
92+
height: 0.9rem;
93+
background-color: var(--gray-light);
94+
border-radius: 50%;
95+
position: absolute;
96+
top: 50%;
97+
left: 0.2rem;
98+
transform: translateY(-50%);
99+
transition: all 0.3s ease;
100+
}
101+
102+
.switch-card input[type="checkbox"]:checked {
103+
background-color: var(--purple-primary);
104+
}
105+
106+
.switch-card input[type="checkbox"]:checked::before {
107+
left: 1.4rem;
108+
}
109+
110+
.support-section {
111+
margin: 1.5rem 0;
112+
text-align: center;
113+
}
114+
115+
.support-section img {
116+
width: 108px;
117+
transition: transform 0.3s ease;
118+
}
119+
120+
.support-section img:hover {
121+
transform: scale(1.05);
122+
}
123+
124+
.support-section p {
125+
font-size: 0.7rem;
126+
margin: 0.5rem 0;
127+
}
128+
129+
footer {
130+
position: fixed;
131+
bottom: 0;
132+
left: 0;
133+
right: 0;
134+
background-color: #2a2a2a;
135+
border-top: 1px solid #333;
136+
padding: 0.2rem 0.3rem;
137+
font-size: 0.8rem;
138+
z-index: 10;
139+
}
140+
141+
.footer-content {
142+
display: flex;
143+
justify-content: space-between;
144+
align-items: center;
145+
}
146+
147+
footer a {
148+
color: var(--purple-light);
149+
text-decoration: none;
150+
border-bottom: 1px dashed var(--purple-light);
151+
transition: all 0.3s ease;
152+
}
153+
154+
footer a:hover {
155+
color: var(--purple-primary);
156+
border-bottom-style: solid;
157+
}
158+
159+
.settings-button {
160+
background: none;
161+
border: none;
162+
color: var(--purple-light);
163+
cursor: pointer;
164+
padding: 0.5rem;
165+
transition: all 0.3s ease;
166+
display: flex;
167+
align-items: center;
168+
justify-content: center;
169+
}
170+
171+
.settings-button:hover {
172+
color: var(--purple-primary);
173+
transform: rotate(45deg);
174+
}
175+
</style>
176+
</head>
177+
<body>
178+
<main>
179+
<div class="header">
180+
<img src="../icons/icon.png" alt="Logo Pixely Sort & Save" />
181+
<h1>Pixely Sort & Save</h1>
182+
</div>
183+
184+
<div class="toggle-section">
185+
<div class="option-card switch-card">
186+
<label for="double-click-toggle"
187+
>Ativar download com duplo clique:</label
188+
>
189+
<input type="checkbox" id="double-click-toggle" />
190+
</div>
191+
192+
<div class="option-card switch-card">
193+
<label for="dropbox-toggle">Salvar no Dropbox:</label>
194+
<input type="checkbox" id="dropbox-toggle" />
195+
</div>
196+
197+
<div class="option-card switch-card">
198+
<label for="subfolder-toggle">Ativar subpastas:</label>
199+
<input type="checkbox" id="subfolder-toggle" />
200+
</div>
201+
</div>
202+
203+
<div class="support-section">
204+
<p>Apoie o desenvolvedor enviado um café</p>
205+
<a href="https://www.buymeacoffee.com/parlandim" target="_blank">
206+
<img src="../assets/coffer.png" alt="Buy Me a Coffee" />
207+
</a>
208+
</div>
209+
</main>
210+
211+
<footer>
212+
<div class="footer-content">
213+
<span>
214+
Feito com 💜 por
215+
<a href="https://github.com/parlandin" target="_blank">@Parlandim</a>
216+
</span>
217+
<button class="settings-button" title="Abrir configurações">
218+
<svg
219+
xmlns="http://www.w3.org/2000/svg"
220+
width="20"
221+
height="20"
222+
viewBox="0 0 24 24"
223+
fill="none"
224+
stroke="currentColor"
225+
stroke-width="2"
226+
stroke-linecap="round"
227+
stroke-linejoin="round"
228+
>
229+
<circle cx="12" cy="12" r="3"></circle>
230+
<path
231+
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.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-2 2 2 2 0 0 1-2-2v-.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 0 2 2 0 0 1 0-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-2-2 2 2 0 0 1 2-2h.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 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.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 0 2 2 0 0 1 0 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 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
232+
></path>
233+
</svg>
234+
</button>
235+
</div>
236+
</footer>
237+
238+
<script src="../scripts/index.js"></script>
239+
</body>
240+
</html>

‎scripts/index.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
const DEFAULT_SETTINGS = {
2+
suffixes: ["picture", "wallpapers", "uncategorized", "direct"],
3+
doubleClickEnabled: true,
4+
subfolderEnabled: true,
5+
dropboxToken: "",
6+
dropboxFolderPath: "/",
7+
dropboxEnabled: false,
8+
};
9+
10+
const MESSAGE_ACTIONS = {
11+
UPDATE_SUBFOLDER_ENABLED: "updateSubfolderEnabled",
12+
UPDATE_DROPBOX_ENABLED: "updateDropboxEnabled",
13+
};
14+
15+
const UI_ELEMENTS = {
16+
doubleClickToggle: document.getElementById("double-click-toggle"),
17+
subfolderToggle: document.getElementById("subfolder-toggle"),
18+
dropboxToggle: document.getElementById("dropbox-toggle"),
19+
settingsButton: document.querySelector(".settings-button"),
20+
};
21+
22+
function handleSettingsButtonClick() {
23+
chrome.runtime.openOptionsPage();
24+
}
25+
26+
async function updateDoubleClickSetting(isEnabled) {
27+
try {
28+
await browser.storage.local.set({ doubleClickEnabled: isEnabled });
29+
} catch (error) {
30+
console.error("Error updating double click setting:", error);
31+
}
32+
}
33+
34+
async function updateSubfolderSetting(isEnabled) {
35+
try {
36+
await browser.runtime.sendMessage({
37+
action: MESSAGE_ACTIONS.UPDATE_SUBFOLDER_ENABLED,
38+
subfolderEnabled: isEnabled,
39+
});
40+
} catch (error) {
41+
console.error("Error updating subfolder setting:", error);
42+
}
43+
}
44+
45+
async function updateDropboxSetting(isEnabled) {
46+
try {
47+
await browser.storage.local.set({ dropboxEnabled: isEnabled });
48+
await browser.runtime.sendMessage({
49+
action: MESSAGE_ACTIONS.UPDATE_DROPBOX_ENABLED,
50+
dropboxEnabled: isEnabled,
51+
});
52+
} catch (error) {
53+
console.error("Error updating dropbox setting:", error);
54+
}
55+
}
56+
57+
function setupDoubleClickToggle() {
58+
UI_ELEMENTS.doubleClickToggle.addEventListener("change", () => {
59+
const isEnabled = UI_ELEMENTS.doubleClickToggle.checked;
60+
updateDoubleClickSetting(isEnabled);
61+
});
62+
}
63+
64+
function setupSubfolderToggle() {
65+
UI_ELEMENTS.subfolderToggle.addEventListener("change", () => {
66+
const isEnabled = UI_ELEMENTS.subfolderToggle.checked;
67+
updateSubfolderSetting(isEnabled);
68+
});
69+
}
70+
71+
function setupDropboxToggle() {
72+
UI_ELEMENTS.dropboxToggle.addEventListener("change", () => {
73+
const isEnabled = UI_ELEMENTS.dropboxToggle.checked;
74+
updateDropboxSetting(isEnabled);
75+
});
76+
}
77+
78+
function setupEventListeners() {
79+
UI_ELEMENTS.settingsButton.addEventListener(
80+
"click",
81+
handleSettingsButtonClick
82+
);
83+
setupDoubleClickToggle();
84+
setupSubfolderToggle();
85+
setupDropboxToggle();
86+
}
87+
88+
function updateUIFromSettings(data) {
89+
UI_ELEMENTS.doubleClickToggle.checked = data.doubleClickEnabled;
90+
UI_ELEMENTS.subfolderToggle.checked = data.subfolderEnabled;
91+
UI_ELEMENTS.dropboxToggle.checked = data.dropboxEnabled;
92+
}
93+
94+
async function loadSettings() {
95+
try {
96+
const data = await browser.storage.local.get(DEFAULT_SETTINGS);
97+
updateUIFromSettings(data);
98+
} catch (error) {
99+
console.error("Error retrieving settings:", error);
100+
}
101+
}
102+
103+
async function initializePopup() {
104+
await loadSettings();
105+
setupEventListeners();
106+
}
107+
108+
initializePopup();

0 commit comments

Comments
 (0)