senaduka/old-ribica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

payments

Browse Source
This commit is contained in:
Senad Uka
2015-11-14 04:39:05 +01:00
parent c5fd654f5f
commit 82d0195530
4 changed files with 275 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
front-ui/app/components/cart/checkoutPage.js
View File

@@ -7,6 +7,7 @@ var React = require('react'),
Globals = require('../../globals'), Globals = require('../../globals'),
CartTotal = require('./cartTotal'), CartTotal = require('./cartTotal'),
LinkBanner = require('../linkBanner/linkBanner'), LinkBanner = require('../linkBanner/linkBanner'),
PaymentSelect = require('../payment/paymentSelect'),
RibicaFormError = require('../shared/ribicaFormError'); RibicaFormError = require('../shared/ribicaFormError');
@@ -17,6 +18,13 @@ var CheckoutPage = React.createClass({
render: function() { render: function() {
var choosePayment = (
<div>
Plaćanje: <br />
<PaymentSelect />
</div>
);
var supportedPlaceOptions = CartStore.getSupportedPlaces().map ( function (p) { return (<option value={p.code}>{p.placeLabel}</option>)}); var supportedPlaceOptions = CartStore.getSupportedPlaces().map ( function (p) { return (<option value={p.code}>{p.placeLabel}</option>)});
var content = ( var content = (
@@ -87,11 +95,18 @@ var CheckoutPage = React.createClass({
Ukupno: <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} /> Ukupno: <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} />
</span> </span>
</div> </div>
<div>
{choosePayment}
</div>
<div><button id="order" name="order" className="mybutton" disabled={!this.state.isDeliveryDestinationValid} onClick={this._onOrderClick}>Završi narudžbu</button></div> <div><button id="order" name="order" className="mybutton" disabled={!this.state.isDeliveryDestinationValid} onClick={this._onOrderClick}>Završi narudžbu</button></div>
</div> </div>
</div> </div>
</fieldset> </fieldset>
</div> </div>
</div> </div>
); );
@@ -118,7 +133,8 @@ var CheckoutPage = React.createClass({
<div> </div> <div> </div>
<div></div> <div></div>
</div> </div>
</div> </div>
{choosePayment}
</div>); </div>);
} }

26
front-ui/app/components/payment/paymentSelect.js Normal file
View File

@@ -0,0 +1,26 @@
var React = require('react');
var ItemActions = require('../../actions/itemActions');
var NavigationActions = require('../../actions/navigationActions');
var NavigationStore = require('../../stores/navigationStore');
var Globals = require('../../globals');
var Router = require('react-router');
var PaymentSelect = React.createClass({
render: function() {
return (
<div className="payment_select">
<input name="payment_method" type="radio" value="credit_card" defaultChecked="checked" className="js-payment-method radio-input" id="pay-by-cod" />
<label for="pay-by-credit-card" className="radio-label">
Gotovinom (prilikom preuzimanja robe)
</label>
<input name="payment_method" type="radio" value="paypal" className="js-payment-method radio-input" id="pay-by-credit-card" />
<label for="pay-with-paypal" className="radio-label">
Kreditnom / debitnom karticom
</label>
</div>);
}
});
module.exports = PaymentSelect;

535
front-ui/app/css/main.css
View File

@@ -1,95 +1,77 @@
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700italic,700,900,900italic); @import url(http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700italic,700,900,900italic);
/* site */ /* site */
html { html {
overflow-y: scroll; overflow-y: scroll;
} }
body{ body{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/bg_prp6pz.jpg") fixed 100% 100% ; background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/bg_prp6pz.jpg") fixed 100% 100% ;
background-size: cover ; background-size: cover ;
background-position: center ; background-position: center ;
background-repeat: no-repeat; background-repeat: no-repeat;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
#left-nave { #left-nave {
background: blue; background: blue;
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
height: 100%; height: 100%;
width: 250px; width: 250px;
} }
.beba{ .beba{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png"); background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png");
background-size: cover; background-size: cover;
} }
html, body { height: 100%; width: 100%; margin: 0; } html, body { height: 100%; width: 100%; margin: 0; }
h1 h2 h3 h4 h5{ h1 h2 h3 h4 h5{
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
.col-centered{ .col-centered{
float: none; float: none;
margin: 5% auto; margin: 5% auto;
} }
.mybutton{ .mybutton{
background-color: #00a8a8; background-color: #00a8a8;
padding: 6px 11px !important; padding: 6px 11px !important;
border-radius: 3px; border-radius: 3px;
margin-top: 8px; margin-top: 8px;
border: solid #06c3c3 1px; border: solid #06c3c3 1px;
color: #ffffff !important; color: #ffffff !important;
} }
.mybutton:hover { .mybutton:hover {
background-color: #06c3c3 !important; background-color: #06c3c3 !important;
padding: 6px 11px !important; padding: 6px 11px !important;
color: black !important; color: black !important;
border-radius: 3px; border-radius: 3px;
margin-top: 8px; margin-top: 8px;
border: solid #06c3c3 1px; border: solid #06c3c3 1px;
color: #ffffff !important; color: #ffffff !important;
} }
.add-to-cart-button { .add-to-cart-button {
background-color: #00a8a8; background-color: #00a8a8;
padding: 6px 11px !important; padding: 6px 11px !important;
border-radius: 3px; border-radius: 3px;
border: solid #06c3c3 1px; border: solid #06c3c3 1px;
color: #ffffff !important; color: #ffffff !important;
} }
.add-to-cart-button:hover { .add-to-cart-button:hover {
background-color: #06c3c3 !important; background-color: #06c3c3 !important;
padding: 6px 11px !important; padding: 6px 11px !important;
color: black !important; color: black !important;
border-radius: 3px; border-radius: 3px;
border: solid #06c3c3 1px; border: solid #06c3c3 1px;
color: #ffffff !important; color: #ffffff !important;
} }
a{ a{
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-weight: bold; font-weight: bold;
} }
.mynav li{ .mynav li{
display: inline-block; display: inline-block;
} }
.mynav { .mynav {
margin-top: 6px; margin-top: 6px;
text-align: center;
text-align: center;
} }
.mynav a{ .mynav a{
text-decoration: none; text-decoration: none;
@@ -108,27 +90,24 @@ text-decoration: none;
color: #06c3c3; color: #06c3c3;
background: none; background: none;
} }
.mynav li .mybutton { .mynav li .mybutton {
background-color: #00a8a8; background-color: #00a8a8;
padding: 4px 10px !important; padding: 4px 10px !important;
margin-top: 6px; margin-top: 6px;
display: block; display: block;
border-radius: 3px; border-radius: 3px;
border: solid #06c3c3 1px; border: solid #06c3c3 1px;
color: #ffffff; color: #ffffff;
} }
.mynav li .mybutton:hover { .mynav li .mybutton:hover {
background-color: #06c3c3; background-color: #06c3c3;
padding: 4px 10px !important; padding: 4px 10px !important;
margin-top: 6px; margin-top: 6px;
display: block; display: block;
border-radius: 3px; border-radius: 3px;
border: solid #06c3c3 1px; border: solid #06c3c3 1px;
color: #ffffff; color: #ffffff;
} }
.productbox{ .productbox{
cursor: pointer; cursor: pointer;
-moz-box-shadow: 1px 2px 2px #cccccc; -moz-box-shadow: 1px 2px 2px #cccccc;
@@ -143,219 +122,181 @@ margin-bottom: 35px;
height: auto; height: auto;
border-bottom: solid gray 1px; border-bottom: solid gray 1px;
width: 100%; width: 100%;
} }
.productbox div{ .productbox div{
padding: 4px 10px; padding: 4px 10px;
} }
.productbox a{ .productbox a{
color: black; color: black;
text-decoration: none; text-decoration: none;
} }
.productbox a:hover{ .productbox a:hover{
color: black; color: black;
text-decoration: none; text-decoration: none;
text-decoration: underline; text-decoration: underline;
} }
.productbox div span{ .productbox div span{
color: black; color: black;
} }
#beba{ #beba{
padding-left: 45px; padding-left: 45px;
padding-right: 45px; padding-right: 45px;
margin-left: -23px; margin-left: -23px;
margin-right: -23px; margin-right: -23px;
} }
#beba:hover{ #beba:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png"); background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png");
background-position: center ; background-position: center ;
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#dijete:hover{ #dijete:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/dijete-bg_gff80o.png"); background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/dijete-bg_gff80o.png");
background-position: center ; background-position: center ;
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#dijete:hover a{ #dijete:hover a{
color: white; color: white;
} }
#mama:hover{ #mama:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/mama-bg_rqbnuo.png"); background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/mama-bg_rqbnuo.png");
background-position: center ; background-position: center ;
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#mama:hover a{ #mama:hover a{
color: white; color: white;
} }
#madeinbih:hover{ #madeinbih:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/made-in-bih-bg_uusqpm.png"); background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/made-in-bih-bg_uusqpm.png");
background-position: center ; background-position: center ;
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#madeinbih:hover a{ #madeinbih:hover a{
color: white; color: white;
} }
#onama:hover{ #onama:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/made-in-bih-bg_uusqpm.png"); background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/made-in-bih-bg_uusqpm.png");
background-position: center ; background-position: center ;
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#onama:hover a{ #onama:hover a{
color: white; color: white;
} }
#marka:hover{ #marka:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/marka-bg_cy8hpe.png"); background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/marka-bg_cy8hpe.png");
background-position: center ; background-position: center ;
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#marka:hover a{ #marka:hover a{
color: white; color: white;
} }
#akcija:hover{ #akcija:hover{
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/akcija-bg_xtawus.png"); background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/akcija-bg_xtawus.png");
background-position: center ; background-position: center ;
background-size: 100% 100%; background-size: 100% 100%;
color: white; color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#akcija:hover a{ #akcija:hover a{
color: white; color: white;
} }
.mydropdown li:hover .sub-menu { .mydropdown li:hover .sub-menu {
visibility: visible; visibility: visible;
display: block; display: block;
} }
.mydropdown:hover .dropdown-menu { .mydropdown:hover .dropdown-menu {
display: block; display: block;
visibility: visible; visibility: visible;
} }
.navbar-default{ .navbar-default{
color: black; color: black;
background-color: white; background-color: white;
border-color: lightgray; border-color: lightgray;
} }
.navbar-default .navbar-nav > li > a{ .navbar-default .navbar-nav > li > a{
color:black; color:black;
} }
.navbar-default .navbar-nav > li{ .navbar-default .navbar-nav > li{
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
} }
.navbar-default .navbar-nav > li > a:focus{ .navbar-default .navbar-nav > li > a:focus{
background-color: rgba(255, 255, 255, 0.6) !important; background-color: rgba(255, 255, 255, 0.6) !important;
-moz-box-shadow: 0px 0px 2px #999; -moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999; -webkit-box-shadow: 0px 0px 2px #999;
box-shadow: 0px 0px 2px #999; box-shadow: 0px 0px 2px #999;
border: none !important; border: none !important;
border-radius: 2px; border-radius: 2px;
} }
.navbar-default .navbar-nav > .dropdown > a .caret{ .navbar-default .navbar-nav > .dropdown > a .caret{
border-top-color: #fff; border-top-color: #fff;
border-bottom-color: #fff; border-bottom-color: #fff;
} }
.navbar-default .navbar-brand{ .navbar-default .navbar-brand{
color:#fff; color:#fff;
} }
.menu-large { .menu-large {
position: static !important; position: static !important;
} }
.megamenu{ .megamenu{
padding: 20px 0px; padding: 20px 0px;
width:94%; width:94%;
margin-left: 3%; margin-left: 3%;
border-top: none !important; border-top: none !important;
-moz-box-shadow: 0px 1px 2px #999; -moz-box-shadow: 0px 1px 2px #999;
-webkit-box-shadow: 0px 1px 2px #999; -webkit-box-shadow: 0px 1px 2px #999;
box-shadow: 0px 1px 2px #999; box-shadow: 0px 1px 2px #999;
} }
.megamenu> li > ul { .megamenu> li > ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.megamenu> li > ul > li { .megamenu> li > ul > li {
list-style: none; list-style: none;
padding-left: 10px; padding-left: 10px;
} }
.megamenu> li > ul > li > a { .megamenu> li > ul > li > a {
display: block; display: block;
padding: 3px 20px; padding: 3px 20px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 1.428571429; line-height: 1.428571429;
color: black; color: black;
white-space: normal; white-space: normal;
} }
.megamenu> li ul > li > a:hover, .megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus { .megamenu> li ul > li > a:focus {
text-decoration: none; text-decoration: none;
color: #262626; color: #262626;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.megamenu.disabled > a, .megamenu.disabled > a,
.megamenu.disabled > a:hover, .megamenu.disabled > a:hover,
.megamenu.disabled > a:focus { .megamenu.disabled > a:focus {
color: #999999; color: #999999;
} }
.megamenu.disabled > a:hover, .megamenu.disabled > a:hover,
.megamenu.disabled > a:focus { .megamenu.disabled > a:focus {
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed; cursor: not-allowed;
} }
.megamenu.dropdown-header { .megamenu.dropdown-header {
color: #428bca; color: #428bca;
font-size: 18px; font-size: 18px;
} }
.dropdown-header p { .dropdown-header p {
border-bottom: solid 1.5px lightgray !important; border-bottom: solid 1.5px lightgray !important;
@@ -363,200 +304,186 @@ margin-bottom: 2px;
text-transform: uppercase; text-transform: uppercase;
color: black; color: black;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
} }
.mycart{ .mycart{
position: absolute; position: absolute;
background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/cart-icon_p9u63r.png"); background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/cart-icon_p9u63r.png");
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
background-repeat: no-repeat;
background-repeat: no-repeat; width: 42px;
width: 42px; height: 44px;
height: 44px; padding-bottom: 0px;
padding-bottom: 0px; right:-14px;
right:-14px; bottom: -15px;
bottom: -15px; text-align: right;
text-align: right;
} }
.mycart div { .mycart div {
text-align: right; text-align: right;
} }
.mycart span{ .mycart span{
position: absolute; position: absolute;
left: 13.4px; left: 13.4px;
top: 4px; top: 4px;
color: #ffffff; color: #ffffff;
} }
.mycart span:hover{ .mycart span:hover{
color: white; color: white;
} }
#myhome{ #myhome{
border-bottom: solid #06c3c3 1px; border-bottom: solid #06c3c3 1px;
} }
#myhome-hover:hover { #myhome-hover:hover {
border-bottom: solid #06c3c3 1px; border-bottom: solid #06c3c3 1px;
} }
.sidebar ul{ .sidebar ul{
list-style: none; list-style: none;
} }
.sidebar li{ .sidebar li{
margin-left:10px; margin-left:10px;
margin-bottom: 5px; margin-bottom: 5px;
color:black; color:black;
padding: 10px; padding: 10px;
border-bottom: solid 1px lightgray; border-bottom: solid 1px lightgray;
} }
.sidebar li a{ .sidebar li a{
text-decoration: none; text-decoration: none;
color:black; color:black;
} }
.sidebar li a:hover{ .sidebar li a:hover{
color:#06c3c3;
color:#06c3c3;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.megamenu{ .megamenu{
margin-left: 0 ; margin-left: 0 ;
margin-right: 0 ; margin-right: 0 ;
} }
.megamenu> li { .megamenu> li {
margin-bottom: 30px; margin-bottom: 30px;
} }
.megamenu> li:last-child { .megamenu> li:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.megamenu.dropdown-header { .megamenu.dropdown-header {
padding: 3px 15px !important; padding: 3px 15px !important;
}
} .navbar-nav .open .dropdown-menu .dropdown-header{
.navbar-nav .open .dropdown-menu .dropdown-header{ color:#fff;
color:#fff; }
}
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.navbar-header { .navbar-header {
float: none; float: none;
} }
.navbar-toggle { .navbar-toggle {
display: block; display: block;
}
} .navbar-collapse {
.navbar-collapse { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
border-top:none !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
border-top:none !important; .navbar-collapse.collapse {
} display: none!important;
.navbar-collapse.collapse { }
display: none!important; .navbar-nav>li {
} float: none;
}
.navbar-nav>li { .navbar-nav>ul {
float: none; margin-bottom: 0px;
}
} .navbar-nav>li>a {
.navbar-nav>ul { padding-top: 10px;
margin-bottom: 0px; padding-bottom: 10px;
}
} .navbar-text {
.navbar-nav>li>a { float: none;
padding-top: 10px; margin: 15px 0;
padding-bottom: 10px; }
/* since 3.1.0 */
} .navbar-collapse.collapse.in {
.navbar-text { display: block!important;
float: none; }
margin: 15px 0; .collapsing {
} overflow: hidden!important;
/* since 3.1.0 */ }
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
} }
.error-message { .error-message {
color: red; color: red;
} }
.white_button{ .white_button{
background-color: #f9f9f9; background-color: #f9f9f9;
width: 40px; width: 40px;
height: 40px; height: 40px;
padding-bottom: 7px; padding-bottom: 7px;
/*display: block;*/ /*display: block;*/
border-radius: 1px; border-radius: 1px;
margin-top: 8px; margin-top: 8px;
border: solid #cccccc 1px; border: solid #cccccc 1px;
color: #4d4d4d !important; color: #4d4d4d !important;
font-size: 16px; font-size: 16px;
} }
.search-box { .search-box {
background-color: #efefef; background-color: #efefef;
border-radius: 0px; border-radius: 0px;
border: 1px solid #cccccc; border: 1px solid #cccccc;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
.search-button { .search-button {
background-color: #f9f9f9; background-color: #f9f9f9;
color: #31b8b8; color: #31b8b8;
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-radius: 0px; border-radius: 0px;
margin-left: 5px; margin-left: 5px;
} }
.qty-box { .qty-box {
background-color: #efefef; background-color: #efefef;
border-radius: 0px; border-radius: 0px;
border: 1px solid #cccccc; border: 1px solid #cccccc;
} }
.left-inner-addon { .left-inner-addon {
position: relative; position: relative;
} }
.left-inner-addon input { .left-inner-addon input {
padding-left: 30px; padding-left: 30px;
} }
.left-inner-addon i { .left-inner-addon i {
position: absolute; position: absolute;
padding: 10px 12px; padding: 10px 12px;
pointer-events: none; pointer-events: none;
} }
.cart-title { .cart-title {
font-size: 29px; font-size: 29px;
color: #06c3c3; color: #06c3c3;
} }
.footer { .footer {
text-align: center; text-align: center;
width: 100%; width: 100%;
bottom: 20px; bottom: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.message { .message {
font-size: 130%; font-size: 130%;
text-align: left; text-align: left;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
}
.payment {
} box-sizing: border-box;
color: rgb(102, 102, 102);
display: block;
font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 36px;
line-height: 18.2px;
width: 708px;
word-wrap: break-word;
}

2
front-ui/build/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>ribica.ba - ispunjava zelje</title> <title>ribica.ba - prvi online shop sa dostavom u BiH za mame i bebe - kupite igracke, pelene i ostalo</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">