PDJ Brandbox

mypage: Rekordbox Contract Empty 

<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">
                    <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 myPageNav__item--active">
                    <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>Rekordbox</span>
                </h1>
            </div>

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

            <picture class="visual visual--in-flow">
                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
            </picture>

        </section>

        <section class="mypage__section">
            <h2 class="mypage__titlewrap--subtitle">
                <span>Find your perfect rekordbox plan</span>
            </h2>

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

            <div class="plan">
                <div class="plan__wrapper">
                    <div class="plan__item">
                        <span class="plan__label">Lorem ipsum</span>

                        <h3 class="plan__title">
                            Professional
                        </h3>
                        <p class="plan__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing tempor incididunt ut labore et dolore magna aliqua.
                        </p>

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

                        <div class="plan__bottom">
                            <span class="card__bottom__title">
                                Lorem ipsum
                            </span>
                            <div class="plan__bottom__price">
                                <h3 class="price-title">
                                    ¥29,800
                                </h3>
                                <small class="sub-text__info">Lorem ipsum</small>
                            </div>
                        </div>
                    </div>

                    <div class="plan__item">
                        <h3 class="plan__title">
                            Creative
                        </h3>
                        <p class="plan__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing tempor incididunt ut labore et dolore magna aliqua.
                        </p>

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

                        <div class="plan__bottom">
                            <span class="card__bottom__title">
                                Lorem ipsum
                            </span>
                            <div class="plan__bottom__price">
                                <h3 class="price-title">
                                    ¥29,800
                                </h3>
                                <small class="sub-text__info">Lorem ipsum</small>
                            </div>
                        </div>
                    </div>

                    <div class="plan__item">
                        <h3 class="plan__title">
                            Core
                        </h3>
                        <p class="plan__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing tempor incididunt ut labore et dolore magna aliqua.
                        </p>

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

                        <div class="plan__bottom">
                            <span class="card__bottom__title">
                                Lorem ipsum
                            </span>
                            <div class="plan__bottom__price">
                                <h3 class="price-title">
                                    ¥29,800
                                </h3>
                                <small class="sub-text__info">Lorem ipsum</small>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

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

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

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

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

        <section class="mypage__section">
            <div class="mypage__block">
                <div class="grid grid--gutter grid--gutter--m--4 grid--m--2">
                    <div class="grid__inner">
                        <div class="grid__item">
                            <div class="grid__item__inner">
                                <div class="mypage__top">
                                    <h2 class="mypage__titlewrap--subtitle">
                                        <span>Purchase history</span>
                                    </h2>
                                    <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">See more</span>
                                    </a>

                                </div>

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

                                <article class="product-purchased product-purchased--atc-small">
                                    <div class="product-purchased__content product-purchased__content--cropped">

                                        <div class="grid grid--three-col">
                                            <div class="grid__col grid__col--fullw">
                                                <div class="col__label">Plan name</div>
                                                <div class="col__content"><strong>Core</strong></div>
                                            </div>

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

                                            <div class="grid__col grid__col--fullw">
                                                <div class="col__label">Purchase date</div>
                                                <div class="col__content">Jun 22 2022</div>
                                            </div>
                                            <div class="grid__col grid__col--fullw">
                                                <div class="col__label">Termination date</div>
                                                <div class="col__content">Jun 22 2022</div>
                                            </div>
                                        </div>

                                    </div>
                                </article>

                            </div>
                        </div>

                        <div class="grid__item">
                            <div class="grid__item__inner">
                                <div class="mypage__top">
                                    <h2 class="mypage__titlewrap--subtitle">
                                        <span>Payment information</span>
                                    </h2>
                                </div>

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

                                <article class="product-purchased product-purchased--atc-small-detail product-purchased--atc-small-detail--empty">
                                    <div class="product-purchased__content product-purchased__content--cropped">

                                        <div class="grid grid--three-col">
                                            <div class="grid__col grid__col--fullw grid__col--column">
                                                <div class="col__label">Payment method</div>
                                                <div class="col__container">
                                                    <div class="col__content">credit card</div>
                                                    <a href="#" class="mypage__link link link--edit 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">Change</span>
                                                    </a>

                                                </div>
                                            </div>

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

                                            <div class="grid__col grid__col--fullw grid__col--column">
                                                <div class="col__label">Notification</div>
                                                <div class="col__container">
                                                    <div class="col__content">lorem.ipsum@gmail.com</div>
                                                    <a href="#" class="mypage__link link link--edit 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">Change</span>
                                                    </a>

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

                                    </div>
                                </article>

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

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

        <section class="mypage__section">
            <div class="mypage__block">
                <div class="mypage__top">
                    <h2 class="mypage__titlewrap--subtitle">
                        <span>Cloud settings</span>
                    </h2>
                    <a href="#" class="mypage__link link link--edit 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">Change</span>
                    </a>

                </div>

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

                <div class="mypage__informationfield">
                    <div class="grid__col grid__col--half">
                        <div class="col__label">Setting account</div>
                        <div class="col__content">lorem.ipsum@gmail.com</div>
                    </div>
                    <small>Rekordbox Cloud Unlimited powered by Dropbox.</small>
                </div>
            </div>
        </section>
    </div>
</div>
 
<div class="mypage">
  <div class="mypage__nav">
      {{var "activeNav" "Recordbox"}}
      {{render '@nav-mypage' this merge=true }}
  </div>

  <div class="mypage__content">
    <section class="mypage__section">
      <div class="mypage__heading">
        <h1 class="mypage__titlewrap">
          <span>Rekordbox</span>
        </h1>
      </div>

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

      {{render '@visual--in-flow' }}
    </section>

    <section class="mypage__section">
      <h2 class="mypage__titlewrap--subtitle">
        <span>Find your perfect rekordbox plan</span>
      </h2>

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

      <div class="plan">
        <div class="plan__wrapper">
          {{render '@rekord-plan' }}
          {{render '@rekord-plan--creative' }}
          {{render '@rekord-plan--core' }}
        </div>
      </div>

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

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

    <section class="mypage__section">
      <div class="mypage__block">
        <div class="grid grid--gutter grid--gutter--m--4 grid--m--2">
          <div class="grid__inner">
            <div class="grid__item">
              <div class="grid__item__inner">
                <div class="mypage__top">
                  <h2 class="mypage__titlewrap--subtitle">
                    <span>Purchase history</span>
                  </h2>
                  {{render '@link--icon-right' hardwarelink merge=true}}
                </div>

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

                {{render '@product-purchased--atc-small' }}

              </div>
            </div>

            <div class="grid__item">
              <div class="grid__item__inner">
                <div class="mypage__top">
                  <h2 class="mypage__titlewrap--subtitle">
                    <span>Payment information</span>
                  </h2>
                </div>

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

                {{render '@product-purchased--atc-small-detail' }}

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

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

    <section class="mypage__section">
      <div class="mypage__block">
        <div class="mypage__top">
          <h2 class="mypage__titlewrap--subtitle">
            <span>Cloud settings</span>
          </h2>
          {{render '@link--icon-right' changelink merge=true}}
        </div>

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

        <div class="mypage__informationfield">
          <div class="grid__col grid__col--half">
            <div class="col__label">Setting account</div>
            <div class="col__content">lorem.ipsum@gmail.com</div>
          </div>
          <small>Rekordbox Cloud Unlimited powered by Dropbox.</small>
        </div>
      </div>
    </section>
  </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
  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
changelink:
  label: Change
  class: mypage__link
  modifier: edit
plan:
  plan: Professional
  ordernr: xxxxxxxxxxxxx
  paymentdate: Nov 02 2022
  expiredate: Nov 20 2022
  devices:
    - id: Device 1
      label: Anonymous PC
actions:
  - type: normal
    tint: on-light
    url: '#'
    label: Lorem ipsum
    buttonType: submit
src:
  mobile: /graphics/video-poster-mobile.jpg
  mobilew: /graphics/video-poster-mobile.webp
  desktop: /graphics/video-poster.jpg
  desktopw: /graphics/video-poster.webp
alt: ''
srcset: >-
  https://via.placeholder.com/500x250 500w, https://via.placeholder.com/1000x500
  1000w, https://via.placeholder.com/2000x1000 2000w
in-flow: true

No notes defined.