diff --git a/cgi-bin/params.inc b/cgi-bin/params.inc index a9143b4..aba06a8 100755 --- a/cgi-bin/params.inc +++ b/cgi-bin/params.inc @@ -1,4 +1,115 @@ "Agrigento", + "AL" => "Alessandria", + "AN" => "Ancona", + "AO" => "Aosta", + "AP" => "Ascoli Piceno", + "AQ" => "L'Aquila", + "AR" => "Arezzo", + "AT" => "Asti", + "AV" => "Avellino", + "BA" => "Bari", + "BG" => "Bergamo", + "BI" => "Biella", + "BL" => "Belluno", + "BN" => "Benevento", + "BO" => "Bologna", + "BR" => "Brindisi", + "BS" => "Brescia", + "BT" => "Barletta-Andria-Trani", + "BZ" => "Bolzano", + "CA" => "Cagliari", + "CB" => "Campobasso", + "CE" => "Caserta", + "CH" => "Chieti", + "CL" => "Caltanissetta", + "CN" => "Cuneo", + "CO" => "Como", + "CR" => "Cremona", + "CS" => "Cosenza", + "CT" => "Catania", + "CZ" => "Catanzaro", + "EN" => "Enna", + "FC" => "Forlì-Cesena", + "FE" => "Ferrara", + "FG" => "Foggia", + "FI" => "Firenze", + "FM" => "Fermo", + "FR" => "Frosinone", + "GE" => "Genova", + "GO" => "Gorizia", + "GR" => "Grosseto", + "IM" => "Imperia", + "IS" => "Isernia", + "KR" => "Crotone", + "LC" => "Lecco", + "LE" => "Lecce", + "LI" => "Livorno", + "LO" => "Lodi", + "LT" => "Latina", + "LU" => "Lucca", + "MB" => "Monza e della Brianza", + "MC" => "Macerata", + "ME" => "Messina", + "MI" => "Milano", + "MN" => "Mantova", + "MO" => "Modena", + "MS" => "Massa e Carrara", + "MT" => "Matera", + "NA" => "Napoli", + "NO" => "Novara", + "NU" => "Nuoro", + "OR" => "Oristano", + "PA" => "Palermo", + "PC" => "Piacenza", + "PD" => "Padova", + "PE" => "Pescara", + "PG" => "Perugia", + "PI" => "Pisa", + "PN" => "Pordenone", + "PO" => "Prato", + "PR" => "Parma", + "PT" => "Pistoia", + "PU" => "Pesaro e Urbino", + "PV" => "Pavia", + "PZ" => "Potenza", + "RA" => "Ravenna", + "RC" => "Reggio Calabria", + "RE" => "Reggio Emilia", + "RG" => "Ragusa", + "RI" => "Rieti", + "RM" => "Roma", + "RN" => "Rimini", + "RO" => "Rovigo", + "SA" => "Salerno", + "SI" => "Siena", + "SO" => "Sondrio", + "SP" => "La spezia", + "SR" => "Siracusa", + "SS" => "Sassari", + "SU" => "Sud Sardegna", + "SV" => "Savona", + "TA" => "Taranto", + "TE" => "Teramo", + "TN" => "Trento", + "TO" => "Torino", + "TP" => "Trapani", + "TR" => "Terni", + "TS" => "Trieste", + "TV" => "Treviso", + "UD" => "Udine", + "VA" => "Varese", + "VB" => "Verbano Cusio Ossola", + "VC" => "Vercelli", + "VE" => "Venezia", + "VI" => "Vicenza", + "VR" => "Verona", + "VT" => "Viterbo", + "VV" => "Vibo Valentia" + ); + ?> diff --git a/components/breadcrumb/breadcrumb.html b/components/breadcrumb/breadcrumb.html index 6800eaa..950f68f 100644 --- a/components/breadcrumb/breadcrumb.html +++ b/components/breadcrumb/breadcrumb.html @@ -16,10 +16,12 @@ $levels[0] = array('acquistare', '/acquistare'); if($getQ[1]) {$levels[1] = array($getQ[2], '/acquistare/'.$getQ[1].'/'.$getQ[2]);} break; - case 'carrello': $levels[0] = array('carrello', '/carrello'); break; + case 'checkout': + $levels[0] = array('checkout', '/checkout'); + break; case 'due-cucchiai-di-salute': $levels[0] = array('raccontare', '/raccontare'); diff --git a/components/cart/cart.html b/components/cart/cart.html index 6581a3c..f13cbaa 100644 --- a/components/cart/cart.html +++ b/components/cart/cart.html @@ -10,12 +10,12 @@
-
-
+
+
-
-
-
Prodotto
+
+
+
Prodotto
Prezzo
Quantità
Totale
@@ -31,13 +31,13 @@ $total += $item['price'] * $item['qty']; ?> -
-
+
+
-
+
@@ -58,15 +58,15 @@ } ?> -
-
+
+
Subtotale tasse incluse - + concludi ordine
diff --git a/components/cart/cart.scss b/components/cart/cart.scss index fa210ea..feb78a0 100644 --- a/components/cart/cart.scss +++ b/components/cart/cart.scss @@ -69,6 +69,7 @@ } .place-order { + display: inline-block; @include font-style($font-serif, 'regular', $font-20); margin: 20px 0 0 auto; } diff --git a/components/checkout/checkout.html b/components/checkout/checkout.html new file mode 100644 index 0000000..617e3b3 --- /dev/null +++ b/components/checkout/checkout.html @@ -0,0 +1,84 @@ + + + +
+
+
+ +
+ Dettagli fatturazione + Sei già nostro cliente? Accedi + +
+
+ Nome * + +
+
+ Cognome * + +
+
+ E-mail * + +
+
+ Telefono + +
+
+ Indirizzo * + +
+
+ Città * + +
+
+ CAP * + +
+
+ Provincia * + +
+
+ Scegli una password * + +
+
+ Conferma password * + +
+
+ Vuoi spedire ad un indirizzo diverso? + + +
+
+
+ +
+ Il tuo ordine + +
+
+
+
diff --git a/components/checkout/checkout.js b/components/checkout/checkout.js new file mode 100644 index 0000000..a5f1456 --- /dev/null +++ b/components/checkout/checkout.js @@ -0,0 +1,5 @@ + +$(document).ready( () => { + console.log('Load component - checkout') + +}) \ No newline at end of file diff --git a/components/checkout/checkout.scss b/components/checkout/checkout.scss new file mode 100644 index 0000000..ef5d26d --- /dev/null +++ b/components/checkout/checkout.scss @@ -0,0 +1,27 @@ +@import "../../src/scss/variables.scss"; +@import "../../src/scss/mixins.scss"; + +.component-checkout { + padding: 10px 0 40px 0; + + .title { + display: block; + @include font-style($font-serif, 400, $font-32); + color: $black; + height: 50px; + } + + .subtitle { + display: block; + @include font-style($font-sans, 700, $font-16); + color: $gray; + height: 40px; + } + + .label { + display: block; + @include font-style($font-sans, 700, $font-16); + color: $gray; + padding: 15px 0 5px 0; + } +} diff --git a/components/sectionHeader/sectionHeader.html b/components/sectionHeader/sectionHeader.html index 8e58ef0..df85564 100644 --- a/components/sectionHeader/sectionHeader.html +++ b/components/sectionHeader/sectionHeader.html @@ -14,10 +14,9 @@ $section_label = 'produrre'; break; case 'acquistare': - $section_label = 'acquistare'; - break; case 'carrello': - $section_label = 'carrello'; + case 'checkout': + $section_label = 'acquistare'; break; } diff --git a/pages/checkout.ejs b/pages/checkout.ejs new file mode 100644 index 0000000..907e0c9 --- /dev/null +++ b/pages/checkout.ejs @@ -0,0 +1,2 @@ + +${require('../components/checkout/checkout.html')} diff --git a/src/scss/forms.scss b/src/scss/forms.scss index cb72821..d5c3dd8 100644 --- a/src/scss/forms.scss +++ b/src/scss/forms.scss @@ -1,7 +1,6 @@ input, button { - border: 1px solid $black; background: $white; border-radius: 0; height: 28px; @@ -37,6 +36,7 @@ textarea { background: $white; width: 100%; outline: none !important; + border: 1px solid $gray; &:active, &:focus{ @@ -74,85 +74,36 @@ input[type=number] { height: auto; display: block; padding: 7px 10px; - border: 2px solid $white; + border: 1px solid $gray; @include font-style( $font-sans, 'regular', $font-18); box-shadow: unset; text-transform: initial !important; - & + .label-text, - & + label { - color: $gray; - top: -1*$font-10; - position: absolute; - display: block; - @include font-style($font-sans, 'regular', $font-10); - text-transform: uppercase; - } - - &:required { - & + .label-text, - & + label { - &::after { - content: ' *'; - } - - & ~ .error-message { - display: none; - color: $red; - @include font-style($font-sans, 'regular', $font-10); - } - } - } - - &.has-error { - border-bottom: 1px solid $red; - & + .label-text, - & + label { - color: $red; - text-transform: uppercase; - & ~ .error-message { - display: block; - color: $red; - text-transform: uppercase; - } - } - } - - &.transparent { - background: transparent; - } - - &.input-gray { - border: 2px solid $light-gray; - background: $light-gray; - } - - &:disabled { - border-bottom: 2px solid $gray; - & + .label-text, - & + label { - color: $gray; - } - } } -select { +select, +.input-select { appearance: none; background-image: url(/images/arrow-down.svg); - background-size: auto 40%; + background-size: auto 30%; background-repeat: no-repeat; - background-position: right 3px center; - border-bottom: 1px solid $gray; + background-position: right 10px center; +} - &:disabled { - background-image: url(/images/arrow-down.svg); - } +.input-text { + padding: 7px 20px; + //height: 40px; +} - &:focus { - //background-image: url(/images/arrow-up.svg); - } +.input-select { + padding: 7px 20px; + //height: 40px; } +.input-textarea { + padding: 7px; + width: 100%; +} .button { color: $white; @@ -212,11 +163,13 @@ select { margin-bottom: 12px; cursor: pointer; user-select: none; - width: 100%; - float: left; line-height: 12px; - .checkmark { + .checkbox-label { + font-size: $font-16; + } + + .mark { position: absolute; top: 0; left: 0; @@ -241,8 +194,61 @@ select { cursor: pointer; height: 0; width: 0; - &:checked ~ .checkmark { - background: $black; + &:checked ~ .mark { + background: $gray; + &:after { + display: block; + } + } + } +} + +.radio { + display: inline-block; + position: relative; + padding-left: 25px; + margin: 10px 15px 0 0; + cursor: pointer; + user-select: none; + line-height: 20px; + + .radio-label { + font-size: $font-16; + } + + .mark { + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; + border-radius: 50%; + background: none; + border: 1px solid $gray; + &:disabled { + border-bottom: 1px solid $gray; + } + + &:after { + content: ''; + position: absolute; + top: 3px; + left: 3px; + height: 12px; + width: 12px; + border-radius: 50%; + background: $gray; + display: none; + } + } + + input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + &:checked ~ .mark { &:after { display: block; } diff --git a/src/scss/main.scss b/src/scss/main.scss index 9cf7909..b929e33 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -21,3 +21,4 @@ @import "./components/breadcrumb/breadcrumb.scss"; @import "./components/homeTemplate/homeTemplate.scss"; @import "./components/cart/cart.scss"; +@import "./components/checkout/checkout.scss";