Arca/script.js at main · nivrithi15/Arca · GitHub

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
// --- 1. CONFIGURATION ---
const CLOUD_NAME = "dmvuzwlxs";
const UPLOAD_PRESET = "ecocloset";
// --- CORE LOGIC ---
const updateImpact = (count) => {
    document.getElementById('total-co2').innerText = (count * 2.5).toFixed(1);
};

const renderCard = (item, index) => {
    const grid = document.getElementById('wardrobe-grid');
    // Basic image processing
    const imgUrl = item.url.replace("/upload/", "/upload/e_background_removal/");

    const cardHTML = `
        <div class="clothing-card" onclick="openItem(${index})">
            <img src="${imgUrl}" onerror="this.src='${item.url}'">
            <div class="card-info">
                <p class="carbon-stat">Saved 2.5kg CO₂</p>
                <small class="label-tag">${item.category.toUpperCase()}</small>
            </div>
        </div>
    `;
    grid.innerHTML += cardHTML;
};

const loadGallery = () => {
    const grid = document.getElementById('wardrobe-grid');
    grid.innerHTML = ""; // Reset grid
    const saved = JSON.parse(localStorage.getItem("arcaItems")) || [];
    saved.forEach((item, index) => renderCard(item, index));
    updateImpact(saved.length);
};

// --- WIDGET & MODAL ---
window.onload = () => {
    const uploadBtn = document.getElementById("upload_widget");
    const categorySelect = document.getElementById("category-select");

    if (typeof cloudinary !== 'undefined' && uploadBtn) {
        const myWidget = cloudinary.createUploadWidget({
            cloudName: CLOUD_NAME,
            uploadPreset: UPLOAD_PRESET,
            cropping: true
        }, (error, result) => {
            if (!error && result && result.event === "success") {
                const newItem = {
                    url: result.info.secure_url,
                    category: categorySelect.value
                };
                const saved = JSON.parse(localStorage.getItem("arcaItems")) || [];
                saved.push(newItem);
                localStorage.setItem("arcaItems", JSON.stringify(saved));
                loadGallery();
            }
        });

        uploadBtn.addEventListener("click", () => myWidget.open());
    }
    loadGallery();
};

// Simple Modal Functions
window.openItem = (index) => {
    const saved = JSON.parse(localStorage.getItem("arcaItems")) || [];
    const item = saved[index];
    const modal = document.getElementById('item-modal');
    document.getElementById('modal-img').src = item.url;
    document.getElementById('modal-label').innerText = item.category.toUpperCase();
    modal.style.display = "block";

    // Setup delete for THIS specific item
    document.getElementById('delete-btn').onclick = () => {
        saved.splice(index, 1);
        localStorage.setItem("arcaItems", JSON.stringify(saved));
        modal.style.display = "none";
        loadGallery();
    };
};
window.openItem = (index) => {
    const saved = JSON.parse(localStorage.getItem("arcaItems")) || [];
    const item = saved[index];
    const modal = document.getElementById('item-modal');

    // Set Image and Label
    document.getElementById('modal-img').src = item.url;
    document.getElementById('modal-label').innerText = item.category.toUpperCase();

    // Show Modal
    modal.style.display = "block";

    // LINK THE DELETE BUTTON
    const delBtn = document.getElementById('delete-btn');
    delBtn.onclick = () => {
        if(confirm("Are you sure you want to remove this item?")) {
            saved.splice(index, 1);
            localStorage.setItem("arcaItems", JSON.stringify(saved));
            modal.style.display = "none";
            loadGallery(); // This refreshes the grid
        }
    };
};
window.openStory = () => {
    document.getElementById('story-modal').style.display = "block";
};

window.closeStory = () => {
    document.getElementById('story-modal').style.display = "none";
};

// Update the general window.onclick to handle both modals
window.onclick = (event) => {
    const itemModal = document.getElementById('item-modal');
    const storyModal = document.getElementById('story-modal');
    if (event.target == itemModal) itemModal.style.display = "none";
    if (event.target == storyModal) storyModal.style.display = "none";
};
window.openData = () => {
    document.getElementById('data-modal').style.display = "block";
};

window.closeData = () => {
    document.getElementById('data-modal').style.display = "none";
};

// Update your existing window.onclick to include the new modal
window.onclick = (event) => {
    const itemModal = document.getElementById('item-modal');
    const storyModal = document.getElementById('story-modal');
    const dataModal = document.getElementById('data-modal');

    if (event.target == itemModal) itemModal.style.display = "none";
    if (event.target == storyModal) storyModal.style.display = "none";
    if (event.target == dataModal) dataModal.style.display = "none";
};
window.closeModal = () => document.getElementById('item-modal').style.display = "none";