Simple_FileOrganizer/index.html at main · Subham-x/Simple_FileOrganizer · 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
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Smart File Organizer UI</title>
    <script type="module" src="https://esm.run/@material/web/all.js"></script>
    <link rel="stylesheet" href="src/styles.css">
</head>

<body>
    <div class="top-controls">
        <h2>Simple File Organizer</h2>
        <div class="actionBtn">
            <md-filled-tonal-button id="theme-toggle">
                <md-icon slot="icon"><span id="ico">format_paint</span></md-icon>
                Toggle Theme
            </md-filled-tonal-button>
            <a href="src/pages/feedback.html"><md-outlined-button>Feedback</md-outlined-button></a>
            <a href="src/pages/about.html"><md-text-button>About</md-text-button></a>


        </div>
    </div>

    <div class="layout">
        <!-- Left Card -->
        <md-elevated-card class="card left-card">
            <div class="destAction">
                <div class="dest">
                    <h4>Select Destination</h4>
                    <input type="hidden" id="folder-picker" class="hidden-input" webkitdirectory />
                    <md-outlined-button id="folder-btn">Choose Destination Folder</md-outlined-button>
                </div>
                <div class="pathDisplay">No Destination Choosen</div>
            </div>


            <div class="excpCard">
                <!-- Exception List -->
                <h4>Add exception extension.</h4>
                <p id="exception">Write exception without dot(.), <b>E.g: pdf or txt </b>
                </p>
                <div class="exception-list" id="exception-list">
                    <md-outlined-text-field label="E.g: js"></md-outlined-text-field>
                </div>

                <!-- Add Exception Button -->
                <div class="fabBtn">
                    <md-fab id="add-exception-btn" label="Add Exception">
                        <md-icon slot="icon"><img src="src/icons/add.svg"></md-icon>
                    </md-fab>
                </div>
            </div>


            <!-- Submit Button -->
            <div style="margin-top: 2rem;" class="start">
                <md-filled-button id="start-btn">Start Organize</md-filled-button>
            </div>
        </md-elevated-card>

        <!-- Right Card (Terminal) -->
        <md-elevated-card class="card right-card">
            <div class="tab-section">
                <h3>Status</h3>
            </div>
            <div class="terminal-box" id="terminal">
                $ simple.organize >> app_started <succ>(successfully)</succ>
            </div>
        </md-elevated-card>
    </div>

    <script>
        const addBtn = document.getElementById('add-exception-btn');
        const exceptionList = document.getElementById('exception-list');
        const folderBtn = document.getElementById('folder-btn');
        const startBtn = document.getElementById('start-btn');
        const terminal = document.getElementById('terminal');
        const pathDisplay = document.querySelector('.pathDisplay');
        let actualFolderPath = "";

        // Add exception field
        addBtn.addEventListener('click', () => {
            const newField = document.createElement('md-outlined-text-field');
            newField.setAttribute('label', 'e.g: pdf');
            exceptionList.appendChild(newField);
        });

        // Folder selection via Electron
        folderBtn.addEventListener('click', async () => {
            const selectedPath = await window.electronAPI.chooseFolder();
            if (selectedPath) {
                actualFolderPath = selectedPath;
                terminal.innerHTML += `<br> $ <warn>📁 Folder selected: ${actualFolderPath} </warn>`;
                pathDisplay.textContent = actualFolderPath;
            }
        });

        // Start organizing
        startBtn.addEventListener('click', async () => {
            if (!actualFolderPath) {
                terminal.innerHTML += "<br> $ <err>⚠️ Please select a destination folder first.</err>";
                return;
            }

            const exceptionFields = exceptionList.querySelectorAll('md-outlined-text-field');
            const exceptions = Array.from(exceptionFields).map(f => f.value.trim()).filter(Boolean);

            const result = await window.electronAPI.startOrganize(actualFolderPath, exceptions);
            terminal.innerHTML += "<br> $ <succ>" + result + "</succ>";
        });


        // ---- Theme Toggler

        const toggleBtn = document.getElementById('theme-toggle');
        const icon = toggleBtn.querySelector('md-icon');

        toggleBtn.addEventListener('click', () => {
            document.body.classList.toggle('dark');
            const isDark = document.body.classList.contains('dark');
            // icon.textContent = isDark ? 'light_mode' : 'dark_mode'; // optional
        });


        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (prefersDark) {
            // document.write("Demokoskosodskd");
            document.body.classList.toggle('dark');
            // terminal.textContent = "$ darkModeTurned_ON";
            // terminal.textContent += "\n$ darkModeTurned_ON";
            terminal.innerHTML += "<br>$ <info>darkModeTurned_ON </info>";

        } else {
            console.log('User prefers light mode');
            terminal.innerHTML += "$ <info>light_mode detected</info>";
        }

    </script>


</body>

</html>