대외게시판
널위한상품 (유튜브 크레이이터들에게 보내는 이메일) 내용
- 스타히로즈 오래 전 2025.10.17 11:47
-
11
0
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>널위한상품 - 크리에이터 파트너십 안내</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #f8f9fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.header {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 30px;
text-align: center;
}
.logo {
font-size: 32px;
font-weight: bold;
color: #ff6b6b;
margin-bottom: 10px;
}
.header h1 {
font-size: 24px;
color: #2c3e50;
margin-bottom: 10px;
}
.header p {
color: #7f8c8d;
font-size: 16px;
}
.product-card {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 25px;
}
.product-info {
display: flex;
gap: 20px;
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 2px solid #ecf0f1;
}
.thumbnail {
width: 200px;
height: 150px;
background: #e9ecef;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #adb5bd;
font-size: 14px;
flex-shrink: 0;
}
.product-details h2 {
font-size: 20px;
margin-bottom: 10px;
color: #2c3e50;
}
.stats {
display: flex;
gap: 20px;
margin-top: 15px;
}
.stat-item {
background: #f8f9fa;
padding: 10px 15px;
border-radius: 6px;
}
.stat-label {
font-size: 12px;
color: #7f8c8d;
margin-bottom: 3px;
}
.stat-value {
font-size: 18px;
font-weight: bold;
color: #2c3e50;
}
.benefits {
background: #f8f9fa;
padding: 25px;
border-radius: 8px;
margin-bottom: 25px;
}
.benefits h3 {
font-size: 18px;
margin-bottom: 20px;
color: #2c3e50;
}
.benefit-section {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
}
.benefit-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.benefit-title {
font-weight: bold;
color: #2c3e50;
margin-bottom: 8px;
font-size: 15px;
}
.benefit-desc {
color: #555;
font-size: 14px;
line-height: 1.7;
padding-left: 10px;
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 25px;
}
.choice-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.choice-title {
text-align: center;
font-weight: 600;
color: #2c3e50;
font-size: 16px;
}
.choice-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 600px) {
.choice-buttons {
grid-template-columns: 1fr;
}
}
.btn {
padding: 16px 24px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
text-align: center;
}
.btn-primary {
background: #4caf50;
color: white;
}
.btn-primary:hover {
background: #45a049;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(76,175,80,0.3);
}
.btn-secondary {
background: #2196F3;
color: white;
}
.btn-secondary:hover {
background: #1976D2;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(33,150,243,0.3);
}
.btn-visit {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 18px;
padding: 20px 24px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.btn-visit:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
.btn-outline {
background: white;
color: #666;
border: 2px solid #ddd;
}
.btn-outline:hover {
background: #f8f9fa;
border-color: #999;
}
.btn-danger {
background: white;
color: #e74c3c;
border: 2px solid #e74c3c;
}
.btn-danger:hover {
background: #e74c3c;
color: white;
}
.info-box {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 15px;
border-radius: 4px;
margin-bottom: 25px;
font-size: 14px;
color: #856404;
}
.footer {
text-align: center;
padding: 30px;
color: #7f8c8d;
font-size: 14px;
}
.dev-note {
background: #e3f2fd;
border-left: 4px solid #2196F3;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 13px;
color: #0d47a1;
}
/* 모달 스타일 */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
animation: fadeIn 0.3s;
}
.modal-content {
background-color: white;
margin: 10% auto;
padding: 0;
border-radius: 12px;
width: 90%;
max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s;
}
.modal-header {
padding: 25px;
border-bottom: 2px solid #f0f0f0;
text-align: center;
}
.modal-header h2 {
font-size: 24px;
margin-bottom: 10px;
}
.modal-body {
padding: 30px;
line-height: 1.8;
}
.modal-body p {
margin-bottom: 15px;
color: #555;
}
.modal-body strong {
color: #2c3e50;
}
.modal-footer {
padding: 20px 30px;
background: #f8f9fa;
border-top: 1px solid #e0e0e0;
text-align: center;
border-radius: 0 0 12px 12px;
}
.modal-footer p {
margin: 5px 0;
font-size: 14px;
color: #7f8c8d;
}
.modal-footer strong {
color: #2c3e50;
font-size: 16px;
}
.close-modal {
background: #667eea;
color: white;
border: none;
padding: 12px 30px;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin-top: 15px;
transition: all 0.3s;
}
.close-modal:hover {
background: #5568d3;
transform: translateY(-2px);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.email-box {
display: inline-flex;
align-items: center;
gap: 10px;
background: #f8f9fa;
padding: 8px 15px;
border-radius: 6px;
margin-top: 10px;
}
.copy-btn {
background: #4caf50;
color: white;
border: none;
padding: 5px 12px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.3s;
}
.copy-btn:hover {
background: #45a049;
}
.copy-btn:active {
transform: scale(0.95);
}
.copied {
background: #2e7d32 !important;
}
.modal-buttons {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 15px;
}
.modal-buttons-row {
display: grid;
grid-template-columns: 7fr 3fr;
gap: 10px;
}
@media (max-width: 500px) {
.modal-buttons-row {
grid-template-columns: 1fr;
}
}
.btn-explore {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn-explore:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.btn-reject {
background: white;
color: #e74c3c;
border: 2px solid #e74c3c;
padding: 12px 24px;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.btn-reject:hover {
background: #e74c3c;
color: white;
transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="container">
<!-- 개발자 안내 -->
<div class="dev-note">
<strong>???? 개발자 참고사항:</strong><br>
URL 예시: <code>?product_id=12345&creator_name=홍길동&video_title=혁신적인주방식기건조대&category=주방용품&views=1247&revenue=12500&start_date=2025.10.15&end_date=2025.12.14</code><br>
위 파라미터를 이메일 발송 시 동적으로 생성하여 전달하면, 상품 정보와 둘러보기 링크가 자동으로 설정됩니다.
</div>
<div class="header">
<div class="logo">????️ 널위한상품</div>
<h1>유튜버 크리에이터 파트너십 제안</h1>
<p>귀하의 독특하고 재미난 상품이 저희 플랫폼에 소개되었습니다.</p>
<p>유튜브의 고정 채널 외에도 [널위한 상품]으로도 2달간 홍보해드리겠습니다.</p>
</div>
<div class="product-card">
<p style="color: #ff1493; font-weight: 700; margin-bottom: 20px; font-size: 18px;">
???? 아래, 유튜브 쇼츠 상품이 소개 될 예정입니다
</p>
<div class="product-info">
<div class="thumbnail">
영상 썸네일
</div>
<div class="product-details">
<h2 id="product-title">혁신적인 주방 식기건조대</h2>
<p style="color: #7f8c8d; margin-bottom: 5px;">
<strong>카테고리:</strong> <span id="product-category">주방용품</span>
</p>
<p style="color: #7f8c8d; margin-bottom: 10px;">
업로드 노출일: <span id="exposure-date">2025.10.15 ~ 2025.12.14 (60일)</span>
</p>
<div class="stats">
<div class="stat-item">
<div class="stat-label">현재 조회수</div>
<div class="stat-value" id="views-count">1,247</div>
</div>
<div class="stat-item">
<div class="stat-label">예상 수익</div>
<div class="stat-value" id="revenue-amount">12,500원</div>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 25px;">
<button class="btn btn-visit" id="visit-btn" style="width: 100%; margin-bottom: 10px;">
????️ 널위한 상품 : 둘러보기
</button>
<p style="text-align: center; font-size: 13px; color: #7f8c8d;">
사이트 이동 후, "<span id="search-keyword" style="font-weight: 600; color: #667eea;">혁신적인 주방 식기건조대</span>"를 검색하면 바로 찾을 수 있습니다.
</p>
</div>
<div class="benefits">
<h3>???? 널위한상품이 크리에이터들에게 좋은 이유</h3>
<div class="benefit-section">
<div class="benefit-title">1) 바로 구매 가능</div>
<div class="benefit-desc">
구독자 1천 명 없어도 [바로 구매] 버튼 활성화됩니다.<br>
→ 유저가 바로 고민없이 구매합니다.
</div>
</div>
<div class="benefit-section">
<div class="benefit-title">2) 무료 마케팅 효과</div>
<div class="benefit-desc">
2달동안 100% 수익(크리에이터 분의 링크)로 유입됩니다.<br>
→ 즉 2달간 마케팅비용 없이 수익이 발생됩니다.
</div>
</div>
<div class="benefit-section">
<div class="benefit-title">3) 노출빈도수 높음</div>
<div class="benefit-desc">
• 해당 상품은 카테고리별 100개만 엄선할 겁니다.<br>
• 아무 상품을 노출하지 않고, 영상도 재미나고 아이디어 상품위주만 큐레이션으로 선별합니다.<br>
→ 경쟁이 치열하지 않기에 <strong>"노출 빈도수"가 높습니다.</strong><br>
→ 장기 노출 보장 - 유튜브처럼 3일 후 묻히지 않고 오랫동안 유지합니다.
</div>
</div>
<div class="benefit-section">
<div class="benefit-title">4) 바이럴 확산 용이</div>
<div class="benefit-desc">
상품 상단의 "공유"버튼으로 카톡 공유 최적화되기에, 유저 간 바이럴에 효과가 큽니다.
</div>
</div>
<div class="benefit-section">
<div class="benefit-title">5) 기존 유튜브에 지장 없음</div>
<div class="benefit-desc">
기존 채널 영향 없음, 추가 수익 채널만 생성됩니다.
</div>
</div>
<div class="benefit-section">
<div class="benefit-title">6) 다른 상품도 가능</div>
<div class="benefit-desc">
다만, 모든 상품이 "널위한 상품"에 들어갈 수 없고, 아직 초장기라서 "널위한상품" 내부 관리자가 엄선해서 선별하여 들어갈 예정입니다.<br>
→ 다른 상품도 넣기를 희망하면 메일로 답변 부탁합니다.<br>
→ 2달 이후에도 계속 상품홍보 유지하고 싶다면 아래 링크로 선택하세요<br>
(단, 2달 이후는 유저입장에서 링크 연결이 50%만 해당되는 점 양해바랍니다.<br>
<strong>→ 2달 후는 해당 크리에이터 5 : 널위한 상품 제작 5로 연결합니다</strong>)
</div>
</div>
</div>
<div class="info-box">
ℹ️ <strong>수익 구조:</strong> 첫 2개월은 100% 귀속, 이후 협의 시 5:5 배분
</div>
<div class="action-buttons">
<div class="choice-section">
<p class="choice-title">아래 3개의 버튼 중 어떻게 상품 홍보를 희망하나요?</p>
<div class="choice-buttons">
<button class="btn btn-primary" onclick="handleAction('continue')">
???? 2개월 후 계속협력<br>5:5 배분승인
</button>
<button class="btn btn-secondary" onclick="handleAction('trial')">
✅ 2개월만 홍보부탁<br>(100% 크리에이터 수익)
</button>
<button class="btn btn-danger" onclick="handleAction('remove')">
❌ 홍보거절<br>게시물 내려주세요
</button>
</div>
</div>
</div>
</div>
<div class="footer">
<p>문의사항이 있으시면 이메일로 연락주세요</p>
<div class="email-box">
<strong>g5soft500@gmail.com</strong>
<button class="copy-btn" onclick="copyEmail('g5soft500@gmail.com', this)">복사</button>
</div>
</div>
</div>
<!-- 모달 팝업들 -->
<!-- 계속 협력 모달 -->
<div id="continueModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>???? 파트너십 승인 감사합니다!</h2>
</div>
<div class="modal-body">
<p><strong>2개월 후 5:5 배분 협력이 확정되었습니다.</strong></p>
<p>✅ 첫 2개월: 100% 크리에이터님 수익</p>
<p>✅ 2개월 후: 5:5 배분으로 지속적인 수익 창출</p>
<p>향후 진행 절차:</p>
<p style="padding-left: 20px;">
1. 상품 노출 시작 (즉시)<br>
2. 세부 계약서 이메일 발송 (3일 이내)<br>
3. 수익 정산 안내 (매월 초)
</p>
<p>함께 성장할 수 있어 기쁩니다! ????</p>
</div>
<div class="modal-footer">
<p>문의사항이 있으시면 언제든 연락주세요</p>
<div class="modal-buttons">
<div class="email-box" style="justify-content: center;">
<strong>g5soft500@gmail.com</strong>
<button class="copy-btn" onclick="copyEmail('g5soft500@gmail.com', this)">복사</button>
</div>
<button class="close-modal" onclick="closeModal('continueModal')">확인</button>
</div>
</div>
</div>
</div>
<!-- 2개월만 홍보 모달 -->
<div id="trialModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>✅ 2개월 무료 홍보가 확정되었습니다!</h2>
</div>
<div class="modal-body">
<p><strong>감사합니다! 2개월간 100% 수익을 받으실 수 있습니다.</strong></p>
<p>???? 홍보 기간: 60일</p>
<p>???? 수익 배분: 100% 크리에이터님 귀속</p>
<p>???? 수익 정산: 매월 1일 정산 후 이메일 안내</p>
<p>2개월 후 상품 노출이 자동으로 종료되며,<br>
계속 협력을 원하시면 그때 다시 연락드리겠습니다.</p>
<p>좋은 성과 있기를 응원합니다! ????</p>
</div>
<div class="modal-footer">
<p>문의사항이 있으시면 언제든 연락주세요</p>
<div class="modal-buttons">
<div class="email-box" style="justify-content: center;">
<strong>g5soft500@gmail.com</strong>
<button class="copy-btn" onclick="copyEmail('g5soft500@gmail.com', this)">복사</button>
</div>
<button class="close-modal" onclick="closeModal('trialModal')">확인</button>
</div>
</div>
</div>
</div>
<!-- 홍보 거절 모달 -->
<div id="removeModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>???? 정말 거절하시겠습니까?</h2>
</div>
<div class="modal-body">
<p><strong>잠깐만요! 결정하기 전에 한 번 더 생각해보세요.</strong></p>
<p>???? 첫 2개월은 100% 크리에이터님의 수익입니다</p>
<p>???? 추가 비용이나 의무사항이 전혀 없습니다</p>
<p>???? 기존 유튜브 채널에는 아무 영향이 없습니다</p>
<p style="margin-top: 15px; padding: 12px; background: #e3f2fd; border-radius: 6px; border-left: 4px solid #2196F3;">
???? <strong>"널위한상품"</strong> 사이트를 한번 둘러보시는 건 어떨까요?<br>
다른 크리에이터들이 어떻게 상품을 홍보하고 있는지 확인해보실 수 있습니다!
</p>
<p style="margin-top: 10px; color: #7f8c8d; font-size: 14px;">
그래도 거절을 원하시면 아래 <strong>"요청거절"</strong> 버튼을 눌러주세요.<br>
24시간 내에 게시물이 삭제 처리됩니다.
</p>
</div>
<div class="modal-footer">
<p>문의사항이 있으시면 언제든 연락주세요</p>
<div class="modal-buttons">
<div class="email-box" style="justify-content: center;">
<strong>g5soft500@gmail.com</strong>
<button class="copy-btn" onclick="copyEmail('g5soft500@gmail.com', this)">복사</button>
</div>
<div class="modal-buttons-row">
<button class="btn-explore" onclick="window.open('https://4ufood.com/md/', '_blank')">
널위한상품 둘러보기
</button>
<button class="btn-reject" onclick="confirmReject()">
요청거절
</button>
</div>
</div>
</div>
</div>
</div>
<script>
// URL 파라미터에서 데이터 추출
const urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get('product_id') || '12345';
const creatorName = urlParams.get('creator_name') || '크리에이터';
const videoTitle = urlParams.get('video_title') || '혁신적인 주방 식기건조대';
const category = urlParams.get('category') || '주방용품';
const views = urlParams.get('views') || '1,247';
const revenue = urlParams.get('revenue') || '12,500';
const startDate = urlParams.get('start_date') || '2025.10.15';
const endDate = urlParams.get('end_date') || '2025.12.14';
// 페이지 로드 시 동적 데이터 삽입
document.addEventListener('DOMContentLoaded', function() {
// 상품 정보 업데이트
document.getElementById('product-title').textContent = videoTitle;
document.getElementById('product-category').textContent = category;
document.getElementById('exposure-date').textContent = `${startDate} ~ ${endDate} (60일)`;
document.getElementById('views-count').textContent = views;
document.getElementById('revenue-amount').textContent = `${revenue}원`;
// 검색 키워드 업데이트
document.getElementById('search-keyword').textContent = videoTitle;
// 둘러보기 버튼 링크 설정 - 메인 페이지로 이동
const visitBtn = document.getElementById('visit-btn');
visitBtn.onclick = function() {
window.open('https://4ufood.com/md/', '_blank');
};
});
function handleAction(action) {
switch(action) {
case 'continue':
document.getElementById('continueModal').style.display = 'block';
break;
case 'trial':
document.getElementById('trialModal').style.display = 'block';
break;
case 'remove':
document.getElementById('removeModal').style.display = 'block';
break;
}
}
function closeModal(modalId) {
document.getElementById(modalId).style.display = 'none';
}
// 이메일 복사 함수
function copyEmail(email, button) {
navigator.clipboard.writeText(email).then(function() {
const originalText = button.textContent;
button.textContent = '복사완료!';
button.classList.add('copied');
setTimeout(function() {
button.textContent = originalText;
button.classList.remove('copied');
}, 2000);
}).catch(function(err) {
alert('복사에 실패했습니다. 직접 복사해주세요.');
});
}
// 거절 확정 함수
function confirmReject() {
alert('요청이 거절되었습니다.\n24시간 내에 게시물이 삭제 처리됩니다.');
closeModal('removeModal');
// 여기서 서버로 거절 요청 전송
// fetch('/api/reject-partnership', { method: 'POST', body: JSON.stringify({ productId }) });
}
// 모달 외부 클릭 시 닫기
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
}
</script>
</body>
</html>
- 이전글블록몬스터 1~60 스테이지 구성2025.10.22
- 다음글블록몬스터 스테이징 별 구분 ~!2025.10.15
댓글목록
등록된 댓글이 없습니다.