design changes based on edits from the prototype

vectorblocks--kosbelan
Konstantin-39 11 months ago
parent 17c7665854
commit 366152cb97
  1. 2
      assets/css/gp-style-desktop.css
  2. 2
      assets/img/advantages_icon3.svg
  3. 8
      assets/js/jquery.maskedinput.min.js
  4. 4
      assets/js/script.js
  5. 24
      index.html

@ -255,7 +255,7 @@ h1 strong {
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
border-radius: 28px; border-radius: 28px;
padding: 16px 16px 24px 16px; padding: 6px;
box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.02); box-shadow: 0 10px 32px 0 rgba(0, 0, 0, 0.02);
background: #fff; background: #fff;
} }

@ -1,3 +1,3 @@
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.9414 9.24741C33.5828 10.0923 34.9757 12.2216 36.7221 15.1523H29.9414V9.24741ZM8.6607 15.3984C9.37371 15.3984 9.89116 15.7426 9.89116 16.5469C9.89116 17.2253 9.34229 17.7755 8.66422 17.7773H1.23047C0.55084 17.7773 0 18.3285 0 19.0078C0 19.6874 0.55084 20.2383 1.23047 20.2383H12.3047C12.9907 20.2383 13.54 20.7887 13.54 21.4688C13.54 22.1484 12.9892 22.6992 12.3095 22.6992H1.23047C0.55084 22.6992 0 23.2501 0 23.9297C0 24.6093 0.55084 25.1602 1.23047 25.1602H3.9375V28.8516C3.9375 29.5312 4.48834 30.082 5.16797 30.082H7.64138C8.08229 32.254 10.0014 33.8555 12.2637 33.8555C14.5259 33.8555 16.4451 32.254 16.886 30.082H29.3797C29.8206 32.254 31.7397 33.8555 34.002 33.8555C36.2642 33.8555 38.1833 32.254 38.6242 30.082H40.7695C41.4492 30.082 42 29.5312 42 28.8516V21.4688C42 17.8584 38.1919 17.6187 38.1884 17.6133H28.7109C28.0313 17.6133 27.4805 17.0624 27.4805 16.3828V9H5.16797C4.48834 9 3.9375 9.55084 3.9375 10.2305V12.9375H2.46094C1.78131 12.9375 1.23047 13.4883 1.23047 14.168C1.23047 14.8476 1.78131 15.3984 2.46094 15.3984H8.6607ZM35.5971 27.5436C36.478 28.4244 36.478 29.8532 35.5971 30.7341C34.1801 32.1511 31.7461 31.143 31.7461 29.1387C31.7461 27.1346 34.1801 26.1266 35.5971 27.5436ZM13.8588 27.5436C14.7397 28.4244 14.7397 29.8532 13.8588 30.7341C12.4418 32.1511 10.0078 31.143 10.0078 29.1387C10.0078 27.1346 12.4418 26.1266 13.8588 27.5436Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.6397 34.263L13.6801 40.559C13.6481 40.627 13.5982 40.6849 13.5356 40.7265C13.4731 40.7682 13.4004 40.7919 13.3253 40.7952C13.2503 40.7984 13.1758 40.7811 13.1099 40.7451C13.0439 40.709 12.9892 40.6556 12.9514 40.5907L10.8517 36.9772L6.73763 37.6979C6.66354 37.7109 6.5873 37.7033 6.51719 37.676C6.44709 37.6488 6.3858 37.6028 6.33998 37.5431C6.29416 37.4835 6.26556 37.4124 6.2573 37.3376C6.24903 37.2629 6.26141 37.1872 6.29309 37.119L9.65498 29.8747C9.90278 29.9924 10.0941 30.1053 10.2628 30.2472C10.7131 30.6254 10.9891 31.1968 11.8327 32.4867L11.8331 32.4873C12.885 34.0938 14.7901 34.8028 16.6397 34.263ZM22.9569 34.4322C24.4805 34.5324 25.9414 33.8179 26.8126 32.4873L26.8138 32.4856C27.6548 31.1967 27.9303 30.6256 28.3806 30.2477C28.6842 29.9929 29.0602 29.8314 29.7057 29.5677L32.3747 35.7988C32.4043 35.8679 32.4144 35.9438 32.4039 36.0183C32.3935 36.0927 32.3628 36.1629 32.3153 36.2211C32.2678 36.2794 32.2052 36.3236 32.1344 36.3488C32.0636 36.374 31.9872 36.3794 31.9136 36.3643L27.8208 35.5271L25.6212 39.0682C25.5813 39.1323 25.5246 39.1842 25.4573 39.2182C25.3899 39.2523 25.3145 39.2672 25.2393 39.2613C25.1641 39.2554 25.0919 39.229 25.0307 39.1849C24.9695 39.1408 24.9215 39.0807 24.8921 39.0112L22.9569 34.4322ZM33.2858 16.3508C33.6082 17.1302 33.5853 18.025 33.1798 18.8301C31.5957 21.9625 31.7117 21.2932 32.1312 24.778C32.2873 26.1166 31.5778 27.3526 30.3374 27.8791C27.1113 29.2623 27.6289 28.8251 25.7103 31.7655C24.974 32.8899 23.6309 33.3808 22.3415 32.9881C18.9815 31.9753 19.6598 31.9753 16.3043 32.9881C15.0103 33.3808 13.6717 32.8899 12.9354 31.7655C11.0123 28.8251 11.5344 29.2623 8.30835 27.8791C7.06787 27.3526 6.35395 26.1166 6.51462 24.778C6.9296 21.2932 7.05008 21.9625 5.46602 18.8301C4.85916 17.6253 5.10457 16.2198 6.09075 15.3006C8.64748 12.8956 8.30835 13.4845 9.10701 10.0667C9.41493 8.75485 10.5082 7.84008 11.8556 7.76423C15.3583 7.5679 14.7203 7.79997 17.5314 5.69832C18.6112 4.89069 20.0346 4.89069 21.1144 5.69832C21.175 5.74362 21.234 5.78784 21.2915 5.831C21.0087 6.68615 20.8556 7.60002 20.8556 8.54938C20.8556 9.38123 20.9732 10.1857 21.1924 10.9473C20.5784 10.8065 19.9505 10.7356 19.3207 10.7359C14.7114 10.7359 10.9499 14.4975 10.9499 19.1067C10.9499 23.716 14.7114 27.4775 19.3207 27.4775C23.9344 27.4775 27.6914 23.716 27.6914 19.1067C27.6914 18.3627 27.5935 17.6408 27.41 16.9533C28.0995 17.1256 28.8075 17.2125 29.5183 17.2121C30.8682 17.2121 32.1464 16.9026 33.2858 16.3508ZM19.566 13.9952L20.8284 17.3161C20.8666 17.417 20.9538 17.4797 21.0601 17.4851L24.61 17.6596C24.8527 17.6705 24.9509 17.9759 24.7627 18.1259L21.9926 20.3534C21.9081 20.4188 21.8753 20.5224 21.9026 20.626L22.8351 24.0559C22.9005 24.2877 22.6415 24.4759 22.4398 24.345L19.4651 22.3983C19.3752 22.3382 19.2661 22.3382 19.1761 22.3983L16.2043 24.345C16.0025 24.4759 15.7435 24.2877 15.8062 24.0559L16.7387 20.626C16.7659 20.5224 16.7332 20.4188 16.6486 20.3534L13.8785 18.1259C13.6904 17.9759 13.7886 17.6705 14.0312 17.6596L17.5811 17.4851C17.6874 17.4797 17.7747 17.417 17.8129 17.3161L19.0753 13.9952C19.1598 13.7689 19.4815 13.7689 19.566 13.9952ZM29.5183 1.20441C33.5721 1.20441 36.8632 4.49564 36.8632 8.54938C36.8632 12.6032 33.5721 15.8944 29.5183 15.8944C25.4645 15.8944 22.1733 12.6032 22.1733 8.54938C22.1733 4.49564 25.4645 1.20441 29.5183 1.20441ZM28.5233 9.21751L26.8288 7.52302C26.3898 7.08416 25.6772 7.08416 25.2383 7.52302C24.7994 7.96418 24.7994 8.67456 25.2383 9.11342L27.7292 11.6066C28.1681 12.0455 28.8808 12.0455 29.3196 11.6066C30.8218 10.1044 32.3059 8.58636 33.8014 7.07732C34.238 6.63616 34.2358 5.92578 33.7968 5.48915C33.358 5.05251 32.6453 5.05482 32.2087 5.49368L28.5233 9.21751Z" fill="white"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

@ -0,0 +1,8 @@
/**
* Minified by jsDelivr using UglifyJS v3.4.4.
* Original file: /npm/jquery.maskedinput@1.4.1/src/jquery.maskedinput.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?e(require("jquery")):e(jQuery)}(function(R){var a,e=navigator.userAgent,S=/iphone/i.test(e),i=/chrome/i.test(e),T=/android/i.test(e);R.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},autoclear:!0,dataName:"rawMaskFn",placeholder:"_"},R.fn.extend({caret:function(e,t){var n;if(0!==this.length&&!this.is(":hidden")&&this.get(0)===document.activeElement)return"number"==typeof e?(t="number"==typeof t?t:e,this.each(function(){this.setSelectionRange?this.setSelectionRange(e,t):this.createTextRange&&((n=this.createTextRange()).collapse(!0),n.moveEnd("character",t),n.moveStart("character",e),n.select())})):(this[0].setSelectionRange?(e=this[0].selectionStart,t=this[0].selectionEnd):document.selection&&document.selection.createRange&&(n=document.selection.createRange(),e=0-n.duplicate().moveStart("character",-1e5),t=e+n.text.length),{begin:e,end:t})},unmask:function(){return this.trigger("unmask")},mask:function(t,v){var n,b,k,y,x,j,A;if(!t&&0<this.length){var e=R(this[0]).data(R.mask.dataName);return e?e():void 0}return v=R.extend({autoclear:R.mask.autoclear,placeholder:R.mask.placeholder,completed:null},v),n=R.mask.definitions,b=[],k=j=t.length,y=null,t=String(t),R.each(t.split(""),function(e,t){"?"==t?(j--,k=e):n[t]?(b.push(new RegExp(n[t])),null===y&&(y=b.length-1),e<k&&(x=b.length-1)):b.push(null)}),this.trigger("unmask").each(function(){var o=R(this),c=R.map(t.split(""),function(e,t){if("?"!=e)return n[e]?f(t):e}),l=c.join(""),r=o.val();function u(){if(v.completed){for(var e=y;e<=x;e++)if(b[e]&&c[e]===f(e))return;v.completed.call(o)}}function f(e){return e<v.placeholder.length?v.placeholder.charAt(e):v.placeholder.charAt(0)}function s(e){for(;++e<j&&!b[e];);return e}function h(e,t){var n,a;if(!(e<0)){for(n=e,a=s(t);n<j;n++)if(b[n]){if(!(a<j&&b[n].test(c[a])))break;c[n]=c[a],c[a]=f(a),a=s(a)}d(),o.caret(Math.max(y,e))}}function g(e){p(),o.val()!=r&&o.change()}function m(e,t){var n;for(n=e;n<t&&n<j;n++)b[n]&&(c[n]=f(n))}function d(){o.val(c.join(""))}function p(e){var t,n,a,i=o.val(),r=-1;for(a=t=0;t<j;t++)if(b[t]){for(c[t]=f(t);a++<i.length;)if(n=i.charAt(a-1),b[t].test(n)){c[t]=n,r=t;break}if(a>i.length){m(t+1,j);break}}else c[t]===i.charAt(a)&&a++,t<k&&(r=t);return e?d():r+1<k?v.autoclear||c.join("")===l?(o.val()&&o.val(""),m(0,j)):d():(d(),o.val(o.val().substring(0,r+1))),k?t:y}o.data(R.mask.dataName,function(){return R.map(c,function(e,t){return b[t]&&e!=f(t)?e:null}).join("")}),o.one("unmask",function(){o.off(".mask").removeData(R.mask.dataName)}).on("focus.mask",function(){var e;o.prop("readonly")||(clearTimeout(a),r=o.val(),e=p(),a=setTimeout(function(){o.get(0)===document.activeElement&&(d(),e==t.replace("?","").length?o.caret(0,e):o.caret(e))},10))}).on("blur.mask",g).on("keydown.mask",function(e){if(!o.prop("readonly")){var t,n,a,i=e.which||e.keyCode;A=o.val(),8===i||46===i||S&&127===i?(n=(t=o.caret()).begin,(a=t.end)-n==0&&(n=46!==i?function(e){for(;0<=--e&&!b[e];);return e}(n):a=s(n-1),a=46===i?s(a):a),m(n,a),h(n,a-1),e.preventDefault()):13===i?g.call(this,e):27===i&&(o.val(r),o.caret(0,p()),e.preventDefault())}}).on("keypress.mask",function(e){if(!o.prop("readonly")){var t,n,a,i=e.which||e.keyCode,r=o.caret();e.ctrlKey||e.altKey||e.metaKey||i<32||!i||13===i||(r.end-r.begin!=0&&(m(r.begin,r.end),h(r.begin,r.end-1)),(t=s(r.begin-1))<j&&(n=String.fromCharCode(i),b[t].test(n))&&(function(e){var t,n,a,i;for(n=f(t=e);t<j;t++)if(b[t]){if(a=s(t),i=c[t],c[t]=n,!(a<j&&b[a].test(i)))break;n=i}}(t),c[t]=n,d(),a=s(t),T?setTimeout(function(){R.proxy(R.fn.caret,o,a)()},0):o.caret(a),r.begin<=x&&u()),e.preventDefault())}}).on("input.mask paste.mask",function(){o.prop("readonly")||setTimeout(function(){var e=p(!0);o.caret(e),u()},0)}),i&&T&&o.off("input.mask").on("input.mask",function(e){var t=o.val(),n=o.caret();if(A&&A.length&&A.length>t.length){for(p(!0);0<n.begin&&!b[n.begin-1];)n.begin--;if(0===n.begin)for(;n.begin<y&&!b[n.begin];)n.begin++;o.caret(n.begin,n.begin)}else{p(!0);var a=t.charAt(n.begin);n.begin<j&&(b[n.begin]||n.begin++,b[n.begin].test(a)&&n.begin++),o.caret(n.begin,n.begin)}u()}),p()})}})});
//# sourceMappingURL=/sm/0db8177a53b6eab1363e81af339c3641bb98c7faaf29a367c2094d37f014e37e.map

@ -6,6 +6,10 @@ window.addEventListener('load', function () {
}, 500) }, 500)
}) })
jQuery(document).ready(function () {
$('input[type="tel"]').mask('+7 (999) 999-9999')
})
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
let modalBg = document.querySelector('#modal__bg') let modalBg = document.querySelector('#modal__bg')
if (modalBg) { if (modalBg) {

@ -53,22 +53,13 @@
<h1><b>Газобетонные блоки</b>&nbsp;напрямую от&nbsp;производителя в&nbsp;Томске.</h1> <h1><b>Газобетонные блоки</b>&nbsp;напрямую от&nbsp;производителя в&nbsp;Томске.</h1>
</div> </div>
<div class="hero__desc"> <div class="hero__desc">
<p><b>Любой объем</b>, доставка от 1 дня</p> <p><b>Любой объем</b>, доставка до 3 дней</p>
</div> </div>
<div class="hero__price"> <div class="hero__price">
<div class="hero__price-header"> <div class="hero__price-header">
<span>Акция месяца</span> <span>Акция месяца</span>
<p><b>Только до 30.09</b> розница по оптовым ценам</p> <p><b>Только до 30.09</b> розница по оптовым ценам</p>
</div> </div>
<div class="hero__price-content">
<div class="hero__price-stock">
<span>от 5999 руб/м3</span>
<p>от 4999 руб/м3</p>
</div>
<div class="hero__price-unit">
<p>за 1 поддон</p>
</div>
</div>
</div> </div>
</div> </div>
<div class="hero__rightside"> <div class="hero__rightside">
@ -92,16 +83,10 @@
<option value="50-100 м3">50-100 м3</option> <option value="50-100 м3">50-100 м3</option>
<option value="Более 100 м3">Более 100 м3</option> <option value="Более 100 м3">Более 100 м3</option>
</select> </select>
<input type="tel" id="tel" name="tel" value="" placeholder="+7 (____) ___-__-__" required> <input type="tel" id="tel" name="tel" value="" placeholder="+7 (___) ___-____" required>
<button class="btn btn-big">Забронировать стоимость</button> <button class="btn btn-big">Забронировать стоимость</button>
</form> </form>
</div> </div>
<div class="hero__form-gift">
<p>При заказе до 08.09</p>
<ul>
<li>пенополистирол в подарок</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -123,7 +108,7 @@
<img src="assets/img/advantages_icon3.svg" width="40" height="40" <img src="assets/img/advantages_icon3.svg" width="40" height="40"
alt="Доставка от 1го дня по Томску и области до вашего объекта"> alt="Доставка от 1го дня по Томску и области до вашего объекта">
</div> </div>
<p>Доставка от 1го дня по Томску и&nbsp;области до вашего объекта</p> <p>Соответствует ГОСТ</p>
</div> </div>
<div class="hero__advantages-item"> <div class="hero__advantages-item">
<div class="hero__advantages-icon"> <div class="hero__advantages-icon">
@ -175,7 +160,7 @@
<div class="modal__form" id="modalform"> <div class="modal__form" id="modalform">
<form action="" id="request"> <form action="" id="request">
<input type="text" id="request_name" name="request_name" value="" placeholder="Введите имя" required=""> <input type="text" id="request_name" name="request_name" value="" placeholder="Введите имя" required="">
<input type="tel" id="request_tel" name="request_tel" value="" placeholder="+7 (____) ___-__-__" required=""> <input type="tel" id="request_tel" name="request_tel" value="" placeholder="+7 (___) ___-____" required="">
<button class="btn btn-big">Оставить заявку</button> <button class="btn btn-big">Оставить заявку</button>
</form> </form>
</div> </div>
@ -201,6 +186,7 @@
</section> </section>
<div id="modal__bg"></div> <div id="modal__bg"></div>
</body> </body>
<script defer src="assets/js/jquery.maskedinput.min.js"></script>
<script defer src="assets/js/script.js"></script> <script defer src="assets/js/script.js"></script>
<script defer src="send/ajax.js"></script> <script defer src="send/ajax.js"></script>

Loading…
Cancel
Save