CreatorLMS Editor

<style>
  .kv-list{ display:flex; flex-direction:column; gap:.65rem; }
  .kv-row{ display:flex; align-items:flex-start; gap:12px; }
  .kv-label{ width:160px; font-weight:600; color:#374151; white-space:nowrap; padding-top:6px; }
  .kv-sep{ width:1px; background:rgba(0,0,0,.08); margin-top:4px; margin-bottom:4px; }
  .kv-value{ flex:1; min-width:0; padding-top:0; }
  .kv-value, .kv-value *{ text-align:left; }

.inline-actions{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
  .radio-row{ display:flex; flex-wrap:wrap; gap:.75rem 1.2rem; padding-top:4px; }
  .radio-row .form-check{ margin:0; }

.readonly-like{
    background:#f8f9fa; border:1px solid rgba(0,0,0,.12);
    border-radius:.5rem; padding:.5rem .75rem; min-height:38px;
    display:flex; align-items:center;
  }

.panel{
    border:1px solid rgba(0,0,0,.08);
    border-radius:.75rem;
    background:#fff;
    padding:12px;
    margin-top:10px;
  }
  .help-muted{ color:#6b7280; font-size:.85rem; }

@media (max-width: 576px){
    .kv-label{ width:120px; }
  }
</style>
<script>
  function pa(e, msg){
    if(e) e.preventDefault();
    alert(msg);
    return false;
  }
</script>
<div class="d-flex align-items-center justify-content-between mb-2">
  <div>
    <h1 class="h4 mb-1">계정 수동 생성

</h1>
    <div class="text-muted">관리자가 유료 및 무료 계정을 직접 생성합니다. </div>
  </div>
</div>

<div class="kv-row">
            <div class="kv-label"><span class="text-danger me-1">*</span> 계정 아이디</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="inline-actions">
                <input type="email" class="form-control"  style="max-width:200px;">.creatorlms.com
		<button type="button" class="btn btn-outline-secondary" onclick="alert('이 버튼은 중복 검사 팝업을 띄웁니다.');">중복검사 </button>
              </div>
              <div class="form-text">* 계정 아이디는 영문 숫자 -(하이픈)이 허용되며 2자 이상으로 구성합니다.</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label"><span class="text-danger me-1">*</span>  계정 플랜</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="radio-row">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="plan" id="plan_free"
                    onchange="
                      document.getElementById('freePanel').style.display='block';
                      document.getElementById('paidPanel').style.display='none';
                    ">
                  <label class="form-check-label" for="plan_free">무료</label>
                </div>

<div id="freePanel" class="panel" style="display:none;">
                <div class="fw-semibold mb-2">계정유형</div>
                <div class="radio-row">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="acct_type_free" id="acct_ops" checked>
                    <label class="form-check-label" for="acct_ops">운영</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="acct_type_free" id="acct_test">
                    <label class="form-check-label" for="acct_test">테스트</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="acct_type_free" id="acct_demo">
                    <label class="form-check-label" for="acct_demo">데모</label>
                  </div>
                </div>
                <div class="help-muted mt-2">* 무료 플랜에서만 계정유형을 선택합니다.</div>
              </div>

<div id="paidPanel" class="panel" style="display:none;">
                <div class="fw-semibold mb-2">상품 선택</div>
                <div class="radio-row">
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="product_paid" id="prod_starter" checked>
                    <label class="form-check-label" for="prod_starter">Starter</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="product_paid" id="prod_builder">
                    <label class="form-check-label" for="prod_builder">Builder</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="product_paid" id="prod_growth">
                    <label class="form-check-label" for="prod_growth">Growth</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="product_paid" id="prod_advanced">
                    <label class="form-check-label" for="prod_advanced">Advanced</label>
                  </div>
                </div>
                <div class="help-muted mt-2">* 유료 플랜에서만 상품을 선택합니다.</div>
              </div>

<div class="form-text mt-2">* 플랜을 선택하면 해당 옵션이 아래에 표시됩니다.</div>
            </div>
          </div>

</div>
        <div class="border-top pt-3 mt-3 d-flex justify-content-center gap-2">
          <a class="btn btn-outline-secondary" href="app.php?p=page/account/paid_account_list.html">계정 목록</a>
          <a class="btn btn-primary" href="#">계정 생성</a>
        </div>
        <div class="form-text mt-2">* “계정 생성”을 클릭하면  리스트 혹은 상세화면으로 이동</div>
        <div class="form-text mt-2">* “계정 목록”을 누르면 클릭하면 유료 계정(리스트)로 이동</div>
      </div>
    </div>
  </div>
</div>

간단 소스 편집기