+++ /dev/null
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 25.2 48.4" style="enable-background:new 0 0 25.2 48.4;" xml:space="preserve">
-<style type="text/css">
- .st0{fill:#02509D;}
- .st1{fill:#4874B9;}
- .st2{fill:#FCE500;}
-</style>
-<g id="Calque_2">
- <rect y="0.4" class="st0" width="25.2" height="47.6"/>
-</g>
-<g id="Calque_1">
- <path id="Tracé_11_00000150091617687475798900000004413229926676481725_" class="st1" d="M0,0.4l19.3,24L0,48.4l0,0"/>
- <path id="Tracé_12_00000026164669908951458440000005931720365407362224_" class="st2" d="M25.2,48L4.3,48l19.4-24L4.3,0l20.8,0"/>
-</g>
-</svg>
+++ /dev/null
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="0 0 25.2 48.4" style="enable-background:new 0 0 25.2 48.4;" xml:space="preserve">
-<style type="text/css">
- .st0{fill:#02509D;}
- .st1{fill:#FCE500;}
- .st2{fill:#4974B8;}
-</style>
-<g id="Calque_2">
- <rect y="0.4" class="st0" width="25.2" height="47.6"/>
-</g>
-<g id="Calque_1">
- <path id="Tracé_11_00000150091617687475798900000004413229926676481725_" class="st1" d="M0,0.4l19.3,24L0,48.4l0,0"/>
- <path id="Tracé_12_00000026164669908951458440000005931720365407362224_" class="st2" d="M25.2,48L4.3,48l19.4-24L4.3,0l20.8,0"/>
-</g>
-</svg>
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 25.2 48.4" style="enable-background:new 0 0 25.2 48.4;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#02509D;}
+ .st1{fill:#4874B9;}
+ .st2{fill:#FCE500;}
+</style>
+<g id="Calque_2">
+ <rect y="0.4" class="st0" width="25.2" height="47.6"/>
+</g>
+<g id="Calque_1">
+ <path id="Tracé_11_00000150091617687475798900000004413229926676481725_" class="st1" d="M0,0.4l19.3,24L0,48.4l0,0"/>
+ <path id="Tracé_12_00000026164669908951458440000005931720365407362224_" class="st2" d="M25.2,48L4.3,48l19.4-24L4.3,0l20.8,0"/>
+</g>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 25.2 48.4" style="enable-background:new 0 0 25.2 48.4;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#02509D;}
+ .st1{fill:#FCE500;}
+ .st2{fill:#4974B8;}
+</style>
+<g id="Calque_2">
+ <rect y="0.4" class="st0" width="25.2" height="47.6"/>
+</g>
+<g id="Calque_1">
+ <path id="Tracé_11_00000150091617687475798900000004413229926676481725_" class="st1" d="M0,0.4l19.3,24L0,48.4l0,0"/>
+ <path id="Tracé_12_00000026164669908951458440000005931720365407362224_" class="st2" d="M25.2,48L4.3,48l19.4-24L4.3,0l20.8,0"/>
+</g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="9.9" height="15.556" viewBox="0 0 9.9 15.556">
+ <g id="Groupe_24" data-name="Groupe 24" transform="translate(435.621 -957) rotate(90)">
+ <rect id="Rectangle_7" data-name="Rectangle 7" width="11" height="3" transform="translate(959.121 425.722) rotate(45)" fill="#fff"/>
+ <rect id="Rectangle_8" data-name="Rectangle 8" width="11" height="3" transform="translate(972.556 427.843) rotate(135)" fill="#fff"/>
+ </g>
+</svg>
--- /dev/null
+<svg id="Groupe_4" data-name="Groupe 4" xmlns="http://www.w3.org/2000/svg" width="52.085" height="52.23" viewBox="0 0 52.085 52.23">
+ <g id="Groupe_3" data-name="Groupe 3" transform="translate(0 0)">
+ <path id="Tracé_1" data-name="Tracé 1" d="M87.655,52.667A26.115,26.115,0,1,0,113.7,78.782,26.109,26.109,0,0,0,87.655,52.667Zm0,48.034A21.908,21.908,0,1,1,109.5,78.793,21.9,21.9,0,0,1,87.655,100.7Z" transform="translate(-61.613 -52.667)" fill="#fff"/>
+ <g id="Groupe_2" data-name="Groupe 2" transform="translate(9.953 13.19)">
+ <path id="Tracé_2" data-name="Tracé 2" d="M138.87,132.483a1.882,1.882,0,0,0,1.2-.458,24.363,24.363,0,0,1,.1-13.649,1.867,1.867,0,0,0-1.139-.455c-.967-.013-1.831.854-2.463,2.237a18.076,18.076,0,0,1,.619,5.1,18.688,18.688,0,0,1-.709,4.992C137.064,131.617,137.915,132.47,138.87,132.483Z" transform="translate(-124.85 -112.305)" fill="#fff"/>
+ <path id="Tracé_3" data-name="Tracé 3" d="M111.76,119.3a2.932,2.932,0,0,1-1.979.839c-2.541-.026-4.552-4-4.5-8.859s2.153-8.781,4.681-8.755a2.9,2.9,0,0,1,1.909.831,13.057,13.057,0,0,1,1.283-2.479,4.836,4.836,0,0,0-2.431-1.831,18.738,18.738,0,0,0-9.04-.116c-2.773.608-5.468,5.509-5.533,12.324s2.515,11.769,5.275,12.428a18.448,18.448,0,0,0,9.04.078,5,5,0,0,0,2.586-1.929A12.623,12.623,0,0,1,111.76,119.3Z" transform="translate(-96.147 -98.434)" fill="#fff"/>
+ </g>
+ <path id="Tracé_4" data-name="Tracé 4" d="M159.962,104.05c-.967-.013-1.831.854-2.463,2.237a18.087,18.087,0,0,1,.619,5.1,18.7,18.7,0,0,1-.71,4.992c.593,1.371,1.444,2.224,2.4,2.237,1.87.026,3.4-3.22,3.456-7.242s-1.444-7.294-3.3-7.32Zm.4-5c-2.992-.8-3.535-.789-6.644-.116-2.773.608-5.468,5.509-5.533,12.325s2.515,11.768,5.275,12.428c3.1.75,3.638.828,6.644.078,2.721-.672,5.468-5.5,5.533-12.3s-2.579-11.691-5.275-12.415Zm-.942,21.093c-2.54-.026-4.552-4-4.5-8.859s2.154-8.781,4.681-8.755,4.552,4,4.5,8.859-2.141,8.781-4.681,8.755Z" transform="translate(-123.235 -85.244)" fill="#fff"/>
+ </g>
+</svg>
--- /dev/null
+<svg id="Groupe_6" data-name="Groupe 6" xmlns="http://www.w3.org/2000/svg" width="52.085" height="52.23" viewBox="0 0 52.085 52.23">
+ <g id="Groupe_5" data-name="Groupe 5" transform="translate(0 0)">
+ <path id="Tracé_5" data-name="Tracé 5" d="M289.712,52.667a26.115,26.115,0,1,0,26.042,26.115,26.11,26.11,0,0,0-26.042-26.115Zm0,48.034a21.908,21.908,0,1,1,21.847-21.908A21.9,21.9,0,0,1,289.712,100.7Z" transform="translate(-263.669 -52.667)" fill="#fff"/>
+ <path id="Tracé_6" data-name="Tracé 6" d="M330.328,97.388c-1.131-.015-2.142,1-2.881,2.617a21.149,21.149,0,0,1,.724,5.961,21.855,21.855,0,0,1-.83,5.839c.694,1.6,1.69,2.6,2.806,2.617,2.187.03,3.983-3.767,4.043-8.472.045-4.7-1.69-8.532-3.862-8.563Zm.468-5.855A21.923,21.923,0,0,0,320.22,91.4c-3.244.711-6.4,6.445-6.472,14.417-.091,7.957,2.942,13.767,6.17,14.538a21.585,21.585,0,0,0,10.575.09c3.183-.786,6.4-6.429,6.472-14.387s-3.017-13.676-6.17-14.523Zm-1.1,24.674c-2.972-.03-5.325-4.675-5.265-10.363s2.519-10.272,5.476-10.242,5.326,4.675,5.265,10.363-2.5,10.272-5.476,10.242Z" transform="translate(-299.314 -79.823)" fill="#fff"/>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="9.9" height="15.556" viewBox="0 0 9.9 15.556">
+ <g id="Groupe_10" data-name="Groupe 10" transform="translate(-425.722 972.556) rotate(-90)">
+ <rect id="Rectangle_7" data-name="Rectangle 7" width="11" height="3" transform="translate(959.121 425.722) rotate(45)" fill="#fff"/>
+ <rect id="Rectangle_8" data-name="Rectangle 8" width="11" height="3" transform="translate(972.556 427.843) rotate(135)" fill="#fff"/>
+ </g>
+</svg>
<head>
<meta charset="UTF-8">
<meta name="width" content="320">
- <meta name="height" content="760">
+ <meta name="height" content="480">
<title></title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap" rel="stylesheet">
<form></form>
<div id="noresult" data-l10n="No product found"></div>
<div id="results"></div>
+ <a href="#" id="back" data-l10n="New search"></a>
</main>
</div>
+<div id="preload">
+ <div style="background-image: url('images/back.svg')"></div>
+ <div style="background-image: url('images/icon-set.svg')"></div>
+ <div style="background-image: url('images/icon-tyre.svg')"></div>
+ <div style="background-image: url('images/arrow-header-left.svg')"></div>
+</div>
<script src="../../jquery.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="jquery.multi-select.js"></script>
+++ /dev/null
-<svg xmlns="http://www.w3.org/2000/svg" width="9.9" height="15.556" viewBox="0 0 9.9 15.556">
- <g id="Groupe_10" data-name="Groupe 10" transform="translate(-425.722 972.556) rotate(-90)">
- <rect id="Rectangle_7" data-name="Rectangle 7" width="11" height="3" transform="translate(959.121 425.722) rotate(45)" fill="#fff"/>
- <rect id="Rectangle_8" data-name="Rectangle 8" width="11" height="3" transform="translate(972.556 427.843) rotate(135)" fill="#fff"/>
- </g>
-</svg>
$(document).on('change', 'select,input', function () {
updateForm();
});
+
+ $('#back').on('click', function () {
+ $('select[name="universe"]').val('');
+ updateForm();
+ return false;
+ });
+
+ $(window).on('resize', function () {
+
+ });
+
updateForm();
});
return;
}
STEP++;
- createSelectList('set', [{key: 'set', value: getTranslation('Set')}, {key: 'tyre', value: getTranslation('Tyre')}]);
+ createSetList('set', [{key: 'set', value: getTranslation('Set')}, {key: 'tyre', value: getTranslation('Tyre')}]);
if (!isDefined(FORMDATA.set)) {
updateSteps();
return;
$('header li:visible:eq(' + (STEP) + ')').addClass('next');
$('header li:visible:eq(' + (STEP - 2) + ')').addClass('previous');
$('form .field:last').show();
+ if (STEP > 1) {
+ $("#back").show();
+ } else {
+ $("#back").hide();
+ }
}
function createSelect(name, options, placeholder) {
$.each(options, function (k, v) {
s.append('<option value="' + v.key + '"' + (v.key == value ? ' selected' : '') + '>' + v.value + '</option>');
});
- var f = $('<div class="field"></div>')
+ var f = $('<div class="field select"></div>')
$(f).append(s);
$('form').append(f);
}
function createResults(options) {
+
var list = $('<ul>');
$.each(options, function (k, v) {
var o = v.Gamme;
$("#results").append(list);
}
-function createSelectList(name, options, value) {
- return createSelect(name, options, value);
+function createSetList(name, options, placeholder) {
+ let value = FORMDATA[name];
+ var s = $('<ul class="selectlist"></ul>');
+ $.each(options, function (k, v) {
+ s.append('<li><label><input type="radio" name="' + name + '" value="' + v.key + '" ' + (value === v.key ? ' checked' : '') + '><img src="images/icon-' + v.key + '.svg"> ' + v.value + '</label></li>');
+ });
+ var f = $('<div class="field"></div>')
+ $(f).append(s);
+ $('form').append(f);
}
(function ($) {
height: 60px;
padding: 18px 30px;
}
-main {
- padding: 0 20px;
-}
form .field {
display: none;
padding: 40px 0;
}
+form .field.select {
+ padding: 40px 20px;
+}
form select {
width: 100%;
padding: 20px;
font-size: 16px;
}
#noresult {
- padding: 40px 0;
+ padding: 40px 20px;
}
#results {
padding: 40px 0;
#results li {
list-style: none;
}
-#results li a {
+#results li a,
+#results li label {
display: block;
+ padding: 15px 20px;
color: #fff;
- padding: 15px 0;
text-decoration: none;
cursor: pointer;
position: relative;
+ transition: background-color 300ms;
+}
+#results li a:hover,
+#results li label:hover {
+ background-color: #4874b9;
}
-#results li a::after {
+#results li a::after,
+#results li label::after {
content: '';
position: absolute;
height: 15px;
width: 10px;
top: 18px;
- right: 0px;
- background-image: url("list.svg");
+ right: 20px;
+ background-image: url("images/list.svg");
+}
+.selectlist li {
+ list-style: none;
+}
+.selectlist li a,
+.selectlist li label {
+ display: block;
+ padding: 15px 20px;
+ color: #fff;
+ text-decoration: none;
+ cursor: pointer;
+ position: relative;
+ transition: background-color 300ms;
+}
+.selectlist li a:hover,
+.selectlist li label:hover {
+ background-color: #4874b9;
+}
+.selectlist li a::after,
+.selectlist li label::after {
+ content: '';
+ position: absolute;
+ height: 15px;
+ width: 10px;
+ top: 18px;
+ right: 20px;
+ background-image: url("images/list.svg");
+}
+.selectlist li label {
+ height: 82px;
+}
+.selectlist li label input {
+ visibility: hidden;
+ position: absolute;
+}
+.selectlist li label img {
+ vertical-align: middle;
+ margin-right: 15px;
+}
+.selectlist li label:after {
+ top: 33px;
}
header {
position: relative;
background-size: auto 100%;
}
header ul li.active::after {
- background-image: url("arrow-header-right.svg");
+ background-image: url("images/arrow-header-right.svg");
right: 30px;
}
header ul li.active::before {
- background-image: url("arrow-header-left.svg");
+ background-image: url("images/arrow-header-left.svg");
left: 30px;
}
header ul li.active.first {
position: relative;
overflow: hidden;
}
+#back {
+ cursor: pointer;
+ color: #fff;
+ text-decoration: none;
+ position: fixed;
+ left: 20px;
+ bottom: 20px;
+}
+#back:before {
+ content: '';
+ display: inline-block;
+ width: 10px;
+ height: 16px;
+ background-image: url("images/back.svg");
+ margin-right: 20px;
+ position: relative;
+ top: 1px;
+}
+.list-item {
+ list-style: none;
+}
+.list-item a,
+.list-item label {
+ display: block;
+ padding: 15px 20px;
+ color: #fff;
+ text-decoration: none;
+ cursor: pointer;
+ position: relative;
+ transition: background-color 300ms;
+}
+.list-item a:hover,
+.list-item label:hover {
+ background-color: #4874b9;
+}
+.list-item a::after,
+.list-item label::after {
+ content: '';
+ position: absolute;
+ height: 15px;
+ width: 10px;
+ top: 18px;
+ right: 20px;
+ background-image: url("images/list.svg");
+}
+#preload {
+ opacity: 0;
+ position: absolute;
+ pointer-events: none;
+}
/*# sourceMappingURL=style.css.map */
\ No newline at end of file
-{"version":3,"sources":["style.less"],"names":[],"mappings":"AAAA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;;AAGF;EACE,aAAa,6CAAb;EACA,WAAA;EACA,yBAAA;EACA,eAAA;;AAGF;EACE,eAAA;EACA,gBAAA;EACA,YAAA;EACA,kBAAA;;AAGF;EACE,eAAA;;AAGF,IAEE;EACE,aAAA;EACA,eAAA;;AAJJ,IAOE;EACE,WAAA;EACA,aAAA;EACA,SAAA;EACA,eAAA;;AAIJ;EACE,eAAA;;AAGF;EACE,eAAA;;AADF,QAGE;EACE,gBAAA;;AAJJ,QAGE,GAEE;EACE,cAAA;EACA,WAAA;EACA,eAAA;EACA,qBAAA;EACA,eAAA;EACA,kBAAA;;AAEA,QAVJ,GAEE,EAQG;EACC,SAAS,EAAT;EACA,kBAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;EACA,UAAA;EACA,sBAAsB,WAAtB;;AAMR;EACE,kBAAA;EACA,mBAAA;EACA,YAAA;;AAHF,MAKE;EACE,eAAA;;AAEA,MAHF,GAGG;AAAO,MAHV,GAGW;EACP,aAAA;;AATN,MAKE,GAOE;EACE,kBAAA;EACA,eAAA;EACA,qBAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;EACA,+BAAA;EACA,yBAAA;EACA,kBAAkB,4EAAlB;EACA,iBAAA;EACA,4BAAA;EACA,UAAA;EACA,gBAAA;;AAEA,MAtBJ,GAOE,GAeG;EACC,UAAA;;AAGF,MA1BJ,GAOE,GAmBG;EACC,kBAAA;EACA,WAAA;;AAGF,MA/BJ,GAOE,GAwBG;EACC,sBAAA;EACA,yBAAA;EACA,WAAA;EACA,UAAA;EACA,OAAA;;AAEA,MAtCN,GAOE,GAwBG,OAOE;AAAS,MAtChB,GAOE,GAwBG,OAOY;EACT,SAAS,EAAT;EACA,kBAAA;EACA,SAAA;EACA,cAAA;EACA,YAAA;EACA,WAAA;EAEA,wBAAA;EACA,0BAAA;;AAIF,MAnDN,GAOE,GAwBG,OAoBE;EACC,sBAAsB,yBAAtB;EACA,WAAA;;AAGF,MAxDN,GAOE,GAwBG,OAyBE;EACC,sBAAsB,wBAAtB;EACA,UAAA;;AAGF,MA7DN,GAOE,GAwBG,OA8BE;EACC,kBAAA;;AAEA,MAhER,GAOE,GAwBG,OA8BE,MAGE;EACC,aAAA;;AAKF,MAtER,GAOE,GAwBG,OAsCE,KACE;EACC,aAAA;;AAQZ;EACE,YAAA;EACA,cAAA;EACA,kBAAA;EACA,gBAAA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["style.less"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
padding: 18px 30px;
}
-main {
- padding: 0 20px;
-}
-
form {
-
.field {
display: none;
padding: 40px 0;
+
+ &.select {
+ padding: 40px 20px;
+ }
}
select {
}
#noresult {
- padding: 40px 0;
+ padding: 40px 20px;
}
#results {
padding: 40px 0;
li {
- list-style: none;
- a {
- display: block;
- color: #fff;
- padding: 15px 0;
- text-decoration: none;
- cursor: pointer;
- position: relative;
+ .list-item();
+ }
+}
+
+.selectlist {
+ li {
+ .list-item();
+
- &::after {
- content: '';
+ label {
+ input {
+ visibility: hidden;
position: absolute;
- height: 15px;
- width: 10px;
- top: 18px;
- right: 0px;
- background-image: url("list.svg");
+ }
+
+ img {
+ vertical-align: middle;
+ margin-right: 15px;
+ }
+
+ height: 82px;
+
+ &:after {
+ top: 33px;
}
}
}
}
&::after {
- background-image: url("arrow-header-right.svg");
+ background-image: url("images/arrow-header-right.svg");
right: 30px;
}
&::before {
- background-image: url("arrow-header-left.svg");
+ background-image: url("images/arrow-header-left.svg");
left: 30px;
}
position: relative;
overflow: hidden;
}
+
+#back {
+ cursor: pointer;
+ color: #fff;
+ text-decoration: none;
+ position: fixed;
+ left: 20px;
+ bottom: 20px;
+
+ &:before {
+ content: '';
+ display: inline-block;
+ width: 10px;
+ height: 16px;
+ background-image: url("images/back.svg");
+ margin-right: 20px;
+ position: relative;
+ top: 1px
+ }
+}
+
+.list-item {
+ list-style: none;
+
+ a, label {
+ display: block;
+ padding: 15px 20px;
+ color: #fff;
+ text-decoration: none;
+ cursor: pointer;
+ position: relative;
+ transition: background-color 300ms;
+
+ &:hover {
+ background-color: #4874b9;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ height: 15px;
+ width: 10px;
+ top: 18px;
+ right: 20px;
+ background-image: url("images/list.svg");
+ }
+ }
+}
+
+#preload {
+ opacity: 0;
+ position: absolute;
+ pointer-events: none;
+}
\ No newline at end of file
projects / Animations.git / commitdiff
