Rename app-backup-last.py to app-backup.py

app-backup-last.py → app-backup.py

@@ -58,7 +58,7 @@ body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7
 .prop-group{{margin-bottom:10px}}
 .prop-label{{font-size:9px;color:#666;margin-bottom:2px}}
 .prop-input{{width:100%;padding:4px;border:1px solid #ddd;border-radius:3px;font-size:10px}}
-.timeline{{height:140px;background:#fff;border-top:1px solid #ddd;display:flex;flex-direction:column}}
+.timeline{{height:180px;background:#fff;border-top:1px solid #ddd;display:flex;flex-direction:column}}
 .tl-toolbar{{height:28px;background:#fafafa;border-bottom:1px solid #eee;display:flex;align-items:center;padding:0 6px;gap:4px}}
 .tl-toolbar .btn{{padding:2px 6px;font-size:9px}}
 .tl-zoom{{display:flex;align-items:center;gap:3px;margin-left:auto;font-size:9px;color:#666}}
@@ -68,6 +68,7 @@ body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7
 .tl-tracks{{position:relative}}
 .tl-track{{height:45px;border-bottom:1px solid #eee;display:flex}}
 .tl-track:nth-child(2){{background:#fffbeb}}
+.tl-track:nth-child(3){{background:#fdf2f8}}
 .track-label{{width:50px;padding:0 4px;font-size:8px;color:#666;background:#fafafa;display:flex;align-items:center;border-right:1px solid #eee}}
 .track-content{{flex:1;position:relative;min-width:600px}}
 .clip{{position:absolute;height:36px;top:4px;border-radius:4px;cursor:grab;display:flex;align-items:center;overflow:hidden}}
@@ -76,6 +77,7 @@ body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7
 .clip.video{{background:linear-gradient(135deg,#818cf8,#6366f1)}}
 .clip.image{{background:linear-gradient(135deg,#34d399,#10b981)}}
 .clip.audio{{background:linear-gradient(135deg,#fbbf24,#f59e0b)}}
+.clip.text{{background:linear-gradient(135deg,#f472b6,#ec4899)}}
 .clip-thumb{{width:36px;height:100%;object-fit:cover}}
 .clip-info{{padding:0 4px;flex:1;overflow:hidden}}
 .clip-name{{font-size:8px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@@ -150,6 +152,7 @@ body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7
 </div>
 <div class="timeline">
 <div class="tl-toolbar">
+<button class="btn btn-secondary" onclick="addTextClip()">📝 텍스트</button>
 <button class="btn btn-secondary" onclick="splitClip()">✂ 자르기</button>
 <button class="btn btn-secondary" onclick="dupeClip()">📋 복제</button>
 <button class="btn btn-danger" onclick="delClip()">🗑 삭제</button>
@@ -160,6 +163,7 @@ body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7
 <div class="tl-tracks">
 <div class="tl-track"><div class="track-label">🎬 영상</div><div class="track-content" id="t0"></div></div>
 <div class="tl-track"><div class="track-label">🎵 오디오</div><div class="track-content" id="t1"></div></div>
+<div class="tl-track"><div class="track-label">📝 텍스트</div><div class="track-content" id="t2"></div></div>
 </div>
 <div class="playhead" id="playhead" style="left:50px"></div>
 </div>
@@ -179,6 +183,55 @@ body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7
 <button class="btn btn-secondary" onclick="cancelExport()">취소</button>
 </div>
 </div>
+<div class="modal" id="textModal" style="display:none">
+<div class="modal-box" style="min-width:320px">
+<h3>📝 텍스트 추가</h3>
+<div style="margin:10px 0;text-align:left">
+<div style="margin-bottom:8px">
+<label style="font-size:11px;color:#666">텍스트 내용</label>
+<input type="text" id="textInput" placeholder="텍스트 입력..." style="width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
+</div>
+<div style="display:flex;gap:8px;margin-bottom:8px">
+<div style="flex:1">
+<label style="font-size:11px;color:#666">글자 크기</label>
+<select id="textSize" style="width:100%;padding:6px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
+<option value="24">작게 (24px)</option>
+<option value="36">보통 (36px)</option>
+<option value="48" selected>크게 (48px)</option>
+<option value="64">매우 크게 (64px)</option>
+<option value="96">최대 (96px)</option>
+</select>
+</div>
+<div style="flex:1">
+<label style="font-size:11px;color:#666">글자 색상</label>
+<input type="color" id="textColor" value="#ffffff" style="width:100%;height:32px;border:1px solid #ddd;border-radius:4px;margin-top:4px;cursor:pointer">
+</div>
+</div>
+<div style="display:flex;gap:8px;margin-bottom:8px">
+<div style="flex:1">
+<label style="font-size:11px;color:#666">배경 스타일</label>
+<select id="textBgStyle" onchange="toggleBgColor()" style="width:100%;padding:6px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
+<option value="none">배경 없음</option>
+<option value="solid" selected>단색 배경</option>
+<option value="rounded">둥근 배경</option>
+</select>
+</div>
+<div style="flex:1" id="bgColorBox">
+<label style="font-size:11px;color:#666">배경 색상</label>
+<input type="color" id="textBgColor" value="#000000" style="width:100%;height:32px;border:1px solid #ddd;border-radius:4px;margin-top:4px;cursor:pointer">
+</div>
+</div>
+<div style="margin-bottom:8px">
+<label style="font-size:11px;color:#666">표시 시간 (초)</label>
+<input type="number" id="textDuration" value="5" min="1" max="60" step="0.5" style="width:100%;padding:6px;border:1px solid #ddd;border-radius:4px;margin-top:4px">
+</div>
+</div>
+<div style="display:flex;gap:8px;justify-content:center">
+<button class="btn btn-secondary" onclick="closeTextModal()">취소</button>
+<button class="btn btn-success" onclick="confirmAddText()">추가</button>
+</div>
+</div>
+</div>
 <div id="hiddenMedia" class="hidden-media"></div>
 <script>
 var S={{
@@ -354,7 +407,7 @@ drawFrame();
 }}
 
 function renderTL(){{
-['t0','t1'].forEach(function(tid){{document.getElementById(tid).innerHTML=''}});
+['t0','t1','t2'].forEach(function(tid){{document.getElementById(tid).innerHTML=''}});
 S.clips.forEach(function(c){{
 var tr=document.getElementById('t'+c.track);
 var el=document.createElement('div');
@@ -368,7 +421,8 @@ el.oncontextmenu=function(e){{e.preventDefault();selClip(c.id);showCtx(e.clientX
 el.ondragstart=function(e){{e.dataTransfer.setData('cid',c.id);e.dataTransfer.setData('ox',e.offsetX)}};
 var m=S.media.find(function(x){{return x.id===c.mid}});
 var th=m&&m.thumb?'<img class="clip-thumb" src="'+m.thumb+'">':'';
-el.innerHTML=th+'<div class="clip-info"><div class="clip-name">'+c.name+'</div><div class="clip-dur">'+fmt(len)+'</div></div><div class="clip-handle clip-handle-l"></div><div class="clip-handle clip-handle-r"></div>';
+var clipName=c.type==='text'?('📝 '+c.text.substring(0,8)):c.name;
+el.innerHTML=th+'<div class="clip-info"><div class="clip-name">'+clipName+'</div><div class="clip-dur">'+fmt(len)+'</div></div><div class="clip-handle clip-handle-l"></div><div class="clip-handle clip-handle-r"></div>';
 el.querySelector('.clip-handle-l').onmousedown=function(e){{e.stopPropagation();startTrim(c.id,'l',e)}};
 el.querySelector('.clip-handle-r').onmousedown=function(e){{e.stopPropagation();startTrim(c.id,'r',e)}};
 tr.appendChild(el);
@@ -392,7 +446,7 @@ ru.innerHTML=h+'</svg>';
 }}
 
 function setupDrop(){{
-['t0','t1'].forEach(function(tid,idx){{
+['t0','t1','t2'].forEach(function(tid,idx){{
 var tr=document.getElementById(tid);
 tr.ondragover=function(e){{e.preventDefault();tr.classList.add('drop-zone')}};
 tr.ondragleave=function(){{tr.classList.remove('drop-zone')}};
@@ -412,7 +466,14 @@ save();
 var c=S.clips.find(function(x){{return x.id===cid}});
 if(c){{
 c.start=r(Math.max(0,t-ox/(S.pps*S.zoom)));
-c.track=c.type==='audio'?1:idx;
+// 텍스트는 텍스트 트랙으로만, 그 외는 영상/오디오 트랙으로
+if(c.type==='text'){{
+c.track=2;
+}}else if(c.type==='audio'){{
+c.track=1;
+}}else{{
+c.track=idx===2?0:idx;
+}}
 renderTL();
 updateDur();
 drawFrame();
@@ -461,11 +522,34 @@ var box=document.getElementById('propsBox');
 var c=S.clips.find(function(x){{return x.id===S.sel}});
 if(!c){{box.innerHTML='<div class="no-sel">클립 선택</div>';return}}
 var len=r(c.te-c.ts);
+
+if(c.type==='text'){{
+// 텍스트 클립 속성
+box.innerHTML='<div class="prop-group"><div class="prop-label">텍스트</div><input class="prop-input" value="'+c.text+'" onchange="setProp(\\'text\\',this.value)"></div>'+
+'<div class="prop-group"><div class="prop-label">시작</div><input class="prop-input" type="number" step="0.1" value="'+c.start+'" onchange="setProp(\\'start\\',parseFloat(this.value))"></div>'+
+'<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
+'<div class="prop-group"><div class="prop-label">글자 크기</div><select class="prop-input" onchange="setProp(\\'fontSize\\',parseInt(this.value))">'+
+'<option value="24"'+(c.fontSize===24?' selected':'')+'>작게</option>'+
+'<option value="36"'+(c.fontSize===36?' selected':'')+'>보통</option>'+
+'<option value="48"'+(c.fontSize===48?' selected':'')+'>크게</option>'+
+'<option value="64"'+(c.fontSize===64?' selected':'')+'>매우 크게</option>'+
+'<option value="96"'+(c.fontSize===96?' selected':'')+'>최대</option>'+
+'</select></div>'+
+'<div class="prop-group"><div class="prop-label">글자 색상</div><input class="prop-input" type="color" value="'+c.fontColor+'" onchange="setProp(\\'fontColor\\',this.value)"></div>'+
+'<div class="prop-group"><div class="prop-label">배경 스타일</div><select class="prop-input" onchange="setProp(\\'bgStyle\\',this.value)">'+
+'<option value="none"'+(c.bgStyle==='none'?' selected':'')+'>없음</option>'+
+'<option value="solid"'+(c.bgStyle==='solid'?' selected':'')+'>단색</option>'+
+'<option value="rounded"'+(c.bgStyle==='rounded'?' selected':'')+'>둥근</option>'+
+'</select></div>'+
+'<div class="prop-group"><div class="prop-label">배경 색상</div><input class="prop-input" type="color" value="'+c.bgColor+'" onchange="setProp(\\'bgColor\\',this.value)"></div>';
+}}else{{
+// 기존 미디어 클립 속성
 box.innerHTML='<div class="prop-group"><div class="prop-label">이름</div><input class="prop-input" value="'+c.name+'" onchange="setProp(\\'name\\',this.value)"></div>'+
 '<div class="prop-group"><div class="prop-label">시작</div><input class="prop-input" type="number" step="0.1" value="'+c.start+'" onchange="setProp(\\'start\\',parseFloat(this.value))"></div>'+
 '<div class="prop-group"><div class="prop-label">길이: '+fmt(len)+'</div></div>'+
 (c.type!=='image'?'<div class="prop-group"><div class="prop-label">볼륨 '+Math.round(c.vol*100)+'%</div><input class="prop-input" type="range" min="0" max="1" step="0.05" value="'+c.vol+'" oninput="setProp(\\'vol\\',parseFloat(this.value))"></div>':'');
 }}
+}}
 
 function setProp(p,v){{
 save();
@@ -639,6 +723,8 @@ if(el&&!el.paused)el.pause();
 }}
 }});
 if(!vc&&!audioClips.length&&S.clips.length>0){{
+var hasText=getTextClipsAt(t).length>0;
+if(!hasText){{
 S.ctx.fillStyle='#333';
 S.ctx.font='12px sans-serif';
 S.ctx.textAlign='center';
@@ -646,6 +732,13 @@ S.ctx.fillText('재생 위치에 미디어가 없습니다',pw/2,ph/2);
 }}
 }}
 
+// 텍스트 오버레이 렌더링
+var textClips=getTextClipsAt(t);
+textClips.forEach(function(tc){{
+drawText(S.ctx,tc,pw,ph);
+}});
+}}
+
 function drawWithMode(ctx,el,sw,sh,dw,dh,mode){{
 if(mode==='fill'){{
 // 채우기: 캔버스를 꽉 채우도록 확대, 넘치는 부분 잘림
@@ -693,6 +786,99 @@ ctx.drawImage(el,ox,oy,nw,nh);
 }}
 
 function toggleMute(){{S.muted=!S.muted;document.getElementById('muteBtn').textContent=S.muted?'🔇':'🔊'}}
+
+// 텍스트 클립 관련 함수들
+function addTextClip(){{
+document.getElementById('textModal').style.display='flex';
+document.getElementById('textInput').value='';
+document.getElementById('textInput').focus();
+}}
+
+function closeTextModal(){{
+document.getElementById('textModal').style.display='none';
+}}
+
+function toggleBgColor(){{
+var style=document.getElementById('textBgStyle').value;
+document.getElementById('bgColorBox').style.opacity=style==='none'?'0.5':'1';
+}}
+
+function confirmAddText(){{
+var text=document.getElementById('textInput').value.trim();
+if(!text){{alert('텍스트를 입력하세요');return}}
+save();
+var duration=parseFloat(document.getElementById('textDuration').value)||5;
+S.clips.push({{
+id:id(),
+type:'text',
+track:2,
+start:S.time,
+dur:duration,
+ts:0,
+te:duration,
+text:text,
+fontSize:parseInt(document.getElementById('textSize').value),
+fontColor:document.getElementById('textColor').value,
+bgStyle:document.getElementById('textBgStyle').value,
+bgColor:document.getElementById('textBgColor').value
+}});
+closeTextModal();
+renderTL();
+updateDur();
+drawFrame();
+stat('텍스트 추가: '+text);
+}}
+
+function getTextClipsAt(t){{
+return S.clips.filter(function(c){{
+if(c.type!=='text')return false;
+var cEnd=c.start+(c.te-c.ts);
+return t>=c.start&&t<cEnd;
+}});
+}}
+
+function drawText(ctx,clip,dw,dh){{
+var text=clip.text;
+var fontSize=clip.fontSize||48;
+var fontColor=clip.fontColor||'#ffffff';
+var bgStyle=clip.bgStyle||'none';
+var bgColor=clip.bgColor||'#000000';
+
+ctx.font='bold '+fontSize+'px -apple-system,BlinkMacSystemFont,sans-serif';
+ctx.textAlign='center';
+ctx.textBaseline='middle';
+
+var metrics=ctx.measureText(text);
+var textW=metrics.width;
+var textH=fontSize;
+var x=dw/2;
+var y=dh-fontSize-30; // 하단에 배치
+
+if(bgStyle!=='none'){{
+var padding=fontSize*0.3;
+var bgX=x-textW/2-padding;
+var bgY=y-textH/2-padding/2;
+var bgW=textW+padding*2;
+var bgH=textH+padding;
+
+ctx.fillStyle=bgColor+'cc'; // 약간 투명
+if(bgStyle==='rounded'){{
+ctx.beginPath();
+ctx.roundRect(bgX,bgY,bgW,bgH,10);
+ctx.fill();
+}}else{{
+ctx.fillRect(bgX,bgY,bgW,bgH);
+}}
+}}
+
+// 텍스트 그림자
+ctx.fillStyle='rgba(0,0,0,0.5)';
+ctx.fillText(text,x+2,y+2);
+
+// 텍스트
+ctx.fillStyle=fontColor;
+ctx.fillText(text,x,y);
+}}
 function setZoom(v){{S.zoom=parseFloat(v);renderTL();updateHead()}}
 function tlClick(e){{
 if(e.target.closest('.clip'))return;
@@ -827,6 +1013,12 @@ lastClipId=null;
 }}
 }}
 
+// 텍스트 오버레이 렌더링
+var textClips=getTextClipsAt(t);
+textClips.forEach(function(tc){{
+drawTextExport(offCtx,tc,exportW,exportH);
+}});
+
 ctx.drawImage(offCanvas,0,0);
 requestAnimationFrame(render);
 }}
@@ -920,6 +1112,48 @@ var fx=(dw-fw)/2,fy=(dh-fh)/2;
 ctx.drawImage(frameCanvas,fx,fy,fw,fh);
 }}
 
+// 내보내기용 텍스트 렌더링
+function drawTextExport(ctx,clip,dw,dh){{
+var text=clip.text;
+var fontSize=Math.round(clip.fontSize*(dw/640))||72; // 내보내기 해상도에 맞게 스케일
+var fontColor=clip.fontColor||'#ffffff';
+var bgStyle=clip.bgStyle||'none';
+var bgColor=clip.bgColor||'#000000';
+
+ctx.font='bold '+fontSize+'px -apple-system,BlinkMacSystemFont,sans-serif';
+ctx.textAlign='center';
+ctx.textBaseline='middle';
+
+var metrics=ctx.measureText(text);
+var textW=metrics.width;
+var textH=fontSize;
+var x=dw/2;
+var y=dh-fontSize-50; // 하단에 배치
+
+if(bgStyle!=='none'){{
+var padding=fontSize*0.3;
+var bgX=x-textW/2-padding;
+var bgY=y-textH/2-padding/2;
+var bgW=textW+padding*2;
+var bgH=textH+padding;
+
+ctx.fillStyle=bgColor+'cc';
+if(bgStyle==='rounded'){{
+ctx.beginPath();
+ctx.roundRect(bgX,bgY,bgW,bgH,15);
+ctx.fill();
+}}else{{
+ctx.fillRect(bgX,bgY,bgW,bgH);
+}}
+}}
+
+ctx.fillStyle='rgba(0,0,0,0.5)';
+ctx.fillText(text,x+3,y+3);
+
+ctx.fillStyle=fontColor;
+ctx.fillText(text,x,y);
+}}
+
 function cancelExport(){{S.cancelled=true;document.getElementById('exportModal').style.display='none'}}
 
 document.addEventListener('keydown',function(e){{