<div class="l-boxed">
<div class="l-boxed__header u-z-undercover">
<div class="u-p-base">
<a class="u-block" href="/">
<style>
@font-face {
font-family: 'NovecentoNarrow';
src: url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff2"),
url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff");
font-style: normal;
font-display: swap;
}
</style>
<div class="c-brand c-brand__text u-uppercase u-no-underline c-brand--resize-small ">
<span class="c-brand__edition">agrigento</span><span class="c-brand__network">notizie</span>
</div>
</a>
</div>
</div>
<div class="l-boxed__sidebar" style="backgrond-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('/assets/images/site/cities/roma_desktop.jpg')">
</div>
<div class="l-boxed__content u-z-cover">
<div class="l-boxed__inner u-my-large">
<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>
<form id="email-activate-form" action="myPage.php" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post" novalidate>
<fieldset data-toggle="email-activate-fw__step" class="fw__inputs o-divider email-activate-fw__step u-pl-none u-pr-none u-mb-medium">
<!-- page hgroup -->
<div class="u-mb-large">
<h1 class="u-heading-03">Attiva il tuo profilo personale</h1>
<p class="u-mb-large u-color-secondary"></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="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="submit" value="Attiva profilo" />
</div>
</div>
</div>
<!-- end form activate -->
<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">
Non sei registrato?
<a class="o-link-primary" href="user--signup2021">Crea un account</a>
</span>
<span class="u-label-07 u-color-secondary u-block u-mb-small">
Non hai ricevuto il codice di attivazione?
<a class="o-link-primary" href="user--recovery2021">Richiedi il codice di attivazione</a>
</span>
</div>
</fieldset>
<section data-toggle="email-activate-fw__step" class="fw__result email-activate-fw__step">
<div class="u-mb-large">
<h2 class="u-heading-03 u-text-center">Attivazione avvenuta con successo</h2>
<div class="u-mb-base">
<a href="#" class="c-btn c-btn--primary u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Completa profilo</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">Leggi le ultime notizie</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_activate">
<div class="u-flex u-column 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">
<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-activate-fw__step");
var form = document.getElementById("email-activate-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>
<input type="radio" value="mail" id="mail-form-radio" class="u-none" name="c-tabs__choice">
<div id="mail-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>
<form id="email-activate-form" action="myPage.php" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post" novalidate>
<fieldset data-toggle="email-activate-fw__step" class="fw__inputs o-divider email-activate-fw__step u-pl-none u-pr-none u-mb-medium">
<!-- page hgroup -->
<div class="u-mb-large">
<h1 class="u-heading-03">Attiva il tuo profilo personale</h1>
<p class="u-mb-large u-color-secondary"></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="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="submit" value="Attiva profilo" />
</div>
</div>
</div>
<!-- end form activate -->
<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">
Non sei registrato?
<a class="o-link-primary" href="user--signup2021">Crea un account</a>
</span>
<span class="u-label-07 u-color-secondary u-block u-mb-small">
Non hai ricevuto il codice di attivazione?
<a class="o-link-primary" href="user--recovery2021">Richiedi il codice di attivazione</a>
</span>
</div>
</fieldset>
<section data-toggle="email-activate-fw__step" class="fw__result email-activate-fw__step">
<div class="u-mb-large">
<h2 class="u-heading-03 u-text-center">Attivazione avvenuta con successo</h2>
<div class="u-mb-base">
<a href="#" class="c-btn c-btn--primary u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Completa profilo</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">Leggi le ultime notizie</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_activate">
<div class="u-flex u-column 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">
<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-activate-fw__step");
var form = document.getElementById("email-activate-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>
<input type="radio" value="phone" id="phone-form-radio" class="u-none" name="c-tabs__choice">
<div id="phone-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
<!-- phone form -->
<!-- end phone form -->
</div>
<!-- end tabs module -->
</div>
</div>
</div>
<div class="l-boxed__footer u-z-undercover">
<!-- -->
<div class="u-mt-xlarge@md u-p-base">
<a href="www.citynews.it" class="c-footer-brand">
<svg class="o-icon--fill" width="91" height="24">
<use xlink:href="#brand-citynews"></use>
</svg>
</a>
<p class="u-label-07">
© Copyright 2009-2021 RomaToday <br />
plurisettimanale telematico reg. tribunale di Roma n. 93/2010 <br />
P.iva 10786801000 <br />
Testata iscritta all'USPI
</p>
<ul class="u-list-none u-list-reset u-label-07">
<li class="u-size-full"><a class="o-link-primary" href="https://citynews.it/privacy#_ga=2.195002985.558624410.1646066405-2053839960.1623412359" targhet="_blank">Cookie & Privacy policy</a></li>
<li class="u-size-full"><a class="o-link-primary" href="https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359" targhet="_blank">Termini e condizioni</a></li>
</ul>
</div>
<!-- -->
</div>
</div>
<div class="l-boxed">
<div class="l-boxed__header u-z-undercover">
<div class="u-p-base">
<a class="u-block" href="/">
{% render "@brand", {
inverse:false,
modifier: 'resize-small',
local: false,
logo: false
}, true %}
</a>
</div>
</div>
<div class="l-boxed__sidebar" {% if sidebarImg %}style="backgrond-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('{{sidebarImg}}')"{% endif %}>
</div>
<div class="l-boxed__content u-z-cover">
<div class="l-boxed__inner u-my-large">
{% if type == "login" %}
{% render "@login", {
type: type,
mode: mode,
page_title: page_title,
page_subtitle: page_subtitle,
actionLabel: actionLabel
}, true %}
{% elif type == "logout" %}
{% render "@logout", {
type: type,
page_title: page_title,
page_subtitle: page_subtitle,
actionLabel: actionLabel
}, true %}
{% elif type == "signup" %}
{% render "@signup", {
type: type,
page_title: page_title,
page_subtitle: page_subtitle,
actionLabel: actionLabel,
methods: methods
}, true %}
{% elif type == "buysignup" %}
{% render "@buysignup", {
type: type,
page_title: page_title,
page_subtitle: page_subtitle,
actionLabel: actionLabel,
methods: methods
}, true %}
{% elif type == "activate" %}
{% render "@activate", {
type: type,
page_title: page_title,
page_subtitle: page_subtitle,
actionLabel: actionLabel
}, true %}
{% elif type == "recovery" %}
{% render "@recovery", {
type: type,
page_title: page_title,
page_subtitle: page_subtitle,
actionLabel: actionLabel
}, true %}
{% elif type == "delete" %}
{% render "@delete", {
type: type,
page_title: page_title,
page_subtitle: page_subtitle,
actionLabel: actionLabel
}, true %}
{% elif type == "view" %}
{% render "@view", {
type: type,
page_title: page_title,
page_subtitle: page_subtitle,
actionLabel: actionLabel
}, true %}
{% endif %}
</div>
</div>
<div class="l-boxed__footer u-z-undercover">
<!-- -->
<div class="u-mt-xlarge@md u-p-base">
<a href="www.citynews.it" class="c-footer-brand">
{# <img class="u-size-1-4" src="{{gBrand}}" alt="Citynews"> #}
<svg class="o-icon--fill" width="91" height="24">
<use xlink:href="#brand-citynews"></use>
</svg>
</a>
<p class="u-label-07">
© Copyright 2009-2021 {{hName}} <br />
plurisettimanale telematico reg. tribunale di Roma n. 93/2010 <br />
P.iva 10786801000 <br />
Testata iscritta all'USPI
</p>
<ul class="u-list-none u-list-reset u-label-07">
<li class="u-size-full"><a class="o-link-primary" href="https://citynews.it/privacy#_ga=2.195002985.558624410.1646066405-2053839960.1623412359" targhet="_blank">Cookie & Privacy policy</a></li>
<li class="u-size-full"><a class="o-link-primary" href="https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359" targhet="_blank">Termini e condizioni</a></li>
</ul>
</div>
<!-- -->
</div>
</div>
{
"sidebarImg": "/assets/images/site/cities/roma_desktop.jpg",
"hName": "RomaToday",
"hBrand": "/assets/images/site/brands_orizzontal/Property 1=RomaToday.svg",
"gBrand": "/assets/images/site/horizontal-white-full@2x.png",
"type": "activate",
"actionLabel": "Attiva profilo",
"errors": false,
"page_title": "Attiva il tuo profilo personale",
"page_subtitle": "Scegli una modalità di attivazione"
}
No notes defined.