CTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone 视频转 MP3</title>
<style>
  *{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
    body{background:#f5f7fa;padding:40px 20px}
      .container{max-width:500px;margin:0 auto;background:white;border-radius:16px;padding:32px;box-shadow:0 4px 20px rgba(0,0,0,0.06)}
        .upload-area{border:2px dashed #cbd5e1;border-radius:12px;padding:30px 20px;text-align:center;cursor:pointer;margin-bottom:16px}
	  .upload-area:hover{border-color:#007bff}
	    .upload-area input{display:none}
	      .filename{color:#64748b;font-size:14px;margin-bottom:12px}
	        .btn{width:100%;padding:14px;border-radius:12px;border:none;font-size:16px;font-weight:500;cursor:pointer;margin:8px 0}
		  .btn-blue{background:#007bff;color:white}
		    .btn-green{background:#10b981;color:white;text-align:center;text-decoration:none;display:none}
		      .btn:disabled{background:#93c5fd}
		        .status{padding:12px;border-radius:8px;font-size:14px;margin:12px 0;display:none}
			  .loading{background:#eff6ff;color:#1d4ed8;display:block}
			    .done{background:#d1fae5;color:#065f46;display:block}
			      .error{background:#fee2e2;color:#dc2626;display:block}
</style>

<div class="container">
	  <h2>📤 iPhone 视频转 MP3</h2>
	    <div class="upload-area" id="area">
		        <p>点击上传 MOV / MP4</p>
			    <input type="file" id="file" accept="video/*">
			      </div>
			        <div class="filename" id="fname"></div>
				  <button class="btn btn-blue" id="go" disabled>上传并自动转码</button>
				    <div class="status" id="status"></div>
				      <a class="btn btn-green" id="download">下载 MP3</a>
</div>

	<script>
		  const area = document.getElementById('area')
  const file = document.getElementById('file')
  const go = document.getElementById('go')
  const status = document.getElementById('status')
  const fname = document.getElementById('fname')
  const download = document.getElementById('download')

  area.onclick = () => file.click()
  file.onchange = () => {
	      if(file.files[0]){
		            fname.textContent = '已选择：' + file.files[0].name
		            go.disabled = false
		          }
	    }

  go.onclick = async () => {
	      const f = file.files[0]
	      go.disabled = true
	      status.className = 'status loading'
	      status.textContent = '上传中…'
	      
	      try {
		            const res = await fetch('/upload.cgi?' + encodeURIComponent(f.name), {
				            method: 'POST',
				            body: f
				          })
		            const mp3Url = await res.text()
		            status.className = 'status done'
		            status.textContent = '✅ 转码完成！'
		            download.href = mp3Url
		            download.style.display = 'block'
		          } catch(e) {
				        status.className = 'status error'
				        status.textContent = '❌ 上传或转码失败'
				      }
	    }
	</script>