<div class="c-tab u-p-none">
<!-- tabs module -->
<input type="radio" value="intro" id="intro-form-radio" class="u-none" name="c-tabs__choice" checked>
<div id="intro-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
<!-- email form -->
<div class="u-mb-base">
<div class="c-stepper u-relative u-overflow-x-auto u-mb-large">
<div class="c-stepper__line u-size-full u-absolute u-left"></div>
<ul class="u-flex u-row u-justify-between u-p-none u-m-none u-nowrap u-list-none u-z-base">
<li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">
<span class="u-label-11">1</span>
</li>
<li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">
<span class="u-label-11">2</span>
</li>
<li class="c-stepper__element c-stepper__element--active o-link-primary u-flex u-items-center u-justify-center u-z-undercover">
<span class="u-label-11">3</span>
</li>
</ul>
</div>
</div>
<form id="email-buysignup-form" class="fw__wrapper u-mb-large" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="POST" action="myPage.php" novalidate>
<fieldset data-toggle="email-buysignup-fw__step" class="fw__inputs o-divider email-buysignup-fw__step u-pl-none u-pr-none u-mb-medium">
<!-- hgroup -->
<div class="u-text-center u-mb-large">
<h1 class="u-heading-03"></h1>
<p class="u-mb-large u-color-secondary"></p>
</div>
<!-- end hgroup -->
<!-- social logins -->
<div class="u-flex u-row">
<div class="u-mb-base u-wrap-row">
<a href="user--edit2021" class="c-btn c-btn--google u-justify-center u-flex u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">
<svg class="o-icon o-icon--fill o-icon--sm u-mr-small@lg u-self-center">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-google"></use>
</svg>
<span class="u-none u-inline-block@sm">Google</span>
</a>
</div>
<div class="u-mb-base u-mr-small u-ml-small u-wrap-row">
<a href="user--edit2021" class="c-btn c-btn--facebook u-justify-center u-flex u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">
<svg class="o-icon o-icon--fill o-icon--sm u-mr-small@lg u-self-center">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use>
</svg>
<span class="u-none u-inline-block@sm">Facebook</span>
</a>
</div>
<div class="u-mb-base u-wrap-row">
<a href="user--edit2021" class="c-btn c-btn--apple u-justify-center u-flex u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">
<svg class="o-icon o-icon--fill o-icon--sm u-mr-small@lg u-self-center">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-apple"></use>
</svg>
<span class="u-none u-inline-block@sm">Apple</span>
</a>
</div>
</div>
<!-- end social logins -->
<p class="o-text-overline u-text-center">
<span class="o-text u-color-secondary">oppure registrati con la tua email</span>
</p>
<!-- native login -->
<div class="u-flex u-column u-row@md">
<div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
<div class="">
<label class="u-label-04 u-color-base" for="">Email*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
<div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
<div class="">
<label class="u-label-04 u-color-base" for="">Password*</label>
<input class=" u-block u-size-full" type="password" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
</div>
<div class="u-flex u-column u-row@md">
<div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
<div class="">
<label class="u-label-04 u-color-base" for="">Nome*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
<div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
<div class="">
<label class="u-label-04 u-color-base" for="">Cognome*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
</div>
<div class="u-mb-base ">
</div>
<div class="u-my-large">
<strong class="u-mb-base">Autorizzo al trattamento dei miei dati per:</strong>
<div class="c-accordion c-accordion--borderless u-label-07">
<p class="u-mb-base">
Acconsento al trattamento dei miei dati personali per finalità di marketing "diretto" consistenti nell'invio, anche tramite modalità automatiche, di newsletters, comunicazioni commerciali e/o promozionali e materiale pubblicitario.
</p>
</div>
<div class="u-flex u-column u-row@md u-mb-base">
<div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
<label class="c-form-radio">
<span class="u-label-04 u-color-base u-inline-block" for="">Do il consenso</span>
<input type="radio" checked="checked" name="radio">
<span class="c-form-radio__mark"></span>
</label>
</div>
<div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
<label class="c-form-radio">
<span class="u-label-04 u-color-base u-inline-block" for="">Non do il consenso</span>
<input type="radio" checked="checked" name="radio">
<span class="c-form-radio__mark"></span>
</label>
</div>
</div>
<div class="c-accordion c-accordion--borderless u-label-07">
<p class="u-mb-base">
Acconsento al trattamento dei miei dati personali per finalità di profilazione e ricerche di mercato, tramite strumenti di rilevazione dei gusti, delle preferenze, delle abitudini e/o del grado di soddisfazione della clientela.
</p>
</div>
<div class="u-flex u-column u-row@md u-mb-base">
<div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
<label class="c-form-radio">
<span class="u-label-04 u-color-base u-inline-block" for="">Do il consenso</span>
<input type="radio" checked="checked" name="radio">
<span class="c-form-radio__mark"></span>
</label>
</div>
<div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
<label class="c-form-radio">
<span class="u-label-04 u-color-base u-inline-block" for="">Non do il consenso</span>
<input type="radio" checked="checked" name="radio">
<span class="c-form-radio__mark"></span>
</label>
</div>
</div>
<div class="c-accordion c-accordion--borderless u-label-07">
<p class="u-mb-base">
Dichiaro di aver letto e compreso l'informativa sul trattamento dei dati personali, accettando integralmente i termini e condizioni per l'utilizzo del servizio.
</p>
</div>
<div class="u-flex u-column u-row@md u-mb-base">
<div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
<label class="c-form-radio">
<span class="u-label-04 u-color-base u-inline-block" for="">Accetto</span>
<input type="radio" checked="checked" name="radio">
<span class="c-form-radio__mark"></span>
</label>
</div>
<div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
<label class="c-form-radio">
<span class="u-label-04 u-color-base u-inline-block" for="">Non accetto</span>
<input type="radio" checked="checked" name="radio">
<span class="c-form-radio__mark"></span>
</label>
</div>
</div>
</div>
<p class="u-label-07 u-color-secondary u-block u-mb-large">
Completando la registrazione dichiaro di essere maggiorenne e di aver preso visione dell’ <a class="o-link-primary" href="https://citynews.it/privacy#gdpr&_ga=2.195002985.558624410.1646066405-2053839960.1623412359">Informativa Privacy</a> redatta ai sensi del Regolamento UE 679/2016 e di accettare i termini e le <a class="o-link-primary" href="https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359">condizioni del servizio</a>.
</p>
<div class="fw__inputs o-divider__error">
<p class="fw__inputs o-divider__error--message"></p>
</div>
<div class="u-mt-large">
<div class="u-flex u-items-center">
<div class="u-size-full u-size-1-2 u-text-right">
<input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="Avanti →" onclick="next()" />
</div>
</div>
</div>
<!-- end native login -->
<div class="u-text-center u-mt-large u-pl-large u-pr-large u-pl-none@md u-pr-none@md">
<span class="u-label-07 u-color-secondary u-block u-mb-small">
Sei già registrato?
<a class="o-link-primary" href="user--login2021">Accedi col tuo profilo</a>
</span>
<span class="u-label-07 u-color-secondary u-block u-mb-small">
Non hai ancora attivato il tuo profilo?
<a class="o-link-primary" href="user--activate2021">Attiva il tuo profilo</a>
</span>
</div>
</fieldset>
<fieldset data-toggle="email-buysignup-fw__step" class="fw__inputs o-divider email-buysignup-fw__step u-pl-none u-pr-none u-mb-medium">
<!-- page hgroup -->
<div class="u-mb-large">
<h2 class="u-heading-03 u-text-center">Inserisci il codice di attivazione</h2>
<p class="u-mb-large u-text-center">
Inserisci il codice di attivazione che hai ricevuto per email.<br />
Non hai ancora ricevuto il codice? Richiedi un nuovo <a class="o-link-primary" href="#">codice di attivazione</a>
</p>
</div>
<!-- end page hgroup -->
<!-- form activate -->
<div class="u-mb-base ">
<div class="">
<label class="u-label-03 c-form-label u-color-base" for="">Codice di attivazione*</label>
<div class="u-flex">
<input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
<input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
<input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
<input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall " data-label="placeholderfieldLabel">
<input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center u-mr-xsmall" data-label="placeholderfieldLabel">
<input type="text" name='code' class="code-input u-size-1-6 u-size-full u-text-center" data-label="placeholderfieldLabel">
</div>
</div>
<script>
const inputElements = [...document.querySelectorAll('input.code-input')]
inputElements.forEach((ele, index) => {
ele.addEventListener('keydown', (e) => {
if (e.keyCode === 8 && e.target.value === '') inputElements[Math.max(0, index - 1)].focus()
})
ele.addEventListener('input', (e) => {
const [first, ...rest] = e.target.value
e.target.value = first ?? ''
if (index !== inputElements.length - 1 && first !== undefined) {
inputElements[index + 1].focus()
inputElements[index + 1].value = rest.join('')
inputElements[index + 1].dispatchEvent(new Event('input'))
}
})
})
</script>
</div>
<div class="fw__inputs o-divider__error">
<p class="fw__inputs o-divider__error--message"></p>
</div>
<div class="u-mt-large">
<div class="u-flex u-items-center">
<div class="u-size-full u-size-1-2 ">
<input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="← Indietro" onclick="back()" />
</div>
<div class="u-size-full u-size-1-2 u-text-right">
<input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="submit" value="" />
</div>
</div>
</div>
<!-- end form activate -->
</fieldset>
<fieldset data-toggle="email-buysignup-fw__step" class="fw__inputs o-divider email-buysignup-fw__step u-pl-none u-pr-none u-mb-medium">
<div class="u-mb-large">
<h2 class="u-heading-03 u-text-center">Ti ringraziamo per la tua iscrizione</h2>
<p class="u-mb-large u-text-center">Acquista il tuo abbonamento</p>
</div>
<div class="u-text-center u-mb-large">
<h1 class="u-heading-03"></h1>
<p class="u-mb-large"></p>
</div>
<!-- billing shoose-->
<div class="u-p-base u-mb-large u-border-top-solid u-border-bottom-solid u-border-left-solid u-border-right-solid u-border-gray-light u-border-1">
<h4 class="u-mb-none u-color-theme">Abbonamento «nome Testata»</h4>
<span class="u-label-07 u-block">Prezzo Promo $</span>
<span class="u-label-07 u-block">Prezzo a seguire $</span>
<span class="u-label-07 u-block"> Tot. $</span>
<span class="u-label-07 u-block u-mb-small">Data prossimo rinnovo.</span>
<span class="u-label-07 u-block">Puoi disdire il tuo abbonamento quando vuoi.</span>
</div>
<!-- end billing shoose-->
<!-- -->
<div class="c-accordion u-mb-large">
<label>
<input type="checkbox" class="u-none">
<div class="u-size-full u-cursor-pointer c-accordion__label u-label-07 u-p-base u-flex u-justify-between">
Desideo la fattura
<svg class="o-icon o-icon--md" data-dd-icon>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
</div>
<div class="c-accordion__body">
<!-- start forms -->
<label class="c-form-radio">
<span class="c-form-label u-label-07" for="">Azienda</span>
<span class="c-form-radio__mark"></span>
<input type="radio" value="private" id="company-form-radio" name="c-tabs__choice" checked>
<div id="company-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
<!-- form fattura azienda -->
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Ragione sociale*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">P. IVA*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Indirizzo*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">N. civico*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Città*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">CAP*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Provincia*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Codice identificativo (SDI) o PEC*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<!-- end form fattura azienda -->
</div>
</label>
<label class="c-form-radio">
<span class="c-form-label u-label-07" for="">Privato</span>
<span class="c-form-radio__mark"></span>
<input type="radio" value="private" id="private-form-radio" name="c-tabs__choice">
<div id="private-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
<!-- form fattura privato -->
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Nome*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Cognome*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Codice fiscale*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Indirizzo*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">N.civico*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Città*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">CAP*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Provincia*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Codice identificativo (SDI) o PEC*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
</div>
<!-- end form fattura privato -->
</div>
</label>
<!-- end forms -->
</div>
</label>
</div>
<!-- -->
<!-- form carta -->
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Intestatario*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
<div class="u-mb-base">
<div class="">
<label class="u-label-04 u-color-base" for="">Numero carta*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
<div class="u-flex u-column u-row@md">
<div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md">
<div class="">
<label class="u-label-04 u-color-base" for="">Scadenza*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
<div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md">
<div class="">
<label class="u-label-04 u-color-base" for="">CVV*</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
</div>
<!-- end form carta -->
<p class="u-mb-base">Proseguendo dichiari di accettare le Condizioni particolari per l'erogazione del servizio richiesto</p>
<div class="u-mb-base">
<div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
<label class="c-form-radio">
<span class="u-label-04 u-color-base u-inline-block" for="">
Dichiaro di sottoscrivere specificatamente le clasule N° (Durata dellabbonamento, rinnovo automatico) ;N° (Diritto di recesso) N° (Costi del servizio) N° (Esclusione delle garanzie), N° (Modifica del contratto), N° (Manleva), N° (Responsabilità di RCS), N° (Limitazioni di responsabilità) N° (Codice etico) ai sensi degli articoli N° e N° c.c. del contratto sopracitato.
</span>
<input type="radio" checked="checked" name="radio">
<span class="c-form-radio__mark"></span>
</label>
</div>
</div>
<div class="u-mb-base">
<button type="submit" class="c-btn c-btn--primary c-btn--large u-label-04 u-size-full u-cursor-pointer">Carta di credito</button>
</div>
<div class="u-mb-base">
<button type="submit" class="c-btn c-btn--primary c-btn--large u-label-04 u-size-full u-cursor-pointer">Paypall</button>
</div>
<!-- payment method -->
<h3 class="u-mb-large u-capitalize">Scegli metodo di pagamento</h3>
<div class="c-accordion u-block u-mb-large">
</div>
<!-- end payment method -->
</fieldset>
<fieldset data-toggle="email-buysignup-fw__step" class="fw__inputs o-divider email-buysignup-fw__step u-pl-none u-pr-none u-mb-medium">
<!-- page hgroup -->
<div class="u-mb-large">
<h2 class="u-heading-03 u-text-center">Completa il tuo profilo personale</h2>
<p class="u-mb-large u-text-center">Modifica le informazioni del profilo personale</p>
</div>
<!-- end page hgroup -->
<!-- complete profile form -->
<div class="u-mb-xlarge u-flex u-items-center u-column ">
<div class="">
<div class="c-form-avatar u-relative ">
<svg class="u-absolute u-overflow-hidden" style="width: 0; height: 0;">
<defs>
<clipPath id="mask" clipPathUnits="objectBoundingBox">
<path d="M0.5,1 C0.856900994,1 1,0.856900994 1,0.5 C1,0.143099006 0.856900994,0 0.5,0 C0.143099006,0 0,0.143099006 0,0.5 C0,0.856900994 0.143099006,1 0.5,1 Z" />
</clipPath>
</defs>
</svg>
<input class="u-none" type="file" name="image" accept="image/*" />
<div class="c-form-avatar__mask u-size-full"></div>
<div class="c-form-avatar__uploader u-absolute u-cursor-pointer u-p-xsmall u-radius-circle u-border-none" aria-labelledby="image" aria-describedby="image">
<svg class="o-icon o-icon--md o-link-text">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-upload-cloud"></use>
</svg>
</div>
</div>
<script>
const UPLOAD_BUTTON = document.querySelector(".c-form-avatar__uploader");
const FILE_INPUT = document.querySelector("input[type=file]");
const AVATAR = document.querySelector(".c-form-avatar__mask");
UPLOAD_BUTTON.addEventListener("click", () => FILE_INPUT.click());
FILE_INPUT.addEventListener("change", event => {
const file = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
AVATAR.setAttribute("aria-label", file.name);
AVATAR.style.background = `url(${reader.result}) center center/cover`;
};
});
</script>
</div>
<div class="u-mt-base u-mt-none@sm u-ml-base@sm">
<h3 class="u-title-05 u-mb-xsmall">Nome Cognome</h3>
<span class="u-label-07 u-color-secondary u-block">email@mailservice.com</span>
</div>
</div>
<div class="u-mb-base u-size-full u-size-1-2 ">
<label class="u-label-04 u-color-base u-inline-block" for="">Sesso</label>
<select class=" u-block u-size-full" name="select-name" id="select-id">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
</div>
<div class="u-mb-base ">
<div class="">
<label class="u-label-04 u-color-base" for="">Anno di nascita</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
<div class="u-flex u-column u-row@md ">
<div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall@md ">
<div class="">
<label class="u-label-04 u-color-base" for="">Impiego</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
<div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall@md ">
<div class="">
<label class="u-label-04 u-color-base" for="">Settore</label>
<input class=" u-block u-size-full" type="text" placeholder="">
</div>
<!-- TODO: REVIEW ICON POSITION -->
</div>
</div>
<div class="u-mt-large">
<div class="u-flex u-items-center">
<div class="u-size-1-2 ">
<input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="Salta passaggio" onclick="next()" />
</div>
<div class="u-size-full u-size-1-2 u-text-right">
<input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="Completa profilo" onclick="next()" />
</div>
</div>
</div>
<!-- end complete profile form -->
</fieldset>
<section data-toggle="email-buysignup-fw__step" class="fw__result email-buysignup-fw__step">
<div class="u-mb-large">
<h2 class="u-heading-03 u-text-center">Grazie e Benvenuto</h2>
<p class="u-mb-large u-text-center">A breve riceverai una mail con il riepilogo dell’abbonamento attivato</p>
</div>
<div class="u-mb-large">
<div class="u-mb-base">
<a href="user--edit2021" class="c-btn c-btn--primary u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Torna all'articolo</a>
</div>
<div class="u-mb-base">
<a href="homepage--cover" class="c-btn c-btn--default u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Vai al canale spotlight</a>
</div>
<div class="u-mb-base">
<a href="#" class="c-btn c-btn--default u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Invia una segnalazione</a>
</div>
</div>
<!-- app CTA -->
<p class="o-text-overline u-text-center">
<span class="o-text">Scarica l'app</span>
</p>
<a href="https://www.romatoday.it/~shared/do/api/mobile-app/get/?campaign=user_signup">
<div class="u-flex u-row@md">
<div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall">
<img class="u-size-full" src="/assets/images/site/app/google_play_store.svg" alt="googlePlayStoreImg">
</div>
<div class="u-mb-base u-size-full u-size-1-2 u-ml-xsmall">
<img class="u-size-full" src="/assets/images/site/app/ios_app_store.svg" alt="iosAppStoreImg">
</div>
</div>
</a>
<!-- end app CTA -->
<div id="results" class="u-mb-large u-mt-large"></div>
</section>
</form>
<script>
window.onload = function() {
var stepIndex = 0;
}
// var modeToggle = document.getElementsByClassName("input:radio[name=c-tabs__choice]:checked");
// const stepElements = document.querySelector('[data-toggle-step]');
var stepElements = document.getElementsByClassName("email-buysignup-fw__step");
var form = document.getElementById("email-buysignup-form");
var breadcrumbsItems = document.getElementsByClassName("c-stepper__element");
// Initialise the form
function init() {
// Reset the step
stepIndex = 0;
// Clear all fields
form.reset();
toggleBreadcrumbsStep();
showCurrentStep();
breadcrumbsItems.classList.add("c-stepper__element--active");
}
// Indicate the current step with breadcrumbs
function toggleBreadcrumbsStep() {
Array.from(breadcrumbsItems).forEach(function(el, index) {
if (index <= stepIndex) {
el.classList.add("c-stepper__element--active");
} else {
el.classList.remove("c-stepper__element--active");
}
});
}
// Show the current step and hide the rest
function showCurrentStep() {
Array.from(stepElements).forEach(function(el, index) {
if (index !== stepIndex) {
el.classList.add("u-none");
} else {
el.classList.remove("u-none");
}
});
}
// Next step action, all fields in current step must be validated before proceed to next step.
function next() {
const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
// Increment step
stepIndex++;
toggleBreadcrumbsStep();
showCurrentStep();
}
// Back button action to navigate 1 step back
function back() {
// Clear all fields in current step
const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
Array.from(fields).forEach(function(field) {
const tagName = field.tagName;
if (tagName.localeCompare("INPUT") === 0) {
field.value = '';
} else if (tagName.localeCompare("SELECT") === 0) {
field.selectedIndex = 0;
}
});
// Decrement step
stepIndex--;
toggleBreadcrumbsStep();
showCurrentStep();
}
form.addEventListener('submit', function(e) {
e.preventDefault();
const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
// all fields in current step must be validated before submission.
// Prepare the result in next view
showResult();
// Navigate to result
stepIndex++;
// toggleBreadcrumbsStep();
showCurrentStep();
}, false);
function showResult() {
const resultsContainer = document.getElementById("results");
// Make sure the result page is empty
resultsContainer.innerHTML = "";
const fields = form.querySelectorAll("input:not([type=button]):not([type=submit]), select");
// List out all data
fields.forEach(field => {
const fieldLabel = field.getAttribute("data-label");
const fieldValue = field.value;
const resultItem = document.createElement("li");
resultItem.setAttribute("class", "fw__result__item");
resultItem.innerHTML = '<span class="fw__result__label">' + fieldLabel + ':</span> <strong class="fw__result__value">' + fieldValue + '</strong>';
resultsContainer.append(resultItem);
});
}
init();
</script>
<!-- end email form -->
</div>
<!-- end tabs module -->
</div>
<div class="c-tab u-p-none">
<!-- tabs module -->
<input type="radio" value="intro" id="intro-form-radio" class="u-none" name="c-tabs__choice" checked>
<div id="intro-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
<!-- email form -->
{% render "@form--buysignup", {
type: type,
mode: "email",
actionLabel: actionLabel,
succededImg: succededImg,
page_title: page_title,
page_subtitle: page_subtitle,
methods: methods
}, true %}
<!-- end email form -->
</div>
<!-- end tabs module -->
</div>
{
"limit": 9,
"stories": [
{
"index": 1,
"title": "Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire",
"label": "Emergenza Coronavirus",
"date": "ieri pomeriggio, 15:51",
"author": "Violetto Gorrasi",
"number": 1,
"summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/51380415156697/coronavirus-ansa-4-2-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/51380415156697/coronavirus-ansa-4-2-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 2,
"title": "Casa di riposo degli orrori: anziani legati e bastonati. Le immagini shock",
"label": "Sei arresti",
"date": "ieri pomeriggio, 15:51",
"author": "Matteo Scarlino",
"number": 2,
"summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 3,
"title": "Coronavirus, negli Usa 2.500 morti in un giorno ma Trump \"ha fretta\" di riaprire",
"label": "Esteri",
"date": "ieri pomeriggio, 15:51",
"author": "Fabio Grilli",
"number": 3,
"summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 4,
"title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
"label": "Lo studio del Touring Club italiano",
"date": "ieri pomeriggio, 15:51",
"author": "Ginevra Nozzoli",
"number": 4,
"summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 5,
"title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
"label": "Lo studio del Touring Club italiano",
"date": "ieri pomeriggio, 15:51",
"author": "Veronica Altimari",
"number": 5,
"summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 6,
"title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
"label": "Lo studio del Touring Club italiano",
"date": "ieri pomeriggio, 15:51",
"author": "Alberto Berlini",
"number": 6,
"summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 7,
"title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
"label": "Lo studio del Touring Club italiano",
"date": "ieri pomeriggio, 15:51",
"author": "Ginevra Nozzoli",
"number": 7,
"summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 8,
"title": "Muore annegato nella piscina comunale il giorno prima di compiere 7 anni",
"label": "Lo studio del Touring Club italiano",
"date": "ieri pomeriggio, 15:51",
"author": "Fabio Grilli",
"number": 8,
"summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 9,
"title": "Riceve il reddito di cittadinanza, ma ha 40 case e percepisce 120mila euro d'affitto",
"label": "Economia",
"date": "ieri pomeriggio, 15:51",
"author": "Fabio Grilli",
"number": 9,
"summary": "L'uomo è stato denunciato dalla Guardia di finanza a Lanciano, in provincia di Chieti. Gli immobili affittati, oltre quindici, secondo le Fiamme Gialle rendevano alla famiglia del beneficiario del sussidio oltre 120mila euro all'anno",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
}
],
"opinions": [
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "17 luglio, 2020",
"author": "Carlo Sala"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "12 luglio, 2020",
"author": "Massimiliano Dona"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "30 giugno, 2020",
"author": "Luciano Lanna"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "05 giugno, 2020",
"author": "Marilia Parente"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "27 maggio, 2020",
"author": "Dario Balotta"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "13 aprile, 2020",
"author": "Rossella Lamina"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "11 aprile, 2020",
"author": "Dario Balotta"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "04 marzo, 2020",
"author": "Luciano Lanna"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "18 febbraio, 2020",
"author": "Dario Balotta"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "01 febbraio, 2020",
"author": "Rossella Lamina"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "25 gennaio, 2020",
"author": "Dario Balotta"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "05 gennaio, 2020",
"author": "Luciano Lanna"
}
]
}
No notes defined.