간단 소스 편집기

허용: css/, page/ · 확장자: html/css/js

새로고침

파일 목록

css

css/app.js css/app.js css/style.css css/style.css

page

page/account

계정 수동 생성 ❓ page/account/account_create.html 무료 계정 ❓ page/account/free_account_list.html 무료 계정 > 상세 정보 (탭형) ❓ page/account/free_account_view_tab.html 유료 계정 ❓ page/account/paid_account_list.html 유료 계정 상세 정보 ❓ page/account/paid_account_view.html 유료 계정 > 상세 정보 (탭형) ❓ page/account/paid_account_view_tab.html

page/main

대시보드 ❓ page/main/main.html

page/ops

관리자 추가 ❓ page/ops/admin_form.html 관리자 리스트 ❓ page/ops/admin_list.html 관리자 수정 ❓ page/ops/admin_modify.html API 로그 ❓ page/ops/api_log.html 메일발송 로그 ❓ page/ops/mail_log.html SMS 발송 로그 ❓ page/ops/sms_log.html

page/payment

page/payment/customer_pay_log.html page/payment/customer_pay_log.html page/payment/customer_refund_list.html page/payment/customer_refund_list.html 도메인 SSL 연장 로그 ❓ page/payment/domain_log.html 결제 리스트 ❓ page/payment/pay_log.html 포인트 사용 로그 ❓ page/payment/point_log.html 환불 등록 ❓ page/payment/refund_form.html 환불 리스트 ❓ page/payment/refund_list.html 세금/현금영수증 ❓ page/payment/tax_doc.html page/payment/user_pay_log.html page/payment/user_pay_log.html page/payment/user_refund_log.html page/payment/user_refund_log.html

page/product

상품 등록 ❓ page/product/product_form.html 상품 리스트 ❓ page/product/product_list.html 상품 상세 ❓ page/product/product_view.html

page/settle

계정 정산 리스트 ❓ page/settle/month_list.html page/settle/settle_log.html page/settle/settle_log.html

page/sidebar_menu.html

page/sidebar_menu.html page/sidebar_menu.html

page/site

FAQ 등록 ❓ page/site/faq_form.html FAQ ❓ page/site/faq_list.html 공지사항 등록 ❓ page/site/notice_form.html 공지사항 ❓ page/site/notice_list.html 공지사항 상세 ❓ page/site/notice_view.html 페이지 추가 ❓ page/site/page_form.html 페이지 관리 ❓ page/site/page_list.html 페이지 수정 ❓ page/site/page_modify.html 팝업창 수정 ❓ page/site/popup_form.html 팝업창 ❓ page/site/popup_list.html page/site/popup_modify.html page/site/popup_modify.html 1:1 문의 상세 ❓ page/site/qna_form.html 1:1 문의 ❓ page/site/qna_list.html SEO 관리 ❓ page/site/seo.html

page/stats

page/stats/account.html page/stats/account.html page/stats/sales.html page/stats/sales.html page/stats/visit.html page/stats/visit.html

편집

page/site/popup_form.html

<style>
.popup-editor{
  background:#1e1e1e;
  color:#f1f1f1;
  border:1px solid #444;
  font-size:13px;
  line-height:1.5;
}
.popup-editor:focus{
  background:#1e1e1e;
  color:#ffffff;
  border-color:#0d6efd;
  box-shadow:none;
}
</style>

<div class="d-flex align-items-center justify-content-between mb-3">
  <div>
    <h1 class="h4 mb-1">팝업창 수정

<button type="button" class="btn btn-link btn-sm p-0 ms-2 align-baseline"
        onclick="openPageHelp(this)"
        data-title="팝업창 수정">  ❓
</button>

</h1>
    <div class="text-muted">팝업 노출 조건과 내용을 설정합니다.</div>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <form id="popup_form" onsubmit="return false;">
      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <tbody>
            <tr>
              <th style="width:200px;">팝업창 활성화</th>
              <td class="text-start">
                <div class="d-flex gap-4 flex-wrap">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="is_active" id="is_active_y" value="Y">
                    <label class="form-check-label" for="is_active_y">작동</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="is_active" id="is_active_n" value="N" checked>
                    <label class="form-check-label" for="is_active_n">멈춤</label>
                  </div>
                </div>
              </td>
            </tr>

<tr>
              <th>팝업창 제목</th>
              <td class="text-start">
                <input type="text" class="form-control" value="사이트 오픈 일정 안내" style="max-width:520px;">
              </td>
            </tr>

<tr>
              <th>팝업 위치(URL)</th>
              <td class="text-start">
                <input type="url" class="form-control" value="https://juksmi.ubik.co.kr/main.php" style="max-width:720px;">
                <div class="form-text">정확한 절대 URL(https://...)</div>
              </td>
            </tr>

<tr>
              <th>팝업 시작일</th>
              <td class="text-start">
                <input type="datetime-local" class="form-control" value="2026-01-02T00:03" style="max-width:320px;">
              </td>
            </tr>

<tr>
              <th>팝업 종료일</th>
              <td class="text-start">
                <input type="datetime-local" class="form-control" value="2026-01-02T22:59" style="max-width:320px;">
              </td>
            </tr>

<tr>
              <th>가로세로 위치</th>
              <td class="text-start">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                  <span class="text-muted">X축</span>
                  <input type="number" class="form-control" value="100" style="width:120px;">
                  <span class="text-muted">px</span>

<span class="ms-3 text-muted">Y축</span>
                  <input type="number" class="form-control" value="120" style="width:120px;">
                  <span class="text-muted">px</span>
                </div>
              </td>
            </tr>

<tr>
              <th>팝업창 크기</th>
              <td class="text-start">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                  <span class="text-muted">가로</span>
                  <input type="number" class="form-control" value="520" style="width:120px;">
                  <span class="text-muted">px</span>

<span class="ms-3 text-muted">세로</span>
                  <input type="number" class="form-control" value="480" style="width:120px;">
                  <span class="text-muted">px</span>
                </div>
              </td>
            </tr>

<tr>
              <th>스크롤</th>
              <td class="text-start">
                <div class="d-flex gap-4 flex-wrap">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="scroll" id="scroll_y" value="Y">
                    <label class="form-check-label" for="scroll_y">Yes</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="scroll" id="scroll_n" value="N">
                    <label class="form-check-label" for="scroll_n">No</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="scroll" id="scroll_a" value="A" checked>
                    <label class="form-check-label" for="scroll_a">Auto</label>
                  </div>
                </div>
              </td>
            </tr>

<tr>
  <th>내용(HTML)</th>
  <td class="text-start">
    
    <div class="d-flex justify-content-start gap-2 mb-2 flex-wrap">
      <button type="button" class="btn btn-outline-primary btn-sm" onclick="protoAlert('미리보기(프로토타입)')">미리보기</button>
      <button type="button" class="btn btn-outline-primary btn-sm" onclick="protoAlert('페이지 열기(프로토타입)')">페이지 열기</button>
      <button type="button" class="btn btn-outline-primary btn-sm" onclick="protoAlert('오늘보기 초기화(프로토타입)')">오늘보기 초기화</button>
    </div>

<textarea 
      class="form-control font-monospace popup-editor" 
      rows="14"
      style="max-width:980px;">
  &lt;div style="box-sizing:border-box; padding:22px; font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif; color:#222;"&gt;
  &lt;h2 style="margin:0 0 12px; font-size:20px; font-weight:700; color:#0b3d91;"&gt;새로운 사이트 오픈!&lt;/h2&gt;
  &lt;p style="font-size:14px; line-height:1.6; margin-bottom:16px;"&gt;
    오랫동안 준비해 온 &lt;strong&gt;새로운 공식 홈페이지&lt;/strong&gt;가 드디어 오픈합니다.&lt;br&gt;
    많은 관심과 성원 부탁드립니다!
  &lt;/p&gt;

&lt;div style="padding:14px; border-radius:10px; background:#f4f8ff; border:1px solid #cddff7; margin-bottom:16px;"&gt;
    &lt;ul style="margin:0; padding:0 0 0 18px; font-size:14px; line-height:1.6;"&gt;
      &lt;li&gt;&lt;strong&gt;정식 오픈일&lt;/strong&gt; : 2025년 10월 15일(수)&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;서비스 시간&lt;/strong&gt; : 오전 10시부터&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;주소&lt;/strong&gt; : &lt;a href="https://YOUR-DOMAIN/" style="color:#0b3d91;"&gt;https://YOUR-DOMAIN/&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

&lt;p style="font-size:13px; color:#555; margin:0 0 16px;"&gt;
    기존 즐겨찾기, 북마크는 새 주소로 교체 부탁드립니다.&lt;br&gt;
    더 좋은 서비스로 찾아뵙겠습니다.
  &lt;/p&gt;

&lt;div style="text-align:center;"&gt;
    &lt;a href="main.php" style="display:inline-block; padding:10px 14px; border-radius:10px; background:#0b3d91; color:#fff; text-decoration:none; font-weight:700;"&gt;메인으로 이동&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

</textarea>

<div class="form-text">팝업 본문은 HTML로 입력합니다. (프로토타입은 실제 렌더링/검증 없음)</div>
              </td>
            </tr>

</tbody>
        </table>
      </div>
    </form>
  </div>
</div>

<div class="mt-4">
  <div class="d-flex justify-content-center gap-3">
    <a class="btn btn-outline-secondary px-4" href="app.php?p=page/site/popup_list.html">목록</a>
    <button class="btn btn-primary px-4" type="button" onclick="protoAlert('저장(프로토타입)')">저장</button>
  </div>
</div>

<script>
  function protoAlert(msg){ alert(msg); }
</script>