PDJ Brandbox

mypage: Account Email Settings 

<div class="mypage">
    <div class="mypage__nav">

        <nav class="myPageNav">
            <ul class="myPageNav__list">
                <li class="myPageNav__item myPageNav__item--main">
                    <a href="#" class="myPageNav__link myPageNav__link--main">My page top</a>
                </li>
                <li class="myPageNav__item myPageNav__item--main myPageNav__item--active">
                    <a href="#" class="myPageNav__link myPageNav__link--main">Account</a>
                    <ul class="myPageNav__list myPageNav__list--sub">
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Registration information</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Password management</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Email reception settings</a>
                        </li>
                    </ul>
                </li>
                <li class="myPageNav__item myPageNav__item--main">
                    <a href="#" class="myPageNav__link myPageNav__link--main">Hardware</a>
                    <ul class="myPageNav__list myPageNav__list--sub">
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Product registration</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Purchase history</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">AlphaTheta Care Extended warranty service</a>
                        </li>
                    </ul>
                </li>
                <li class="myPageNav__item myPageNav__item--main">
                    <a href="#" class="myPageNav__link myPageNav__link--main">Recordbox</a>
                    <ul class="myPageNav__list myPageNav__list--sub">
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Contract Plan/Purchase History</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Purchase history</a>
                        </li>
                        <li class="myPageNav__item myPageNav__item--sub">
                            <a href="#" class="myPageNav__link myPageNav__link--sub">Cloud settings</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

    </div>

    <div class="mypage__content">
        <section class="mypage__section">
            <div class="mypage__heading">
                <h1 class="mypage__titlewrap">
                    <span>Email reception settings</span>
                </h1>
                <div class="product-link">
                    <svg class="icon-info" width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="35" cy="35" r="33.5" fill="#007DE1" stroke="#007DE1" stroke-width="3" />
                        <path d="M33.3221 50V28.1818H36.6744V50H33.3221ZM35.0266 24.5455C34.3732 24.5455 33.8098 24.3229 33.3363 23.8778C32.8723 23.4328 32.6403 22.8977 32.6403 22.2727C32.6403 21.6477 32.8723 21.1127 33.3363 20.6676C33.8098 20.2225 34.3732 20 35.0266 20C35.68 20 36.2388 20.2225 36.7028 20.6676C37.1763 21.1127 37.413 21.6477 37.413 22.2727C37.413 22.8977 37.1763 23.4328 36.7028 23.8778C36.2388 24.3229 35.68 24.5455 35.0266 24.5455Z" fill="white" />
                    </svg>

                    <a href="#" class="mypage__link link link--icon-right">
                        <span class="link__icon">
                            <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>

                        </span>
                        <span class="link__label">More info here</span>
                    </a>

                </div>
            </div>
            <p>Please register your desired e-mail news.</p>
        </section>

        <div class="spacer spacer--4"></div>

        <section class="mypage__section">
            <div class="mypage__block">
                <form action="" class="form">
                    <div class="wrapper">
                        <div class="card">
                            <div class="card__item">
                                <h2>Information about new products</h2>
                                <p>We will inform you about new products.</p>

                                <div class="spacer spacer--8"></div>

                                <div class="grid grid--two-col">
                                    <div class="grid__col grid--radio grid--radio--left grid--radio--circle">
                                        <div class="radio-item">
                                            <input class="custom-radio " name="product" id="product-yes" type="radio" value="1" checked>
                                            <label for="product-yes">Receive</label>
                                        </div>

                                        <div class="radio-item">
                                            <input class="custom-radio " name="product" id="product-no" type="radio" value="0">
                                            <label for="product-no">Do not receive</label>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card__item">
                                <h2>Notice about new service</h2>
                                <p>We will inform you about new services.</p>

                                <div class="spacer spacer--8"></div>

                                <div class="grid grid--two-col">
                                    <div class="grid__col grid--radio grid--radio--left grid--radio--circle">
                                        <div class="radio-item">
                                            <input class="custom-radio " name="service" id="service-yes" type="radio" value="1" checked>
                                            <label for="service-yes">Receive</label>
                                        </div>

                                        <div class="radio-item">
                                            <input class="custom-radio " name="service" id="service-no" type="radio" value="0">
                                            <label for="service-no">Do not receive</label>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card__item">
                                <h2>Notice about promotion</h2>
                                <p>We will keep you informed about promotions.</p>

                                <div class="spacer spacer--8"></div>

                                <div class="grid grid--two-col">
                                    <div class="grid__col grid--radio grid--radio--left grid--radio--circle">
                                        <div class="radio-item">
                                            <input class="custom-radio " name="promo" id="promo-yes" type="radio" value="1" checked>
                                            <label for="promo-yes">Receive</label>
                                        </div>

                                        <div class="radio-item">
                                            <input class="custom-radio " name="promo" id="promo-no" type="radio" value="0">
                                            <label for="promo-no">Do not receive</label>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card__item">
                                <h2>Information about the event</h2>
                                <p>We will inform you about the event.</p>

                                <div class="spacer spacer--8"></div>

                                <div class="grid grid--two-col">
                                    <div class="grid__col grid--radio grid--radio--left grid--radio--circle">
                                        <div class="radio-item">
                                            <input class="custom-radio " name="event" id="event-yes" type="radio" value="1" checked>
                                            <label for="event-yes">Receive</label>
                                        </div>

                                        <div class="radio-item">
                                            <input class="custom-radio " name="event" id="event-no" type="radio" value="0">
                                            <label for="event-no">Do not receive</label>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card__item">
                                <h2>Questionnaire Notice</h2>
                                <p>We will inform you about the questionnaire.</p>

                                <div class="spacer spacer--8"></div>

                                <div class="grid grid--two-col">
                                    <div class="grid__col grid--radio grid--radio--left grid--radio--circle">
                                        <div class="radio-item">
                                            <input class="custom-radio " name="survey" id="survey-yes" type="radio" value="1" checked>
                                            <label for="survey-yes">Receive</label>
                                        </div>

                                        <div class="radio-item">
                                            <input class="custom-radio " name="survey" id="survey-no" type="radio" value="0">
                                            <label for="survey-no">Do not receive</label>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="spacer spacer--8"></div>

                    <div class="actions actions--center actions--force">
                        <div class="actions__item">

                            <button type="reset" class="action action--ghost action--on-light">
                                <span class="action__label">Cancel</span>
                                <span class="action__bg"></span>
                            </button>

                        </div>
                        <div class="actions__item">

                            <button type="submit" class="action action--normal action--on-light">
                                <span class="action__label">Keep</span>
                                <span class="action__bg"></span>
                            </button>

                        </div>
                    </div>
                </form>
            </div>
        </section>

        <div class="spacer spacer--4"></div>

    </div>
</div>
 
<div class="mypage">
  <div class="mypage__nav">
      {{var "activeNav" "Account"}}
      {{render '@nav-mypage' this merge=true }}
  </div>

  <div class="mypage__content">
    <section class="mypage__section">
      <div class="mypage__heading">
        <h1 class="mypage__titlewrap">
          <span>Email reception settings</span>
        </h1>
        <div class="product-link">
          {{render '@icon-info' icon merge=true}}
          {{render '@link--icon-right' productlink merge=true}}
        </div>
      </div>
      <p>Please register your desired e-mail news.</p>
    </section>

    <div class="spacer spacer--4"></div>

    <section class="mypage__section">
      <div class="mypage__block">
        <form action="" class="form">
          <div class="wrapper">
            <div class="card">
              <div class="card__item">
                <h2>Information about new products</h2>
                <p>We will inform you about new products.</p>

                <div class="spacer spacer--8"></div>

                <div class="grid grid--two-col">
                  <div class="grid__col grid--radio grid--radio--left grid--radio--circle">
                    {{#each productradios}}
                      {{render '@radio' this merge=true}}
                    {{/each}}
                  </div>
                </div>
              </div>
            </div>

            <div class="card">
              <div class="card__item">
                <h2>Notice about new service</h2>
                <p>We will inform you about new services.</p>

                <div class="spacer spacer--8"></div>

                <div class="grid grid--two-col">
                  <div class="grid__col grid--radio grid--radio--left grid--radio--circle">
                    {{#each serviceradios}}
                      {{render '@radio' this merge=true}}
                    {{/each}}
                  </div>
                </div>
              </div>
            </div>

            <div class="card">
              <div class="card__item">
                <h2>Notice about promotion</h2>
                <p>We will keep you informed about promotions.</p>

                <div class="spacer spacer--8"></div>

                <div class="grid grid--two-col">
                  <div class="grid__col grid--radio grid--radio--left grid--radio--circle">
                    {{#each promoradios}}
                      {{render '@radio' this merge=true}}
                    {{/each}}
                  </div>
                </div>
              </div>
            </div>

            <div class="card">
              <div class="card__item">
                <h2>Information about the event</h2>
                <p>We will inform you about the event.</p>

                <div class="spacer spacer--8"></div>

                <div class="grid grid--two-col">
                  <div class="grid__col grid--radio grid--radio--left grid--radio--circle">
                    {{#each eventradios}}
                      {{render '@radio' this merge=true}}
                    {{/each}}
                  </div>
                </div>
              </div>
            </div>

            <div class="card">
              <div class="card__item">
                <h2>Questionnaire Notice</h2>
                <p>We will inform you about the questionnaire.</p>

                <div class="spacer spacer--8"></div>

                <div class="grid grid--two-col">
                  <div class="grid__col grid--radio grid--radio--left grid--radio--circle">
                    {{#each surveyradios}}
                      {{render '@radio' this merge=true}}
                    {{/each}}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="spacer spacer--8"></div>

          <div class="actions actions--center actions--force">
            {{#each actions }}
            <div class="actions__item">
              {{render '@action--ghost' this merge=true }}
            </div>
            {{/each}}
          </div>
        </form>
      </div>
    </section>

    <div class="spacer spacer--4"></div>

  </div>
</div>
 
productlink:
  label: More info here
  class: mypage__link
  modifier: false
hardwarelink:
  label: See more
  class: mypage__link
  modifier: false
rekordboxlink:
  label: Check/change contract information
  class: mypage__link
  modifier: false
alphathetacarelink:
  label: Check/change contract information
  class: mypage__link
  modifier: false
registrationinformationlink:
  label: See more
  class: mypage__link
  modifier: false
editlink:
  label: Edit
  class: mypage__link
  modifier: false
backlink:
  label: Back to account
  class: mypage__link
  modifier: back
registerlink:
  label: Register products
  modifier: false
loadmore:
  label: Load more
  modifier: false
productregistration:
  label: + Product registration
  modifier: false
products:
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-v10/djm-v10-main.png?h=250&w=400&hash=B13A55D94B116CF931A83AE324726AAF90294DCF
      alt: ''
    label: DJM-V10
    serial: ABCD123456EF
    registered: false
    actions:
      - action: null
        url: ''
        label: get support
      - action: null
        url: ''
        label: Item 2
      - action: null
        url: ''
        label: Item 3
      - action: null
        url: ''
        label: Item 4
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-900nxs2/black/djm-900nxs2-main2.png?h=250&w=400&hash=4DA5CD8F5E2AC0FACDBDA8E3DE9FAE1EA82A1A1A
      alt: ''
    label: DJM-900NXS2
    serial: ABCD123456EF
    registered: true
    actions:
      - action: null
        url: ''
        label: get support
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/dj-sampler/djs-1000/djs-1000-main.png?h=250&w=400&hash=F3C1E27C7D0070B31A79A30C0D705EF6198D03F5
      alt: ''
    label: DJS-1000
    serial: ABCD123456EF
    registered: false
    actions:
      - action: null
        url: ''
        label: get support
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-v10/djm-v10-main.png?h=250&w=400&hash=B13A55D94B116CF931A83AE324726AAF90294DCF
      alt: ''
    label: DJM-V10
    serial: ABCD123456EF
    registered: false
    actions:
      - action: null
        url: ''
        label: get support
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-900nxs2/black/djm-900nxs2-main2.png?h=250&w=400&hash=4DA5CD8F5E2AC0FACDBDA8E3DE9FAE1EA82A1A1A
      alt: ''
    label: DJM-900NXS2
    registered: false
    actions:
      - action: null
        url: ''
        label: get support
actions:
  - type: ghost
    tint: on-light
    label: Cancel
    disabled: false
    class: ''
    buttonType: reset
  - type: normal
    tint: on-light
    label: Keep
    disabled: false
    class: ''
    buttonType: submit
productradios:
  - id: product-yes
    name: product
    modifier: ''
    value: 1
    label: Receive
    checked: true
  - id: product-no
    name: product
    modifier: ''
    value: 0
    label: Do not receive
serviceradios:
  - id: service-yes
    name: service
    modifier: ''
    value: 1
    label: Receive
    checked: true
  - id: service-no
    name: service
    modifier: ''
    value: 0
    label: Do not receive
promoradios:
  - id: promo-yes
    name: promo
    modifier: ''
    value: 1
    label: Receive
    checked: true
  - id: promo-no
    name: promo
    modifier: ''
    value: 0
    label: Do not receive
eventradios:
  - id: event-yes
    name: event
    modifier: ''
    value: 1
    label: Receive
    checked: true
  - id: event-no
    name: event
    modifier: ''
    value: 0
    label: Do not receive
surveyradios:
  - id: survey-yes
    name: survey
    modifier: ''
    value: 1
    label: Receive
    checked: true
  - id: survey-no
    name: survey
    modifier: ''
    value: 0
    label: Do not receive

No notes defined.