audioconverter/index.html at main · ShoperGamer/audioconverter · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Audio Converter</title>
    <link href="/src/style.css" rel="stylesheet">
  </head>
  <body class="bg-slate-950 text-slate-200 min-h-screen flex flex-col items-center justify-center p-4 selection:bg-indigo-500 selection:text-white font-sans">

    <div class="w-full max-w-3xl">
      <div class="text-center mb-8">
        <h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-cyan-400 mb-4">
          Audio Converter
        </h1>
        <p class="text-slate-400">Convert up to 10 files at once (Client-side Only)</p>
      </div>

      <div class="glass-panel rounded-2xl p-6 md:p-8 shadow-2xl relative overflow-hidden">

        <div id="status-indicator" class="absolute top-4 right-4 flex items-center gap-2 text-xs font-mono text-yellow-500">
          <span class="w-2 h-2 rounded-full bg-yellow-500 animate-pulse"></span>
          Loading Engine...
        </div>

        <div id="upload-section" class="transition-all duration-300">
          <label class="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-slate-600 rounded-xl cursor-pointer hover:border-indigo-500 hover:bg-slate-800/50 transition-all group">
            <div class="flex flex-col items-center justify-center pt-5 pb-6">
              <svg class="w-10 h-10 mb-3 text-slate-500 group-hover:text-indigo-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
              <p class="mb-2 text-sm text-slate-400"><span class="font-semibold text-slate-200">Click to upload</span> or drag multiple files</p>
              <p class="text-xs text-slate-500">Max 10 files (MP3, WAV, FLAC, AAC, etc.)</p>
            </div>
            <input id="file-input" type="file" class="hidden" accept="audio/*" multiple />
          </label>
        </div>

        <div id="workspace-section" class="hidden flex-col gap-6 mt-6">

          <div class="flex flex-col md:flex-row gap-4 items-end bg-slate-800/50 p-4 rounded-xl border border-slate-700">
            <div class="w-full md:w-1/3">
              <label class="block text-xs text-slate-400 mb-2">Convert All To:</label>
              <select id="format-select" class="w-full bg-slate-900 border border-slate-700 text-slate-200 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block p-2.5">
                <option value="mp3">MP3</option>
                <option value="wav">WAV</option>
                <option value="aac">AAC (m4a)</option>
                <option value="flac">FLAC</option>
                <option value="wma">WMA</option>
                <option value="aiff">AIFF</option>
              </select>
            </div>

            <div class="flex gap-2 w-full md:w-2/3">
              <button id="convert-all-btn" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-lg text-sm px-5 py-2.5 text-center transition-all disabled:opacity-50 disabled:cursor-not-allowed h-[42px] cursor-pointer shadow-lg shadow-indigo-500/20">
                Convert All
              </button>
              <button id="clear-all-btn" class="px-4 py-2.5 bg-slate-700 hover:bg-red-500/20 hover:text-red-400 text-slate-300 rounded-lg transition-colors border border-slate-600 h-[42px] cursor-pointer">
                Clear All
              </button>
            </div>
          </div>

          <div class="max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
            <ul id="file-list" class="space-y-2">
              </ul>
          </div>

          <div id="total-progress-container" class="hidden">
            <div class="flex justify-between mb-1">
              <span class="text-xs font-medium text-indigo-400" id="progress-text">Processing Batch...</span>
              <span class="text-xs font-medium text-slate-400" id="progress-percent">0%</span>
            </div>
            <div class="w-full bg-slate-700 rounded-full h-2">
              <div id="progress-bar" class="bg-indigo-500 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
            </div>
          </div>

          <div id="download-actions" class="hidden grid grid-cols-1 gap-4 pt-2">
            <button id="download-zip-btn" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-emerald-500/20 flex items-center justify-center gap-2 cursor-pointer">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
              Download All as ZIP
            </button>
          </div>

        </div>

      </div>

      <div class="mt-8 text-center">
        <p id="log-message" class="text-xs text-slate-600 font-mono h-4"></p>
      </div>
    </div>

    <div id="rename-modal" class="fixed inset-0 bg-black/80 hidden items-center justify-center z-50 backdrop-blur-sm transition-opacity">
      <div class="bg-slate-900 p-6 rounded-2xl border border-slate-700 max-w-sm w-full shadow-2xl transform scale-100">
        <h3 class="text-xl font-bold text-white mb-2">Download Settings</h3>
        <p class="text-slate-400 text-sm mb-4">You can rename the file(s) before downloading.</p>

        <div class="mb-4">
          <label class="block text-xs text-indigo-400 mb-1 font-bold">New Filename (Optional)</label>
          <input id="rename-input" type="text" placeholder="e.g. MySong (Leave empty to keep original)"
                 class="w-full bg-slate-800 border border-slate-600 text-white text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 p-2.5">
           <p class="text-[10px] text-slate-500 mt-1">
             *If ZIP: We will add numbers (e.g. MySong1.mp3)<br>
             *If Single: We will use exact name
           </p>
        </div>

        <div class="flex gap-2">
          <button id="modal-cancel-btn" class="flex-1 px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg transition-colors text-sm">Cancel</button>
          <button id="modal-confirm-btn" class="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors text-sm font-bold">Download</button>
        </div>
      </div>
    </div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>