CodeGrid UI

Category

Tag

All Colors

formProgress

/src/assets2/scss/_components-app.scss
  • app-item
  • app-form
  1. 1. ログイン方法について
  2. 2. クレジットカード登録
  3. 3. 登録完了
<div class="CG2-formProgress">
  <ol>
    <li>1. ログイン方法について</li>
    <li class="CG2-formProgress__item--current">2. クレジットカード登録</li>
    <li>3. 登録完了</li>
  </ol>
</div>

signupFrom

/src/assets2/scss/_components-app.scss
  • app-item
  • app-form

ログイン方法について(未ログイン)

購読料は月額800円(税抜)
初回登録時は30日間無料

※CodeGridの購読にはGoogleアカウントが必要です。
Googleアカウント作成

<div class="CG2-signupFrom">
  <div class="CG2-signupFrom__lead">
    購読料は月額800円(税抜)
    <div class="CG2-signupFrom__leadSub">
      初回登録時は30日間無料
    </div>
  </div>
  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a href="" class="CG2-button CG2-button--primary">
        Googleアカウントを使用して<br class="CG2--disableLargeScreen CG2--disableMiddleScreen">CodeGridにログイン</a></li>
    </ul>
    <div class="CG2-signupFrom__buttonContainerText">
      <p>
        ※CodeGridの購読にはGoogleアカウントが必要です。<br>
        <a href="https://accounts.google.com/SignUp" target="_blank">Googleアカウント作成</a>
      </p>
    </div>
  </div>
  <div class="CG2-signupFrom__buttonContainer">
    <ul>
      <li><a class="CG2-button" href="">購読済みの方はログイン</a></li>
    </ul>
  </div>
</div>

ログイン方法について(ログイン済み)

購読料は月額800円(税抜)
初回登録時は30日間無料
<div class="CG2-signupFrom">
  <div class="CG2-signupFrom__lead">
    購読料は月額800円(税抜)
    <div class="CG2-signupFrom__leadSub">
      初回登録時は30日間無料
    </div>
  </div>
  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a href="" class="CG2-button CG2-button--primary">このアカウントで購読する</a></li>
    </ul>
    <div class="CG2-signupFrom__buttonContainerText">
      <p>
        現在 gurio@pxgrid.example でログインしています<br>
        <a href="">別のGoogleアカウントで購読するには一度ログアウトする必要があります。</a>
      </p>
    </div>
  </div>
</div>

クレジットカードを登録

CodeGridを購読いただくためには、利用規約への同意が必要です。

<div class="CG2-signupFrom">
  <div class="CG2-signupFrom__text">
    <p>CodeGridを購読いただくためには、<a href="https://www.codegrid.net/terms.html" target="_blank">利用規約</a>への同意が必要です。</p>
  </div>
  <div class="CG2-signupFrom__check">
    <label><input type="checkbox">利用規約に同意する</label>
  </div>
  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a class="CG2-button CG2-button--primary">クレジットカードを登録</a></li>
    </ul>
  </div>
</div>

登録完了

購読手続きが完了しました!
<div class="CG2-signupFrom">
  <div class="CG2-signupFrom__lead">
    購読手続きが完了しました!
  </div>
  <div class="CG2-signupFrom__buttonContainer CG2-signupFrom__buttonContainer--fullWidth">
    <ul>
      <li><a class="CG2-button CG2-button--primary">記事を読む</a></li>
    </ul>
  </div>
  <div class="CG2-signupFrom__text">
    <p><a href="">CodeGrid運営からのごあいさつ記事へ</a></p>
  </div>
</div>

エラー

支払い処理中にエラーが発生しました

お手数ですがもう一度手続きをおこなってください。

再度エラーになる場合は以下よりお問い合わせください。

お問い合わせフォーム

<div class="CG2-signupFrom">
  <div class="CG2-signupFrom__information">
    <p>支払い処理中にエラーが発生しました</p>
  </div>
  <div class="CG2-signupFrom__text">
    <p>お手数ですがもう一度手続きをおこなってください。</p>
  </div>
  <div class="CG2-signupFrom__buttonContainer">
    <ul>
      <li><a class="CG2-button CG2-button--primary">再度支払い手続きをおこなう</a></li>
    </ul>
  </div>
  <div class="CG2-signupFrom__annotation">
    <p>再度エラーになる場合は以下よりお問い合わせください。</p>
    <p><a href="https://www.codegrid.net/inquiry.html" target="_blank">お問い合わせフォーム</a></p>
  </div>
</div>

paymentTable

/src/assets2/scss/_components-shared.scss
  • app-item
  • app-form
  • www-item
VISA, MasterCard, JCB, American Express, Diners Club
購読料
(税込金額)
  • 月額
    800
    (税込864円)
購読期間 自動継続
無料購読期間
  • 無料購読期間
    30
<div class="CG2-paymentTable">
  <table>
    <thead>
      <tr>
        <th colspan="2"><img src="https://www.codegrid.net/img/payment/img_01.svg" alt="VISA, MasterCard, JCB, American Express, Diners Club" width="275"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>購読料<br><span class="CG2-paymentTable__annotation">(税込金額)</span></th>
        <td>
          <div class="CG2-paymentTable__priceList">
            <ul>
              <li>
                <div class="CG2-paymentTable__priceLabel">月額</div>
                <div class="CG2-paymentTable__priceValue">800</div>
                <div class="CG2-paymentTable__priceUnit"></div>
                <div class="CG2-paymentTable__priceAnnotation">(税込864円)</div>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <th>購読期間</th>
        <td>自動継続</td>
      </tr>
      <tr>
        <th>無料購読期間</th>
        <td>
          <div class="CG2-paymentTable__valueList">
            <ul>
              <li>
                <div class="CG2-paymentTable__valueText CG2--disableLargeScreen">無料購読期間</div>
                <div class="CG2-paymentTable__value">30</div>
                <div class="CG2-paymentTable__valueUnit"></div>
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>