v3.1.0: 모바일 대응 + 미디 마스터채널 + Content-Disposition 수정
- music-app: 마스터채널 추가 (볼륨 0–200%, FX 항상 표시), 효과 토글 패널 제거 - routes-music.ts: 한글 파일명 Content-Disposition 500 에러 수정 (Buffer.ascii → JS replace) - 모바일 오버레이 패턴 (max-width:640px): mind/accountant/investor/lawyer/language/pptx-wizard/dental-agent 각 앱 사이드바·채팅 패널을 fixed 오버레이로, 바텀 탭바로 네비게이션 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 4.6
+85
-2
@@ -258,6 +258,66 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
|
||||
.sed-img-thumb{width:100%;height:100px;border-radius:6px;background:var(--panel) center/cover no-repeat;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--muted);cursor:pointer;transition:.15s;}
|
||||
.sed-img-thumb:hover{border-color:var(--brand);}
|
||||
.sed-nav-info{font-size:12px;color:var(--muted);text-align:center;flex:1;}
|
||||
|
||||
/* ── Mobile ── */
|
||||
@media(max-width:640px){
|
||||
/* Header: compact */
|
||||
.header{flex-wrap:wrap;padding:7px 12px;gap:6px;}
|
||||
.header h1{font-size:13px;}
|
||||
/* hide theme buttons — they're inside sidebar on mobile */
|
||||
.header > div:has(.theme-btn){display:none;}
|
||||
/* step dots: hide text labels, keep numbers */
|
||||
.sdot{padding:5px 8px;font-size:0;}
|
||||
.sdot .n{font-size:10px;}
|
||||
.step-hint{display:none;}
|
||||
.steps{gap:0;margin-left:auto;}
|
||||
|
||||
/* Sidebar: overlay drawer */
|
||||
.sidebar{
|
||||
position:fixed;top:0;left:0;bottom:0;z-index:500;
|
||||
width:82vw;max-width:310px;
|
||||
transform:translateX(-100%);transition:transform .25s ease;
|
||||
box-shadow:4px 0 28px rgba(0,0,0,.5);
|
||||
order:0;
|
||||
}
|
||||
.sidebar.mob-open{transform:translateX(0);}
|
||||
/* theme buttons inside sidebar on mobile */
|
||||
.sidebar-mob-theme{display:flex !important;}
|
||||
|
||||
#mob-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:499;}
|
||||
#mob-backdrop.show{display:block;}
|
||||
|
||||
/* settings toggle button */
|
||||
.mob-cfg-btn{display:inline-flex !important;}
|
||||
|
||||
/* Step scroll area: bottom padding for bbar */
|
||||
.sv .scroll{padding-bottom:16px;}
|
||||
|
||||
/* Search row: wrap */
|
||||
.srow{flex-wrap:wrap;}
|
||||
.srow input{min-width:0;}
|
||||
|
||||
/* Source checkboxes: narrower */
|
||||
.src-chk{width:calc(50% - 4px);min-width:0;}
|
||||
|
||||
/* Step 2: stack layout */
|
||||
#step-2 .scroll > div[style*="flex:2"],
|
||||
#step-2 .scroll > div[style*="flex:1"]{flex:1 1 100%;}
|
||||
#step-2 .scroll{flex-wrap:wrap;}
|
||||
|
||||
/* Slide editor modal: full screen */
|
||||
.sedmodal{width:100vw !important;height:100dvh !important;max-width:100vw;max-height:100dvh;border-radius:0;left:0;top:0;transform:none;}
|
||||
.sed-body{flex-direction:column;}
|
||||
.sed-ctrl{width:100%;max-height:40vh;border-right:none;border-bottom:1px solid var(--line);}
|
||||
|
||||
/* iOS zoom prevention */
|
||||
input,textarea,select{font-size:16px !important;}
|
||||
}
|
||||
@media(min-width:641px){
|
||||
#mob-backdrop{display:none !important;}
|
||||
.mob-cfg-btn{display:none !important;}
|
||||
.sidebar-mob-theme{display:none !important;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -265,6 +325,7 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
|
||||
<div class="header">
|
||||
<span style="font-size:18px">📊</span>
|
||||
<h1>슬라이드 제작 마법사</h1>
|
||||
<button class="mob-cfg-btn theme-btn" style="display:none;padding:5px 10px" onclick="mobToggleSidebar()">⚙ 설정</button>
|
||||
<div style="display:flex;gap:4px;margin-left:14px">
|
||||
<button class="theme-btn active" id="tbtn-dark" onclick="setTheme('dark')">🌙 다크</button>
|
||||
<button class="theme-btn" id="tbtn-light" onclick="setTheme('light')">☀️ 라이트</button>
|
||||
@@ -279,6 +340,8 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="mob-backdrop" onclick="mobCloseSidebar()"></div>
|
||||
|
||||
<div class="body">
|
||||
|
||||
<!-- ── STEP 1 ── -->
|
||||
@@ -429,7 +492,15 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
|
||||
|
||||
<!-- ── SETTINGS SIDEBAR ── -->
|
||||
<div class="sidebar">
|
||||
<div class="ptitle">설정</div>
|
||||
<div class="ptitle" style="display:flex;align-items:center;justify-content:space-between">
|
||||
<span>설정</span>
|
||||
<div class="sidebar-mob-theme" style="display:none;gap:4px;align-items:center">
|
||||
<button class="theme-btn" id="tbtn-dark2" onclick="setTheme('dark')" style="padding:2px 8px;font-size:11px">🌙</button>
|
||||
<button class="theme-btn" id="tbtn-light2" onclick="setTheme('light')" style="padding:2px 8px;font-size:11px">☀️</button>
|
||||
<button class="theme-btn" id="tbtn-warm2" onclick="setTheme('warm')" style="padding:2px 8px;font-size:11px">🌿</button>
|
||||
<button onclick="mobCloseSidebar()" style="background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px;line-height:1">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll">
|
||||
<div class="field">
|
||||
<button class="btn bgreen" style="width:100%;font-size:12px;padding:7px 0" onclick="newProject()">＋ 새 프로젝트</button>
|
||||
@@ -744,11 +815,23 @@ body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,san
|
||||
'use strict';
|
||||
|
||||
// ── Theme ────────────────────────────────────────────────────────────────────
|
||||
// ── Mobile sidebar ────────────────────────────────────────────────────────────
|
||||
function mobCloseSidebar(){
|
||||
document.querySelector('.sidebar').classList.remove('mob-open');
|
||||
document.getElementById('mob-backdrop').classList.remove('show');
|
||||
}
|
||||
function mobToggleSidebar(){
|
||||
const sb=document.querySelector('.sidebar');
|
||||
const open=sb.classList.contains('mob-open');
|
||||
if(open){mobCloseSidebar();}
|
||||
else{sb.classList.add('mob-open');document.getElementById('mob-backdrop').classList.add('show');}
|
||||
}
|
||||
|
||||
function setTheme(name) {
|
||||
document.body.classList.remove('theme-light','theme-warm');
|
||||
if(name==='light') document.body.classList.add('theme-light');
|
||||
if(name==='warm') document.body.classList.add('theme-warm');
|
||||
document.querySelectorAll('.theme-btn').forEach(b=>b.classList.toggle('active',b.id==='tbtn-'+name));
|
||||
document.querySelectorAll('.theme-btn').forEach(b=>b.classList.toggle('active',b.id==='tbtn-'+name||b.id==='tbtn-'+name+'2'));
|
||||
localStorage.setItem('pptx-wizard-theme',name);
|
||||
}
|
||||
(function(){ setTheme(localStorage.getItem('pptx-wizard-theme')||'dark'); })();
|
||||
|
||||
Reference in New Issue
Block a user