prototype final
This commit is contained in:
cherry2250
parent
d753db712e
commit
9d4dea6235
@ -16,7 +16,7 @@
|
||||
<div class="container" style="max-width: 600px;">
|
||||
<!-- User Info Section -->
|
||||
<section class="mt-lg mb-xl text-center">
|
||||
<div class="mb-md" style="display: inline-block; width: 80px; height: 80px; background: var(--color-gray-100); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;">
|
||||
<div class="mb-md" style="width: 80px; height: 80px; background: var(--color-gray-100); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;">
|
||||
<span class="material-icons" style="font-size: 48px; color: var(--color-gray-400);">person</span>
|
||||
</div>
|
||||
<h2 class="text-title" id="userName">홍길동</h2>
|
||||
|
||||
@ -425,8 +425,8 @@
|
||||
|
||||
KTEventApp.Utils.saveToStorage('selected_recommendation', recommendationData);
|
||||
|
||||
// 콘텐츠 편집 페이지로 이동
|
||||
window.location.href = '10-콘텐츠편집.html';
|
||||
// SNS 이미지 생성 페이지로 이동
|
||||
window.location.href = '09-콘텐츠미리보기.html';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -34,6 +34,40 @@
|
||||
color: var(--color-gray-400);
|
||||
text-align: center;
|
||||
}
|
||||
.style-card {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
.style-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.style-card.selected {
|
||||
border-color: var(--color-kt-red);
|
||||
box-shadow: 0 4px 12px rgba(227, 30, 36, 0.2);
|
||||
}
|
||||
.style-card .form-check-input {
|
||||
display: none;
|
||||
}
|
||||
.selected-badge {
|
||||
position: absolute;
|
||||
top: var(--spacing-md);
|
||||
right: var(--spacing-md);
|
||||
background: var(--color-kt-red);
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-full);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
.style-card.selected .selected-badge {
|
||||
display: flex;
|
||||
}
|
||||
.fullscreen-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -110,7 +144,17 @@
|
||||
<!-- Style 1: 심플 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">스타일 1: 심플</h3>
|
||||
<div class="card">
|
||||
<div class="card style-card" data-style="simple">
|
||||
<div class="selected-badge">
|
||||
<span class="material-icons" style="font-size: 20px">check</span>
|
||||
</div>
|
||||
<input
|
||||
type="radio"
|
||||
name="imageStyle"
|
||||
id="style1"
|
||||
value="simple"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<div class="image-preview mb-md">
|
||||
<div class="image-preview-placeholder">
|
||||
<span class="material-icons" style="font-size: 48px"
|
||||
@ -124,17 +168,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="radio"
|
||||
name="imageStyle"
|
||||
id="style1"
|
||||
value="simple"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label for="style1" class="form-check-label">선택</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<button
|
||||
class="btn btn-text btn-small preview-btn"
|
||||
data-style="simple"
|
||||
@ -149,7 +183,17 @@
|
||||
<!-- Style 2: 화려 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">스타일 2: 화려</h3>
|
||||
<div class="card">
|
||||
<div class="card style-card" data-style="fancy">
|
||||
<div class="selected-badge">
|
||||
<span class="material-icons" style="font-size: 20px">check</span>
|
||||
</div>
|
||||
<input
|
||||
type="radio"
|
||||
name="imageStyle"
|
||||
id="style2"
|
||||
value="fancy"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<div
|
||||
class="image-preview mb-md"
|
||||
style="
|
||||
@ -168,17 +212,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="radio"
|
||||
name="imageStyle"
|
||||
id="style2"
|
||||
value="fancy"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label for="style2" class="form-check-label">선택</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<button
|
||||
class="btn btn-text btn-small preview-btn"
|
||||
data-style="fancy"
|
||||
@ -193,7 +227,17 @@
|
||||
<!-- Style 3: 트렌디 -->
|
||||
<section class="mb-lg">
|
||||
<h3 class="text-headline mb-md">스타일 3: 트렌디</h3>
|
||||
<div class="card">
|
||||
<div class="card style-card" data-style="trendy">
|
||||
<div class="selected-badge">
|
||||
<span class="material-icons" style="font-size: 20px">check</span>
|
||||
</div>
|
||||
<input
|
||||
type="radio"
|
||||
name="imageStyle"
|
||||
id="style3"
|
||||
value="trendy"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<div
|
||||
class="image-preview mb-md"
|
||||
style="
|
||||
@ -212,17 +256,7 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="radio"
|
||||
name="imageStyle"
|
||||
id="style3"
|
||||
value="trendy"
|
||||
class="form-check-input"
|
||||
/>
|
||||
<label for="style3" class="form-check-label">선택</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<button
|
||||
class="btn btn-text btn-small preview-btn"
|
||||
data-style="trendy"
|
||||
@ -314,16 +348,35 @@
|
||||
// 선택 상태 관리
|
||||
let selectedStyle = null;
|
||||
|
||||
document.querySelectorAll('input[name="imageStyle"]').forEach((radio) => {
|
||||
radio.addEventListener("change", function () {
|
||||
selectedStyle = this.value;
|
||||
// 카드 클릭 이벤트
|
||||
document.querySelectorAll('.style-card').forEach((card) => {
|
||||
card.addEventListener('click', function(e) {
|
||||
// 크게보기 버튼 클릭은 무시
|
||||
if (e.target.closest('.preview-btn')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const styleValue = this.dataset.style;
|
||||
const radioInput = this.querySelector('input[name="imageStyle"]');
|
||||
|
||||
// 모든 카드의 선택 상태 제거
|
||||
document.querySelectorAll('.style-card').forEach(c => {
|
||||
c.classList.remove('selected');
|
||||
});
|
||||
|
||||
// 현재 카드 선택
|
||||
this.classList.add('selected');
|
||||
radioInput.checked = true;
|
||||
|
||||
selectedStyle = styleValue;
|
||||
document.getElementById("nextBtn").disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
// 크게보기 버튼
|
||||
document.querySelectorAll(".preview-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", function () {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.stopPropagation(); // 카드 클릭 이벤트 방지
|
||||
const style = this.dataset.style;
|
||||
openFullscreen(style);
|
||||
});
|
||||
|
||||
@ -146,12 +146,6 @@
|
||||
const title = document.getElementById('titleInput').value;
|
||||
const prize = document.getElementById('prizeInput').value;
|
||||
const guide = document.getElementById('guideInput').value;
|
||||
const bgColor = document.getElementById('bgColorInput').value;
|
||||
const textColor = document.getElementById('textColorInput').value;
|
||||
|
||||
const preview = document.getElementById('preview');
|
||||
preview.style.background = `linear-gradient(135deg, ${bgColor} 0%, #764ba2 100%)`;
|
||||
preview.style.color = textColor;
|
||||
|
||||
document.getElementById('previewTitle').textContent = title || '제목을 입력하세요';
|
||||
document.getElementById('previewPrize').textContent = prize || '경품을 입력하세요';
|
||||
@ -181,53 +175,12 @@
|
||||
updateCharCount();
|
||||
});
|
||||
|
||||
// 색상 선택 이벤트
|
||||
document.getElementById('bgColorInput').addEventListener('change', function() {
|
||||
document.getElementById('bgColorSwatch').style.background = this.value;
|
||||
updatePreview();
|
||||
});
|
||||
|
||||
document.getElementById('textColorInput').addEventListener('change', function() {
|
||||
document.getElementById('textColorSwatch').style.background = this.value;
|
||||
updatePreview();
|
||||
});
|
||||
|
||||
document.getElementById('accentColorInput').addEventListener('change', function() {
|
||||
document.getElementById('accentColorSwatch').style.background = this.value;
|
||||
});
|
||||
|
||||
// 로고 위치 이동
|
||||
let logoPosition = 0;
|
||||
window.moveLogo = function(direction) {
|
||||
if (direction === 'left' && logoPosition > -2) {
|
||||
logoPosition--;
|
||||
} else if (direction === 'right' && logoPosition < 2) {
|
||||
logoPosition++;
|
||||
}
|
||||
// 실제로는 로고 위치 조정 로직 구현
|
||||
KTEventApp.Feedback.showToast(`로고를 ${direction === 'left' ? '왼쪽' : '오른쪽'}으로 이동했습니다`);
|
||||
};
|
||||
|
||||
// 로고 크기 조절
|
||||
let logoSize = 1;
|
||||
const logoSizeLabels = ['작게', '중간', '크게'];
|
||||
window.resizeLogo = function(delta) {
|
||||
logoSize = Math.max(0, Math.min(2, logoSize + delta));
|
||||
document.getElementById('logoSize').textContent = logoSizeLabels[logoSize];
|
||||
KTEventApp.Feedback.showToast(`로고 크기: ${logoSizeLabels[logoSize]}`);
|
||||
};
|
||||
|
||||
// 저장 버튼
|
||||
document.getElementById('saveBtn').addEventListener('click', function() {
|
||||
const editData = {
|
||||
title: document.getElementById('titleInput').value,
|
||||
prize: document.getElementById('prizeInput').value,
|
||||
guide: document.getElementById('guideInput').value,
|
||||
bgColor: document.getElementById('bgColorInput').value,
|
||||
textColor: document.getElementById('textColorInput').value,
|
||||
accentColor: document.getElementById('accentColorInput').value,
|
||||
logoPosition: logoPosition,
|
||||
logoSize: logoSize
|
||||
guide: document.getElementById('guideInput').value
|
||||
};
|
||||
|
||||
KTEventApp.Utils.saveToStorage('content_edit', editData);
|
||||
@ -240,12 +193,7 @@
|
||||
const editData = {
|
||||
title: document.getElementById('titleInput').value,
|
||||
prize: document.getElementById('prizeInput').value,
|
||||
guide: document.getElementById('guideInput').value,
|
||||
bgColor: document.getElementById('bgColorInput').value,
|
||||
textColor: document.getElementById('textColorInput').value,
|
||||
accentColor: document.getElementById('accentColorInput').value,
|
||||
logoPosition: logoPosition,
|
||||
logoSize: logoSize
|
||||
guide: document.getElementById('guideInput').value
|
||||
};
|
||||
|
||||
KTEventApp.Utils.saveToStorage('content_edit', editData);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user