Template source: accounts/signup.html

{% extends 'base_accounts.html' %}
{% load static %}

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="format-detection" content="telephone=no">
  <meta property="og:title" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:site_name" content="">
  <meta property="og:description" content="">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="">
  <meta name="twitter:description" content="">
  <meta name="twitter:image" content="">
  <link rel="shortcut icon" href="../assets/images/common/favicon.ico" />
  <link rel="apple-touch-icon" href="../assets/images/common/favicon.ico">
</head>

{% block content %}

  <div class="l-page" id="top">
    <div class="l-page__inner">
        <main class="l-main p-account-auth-regist c-account-auth2">
          <div class="p-account-auth-regist__inner">
            <h1 class="c-account-auth__logo"><img src="{% static 'images/common/vistar-logo-w.svg' %}" alt=""><span class="c-account-auth__logo__title">アカウントの登録</span></h1>
              <form action="" method="post">
              {% csrf_token %}
              <div class="p-account-auth-regist__section-lv1">
                <h2 class="p-account-auth-regist__section-lv1__message--lv1">Vistar - ヴィスター</h2>
                <p class="p-account-auth-regist__section-lv1__message--lv2">誰もが輝ける可能性を持っている</p>
                <p class="p-account-auth-regist__section-lv1__message--lv3">それぞれの道を突き進む人達が、簡単にVistarプロフィールを作成でき、自身をアピールできる場です。</p>
                <p class="p-account-auth-regist__section-lv1__message--lv4">まずは、名前から設定をお願いします。</p>
                <div class="blur-box">
                  <h3 class="p-account-auth-regist__section-lv1__title">Vistar - ヴィスター</h3>
                  <div class="p-account-auth-regist__section-lv1__table">
                    <div class="p-account-auth-regist__section-lv1__table__inner">
                      <p class="p-account-auth-regist__section-lv1__table__tag">姓名</p>
                      <p class="p-account-auth-regist__section-lv1__table__tag" id="name">Name</p>
                    </div>
                    <div class="p-account-auth-regist__section-lv1__table__inner">
                      {{ form.last_name }}
                      {{ form.last_name_en }}
                    </div>
                    <div class="p-account-auth-regist__section-lv1__table__inner">
                      <span class="first_name_span">※必須</span>
                        {{ form.first_name }}
                        <span class="first_name_en_span">※必須</span>
                      {{ form.first_name_en }}
                    </div>
                  </div>
                  <p class="p-account-auth-regist__section-lv1__detail">※ 役者やアーティストの方は、活動名等で入力いただいても構いません。<br>活動名が2つに分かれていない場合は、必須の入力欄にのみ入力ください。</p>
                </div>
              </div>
                  {% if form.errors.username %}
                    <div class="p-account-auth-login__detail_top">
                    <p class="attention_text_top">
                    有効なVistarIDを入力してください。<br>
                    半角英数字と、記号 @/./+/-/_ が使用できます。<br>
                    </p>
                    </div>
                {% endif %}
              <div class="p-account-auth-regist__section-lv2">
                  {% if form.errors.password1.0 %}
                      <div class="p-account-auth-login__detai"><p class="attention_text">{{ form.errors.password1.0 }}</p></div>
                      {% else %}
                  {% endif %}
                <div class="blur-box">
                    <div class="vistar_id_attention">
                        <p>あなたのVistarプロフィールのURLになります<br/>
                            (例)http://vistar.worldhoshiitaro</p>
                    </div>
                  <dl class="p-account-auth-regist__section-lv2__table">
                    <div class="p-account-auth-regist__section-lv2__table__inner" id="p-account-auth-regist__section-lv2__table__inner__vistarid">

                      <dt class="p-account-auth-regist__section-lv2__table__theme"><span>Vistar ID</span></dt>
                      <dd class="p-account-auth-regist__section-lv2__table__column-03">
                        {{ form.username }}
                        <p class="p-account-auth-regist__section-lv2__table__column-03__detail">半角英数字と’./+/-/_/@‘記号がご利用いただけます。(スペースは入力できません。)</p>
                      </dd>
                    </div>
                  </dl>
                </div>
              </div>
              <div class="p-account-auth-regist__section-lv2">
                <div class="blur-box">
                  <dl class="p-account-auth-regist__section-lv2__table">
                      {% if form.errors.email.0 %}
                  <div class="p-account-auth-login__detail attention"><p class="attention_text">{{ form.errors.email.0 }}</p></div>
                  {% else %}
                  {% endif %}
                  <div class="p-account-auth-regist__section-lv2__table__inner">
                    <dt class="p-account-auth-regist__section-lv2__table__theme"><span>メールアドレス</span></dt>
                    <dd class="p-account-auth-regist__section-lv2__table__column-01">
                      {{ form.email }}
                    </dd>
                  </div>
                  {% if form.errors.password2.0 %}
                  <div class="p-account-auth-login__detail attention"><p class="attention_text">{{ form.errors.password2.0 }}</p></div>
                  {% else %}
                  {% endif %}
                  <div class="p-account-auth-regist__section-lv2__table__inner">
                    <dt class="p-account-auth-regist__section-lv2__table__theme"><span>パスワード</span></dt>
                    <dd class="p-account-auth-regist__section-lv2__table__column-02">
                      {{ form.password1 }}
                      {{ form.password2 }}
                    </dd>
                  </div>
                </dl>
              </div>
              <div class="p-account-auth-regist__section-lv2">
                <div class="c-warning">
                  <img src="{% static 'images/common/caution.svg' %}" alt="" class="c-warning__img">
                  <span class="c-warning__text">なりすまし禁止</span>
                  <span class="c-warning__text">正しい本人情報で入力してください。</span>
                </div>
                <p class="p-account-auth-regist__section-lv2__agree"><a href="{% url 'term:index' %}">利用規約</a>に同意して登録</p>
                <button class="p-account-auth-regist__button">Vistarをはじめる<span class="smalltext">(登録)</span></button>
                <p class="p-account-auth-regist__section-lv2__linkto">すでにアカウントをお持ちの方はこちらから<a href="{% url 'login' %}">ログイン</a></p>
              </div>
            </form>
          </div>
        </main>
    <style>
    .c-account-auth2:before
    {
        z-index: 1;

        background-image: url('/static/images/common/bg-permission.jpg');
        background-repeat: no-repeat;
        background-size: cover;

        content: ' ';
        position: fixed;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    #id_first_name{
        color: #f5ff00;
    }
    #id_first_name_en{
        color: #f5ff00;
    }
    @media screen and (min-width: 768px){
        .vistar_id_attention{
            height: 64.6px;
            width: 301px;
            content: ' ';
            margin-top: 15px;
            margin-left: 230px;
            display: block;
            background-image: url('/static/images/common/signup_attention.png')
        }
        .vistar_id_attention > p{
            padding-top: 8px;
            padding-left: 8px;
            font-size: 13px;
            lign-height: 22px;
            color: #ff9d00;
        }
    }
    .p-account-auth-regist__section-lv1__table__inner:nth-of-type(3) {
        background-color: transparent!important;
    }
    @media screen and (min-width: 768px) {
        .first_name_span {
            top: -15px !important;
            left: 5px !important;
        }
        .first_name_en_span {
            top: 68px !important;
            left: 5px !important;
        }
        #id_first_name {
            border-color: #ff4848;
            border-width: 5px;
        }

        #id_first_name_en {
            border-color: #ff4848;
            border-width: 5px;
        }
        #id_last_name {
            margin-top: 5px !important;
        }
        #id_last_name_en {
            margin-top: 28px !important;
        }
        #name {
            margin-top: 40px !important;
        }
        .p-account-auth-login__detail{
            width:600px;
            height: 71px;
            background-image:url('/static/images/common/signup_red_border_2.png');
            margin-top: 45px!important;
        }
        .p-account-auth-login__detail_top{
            width:600px;
            height: 85px;
            background-image:url('/static/images/common/signup_red_border_top.png');
            text-align: center;
            margin:40px auto 0!important;
        }
        .attention_text{
            color: white!important;
            font-size: 18px;
            position: relative;
            padding-top:15px;
            padding-left: 110px;
            text-align: left;
        }
        .attention_text_top{
            color: white!important;
            font-size: 18px;
            position: relative;
            padding-top:6px;
        }
        .attention_text::before{
            content:'';
            display: block;
            width:25px;
            height:21px;
            background-image:url('/static/images/common/login_attention_logo.png');
            position:absolute;
            top:19px;
            left:50px;
        }
        .attention_text_top::before{
            content:'';
            display: block;
            width:35px;
            height:30px;
            background-image:url('/static/images/common/login_attention_logo.png');
            background-repeat: no-repeat;
            background-size: contain;
            position:absolute;
            top:21px;
            left:35px;
        }
    }
    @media screen and (max-width: 768px) {
        .p-account-auth-regist__section-lv2__table__inner{
            padding: 0px!important;

        }
        #p-account-auth-regist__section-lv2__table__inner__vistarid{
            margin-top: 0px;
        }
        .vistar_id_attention{
            height: 64.6px;
            width: 301px;
            content: ' ';
            margin-top: 10px;
            margin-bottom: 0px;
            display: block;
            background-image: url('/static/images/common/signup_attention.png')
        }
        .vistar_id_attention > p{
            padding-top: 8px;
            padding-left: 8px;
            font-size: 13px;
            lign-height: 22px;
            color: #ff9d00;
        }
        .first_name_span {
            top: -11px !important;
            left: 5px !important;
        }
        .first_name_en_span {
            top: 61px !important;
            left: 5px !important;
        }
        #id_first_name {
            border-color: #ff4848;
            border-width: 5px;
        }
        #id_first_name_en {
            border-color: #ff4848;
            border-width: 5px;
        }
        #id_last_name {
            margin-top: 5px !important;
        }
        #id_last_name_en {
            margin-top: 28px !important;
        }
        .p-account-auth-login__detail{
            width:306px;
            height: 71px;
            padding-left:0px!important;
            margin-left:0px!important;
            background-image:url('/static/images/common/sp_signup_red_border.png');
            margin-top: 40px!important;
        }
        .p-account-auth-login__detail_top{
            width:306px;
            height: 71px;
            padding-left:0px!important;
            margin:40px auto 0!important;
            background-image:url('/static/images/common/sp_signup_red_border.png');
        }
        .attention_text{
            color: white!important;
            font-size: 12px;
            position: relative;
            margin: auto!important;
            vertical-align: bottom;
            text-align: left;
            padding-left:30px;
            padding-top:11px;
        }
        .attention_text_top{
            color: white!important;
            font-size: 11px;
            position: relative;
            padding-top:10px;
            text-align: center;
            padding-left:10px;
        }
        .attention_text::before{
            content:'';
            display: block;
            width:20px;
            height:15px;
            background-image:url('/static/images/common/login_attention_logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            position:absolute;
            top:15px;
            left:10px;
            margin: auto;
        }
        .attention_text_top::before{
            content:'';
            display: block;
            width:25px;
            height:19px;
            background-image:url('/static/images/common/login_attention_logo.png');
            position:absolute;
            top:20px;
            left:0px;
            margin-left:5px;
        }
    }


    </style>
{% endblock %}