<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>Hardware</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>Information related to rekordbox.</p>
</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>Contract plan</span>
<span class="mypage__titlewrap__tiny-title">Ver.6</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">Cancel</span>
</a>
</div>
<div class="spacer spacer--6"></div>
<article class="product-purchased product-purchased--plan">
<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>Professional</strong></div>
</div>
<div class="spacer spacer--4"></div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Order number</div>
<div class="col__content">xxxxxxxxxxxxx</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Next payment date</div>
<div class="col__content">Nov 02 2022</div>
</div>
<div class="grid__col grid__col--fullw">
<div class="col__label">Date of expiry</div>
<div class="col__content">Nov 20 2022</div>
</div>
</div>
<div class="device">
<div class="grid__col grid__col--fullw">
<div class="col__label">Device 1</div>
<div class="col__content">
<span class="device__label">
<svg class="icon-desktop" xmlns="http://www.w3.org/2000/svg" fill="none" class="icon-desktop" viewBox="0 0 50 41">
<rect width="49" height="32" x=".5" y=".5" stroke="currentColor" rx="1.95" />
<path stroke="currentColor" d="M0 25.753h50" />
<path stroke="currentColor" stroke-linecap="round" d="M15.278 40h20.556" />
<ellipse cx="25.555" cy="29.041" fill="currentColor" rx=".833" ry=".822" />
<path stroke="currentColor" stroke-linecap="round" d="M25.556 32.877v6.986" />
</svg>
Anonymous PC
</span>
<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 class="device">
<div class="grid__col grid__col--fullw">
<div class="col__label">Device 2</div>
<div class="col__content">
<span class="device__label">
<svg class="icon-mobile" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 55">
<path stroke="currentColor" stroke-linecap="round" d="M10.175 3.87h6.26" />
<rect width="29" height="54" x=".5" y=".5" stroke="currentColor" rx="2.083" />
<path stroke="currentColor" d="M0 47.814h30M0 7.186h30" />
<ellipse cx="14.87" cy="51.131" fill="currentColor" rx=".783" ry=".829" />
<ellipse cx="19.305" cy="3.869" fill="currentColor" rx=".783" ry=".829" />
</svg>
Anonymous phone lorem ipsum dolor sit amet
</span>
<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 class="spacer spacer--4"></div>
<small class="sub-text__info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, tempor incididunt ut labore et dolore magna aliqua.</small>
<div class="spacer spacer--8"></div>
<div class="actions actions--center actions--force">
<div class="actions__item">
<a href="#" class="action action--ghost action--on-light">
<span class="action__label">Cancel plan</span>
<span class="action__bg"></span>
</a>
</div>
<div class="actions__item">
<a href="#" target="_blank" class="action action--normal action--on-light">
<span class="action__label">Change plan</span>
<span class="action__bg"></span>
</a>
</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>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>
<h2 class="mypage__titlewrap--subtitle">
<span>Payment information</span>
</h2>
<div class="spacer spacer--4"></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>
</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>
<a href="#" class="mypage__link link link--icon-right overlay-modal__trigger" data-modal="cloud-email">
<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>
<small>Rekordbox Cloud Unlimited powered by Dropbox.</small>
</div>
</div>
</section>
</div>
</div>
<section class="overlay-modal" data-step="1" data-modal="cloud-email">
<div class="overlay-modal__overlay">
<span class="overlay-modal__bg overlay-modal__trigger--close"></span>
<div class="overlay-modal__inner">
<span class="overlay-modal__close overlay-modal__trigger--close"></span>
<div class="overlay-modal__content">
<h3 class="heading heading--4">
<span data-step="1">Update your email address here.</span>
<span data-step="2">Your email adress is succesfully updated.</span>
</h3>
<div class="overlay-modal__description">
Lorem ipsum dolor amet.
</div>
<form data-step="1" class="form form--modal form--email-modal" novalidate>
<div class="overlay-modal__form">
<div class="parent-class input-field is-required">
<div class="input-field__inner">
<input type="email" name="email" id="" value="" class="test" required>
<span class="input-field__placeholder">Email address</span>
</div>
<div class="input-field__error">
<p>This field is not filled in correctly or cannot be empty.</p>
</div>
</div>
<div class="overlay-modal__action">
<button type="submit" class="action action--normal action--on-light">
<span class="action__label">Update</span>
<span class="action__bg"></span>
</button>
</div>
</div>
<div class="overlay-modal__note">
We respect your privacy and don't share you email with anybody.
</div>
</form>
</div>
</div>
</div>
</section>
<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>Hardware</span>
</h1>
<div class="product-link">
{{render '@icon-info' icon merge=true}}
{{render '@link--icon-right' productlink merge=true}}
</div>
</div>
<p>Information related to rekordbox.</p>
</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>Contract plan</span>
<span class="mypage__titlewrap__tiny-title">Ver.6</span>
</h2>
{{render '@link--icon-right' cancel merge=true}}
</div>
<div class="spacer spacer--6"></div>
{{render '@product-purchased--plan' plan merge=true}}
</div>
</div>
<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' }}
<h2 class="mypage__titlewrap--subtitle">
<span>Payment information</span>
</h2>
<div class="spacer spacer--4"></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>
</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>
{{render '@link--icon-right' changelink merge=true}}
</div>
<small>Rekordbox Cloud Unlimited powered by Dropbox.</small>
</div>
</div>
</section>
</div>
</div>
{{ render '@overlay-modal--email' cloudoverlay merge=true}}
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
plan:
plan: Professional
ordernr: xxxxxxxxxxxxx
paymentdate: Nov 02 2022
expiredate: Nov 20 2022
devices:
- id: Device 1
label: Anonymous PC
isdesktop: true
- id: Device 2
label: Anonymous phone lorem ipsum dolor sit amet
ismobile: true
actions:
- type: ghost
tint: on-light
url: '#'
label: Cancel plan
disabled: false
class: ''
- type: normal
tint: on-light
url: '#'
label: Keep plan
disabled: false
class: ''
target: _blank
cancel:
label: Cancel
class: mypage__link
modifier: false
changelink:
label: Change
class: mypage__link
modifier: false
modal: cloud-email
cloudoverlay:
modal: cloud-email
action:
label: Update
No notes defined.