<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
    <style> @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); </style>
    <title>Stepform</title>
    <style>
      :root{
        font-size: 14.5px;
      }
      *{
        margin: 0;
        padding: 0;
      }
      body{
        background: #f2f2f4;
        color: #222;
        font-size: 1rem;
        font-family: 'Noto Sans JP', sans-serif;
      }
      .btn{
        position: fixed;
        top: 50%;
        left: 50%;
        border: #222 2px solid;
        padding: 12px 64px;
        font-weight: 700;
        background: #FFF;
        border-radius: 6px;
        transform: translate(-50%, -50%);
        cursor: pointer;
        box-shadow: 2px 2px 32px rgba(0,0,0,.08);
      }
      .btn:hover{
        background: #222;
        color: #FFF;
      }
    </style>
</head>
<body>
    <div id="stepForm">
      <stepform
        title="StepForm"
        description="This is a demo of StepForm."
        url="/demo.json"
        post="/test.php"
        :inputs="[
          {
            name: '住所',
            type: 'text',
            required: false,
            placeholder: '番地まで'
          },
          {
            name: '電話番号',
            type: 'tel',
            required: false,
            placeholder: '000-000-0000'
          },
          {
            name: '連絡方法',
            type: 'radio',
            required: true,
            child: ['メール', '電話', '希望なし']
          },
        ]"
        :words ="{
          name: 'お名前',
          email: 'メールアドレス',
          input: 'お客様情報の入力',
          next: '次のステップへ',
          prev: '前のステップへ',
          return: '入力画面に戻る',
          send: '内容を送信する',
          alert: '項目を選択してください',
          required: '必須',
          formAlert: 'は必須項目です',
          formEmail: 'の入力情報は無効です'
        }">
        <div class="btn">Click!</div>
      </stepform>
    </div>
    <script src="/dist/stepform.js"></script>
</body>
</html>