CINXE.COM
Bento Login | BentoBox
<!DOCTYPE html> <html lang="en"> <head> <title>Bento Login | BentoBox</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="icon" type="image/png" href="https://assets-cdn.getbento.com/static/images/favicon.png" /> <style> @font-face { font-family: 'Circular'; font-style: normal; font-weight: 400; src: url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Book.otf') format('opentype'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Book.eot?#iefix') format('embedded-opentype'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Book.woff') format('woff'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Book.woff2') format('woff2'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Book.ttf') format('truetype'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Book.svg') format('svg'); font-display: swap; } @font-face { font-family: 'Circular'; src: url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Medium.otf') format('opentype'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Medium.eot?#iefix') format('embedded-opentype'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Medium.woff') format('woff'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Medium.woff2') format('woff2'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Medium.ttf') format('truetype'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Medium.svg') format('svg'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Circular'; src: url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Bold.otf') format('opentype'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Bold.eot?#iefix') format('embedded-opentype'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Bold.woff') format('woff'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Bold.woff2') format('woff2'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Bold.ttf') format('truetype'), url('https://media-cdn.getbento.com/fonts/circular/CircularStd-Bold.svg') format('svg'); font-weight: 700; font-style: normal; font-display: swap; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f6; color: #30323b; font-size: 16px; line-height: 1; font-weight: 400; } a { color: inherit; text-decoration: none; outline: none; } a:hover { color: #f16852; } .error-link { text-decoration: underline; } .error-link:hover { text-decoration: underline; color: white; opacity: 0.7; } .logo { max-width: 288px; display: block; margin: 0 auto 35px auto; } .img-responsive { max-width: 100%; } .site-padding { padding: 0 15px; } .text-align-center { text-align: center; } /* Don't allow the inner content of the page to resize beyond the base width */ .wrapper { max-width: 1440px; height: 100%; margin: auto; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } /* Ensure the background color on the left side of the page is white*/ .left-background::before { height: 100%; content:''; position: absolute; top: 0; left: 0; width: 50%; background-color: white; z-index: -1; } .container { float: left; } .container:after{ content: ""; display: table; clear: both; } .notification--container { width: 58%; background-color: white; height: 100%; } .notification { text-align: center; margin: 80px auto 0; } .notification--image-wrapper { max-width: 526px; display: block; margin: 0 auto 35px auto; } .notification--image { width: 100%; } .notification--title { font-size: 22px; font-weight: 500; margin: 0 0 15px 0; padding: 0; } .notification--description { max-width: 526px; margin: 0 auto 24px auto; color: #696970; line-height: 20px; } .notification--action { font-weight: bold; color: #00BAC6; } .notification--action:hover { color: #6fd4db; } .portal--container { width: 42%; } .portal { max-width: 420px; margin: 80px auto 0; } .portal--card { background-color: white; border-radius: 4px; border: 1px solid #e5e5e6; box-shadow: 0 2px 3px 0 rgba(229, 229, 230, 0.5); padding: 25px 30px 31px 30px; margin-bottom: 16px; } .portal--card-title { font-size: 22px; font-weight: 500; margin: 0 0 15px 0; padding: 0; } .portal--card-description { margin: 0; padding: 0; color: #363740; line-height: 1.2; } .portal--card-integration-description { margin: 0 0 1.5rem 0; padding: 0; color: #696970; line-height: 1.2; } .portal--card-alert-title { font-size: 1rem; line-height: 20px; text-align: center; font-weight: 500; } .portal--card-alert-description { color: #696970; line-height: 18px; font-style: normal; font-weight: normal; margin-top: 0.75rem; font-size: 1rem; } .portal--card-alert-learn-more-container { position: relative; left: 50%; transform: translate(-4rem); margin: 2.25rem 0 1rem 0; } .portal--card-learn-more-link { color: #FFFFFF; font-size: 0.75rem; font-weight: 700; background-color: #30323B; padding: 0.75rem 1.5rem; text-transform: uppercase; border-radius: 2px; } .portal--card-learn-more-link:hover { color: #FFFFFF; background: rgb(105, 105, 112); border-color: rgb(105, 105, 112); } .portal--card-learn-more-button { color: #FFFFFF; cursor: pointer; font-size: 0.75rem; font-weight: 700; background-color: #30323B; padding: 0.75rem 1.5rem; margin: 1rem 0; border: 0; text-transform: uppercase; border-radius: 2px; } .portal--card-radio-input-container { margin: 1rem 0 1rem 0; display: block; padding-left: 1.5rem; position: relative; user-select: none; } .portal--card-input-label { color: #696970; line-height: 18px; font-style: normal; font-weight: normal; margin-top: 0.75rem; font-size: 1rem; cursor: pointer; } /* Hide the default browser radio styles but allow this element to be clicked */ input[type='radio'] { cursor: pointer; position: absolute; cursor: pointer; top: 0; left: 0; width: 1.125rem; height: 1.125rem; z-index: 1; margin: 0; opacity: 0; } /* This is our custom radio input which overlays the browser's default */ span.portal--card-radio-input { background: #FFFFFF; cursor: pointer; border: 1px solid #BABCC1; box-shadow: inset 0px 1px 2px #BABCC1; border-radius: 50%; border-style: solid; border-width: 0.0625rem; box-sizing: border-box; height: 1.125rem; left: 0; position: absolute; top: 0; width: 1.125rem; display: flex; margin: 0; } input[type='radio']:hover ~ span.portal--card-radio-input { background-color: #BABCC1; } input[type='radio']:checked ~ span.portal--card-radio-input { border-color: #6FD4DB; background-color: #6FD4DB; } input[type='radio']:checked ~ span.portal--card-radio-input::after { background-color: rgb(255, 255, 255); border-color: rgb(186, 188, 193); border-style: solid; border-width: 0.0625rem; box-sizing: border-box; box-shadow: rgb(186 188 193 / 10%) 0px 0.125rem 0.375rem inset; border-radius: 50%; content: ""; display: block; height: 0.5rem; width: 0.5rem; align-self: center; margin: 0px auto; } input[type='radio']:after { content: ''; display: none; position: absolute; } .portal-card--location-selector { cursor: pointer; display: block; position: relative; user-select: none; margin-right: 9px; } .checkbox-container { height: 9.5rem; min-height: 1.5rem; overflow-y: auto; padding: 0.5rem; border-radius: 0.25rem; border: 1px solid rgb(186, 188, 193); } .label-container { display: block; position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; width: 100%; cursor: pointer; color: #696970; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Remove default browser checkbox styling */ .label-container input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create unique checkbox styling */ .checkbox-check { position: absolute; top: 0; left: 0; height: 1rem; width: 1rem; background-color: #FFFFFF; border-radius: 2px; border-color: #b9bcc1; border-style: solid; border-width: 2px; } .label-container input[type="checkbox"]:checked ~ .checkbox-check { background-color: #3bc1cc; } .checkbox-check:after { content: ""; position: absolute; display: none; } .label-container input[type="checkbox"]:checked ~ .checkbox-check:after { display: block; } .label-container input[type="checkbox"]:checked ~ .checkbox-check { border-color: #3bc1cc; } /* Creates a custom check for the checkbox */ .label-container .checkbox-check:after { left: 3px; top: -1px; width: 4px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .checkbox-footer { color: #696970; display: flex; justify-content: space-between; margin: 0.5rem 0; } .selected-indicator { font-size: 14px; } .link-button { color: rgb(0, 186, 198); text-transform: uppercase; font-size: 1rem; font-weight: 500; cursor: pointer; } .disabled { opacity: 0.5; pointer-events: none; } .even-padding { padding: 2rem; } .portal--form-email-pw-button { position: relative; left: 50%; transform: translate(-50%); cursor: pointer; font-size: 1rem; font-weight: bold; color: #00BAC6; background: transparent; border: 0; } .portal--form-email-pw-button:hover { color: #6fd4db; } .portal--form-field { margin-bottom: 16px; position: relative; } .portal--form-field:last-of-type { margin-bottom: 0; } .portal--form-field label { display: inline-block; visibility: hidden; font-size: 16px; background-color: white; padding: 5px 5px 0px; position: absolute; top: 3px; left: 4px; transition: transform 300ms, fontSize 300ms; pointer-events: none; } .portal--form-field label.active { font-size: 14px; visibility: visible; top: 4px; -webkit-transform: translateY(-18px); transform: translateY(-18px); } .portal--form-field.has-error input { border-color: rgb(241, 85, 65); } .portal--form-field input { width: 100%; border-radius: 4px; box-shadow: rgba(186, 188, 193, 0.3) 0px 0.125rem 0.375rem inset; border: 1px solid rgb(186, 188, 193); background-color: white; padding: 8px; outline: none; height: 2rem; color: rgba(48, 50, 59); } ::-webkit-input-placeholder, ::-moz-input-placeholder, ::-ms-input-placeholder { color: #30323B; } .portal--form-field input:focus { box-shadow: none; border: 2px solid rgb(111, 212, 219); } .portal-clover-form-submit { color: #30323B; letter-spacing: 1px; padding: 1rem 1.5rem; box-shadow: #E5E5E6 0.125rem 0.25rem 0.1875rem; background: linear-gradient(0deg, #F5F5F6 0%, #FFFFFF 100%); text-transform: uppercase; font-weight: 700; width: 100%; border: 1px solid #BABCC1; border-radius: 0.25rem; margin-top: 1.5rem; display: inline-flex; justify-content: center; font-size: 1rem; font-family: Circular; cursor: pointer; } .portal-clover-form-submit:hover { background: #BABCC1; } .portal-clover-form-submit:focus { border: 2px solid #00bac6; } .portal-clover-form-submit:disabled { background: #f5f5f6; } .portal-clover-form-submit .clover-logo { height: 1.5rem; width: auto; } .portal-clover-form-submit .clover-text { text-align: center; margin-top: 0.1rem; padding-left: 0.5rem; } .portal--form-submit { color: white; letter-spacing: 1px; padding: 16px 24px; text-transform: uppercase; box-shadow: rgb(229, 229, 230) 0.125rem 0.25rem 0.1875rem; background: linear-gradient(rgb(0, 186, 198), rgb(111, 212, 219)); width: 100%; margin-top: 1.5rem; border-radius: 4px; font-weight: 700; cursor: pointer; outline: none; border: none; } .portal--form-submit:hover { background: linear-gradient(rgb(0, 186, 198), rgb(0, 186, 198)); } .portal--form-field input, .portal--form-submit { font-family: Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: inherit; } .portal--form-sso-divider { display: flex; margin-top: 1rem; margin-bottom: 1rem; } .portal--form-sso-divider hr { flex: 1; border: 1px solid #E5E5E6; border-bottom: 0; } .portal--form-sso-divider span { margin-left: 0.5rem; margin-right: 0.5rem; color: #BABCC1; font-size: 0.875rem; } .display-none { display: none; } .big-spacer { height: 1.25rem; } .small-spacer { height: 0.25rem; } .not-visible { visibility: hidden; opacity: 0; max-height: 0; transition: visibility 0s, opacity 0.5s ease-in, max-height 0.3s ease-out; -webkit-transition: visibility 0s, opacity 0.5s ease-in, max-height 0.3s ease-out; -moz-transition: visibility 0s, opacity 0.5s ease-in, max-height 0.3s ease-out; -o-transition: visibility 0s, opacity 0.5s ease-in, max-height 0.3s ease-out; } .visible { visibility: visible; opacity: 1; max-height: 200px; } .error { display: flex; padding-top: 8px; margin-bottom: 16px; } .error .error--icon { font-weight: 400; background-color: rgb(241, 85, 65); color: white; font-size: 0.875rem; letter-spacing: 0.2px; text-align: center; height: 18px; line-height: 18px; padding: 0 8px 1.6px 8px; margin-right: 8px; border-radius: 8px; display: block; } .error .error--message { font-size: 1rem; color: rgb(241, 85, 65); margin: 0; } .alert { background-color: rgb(241, 85, 65); max-height: 400px; color: white; overflow: hidden; border-radius: 4px; padding: 16px; margin-bottom: 16px; } .alert p { margin: 0 0 8px 0; padding: 0; } .alert p:last-of-type { margin-bottom: 0; } @media (min-width: 568px) { .portal { margin-top: 199px; } } @media (max-width: 767px) { .notification--container { display: none; } .container { float: none; } .portal--container { width: 100% } .left-background::before { background-color: transparent; } } </style> <script>var __uzdbm_1 = "badc600f-63a9-4b01-af9e-8dca47e6700c";var __uzdbm_2 = "N2YyNTg4MDgtY3Uwbi00MGRmLThlZTUtYTU5MjRkMjhlMmQwJDguMjIyLjIwOC4xNDY=";var __uzdbm_3 = "";var __uzdbm_4 = "false";var __uzdbm_5 = "";var __uzdbm_6 = "";var __uzdbm_7 = "";</script> <script> (function (w, d, e, u, c, g, a, b) { w["SSJSConnectorObj"] = w["SSJSConnectorObj"] || { ss_cid: c, domain_info: "auto", }; w[g] = function (i, j) { w["SSJSConnectorObj"][i] = j; }; a = d.createElement(e); a.async = true; if ( navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > -1 ) { u = u.replace("/advanced/", "/advanced/ie/"); } a.src = u; b = d.getElementsByTagName(e)[0]; b.parentNode.insertBefore(a, b); })( window, document, "script", "https://origin-secure-prod-radware.getbento.com/18f5227b-e27b-445a-a53f-f845fbe69b40/stormcaster.js", "cu0p", "ssConf" ); ssConf("c1", "https://origin-secure-prod-radware.getbento.com"); ssConf("c3", "c99a4269-161c-4242-a3f0-28d44fa6ce24"); ssConf("au", "origin-secure-prod-radware.getbento.com"); ssConf("cu", "validate.perfdrive.com, ssc"); </script></head> <body> <div class="left-background"> <div class="wrapper"> <div class="container notification--container"> <div class="notification site-padding"> <div class="notification--image-wrapper"> <img class="notification--image" src="https://media-cdn.getbento.com/_FINAL_Whats_New.png" alt="Notification image" /> </div> <h2 class="notification--card-title text-align-center">Diner Feedback with Online Ordering</h2> <p class="notification--description text-align-center">Collect private 1-5 star reviews and feedback directly from your diners through automated email and SMS campaigns.</p> <a class="notification--action text-align-center" target="_blank" rel="noopener" href="https://help.getbento.com/hc/en-us/articles/6015709526939-Diner-Feedback-Overview&utm_source=platform&utm_medium=login">Learn More</a> </div> </div> <div class="container portal--container"> <div class="portal site-padding"> <a class="logo" href="/"> <img class="img-responsive" src="https://assets-cdn.getbento.com/static/images/bentobox-logo-soy.svg" alt="Bentobox logo" /> </a> <form class="portal--form" action="" method="post"> <input type="hidden" name="csrfmiddlewaretoken" value="iBoSNjrDpcDOgjpJKf7sf1BwcYrXOnKAKihp5m1mhYdBzOE1BMAazwowGfdPjzF0"> <div class="portal--card"> <h1 class="portal--card-title text-align-center">Log In</h1> <p class="portal--card-description text-align-center"> </p> <div id="form-input-container" class=""> <div class="big-spacer "></div> <div class="portal--form-fields"> <div class="portal--form-field"> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="Email" /> </div> <div class="portal--form-field"> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Password" /> </div> </div> <button id="submit-form" class="portal--form-submit" type="submit">Log in</button> </div> </div> </form> <div class="portal--footer text-align-center"> <a id='forgot-password-button' class="" href="/auth/password-reset/">Forgot Password?</a> </div> </div> </div> </div> </div> <script type="text/javascript"> (function(){ // Fires when the DOM is ready ready(function() { var fieldQuery = document.querySelectorAll('.portal--form-field'), emailPwButtonQuery = document.querySelector('#email-pw-button'), formInputContainer = document.querySelector('#form-input-container'), footerLink = document.querySelector('#forgot-password-button'), fields = []; if (fieldQuery.length !== 0) { fieldQuery.forEach(function(field) { fields.push(new FormField(field)); }); } if (emailPwButtonQuery) { emailPwButtonQuery.addEventListener('click', function() { emailPwButtonQuery.classList.add('display-none'); formInputContainer.classList.add('visible'); footerLink.classList.add('visible'); }); } }); function FormField(element) { this._element = element this._input = this._element.querySelector('input'); this._label = this._element.querySelector('label'); this.placeholder = this._input.getAttribute('placeholder'); if (this._input === null || this._label === null) return this._input.addEventListener('focus', this.activeState.bind(this)) this._input.addEventListener('click', this.activeState.bind(this)); this._input.addEventListener('blur', this.resetState.bind(this)); }; FormField.prototype.activeState = function(event) { this._label.classList.add('active'); this._input.setAttribute('placeholder', ''); }; FormField.prototype.resetState = function(event) { this._label.classList.remove('active'); this._input.setAttribute('placeholder', this.placeholder); }; function ready(fn) { if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') { fn(); } else { document.addEventListener('DOMContentLoaded', fn); } } })(); </script> </body> </html>