Template source: index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title>My VZfit</title> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:description" content="VZfit is fun fitness at home. Use the power of virtual reality to turn playing, exploring and having fun into a way to get fit. "> <meta name="description" content="VZfit is fun fitness at home. Use the power of virtual reality to turn playing, exploring and having fun into a way to get fit."> <meta property="og:type" content="website"> <meta property="og:title" content="My VZfit"> <meta property="og:image" content="/assets/img/Cover1800OG.png"> <meta name="twitter:image" content="/assets/img/Cover1800OG.png"> <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/assets/img/VZIcon180.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/VZIcon16.png"> <link rel="icon" type="image/png" sizes="180x180" href="/assets/img/VZIcon180.png"> <link rel="icon" type="image/png" sizes="180x180" href="/assets/img/VZIcon180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/assets/img/VZIcon192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/assets/img/VZIcon512.png"> <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <link rel="stylesheet" href="/assets/fonts/font-awesome.min.css"> <link rel="stylesheet" href="/assets/fonts/ionicons.min.css"> <link rel="stylesheet" href="/assets/css/Footer-Dark.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css"> <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="/assets/css/Lightbox-Gallery.css"> <link rel="stylesheet" href="/assets/css/lightbox.css"> <link rel="stylesheet" href="/assets/css/Login-Form-Dark.css"> <link rel="stylesheet" href="/assets/css/Social-Icons.css"> <link rel="stylesheet" href="/assets/css/styles.css"> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5XC9MQC');</script> <!-- End Google Tag Manager --> </head> <body style="background: #231f20;font-family: Montserrat, sans-serif;"> <nav class="navbar navbar-dark navbar-expand-md fixed-top" id="top-logo" style="border-color: #212529;font-family: Montserrat, sans-serif;"> <div class="container"><a class="navbar-brand" id="virzoom-link" href="javascript:void(0)" style="margin-left: 20px;"><img id="logo" src="/assets/img/VZfit_logo_horiz_white.png"></a> <div id="vzfit-menu"><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navcol"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link home-link" data-bss-hover-animate="pulse" id="nav-home" href="javascript:void(0)"><i class="fa fa-home" style="font-size: 22px;"></i></a></li> <li class="nav-item"><a class="nav-link manage-rides-button" data-bss-hover-animate="pulse" id="nav-rides" href="javascript:void(0)">Rides</a></li> <li class="nav-item"><a class="nav-link manage-snapshots-button" data-bss-hover-animate="pulse" id="nav-snap" href="javascript:void(0)">Snapshots</a></li> <li class="nav-item"><a class="nav-link" data-bss-hover-animate="pulse" href="https://virzoom.zendesk.com/">Help</a></li> <li class="nav-item"><a class="nav-link account-settings-link" data-bss-hover-animate="pulse" id="nav-settings" href="javascript:void(0)">Account</a></li> </ul> </div> </div> </div> </nav> <div id="vzfit-loading" class="vzfit-page"> <div class="jumbotron jumbotron-fluid text-center header-image" id="header-image-loading" style="background: url(&quot;/assets/img/NoLogo_CoverLandscape.jpg&quot;) no-repeat;background-size: cover;"> <div class="vzfit-jumbo vzfit-jumbo-text"> <h1 class="text-light" id="intro-1">Enjoy the Ride</h1> <p class="text-light" id="catchphrase-1">Have Fun. Explore the World. Get Fit.</p> </div> </div> <div class="container text-center" id="loading-app"> <p class="text-center text-light" style="font-size: 20px;">LOADING</p> </div> </div> <div id="sign-in-divs" style="background: url(&quot;/assets/img/NoLogo_CoverLandscape.jpg&quot;) right / cover no-repeat;"> <div id="external-block" class="external-dark vzfit-page"> <div id="external-block-inside"><div id="external_c_block"> {% block content %} {% endblock %} </div></div> </div> <div id="login" class="login-dark vzfit-page"> <form style="width: 320px;background: rgb(30, 40, 51);"> <h2 class="sr-only" style="color: rgb(255, 255, 255);">Login Form</h2> <div class="illustration"> <h4 class="sign-in-heading">Sign in</h4> <p class="sign-in-div-subhead">New to VZfit?&nbsp;<a id="sign-up-new-user" class="sign-up" href="javascript:void(0)">Sign up</a></p><i class="icon ion-ios-locked-outline"></i> </div> <div class="form-group"><input class="form-control" type="text" id="login-username" name="username" placeholder="User Name" required="" minlength="3"></div> <div class="form-group"><input class="form-control" type="password" id="login-password" name="password" placeholder="Password" required="" minlength="5"></div> <div class="form-group"><button class="btn btn-primary btn-block" id="login-button" type="button">Log In</button></div><a id="forgot-username-link" class="forgot" href="javascript:void(0)">Forgot your username?</a><a id="forgot-password-link" class="forgot" href="javascript:void(0)">Forgot your password?</a> <p class="pulse animated infinite result-message-class" id="login-message" style="padding-top: 20px;text-align: center;">Messages</p> </form> </div> <div id="register" class="login-dark vzfit-page"> <form style="width: 320px;background: rgb(30, 40, 51);" action="javascript:void(0);"> <h2 class="sr-only" style="color: rgb(255, 255, 255);">Login Form</h2> <div class="illustration"> <h4 class="sign-in-heading">Register</h4> </div> <div id="reg-username"> <p class="text-center field-userName" id="reg-user-name" style="color: #4faf81;">userName</p> </div> <div class="form-group"><input class="form-control" type="text" id="reg-code" name="Registration Code" placeholder="Registration Code"> <p class="text-center caption">Enter the code you see on-screen while starting VZfit</p> </div> <div class="form-group"><button class="btn btn-primary btn-block" id="register-button" type="button">Submit</button></div><a class="text-center" id="register-logout" href="javascript:void(0)">Logout to register a different user</a> <p id="reg-message" style="padding-top: 20px;text-align: center;">Paragraph</p> </form> </div> <div id="create-account" class="login-dark vzfit-page"> <form style="width: 320px;background: rgb(30, 40, 51);"> <h2 class="sr-only" style="color: rgb(255, 255, 255);">Login Form</h2> <div class="illustration"> <h4 class="sign-in-heading">Sign up</h4> <p class="sign-in-div-subhead">Already have an account?&nbsp;<a class="go-log-in" href="javascript:void(0)">Sign in</a></p><i class="icon ion-ios-locked-outline"></i> </div> <div class="form-group"><input class="form-control" type="text" id="create-username" name="username" placeholder="User Name" required="" minlength="3" autocomplete="new-password"></div> <div class="form-group"><input class="form-control" type="text" id="create-email" name="create-email" placeholder="Email Address" required="" minlength="3"></div> <div class="form-group"><input class="form-control" type="password" id="create-password" name="password" placeholder="Password" required="" minlength="5"></div> <div class="form-group"><input class="form-control" type="password" id="create-password-confirm" name="password2" placeholder="Confirm Password" required="" minlength="5"></div> <div class="form-group"><button class="btn btn-primary btn-block" id="create-account-button" type="button">Sign Up</button></div> <p class="pulse animated infinite result-message-class" id="create-message" style="padding-top: 20px;text-align: center;">Paragraph</p> </form> </div> <div id="update-password" class="login-dark vzfit-page"> <form style="width: 320px;background: rgb(30, 40, 51);"> <h2 class="sr-only" style="color: rgb(255, 255, 255);">Login Form</h2> <div class="illustration"> <h4 class="sign-in-heading">Update Password</h4><i class="icon ion-ios-locked-outline"></i> <div class="form-group"><input class="form-control" type="password" id="current-password" name="old-password" placeholder="Current Password" required="" minlength="5"></div> </div> <div class="form-group"><input class="form-control" type="password" id="update-create-password" name="update-password1" placeholder="New Password" required="" minlength="5"><input class="form-control" type="password" id="update-confirm-password" name="update-password2" placeholder="Confirm New Password" required="" minlength="5"></div> <div class="form-group"><button class="btn btn-primary btn-block" id="update-password-button" type="button">Update</button></div> <p class="pulse animated infinite" id="update-pwd-message" style="padding-top: 20px;text-align: center;">Paragraph</p> </form> </div> <div id="username-recovered-landing" class="login-dark vzfit-page"> <form style="width: 320px;background: rgb(30, 40, 51);"> <h2 class="sr-only" style="color: rgb(255, 255, 255);">Login Form</h2> <div class="illustration"> <h4 class="sign-in-heading">User Name Recovered</h4><i class="icon ion-ios-email-outline"></i> </div> <div> <h6 id="username-recovered-message">Your username was sent to userName@email.com.<br></h6> </div> <div class="form-group"><button class="btn btn-primary btn-block go-log-in" type="button">Proceed to SIgn In</button></div> </form> </div> <div id="reg-success-landing" class="login-dark vzfit-page"> <form style="width: 320px;background: rgb(30, 40, 51);"> <h2 class="sr-only" style="color: rgb(255, 255, 255);">Login Form</h2> <div class="illustration"> <h4 class="sign-in-heading">Registration Complete</h4><i class="icon ion-android-checkbox"></i> </div> <div></div> <div class="form-group"><button class="btn btn-primary btn-block" id="reg-success-continue" type="button">Continue</button></div> </form> </div> <div id="reset-password-landing" class="login-dark vzfit-page"> <form style="width: 320px;background: rgb(30, 40, 51);"> <h2 class="sr-only" style="color: rgb(255, 255, 255);">Login Form</h2> <div class="illustration"> <h4 class="sign-in-heading">Password Reset</h4><i class="icon ion-ios-email-outline"></i> </div> <div> <h6 id="pwd-reset-message">We have sent you an e-mail. Please contact us if you do not receive it within a few minutes.<br></h6> </div> <div class="form-group"><button class="btn btn-primary btn-block go-log-in" type="button" style="background: #4faf81;">Proceed to SIgn In</button></div> </form> </div> <div id="forgot-username" class="login-dark vzfit-page"> <form style="width: 320px;background: rgb(30, 40, 51);"> <div class="illustration"> <h4 class="sign-in-heading">Forgot Username&nbsp;</h4><i class="icon ion-help"></i> </div> <div class="form-group"><input class="form-control" type="text" id="forgot-username-email" name="email" placeholder="Email Address" required="" minlength="3"></div> <div class="form-group"><button class="btn btn-primary btn-block" id="recover-username" type="button">Retrieve Username</button></div> <p id="forgot-username-message" style="padding-top: 20px;text-align: center;">Check your email for your Username</p> <div class="div-centered"><a class="login-link" href="javascript:void(0)">Back to Sign-in</a></div> </form> </div> <div id="forgot-password" class="external-dark vzfit-page"> <div class="container forgot-password-section" id="forgot-password-section"> <div class="row"> <div class="col"> <div class="illustration" style="text-align: center;"> <h4 class="sign-in-heading">Forgot Password&nbsp;</h4><i class="icon ion-help"></i> </div> </div> </div> <div class="row" style="min-height: 50;margin-top: 50px;"> <div class="col"> <div style="font-size: 20px;"><div> <form action="/account/password/reset/" method="POST" > {% csrf_token %} <input type="email" name="email" class="form-control" placeholder="Email Address" required="" id="id_email"> <input type="submit" class="btn btn-primary vzfit-btn" value="Reset My Password"> </form> </div> </div> </div> </div> <div class="row" style="margin-top: 50px;"> <div class="col"> <p class="text-center" id="reset-pwd-message">Please <a href="https://virzoom.zendesk.com/hc/en-us/requests/new">contact us</a> if you have any trouble resetting your password</p> </div> </div> <div class="row"> <div class="col"> <div class="div-centered" style="margin-top: 50px;margin-bottom: 20px;"><a class="login-link" href="#" style="padding-top: 20px;">Back to Sign-in</a></div> </div> </div> </div> </div> <div id="reset-forgot-password" class="login-dark vzfit-page"> <div class="container forgot-password-section" id="reset-forgot-password-section"> <div class="row"> <div class="col"> <div class="illustration" style="text-align: center;"> <h4 class="sign-in-heading">Change Password&nbsp;</h4><i class="icon ion-locked"></i> </div> </div> </div> <div class="row" style="min-height: 50;margin-top: 101px;"> <div class="col"> <div style="font-size: 20px;"><div> <form id = "reset-password-submit" action="/account/password/reset/key/ao8-set-password/" method="POST" > {% csrf_token %} <input type="password" name="password1" class="form-control" placeholder="New Password" required="" id="id_password1" aria-autocomplete="list"> <input type="password" name="password1" class="form-control" placeholder="New Password (again)" required="" id="id_password2" aria-autocomplete="list"> <input type="submit" class="btn btn-primary vzfit-btn" value="Change Password"> </form> </div> </div> </div> </div> <div class="row" style="margin-top: 150px;"> <div class="col"> <p class="text-center" id="reset-pwd-message">Please <a href="https://virzoom.zendesk.com/hc/en-us/requests/new">contact us</a> if you have any trouble resetting your password</p> </div> </div> <div class="row"> <div class="col"> <div class="div-centered" style="margin-top: 50px;margin-bottom: 20px;"><a class="login-link" href="#" style="padding-top: 20px;">Back to Sign-in</a></div> </div> </div> </div> </div> <div id="wizard" class="login-dark vzfit-page"> <form style="width: 640px;max-width: 640px;"> <h2 class="sr-only">Login Form</h2> <div class="illustration"> <h4 class="sign-in-heading">Tell us about yourself</h4><i class="icon ion-help"></i> </div> <div class="form-row"> <div class="col" id="market-dob"> <div class="form-group"> <p>Date of Birth:</p><input class="form-control" id="mkt-dob-input" type="date"> </div> </div> <div class="col" id="market-gender"> <div class="form-group"> <div class="dropdown" style="color: #4faf81;"><button class="btn btn-primary dropdown-toggle" aria-expanded="false" data-toggle="dropdown" id="wizard-gender-button" type="button" aria-haspopup="true">Gender:&nbsp;&nbsp;</button> <div class="dropdown-menu" style="background: #4faf81;color: #ffffff;"><a class="dropdown-item gender2" id="gender2-female" href="javascript:void(0)">Female</a><a class="dropdown-item gender2" id="gender2-male" href="javascript:void(0)">Male</a><a class="dropdown-item gender2" id="gender2-other" href="javascript:void(0)">Other</a><a class="dropdown-item gender2" id="gender2-unspecified" href="javascript:void(0)">Unspecified</a></div> </div> </div> </div> </div> <div class="form-group" id="how-hear-about"> <p><strong>How did you hear about us?</strong></p> <div> <div class="form-check"><input class="form-check-input market" type="radio" id="mkt-oculus" checked=""><label class="form-check-label" for="formCheck-1">Oculus</label></div> <div class="form-check"><input class="form-check-input market" type="radio" id="mkt-friend"><label class="form-check-label" for="formCheck-1">Friend</label></div> <div class="form-check"><input class="form-check-input market" type="radio" id="mkt-review"><label class="form-check-label" for="formCheck-1">Review</label></div> <div class="form-check"><input class="form-check-input market" type="radio" id="mkt-ad"><label class="form-check-label" for="formCheck-1">Advertisement</label></div> <div class="form-check"><input class="form-check-input market" type="radio" id="mkt-youtube"><label class="form-check-label" for="formCheck-1">YouTube</label></div> <div class="form-check"><input class="form-check-input market" type="radio" id="mkt-other"><label class="form-check-label" for="formCheck-1">Other</label></div> </div><input class="form-control" type="text" id="referral-other" placeholder="Please Specify"> </div> <div class="form-group"> <div class="form-check" style="margin-top: 20px;"><input class="form-check-input" type="checkbox" id="wizard-digest" checked=""><label class="form-check-label" for="formCheck-1">Subscribe to weekly digest email</label></div> </div> <div class="form-group"><button class="btn btn-primary btn-block user-btn" id="submit-wizard-button" type="button">Submit</button></div> <div class="div-centered"><a id="skip-wizard" href="javascript:void(0)">Skip</a></div> </form> </div> </div> <div id="profile-page" class="page-class vzfit-page"> <div id="profile-top" class="autofocus"></div> <div class="jumbotron jumbotron-fluid text-center header-image self-stats" style="background: url(&quot;/assets/img/NoLogo_CoverLandscape.jpg&quot;) no-repeat;background-size: cover;"> <div class="vzfit-jumbo vzfit-jumbo-text"> <h1 class="text-light message" id="intro">Welcome Back</h1> <p class="text-light" id="catchphrase">View Workout &amp; Ride Stats</p> </div> </div> <div class="text-center" id="loading-profile" style="color: #212529;"> <p class="text-center text-light" style="font-size: 20px;padding-top: 50px;">LOADING</p><span class="spinner-border text-center vz-loading" role="status" style="color: #4faf81;"></span> <h1 id="profile-loading-error" style="margin-top: 20px;margin-bottom: 20px;">Heading</h1> </div> <div id="profile-section" class="below-fold" style="background: rgba(255,255,255,0);"> <div class="container text-center other-stats" id="other-header"></div> <div class="container d-sm-none d-block" id="mobile-profile-btn-section"> <div class="row self-stats"> <div class="col text-center"><button class="btn btn-primary text-center vzfit-btn user-btn manage-rides-button" id="manage-rides-button-small" type="button">Manage Rides</button></div> <div class="col text-center"><button class="btn btn-primary vzfit-btn user-btn create-ride-button" id="create-ride-btn-small" type="button">Create Ride</button></div> <div class="col text-center"><button class="btn btn-primary vzfit-btn user-btn manage-snapshots-button" id="manage-snapshots-button-small" type="button">Manage Snapshots</button></div> </div> </div> <div class="container d-none d-sm-block text-light" id="profile-button-section"> <div class="row self-stats" id="profile-buttons"> <div class="col-4 text-center"> <h5 class="text-center"><strong>Manage Rides</strong></h5><button class="btn btn-outline-primary manage-rides-button" type="button"><i class="fa fa-map-o intro-icon"></i></button> <p class="home-page-text">Find Rides all over the world, share and save your favorites</p> </div> <div class="col-4 text-center"> <h5 class="text-center"><strong>Create Ride</strong></h5><button class="btn btn-outline-primary create-ride-button" id="create-ride-btn" type="button"><i class="fa fa-cloud-upload intro-icon"></i></button> <p class="home-page-text">Upload map files to your VZfit account</p> </div> <div class="col-4 text-center"> <h5 class="text-center"><strong>Snapshots</strong></h5><button class="btn btn-outline-primary manage-snapshots-button" id="snapshot-btn" type="button"><i class="fa fa-photo intro-icon"></i></button> <p class="home-page-text">View &amp; Share your shots taken in-game</p> </div> </div> </div> <div class="container" id="user-stats-intro" style="/*background: #ffffff;*/"> <div class="row justify-content-center" id="user-stats-header" style="text-align: center;"> <div class="col-12 col-md-5 profile-box" id="name-rank-cals"> <h3 class="text-center field-userName" id="userstats-name">userName</h3> <div class="not-private-stats"> <p id="profile-start-date"><strong>Member since:</strong> 9/17/2020<br></p> <p id="profile-last-played"><strong>Last Played:</strong>&nbsp;2/17/2021<br></p> <p class="text-center" id="lifetime-heading"><strong>Lifetime Stats:</strong><br></p> <p class="text-center" id="lifetime-distance">76 Miles Traveled<br></p> <p class="text-center" id="lifetime-vzcals">7540 VZcals&nbsp;<br></p><a id="leaderboards-vzcals" href="javascript:void(0)" data="test"> <p id="profile-rank" class="dark-link"><strong>Rank </strong>X of XXX<br></p> </a> </div> <div id="privacy-stats-message" class="other-stats"> <p>Stats are hidden</p> </div> <div class="self-stats"> <div class="form-check"><input class="form-check-input" type="checkbox" id="vzfit-private-checkbox"><label class="form-check-label" for="formCheck-1">Hide your stats page from the public<br></label></div> <p class="flash animated" id="private-stats-updated" style="font-style: italic;"><em>updated</em></p> </div> </div> <div class="col col-12 col-md-5 self-stats profile-box" id="user-min-goals"> <h4>Workout Time:</h4> <p id="lifetime-minutes"><strong>Lifetime:</strong> 3:59:55<br></p> <p id="week-minutes"><strong>This Week:</strong> 45:01</p> <div id="weekly-progress-section"> <div class="progress" id="weekly-progress" style="background: #999999;"> <div class="progress-bar progress-bar-striped" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" id="weekly-progress-bar" style="width: 50%;"><span class="sr-only">50%</span></div> </div> <p id="show-weekly-avg" style="padding: 10px;">Weekly Average: 44 minutes</p> <p id="weekly-avg-message" style="padding: 10px;">You need 55 minutes to match your average week</p> </div> </div> </div> </div> <div class="container profile-section" id="user-stats"> <div class="row heading-row"> <div class="col"> <h3>Workout Stats</h3> </div> </div> <div class="row account-info-section" id="user-stat-graphs" style="background: #ffffff;"> <div class="col-12 col-md-6" style="background: #ffffff;"> <h4 class="text-center">Rides Completed:</h4> <div id="completed-rides-chart"><canvas data-bss-chart="{&quot;type&quot;:&quot;horizontalBar&quot;,&quot;data&quot;:{&quot;labels&quot;:[&quot;.1-1 mile&quot;,&quot;1-5 miles&quot;,&quot;5-10 miles&quot;,&quot;10-50 miles&quot;,&quot;50+ miles&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;Rides&quot;,&quot;backgroundColor&quot;:&quot;#656263&quot;,&quot;borderColor&quot;:&quot;&quot;,&quot;borderWidth&quot;:&quot;&quot;,&quot;data&quot;:[&quot;4&quot;,&quot;9&quot;,&quot;4&quot;,&quot;12&quot;,&quot;3&quot;]}]},&quot;options&quot;:{&quot;maintainAspectRatio&quot;:true,&quot;legend&quot;:{&quot;display&quot;:false,&quot;position&quot;:&quot;bottom&quot;,&quot;reverse&quot;:false,&quot;labels&quot;:{&quot;fontStyle&quot;:&quot;normal&quot;}},&quot;title&quot;:{&quot;text&quot;:&quot;How many rides have you completed in each distance bracket?&quot;,&quot;display&quot;:true,&quot;fontSize&quot;:14,&quot;fontFamily&quot;:&quot;Montserrat, sans-serif&quot;,&quot;fontStyle&quot;:&quot;normal&quot;},&quot;scales&quot;:{&quot;xAxes&quot;:[{&quot;ticks&quot;:{&quot;beginAtZero&quot;:true},&quot;gridLines&quot;:{&quot;drawOnChartArea&quot;:false}}],&quot;yAxes&quot;:[{&quot;ticks&quot;:{&quot;beginAtZero&quot;:true},&quot;gridLines&quot;:{&quot;drawOnChartArea&quot;:false}}]}}}"></canvas></div> <div></div> </div> <div class="col col-12 col-md-6" id="user-graph"> <h4 class="text-center">Workout History:</h4> <div id="daily-workouts-chart"><canvas data-bss-chart="{&quot;type&quot;:&quot;horizontalBar&quot;,&quot;data&quot;:{&quot;labels&quot;:[&quot;10-100 VZcals&quot;,&quot;100-250 VZcals&quot;,&quot;250-500 VZcals&quot;,&quot;500-1000 VZcals&quot;,&quot;1000+ VZcals&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;10-100 VZcals&quot;,&quot;backgroundColor&quot;:&quot;#ed2024&quot;,&quot;borderColor&quot;:&quot;#ed2024&quot;,&quot;data&quot;:[&quot;5&quot;,&quot;4&quot;,&quot;5&quot;,&quot;2&quot;,&quot;9&quot;]}]},&quot;options&quot;:{&quot;maintainAspectRatio&quot;:true,&quot;legend&quot;:{&quot;display&quot;:false,&quot;position&quot;:&quot;bottom&quot;,&quot;reverse&quot;:false,&quot;labels&quot;:{&quot;fontStyle&quot;:&quot;normal&quot;}},&quot;title&quot;:{&quot;display&quot;:true,&quot;text&quot;:&quot;How many days have you earned VZcals in each zone?&quot;,&quot;fontSize&quot;:14,&quot;fontFamily&quot;:&quot;Montserrat, sans-serif&quot;,&quot;fontStyle&quot;:&quot;normal&quot;},&quot;scales&quot;:{&quot;xAxes&quot;:[{&quot;gridLines&quot;:{&quot;drawBorder&quot;:true,&quot;borderDash&quot;:[&quot;1&quot;],&quot;zeroLineBorderDash&quot;:[&quot;1&quot;],&quot;drawOnChartArea&quot;:false},&quot;ticks&quot;:{&quot;beginAtZero&quot;:true,&quot;padding&quot;:1}}],&quot;yAxes&quot;:[{&quot;gridLines&quot;:{&quot;drawBorder&quot;:true,&quot;borderDash&quot;:[&quot;1&quot;],&quot;zeroLineBorderDash&quot;:[&quot;1&quot;],&quot;drawOnChartArea&quot;:false},&quot;ticks&quot;:{&quot;beginAtZero&quot;:true,&quot;padding&quot;:1}}]}}}"></canvas></div> </div> </div> <div class="row d-none" id="user-completed-rides-graph-off"> <div class="col col-12 col-md-8"> <div id="completed-rides-chart2"><canvas data-bss-chart="{&quot;type&quot;:&quot;bar&quot;,&quot;data&quot;:{&quot;labels&quot;:[&quot;Rides Complete&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;.1-1 mile&quot;,&quot;backgroundColor&quot;:&quot;rgb(201,15,15)&quot;,&quot;data&quot;:[&quot;1&quot;]},{&quot;label&quot;:&quot;1-5 mi&quot;,&quot;data&quot;:[&quot;2&quot;]},{&quot;label&quot;:&quot;5-10 mi&quot;,&quot;data&quot;:[&quot;3&quot;]},{&quot;label&quot;:&quot;10-50 mi&quot;,&quot;data&quot;:[&quot;4&quot;]},{&quot;label&quot;:&quot;50+ mi&quot;,&quot;data&quot;:[&quot;5&quot;]}]},&quot;options&quot;:{&quot;maintainAspectRatio&quot;:true,&quot;legend&quot;:{&quot;display&quot;:true,&quot;position&quot;:&quot;right&quot;,&quot;labels&quot;:{&quot;fontStyle&quot;:&quot;normal&quot;}},&quot;title&quot;:{&quot;fontStyle&quot;:&quot;normal&quot;},&quot;scales&quot;:{&quot;xAxes&quot;:[{&quot;ticks&quot;:{&quot;beginAtZero&quot;:true}}],&quot;yAxes&quot;:[{&quot;ticks&quot;:{&quot;beginAtZero&quot;:true}}]}}}"></canvas></div> <div></div> </div> </div> </div> <div class="container profile-section self-stats" id="ach-preview" style="background: #ffffff;"> <div class="row heading-row" style="margin-top: -10px;"> <div class="col"> <h3>VZfit Achievements</h3> </div> </div> <div class="row ach-info-section" id="user-ach-preview"></div> <div class="row"> <div class="col"> <p><a class="achievements-link" href="javascript:void(0)">Click here to see all achievements</a></p> </div> </div> </div> <div class="container" id="profile-suggested-rides"> <div class="row heading-row" id="explorerstats-heading"> <div class="col"> <h3>Suggested Rides Stats</h3> </div> </div> <div class="row account-info-section" id="user-explorer-stats" style="background: #ffffff;"></div> </div> </div> </div> <div id="account-page" class="page-class vzfit-page"> <div class="jumbotron text-center header-image" id="header-settings" style="text-align: center;background: url(&quot;/assets/img/NoLogo_CoverLandscape.jpg&quot;);background-size: cover;"> <div class="vzfit-jumbo vzfit-jumbo-text"> <h1 class="text-light" id="settings-heading">Account</h1> <p class="text-light" id="settings-heading-subtext">Manage your personal settings</p> </div> </div> <div id="warning-msg-area" class="result-message-class"> <div class="container d-flex flex-row justify-content-between standard-message" id="result-message" style="margin-top: auto;margin-bottom: auto;color: var(--light);background: rgb(79, 175, 129);"> <div class="d-flex"><i class="fa fa-star d-flex justify-content-center align-items-center" style="text-align: center;padding-right:10px;padding-left:10px"></i> <h3 class="d-flex align-self-center my-auto" id="result-message-text">Heading</h3> </div><a class="close-warning" href="#"><i class="fa fa-close d-flex justify-content-center align-items-center justify-content-lg-end" style="text-align: center;padding-right:10px;padding-left:10px"></i></a> </div> </div> <div id="settings-page-section" class="below-fold"> <div class="container settings-block" id="account-info"> <div class="row heading-row"> <div class="col"> <h4>Account Info</h4> </div> </div> <div class="row justify-content-center account-info-section"> <div class="col-12 col-md-6"> <p class="account-info-heading"><strong>User Name:</strong></p> <p id="fat" class="field-userName">userName</p> <p class="account-info-heading"><strong>Oculus ID:</strong></p> <p id="oculusID">ocID</p> <p class="account-info-heading"><strong>Membership Status:</strong></p> <p id="membership">Please download our apps, launch one of them, and you will be provided with a 5 digit registration code to use below.</p> <p><a id="register-now" href="javascript:void(0)">Enter Registration Code</a></p> <p><a id="activate-membership" class="legacy-membership-btn" href="javascript:void(0)">Activate Membership</a></p> <p><a id="update-payment" class="legacy-membership-btn" href="javascript:void(0)">Update Payment Details</a><div> </div></p> <p><a id="cancel-membership" class="legacy-membership-btn" href="javascript:void(0)">Cancel Membership</a></p> <p><a id="manage-legacy-subscription" href="javascript:void(0)">Manage your Subscription</a></p> <p style="padding-top: 20px;"><a id="get-account-help" href="javascript:void(0)">How to Manage your Subscriptions</a></p> </div> <div class="col-12 col-md-6"> <p class="account-info-heading"><strong>Email Address:</strong></p> <p class="settings-email account-value" style="padding-bottom: 20px;">VeryLongName@LongEmail.com</p> <p class="account-buttons"></p> <p><button class="btn btn-primary big-vzfit-btn" id="go-update-password" type="button">Change Password</button></p> <p class="account-buttons"><button class="btn btn-primary big-vzfit-btn" id="logout-btn" type="button">Logout</button></p><form id="update_form" style="display: none;" action="/vzpro/update_payment_app" method="POST"> {% csrf_token %} <script id = "payment_script" src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="{{ stripe_key }}" data-email= "{{ stripe_email }}" data-allow-remember-me="false", data-zip-code="true", data-name="VirZOOM, Inc." data-image="/static/img/apple-touch-icon.png" data-label="Update Payment Details" data-panel-label="Update Payment Details " data-locale="auto"> </script> </form> </div> </div> </div> <div class="container" id="apps-info"> <div class="row heading-row"> <div class="col"> <h4>App Download</h4> </div> </div> <div class="row" id="store-live" style="padding-right: 25px;padding-left: 25px;padding-top: 25px;padding-bottom: 25px;"> <div class="col-12 col-md-6" style="text-align: center;"><button class="btn btn-primary download-vzfit picture-button" id="download-vzfit" type="button" style="margin-bottom: 15px;padding: 0px;background: var(--gray-dark);"><img class="pic-btn-img" src="/assets/img/VZfit_CoverLandscape_256.jpg"></button></div> <div class="col-12 col-md-6" style="text-align: center;"><button class="btn btn-primary picture-button" id="download-vzplay" type="button" style="margin-bottom: 15px;padding: 0px;background: var(--gray-dark);"><img class="pic-btn-img" src="/assets/img/VZfit_Play_Landscape_BikeOnly_256.jpg"></button></div> </div> <div class="row d-none" id="store-live-tabled"> <div class="col"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th></th> <th class="text-center">VZfit</th> <th class="text-center">VZplay</th> </tr> </thead> <tbody> <tr> <td>Download and play today</td> <td class="text-center"><a class="download-vzfit" href="javascript:void(0)" target="_blank">Click Here</a></td> <td class="text-center"><a class="download-vzplay" href="javascript:void(0)" target="_blank">Click Here</a></td> </tr> <tr> <td>Can be played with or without&nbsp;<a href="https://www.virzoom.com/buy/">VZfit-compatible bike</a>&nbsp;<br></td> <td class="text-center"><i class="fa fa-check"></i></td> <td class="text-center"> <p>Bike Only</p> </td> </tr> </tbody> </table> </div> </div> </div> <div class="row" id="before-store"> <div class="col"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th></th> <th class="text-center">VZfit</th> <th class="text-center">VZplay</th> </tr> </thead> <tbody> <tr> <td>Request download invites</td> <td class="text-center"><a class="download-app" href="javascript:void(0)" target="_blank">Click Here</a></td> <td class="text-center"><a class="download-app" href="javascript:void(0)" target="_blank">Click Here</a></td> </tr> <tr> <td>Can be played with or without&nbsp;<a href="https://www.virzoom.com/buy/">VZfit-compatible bike</a>&nbsp;<br></td> <td class="text-center"><i class="fa fa-check"></i></td> <td class="text-center"> <p>Bike Only</p> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="container settings-block" id="personal-info"> <div class="row heading-row"> <div class="col"> <h4>Personal Info</h4> </div> </div> <div class="row row-cols-sm-1 row-cols-xs-1 account-info-section"> <div class="col-12 align-self-start col-md-5 profile-col"> <p><strong>Date of Birth:</strong></p><input id="user-birthday" type="date" value="2020-01-01"> <div class="form-check" style="margin-top: 20px;"><input class="form-check-input" type="checkbox" id="subscribe-digest"><label class="form-check-label" for="formCheck-1">Subscribe to weekly digest email</label></div> </div> <div class="col-12 align-self-start col-md-3 profile-col"> <p><strong>Gender:</strong></p> <div> <div class="form-check"><input class="form-check-input gender" type="radio" id="gender-female"><label class="form-check-label" for="formCheck-1">Female</label></div> <div class="form-check"><input class="form-check-input gender" type="radio" id="gender-male"><label class="form-check-label" for="formCheck-1">Male</label></div> <div class="form-check"><input class="form-check-input gender" type="radio" id="gender-other"><label class="form-check-label" for="formCheck-1">Other</label></div> <div class="form-check"><input class="form-check-input gender" type="radio" id="gender-unspecified" checked=""><label class="form-check-label" for="formCheck-1">Unspecified</label></div> </div> </div> <div class="col text-center align-self-start col-12 col-md-4 profile-col align-self-center"> <p><strong>Weekly VZcals Goal:</strong></p><input type="number" id="user-vzcals-goal" value="5000" name="Weekly VZ Cals" style="padding-bottom: 0;margin-bottom: 10px;width: 100px;text-align: right;"> <p class="text-center"><button class="btn btn-primary vzfit-btn" id="update-profile-info-button" type="button" style="text-align: center;">Save Changes</button></p> </div> </div> <div class="row"> <div class="col"> <p class="text-center pulse animated infinite result-message-class" id="profile-updated-message" style="padding-top: 10px;">Paragraph</p> </div> </div> </div> <div class="container settings-block" id="shared-info"> <div class="row heading-row"> <div class="col"> <h4>Connected Apps</h4> </div> </div> <div class="row account-info-section" style="padding-top: 10px;"> <div class="col-12 text-center d-flex flex-column justify-content-between align-items-center col-sm-6 connections-info" id="fitbit"> <p><img class="section-heading" src="/assets/img/FitbitLogo.png" width="150"></p> <p id="fitbit-click-to-connect"><strong>Click to connect your account</strong>&nbsp;</p><a id="fitbit-connected-info" href="https://www.fitbit.com/" target="_blank"> <p id="fitbit-connected-to">Connected to: FitUser</p> </a> <p><button class="btn btn-primary btn-block big-vzfit-btn" id="manage-fitbit-connect" type="button">Connect</button></p> </div> <div class="col-12 text-center d-flex flex-column justify-content-between align-content-center col-sm-6 connections-info"> <p><img class="section-heading" src="/assets/img/strava.png" width="150"></p> <p id="strava-click-to-connect"><strong>Click to connect your account</strong></p><a id="strava-connected-info" href="https://strava.com/dashboard" target="_blank"> <p id="strava-connected-to">Connected to StravaUser</p> </a> <p id="strava-vzfit-club" style="margin-top: 10px;">Now join the&nbsp;<a href="https://www.strava.com/clubs/vzfit">VZfit Strava Club</a>&nbsp;to compete with others!<br></p> <div id="strava-connected-club"><div> <h5 style="color:orange"><center>VZfit Strava Club</center></h5><iframe allowtransparency frameborder='0' height='160' scrolling='no' src='https://www.strava.com/clubs/643289/latest-rides/ea7d9172e70a766c652c83a703beb4462b7eb3ba?show_rides=false' width='300'></iframe></div></div> <p class="d-flex align-self-center"><button class="btn btn-primary btn-block big-vzfit-btn" id="manage-strava-connect" type="button">Connect to Strava</button></p> <div id="manage-strava-disconnect"><div> <form action="/social/disconnect/strava/?next=/profile" method="POST"> {% csrf_token %} <input type="submit" class="btn btn-primary big-vzfit-btn" value="Disconnect Strava"> </form> </div></div> </div> </div> </div> </div> </div> <div id="achievements-page" class="page-class vzfit-page"> <div id="achievements-top"></div> <div class="container profile-section" id="achievements-vz-play" style="background: #ffffff;"> <div class="jumbotron text-center header-image" id="header-achievements" style="text-align: center;background: url(&quot;/assets/img/NoLogo_CoverLandscape.jpg&quot;);background-size: cover;"> <div class="vzfit-jumbo vzfit-jumbo-text"> <h1 class="text-light" id="ach-heading">Achievements</h1> <p class="text-light" id="ach-heading-subtext">View your achievements, unlocks, stars and head to head rankings!</p> </div> </div> <div class="row heading-row"> <div class="col"> <h3>VZfit Achievements</h3> </div> </div> <div class="row ach-info-section" id="user-achievement-stats"></div> <div class="row heading-row"> <div class="col"> <h3>VZplay Achievements</h3> </div> </div> <div class="row ach-info-section" id="heading-goals"> <div class="col"> <h3>Goals</h3> </div> </div> <div class="row" id="play-achievement-stats"></div> <div class="row ach-info-section" id="heading-unlocks"> <div class="col"> <h3>Unlocks</h3> </div> </div> <div class="row ach-info-section" id="user-achievement-unlocks"></div> <div class="row ach-info-section" id="heading-stars"> <div class="col"> <h3>Stars</h3> </div> </div> <div id="user-achievement-stars" class="ach-info-section"> <div class="row"></div> </div> <div class="row ach-info-section" id="heading-headtohead"> <div class="col"> <h3>Head to Head</h3> </div> </div> <div class="row ach-info-section" id="user-achievement-headtohead"></div> </div> </div> <div id="usage-page" class="page-class vzfit-page"> <div class="jumbotron text-center header-image" id="header-usage" style="text-align: center;background: url(&quot;/assets/img/NoLogo_CoverLandscape.jpg&quot;);background-size: cover;"> <div class="vzfit-jumbo vzfit-jumbo-text"> <h1 class="text-light" id="usage-heading">Detailed Usage</h1> <p class="text-light" id="usage-heading-subtext">View your VZcals by usage and date</p> </div> </div> <div id="usage-chart-section" class="below-fold"> <div class="row text-center" style="padding: 0px;padding-top: 10px;"> <div class="col"> <p>VZcals by Workout</p> </div> </div> <div id="vzcal-by-workout-chart"><canvas data-bss-chart="{&quot;type&quot;:&quot;horizontalBar&quot;,&quot;data&quot;:{&quot;labels&quot;:[&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;],&quot;datasets&quot;:[{&quot;label&quot;:&quot;Revenue&quot;,&quot;backgroundColor&quot;:&quot;#4e73df&quot;,&quot;borderColor&quot;:&quot;#4e73df&quot;,&quot;data&quot;:[&quot;4500&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;,&quot;&quot;]}]},&quot;options&quot;:{&quot;maintainAspectRatio&quot;:true,&quot;legend&quot;:{&quot;display&quot;:false,&quot;labels&quot;:{&quot;fontStyle&quot;:&quot;normal&quot;}},&quot;title&quot;:{&quot;display&quot;:false,&quot;fontStyle&quot;:&quot;normal&quot;}}}"></canvas></div> <div><canvas id="vzcal-by-date-chart2" width="1100" height="1100"> </canvas> </div> </div> </div> <div id="create-ride-page" class="page-class vzfit-page"> <div class="jumbotron text-center header-image" id="header-create-ride" style="text-align: center;background: url(&quot;/assets/img/NoLogo_CoverLandscape.jpg&quot;);background-size: cover;"> <div class="vzfit-jumbo vzfit-jumbo-text"> <h1 class="text-light" id="create-heading">Create Ride</h1> <p class="text-light" id="create-heading-subtext">Upload rides you've created all over the world</p> </div> </div> <div id="create-page-section" class="below-fold"> <div class="container" id="create-instructions"> <div class="row"> <div class="col"> <p class="text-center" style="margin-top: 10px;">With VZfit and&nbsp;<a href="https://google.com/mymaps" target="_blank">Google My Maps</a>&nbsp;you can create rides all over the world!<br></p> <p class="text-center" style="margin-top: 10px;">&nbsp;<a href="https://www.youtube.com/watch?v=HgN9ZI37qb4" target="_blank">Watch our how-to video</a>&nbsp;and learn how to creates rides both in-game and via website.&nbsp; Or expand our step by step instructions below!<br></p> </div> </div> <div class="row heading-row" id="create-head"> <div class="col"> <h4 class="main-heading">Upload Ride</h4> </div> </div> <div class="row directions-row" id="step1-3-accordion"> <div class="col"> <div role="tablist" id="accordion-instruction"> <div class="card"> <div class="card-header" role="tab"> <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-instruction .item-1" href="#accordion-instruction .item-1">Step 1: Create Map▼<br></a></h5> </div> <div class="collapse item-1" role="tabpanel" data-parent="#accordion-instruction"> <div class="card-body"> <div class="row directions-row" id="step-1"> <div class="col-12 col-md-8"> <p><br>Go to&nbsp;<a href="https://google.com/mymaps">Google My Maps</a>.&nbsp; Choose or create a map. Be sure to use Driving Directions, not biking or walking.<br></p> <p><br>Click here for a&nbsp;<a href="https://www.youtube.com/watch?time_continue=61&amp;v=9KNkiNExSl0&amp;feature=emb_logo">quick tutorial</a>&nbsp;on how to create a ride.<br><br></p> </div> <div class="col-12 col-md-4"><img src="/assets/img/createmap.png" width="100%"></div> </div> </div> </div> </div> <div class="card"> <div class="card-header" role="tab"> <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-instruction .item-2" href="#accordion-instruction .item-2">Step 2: Export▼<br></a></h5> </div> <div class="collapse item-2" role="tabpanel" data-parent="#accordion-instruction"> <div class="card-body"> <div class="row directions-row" id="step-2"> <div class="col-12 col-md-8"> <p><br>Press the 3-dot menu button, to the right of the map title, and choose Export to KML/KMZ<br><br><br></p> </div> <div class="col-12 col-md-4"><img src="/assets/img/exportkml1.png" width="100%"></div> </div> </div> </div> </div> <div class="card"> <div class="card-header" role="tab"> <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-instruction .item-3" href="#accordion-instruction .item-3">Step 3: Download▼<br></a></h5> </div> <div class="collapse item-3" role="tabpanel" data-parent="#accordion-instruction"> <div class="card-body"> <div class="row directions-row" id="step-3"> <div class="col-12 col-md-6"> <p>Select the layer you want to ride (not Entire map), and check Export as KML instead of KMZ<br></p> <p>Press Download to get the KML file<br></p> </div> <div class="col-12 m-auto col-md-6"><img class="flex-shrink-1" src="/assets/img/exportkml.png" width="100%"></div> </div> </div> </div> </div> </div> </div> </div> <div class="row d-none directions-row" id="step1-old"> <div class="col-12 col-md-8"> <h4>Step 1: Create Map</h4> <p><br>Go to&nbsp;<a href="https://google.com/mymaps">Google My Maps</a>.&nbsp; Choose or create a map.&nbsp;<br></p> <p><br>Click here for a&nbsp;<a href="https://www.youtube.com/watch?time_continue=61&amp;v=9KNkiNExSl0&amp;feature=emb_logo">quick tutorial</a>&nbsp;on how to create a ride.<br><br></p> </div> <div class="col-12 col-md-4"><img src="/assets/img/createmap.png" width="100%"></div> <div class="col"> <div role="tablist" id="accordion-instruction"> <div class="card"> <div class="card-header" role="tab"> <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-instruction .item-1" href="#accordion-instruction .item-1">Step 1: Create Map▼<br></a></h5> </div> <div class="collapse item-1" role="tabpanel" data-parent="#accordion-instruction"> <div class="card-body"> <div class="row directions-row" id="step-1"> <div class="col-12 col-md-8"> <h4>Step 1: Create Map</h4> <p><br>Go to&nbsp;<a href="https://google.com/mymaps">Google My Maps</a>.&nbsp; Choose or create a map.&nbsp;<br></p> <p><br>Click here for a&nbsp;<a href="https://www.youtube.com/watch?time_continue=61&amp;v=9KNkiNExSl0&amp;feature=emb_logo">quick tutorial</a>&nbsp;on how to create a ride.<br><br></p> </div> <div class="col-12 col-md-4"><img src="/assets/img/createmap.png" width="100%"></div> </div> </div> </div> </div> <div class="card"> <div class="card-header" role="tab"> <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-instruction .item-2" href="#accordion-instruction .item-2">Step 2: Export▼<br></a></h5> </div> <div class="collapse item-2" role="tabpanel" data-parent="#accordion-instruction"> <div class="card-body"> <div class="row directions-row" id="step-2"> <div class="col-12 col-md-8"> <h4>Step 2: Export</h4> <p><br>Press the 3-dot menu button, to the right of the map title, and choose Export to KML/KMZ<br><br><br></p> </div> <div class="col-12 col-md-4"><img src="/assets/img/exportkml1.png" width="100%"></div> </div> </div> </div> </div> <div class="card"> <div class="card-header" role="tab"> <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-instruction .item-3" href="#accordion-instruction .item-3">Step 3: Download▼<br></a></h5> </div> <div class="collapse item-3" role="tabpanel" data-parent="#accordion-instruction"> <div class="card-body"> <div class="row directions-row" id="step-3"> <div class="col-12 col-md-6"> <h4>Step 3: Download</h4> <p>Select the layer you want to ride (not Entire map), and check Export as KML instead of KMZ<br></p> <p>Press Download to get the KML file<br></p> </div> <div class="col-12 m-auto col-md-6"><img class="flex-shrink-1" src="/assets/img/exportkml.png" width="100%"></div> </div> </div> </div> </div> </div> </div> </div> <div class="row d-none directions-row" id="step2-old"> <div class="col-12 col-md-8"> <h4>Step 2: Export</h4> <p><br>Press the 3-dot menu button, to the right of the map title, and choose Export to KML/KMZ<br><br><br></p> </div> <div class="col-12 col-md-4"><img src="/assets/img/exportkml1.png" width="100%"></div> </div> <div class="row d-none directions-row" id="step3-old"> <div class="col-12 col-md-6"> <h4>Step 3: Download</h4> <p>Select the layer you want to ride (not Entire map), and check Export as KML instead of KMZ<br></p> <p>Press Download to get the KML file<br></p> </div> <div class="col-12 m-auto col-md-6"><img class="flex-shrink-1" src="/assets/img/exportkml.png" width="100%"></div> </div> <div class="row directions-row" id="step4"> <div class="col"> <h4 class="section-heading">Step 4: Select KML File:</h4> <p>Find the file you created with Google MyMaps and select it here</p> <form><input class="form-control-file" type="file" id="kml-file-path"></form> </div> </div> <div class="row directions-row" id="step5"> <div class="col"> <h4 class="section-heading">Step 5: Enter Ride Title</h4> <p>Enter a short descriptive name of your ride</p><input type="text" id="upload-ride-title"> <p><br>We will add your user name to the front of it!<br><br></p> </div> </div> <div class="row directions-row" id="upload-step-ambient"> <div class="col"> <h4 class="section-heading">Step 6: Choose Ambient Sounds</h4> <p>Choose from a variety of options</p> <div class="dropdown" id="upload-ambient-sel"><button class="btn btn-primary dropdown-toggle vzfit-btn" aria-expanded="false" data-toggle="dropdown" id="current-upload-amb-selection" type="button">Current: Country</button> <div class="dropdown-menu" id="UpAmbientSoundBG"><a class="dropdown-item upload-ambient-sel-item" href="#">Country</a><a class="dropdown-item upload-ambient-sel-item" href="#">City</a><a class="dropdown-item upload-ambient-sel-item" href="#">Fields</a><a class="dropdown-item upload-ambient-sel-item" href="#">Fields2</a><a class="dropdown-item upload-ambient-sel-item" href="#">Forest</a><a class="dropdown-item upload-ambient-sel-item" href="#">Lake</a><a class="dropdown-item upload-ambient-sel-item" href="#">Mountain</a><a class="dropdown-item upload-ambient-sel-item" href="#">Beach</a><a class="dropdown-item upload-ambient-sel-item" href="#">Ocean</a><a class="dropdown-item upload-ambient-sel-item" href="#">River</a><a class="dropdown-item upload-ambient-sel-item" href="#">Savannah</a><a class="dropdown-item upload-ambient-sel-item" href="#">Jungle</a><a class="dropdown-item upload-ambient-sel-item" href="#">Swamp</a><a class="dropdown-item upload-ambient-sel-item" href="#">Wind</a></div> </div> </div> </div> <div class="row directions-row" id="step7"> <div class="col-12 col-sm-6"> <h4>Step 7: Upload to VZfit</h4><button class="btn btn-primary vzfit-btn" id="upload-ride-button" type="button" style="margin: 10px;">UPLOAD RIDE</button> <p>Look for your ride in game when you Start a Ride/ Find Ride. Filter by Rides "You Created" to find it fast!<br><br></p> </div> <div class="col-12 col-sm-6"> <p id="created-ride-name">Paragraph</p> <p id="created-ride-file">Paragraph</p> <p id="created-ride-outcome">Paragraph</p> </div> </div> </div> <div class="container" id="create-notes" style="background: #bdbbbc;"> <h1>NOTES</h1> <ul> <li id="create-hint-1" class="list-item">Your ride will appear as "snowpelt's&nbsp;<em>Ride Title</em>".<br></li> <li class="list-item">The game will suggest that users switch to City mode for titles ending with "City Ride".<br></li> <li class="list-item">If our profanity filter flags your non-profane Location, please email <a class="dark-link" href="mailto:support@virzoom.com">support@virzoom.com</a>&nbsp;and we'll make it okay.<br></li> <li class="list-item">If your ride skips ahead in game, it may not overlap with Streetview at those locations.<br></li> <li class="list-item">Make sure you choose&nbsp;<strong>Driving</strong>&nbsp;directions not biking or walking. Check by going to&nbsp;<a class="dark-link" href="https://www.google.com/maps">google.com/maps</a>&nbsp;and select your ride from Menu-&gt;Your Places-&gt;Maps. Then click the person icon at bottom right of map to show Streetview coverage.<br><a class="dark-link" href="https://www.google.com/maps" target="_blank"></a></li> </ul> </div> </div> </div> <div id="manage-rides-page" class="page-class vzfit-page"> <div class="jumbotron text-center header-image" id="header-manage-rides" style="text-align: center;background: url(&quot;/assets/img/NoLogo_CoverLandscape.jpg&quot;);background-size: cover;margin-left: 0px;"> <div class="vzfit-jumbo vzfit-jumbo-text"> <h1 class="text-light" id="settings-heading">Manage Rides</h1> <p class="text-light" id="settings-heading-subtext">Find rides by location on the map.&nbsp; Select favorite rides you want to see in-game.&nbsp; Give rides you've tried a rating.&nbsp; Share your own rides with others or delete them.<br><br></p> </div> </div> <div id="manage-rides-section" class="below-fold"> <div class="row text-center .below-fold" style="padding-top: 10px;"> <div class="col"><button class="btn btn-primary vzfit-btn create-ride-button" id="create-ride-btn2" type="button">Create Ride</button> <p>Create and upload your own rides</p> </div> </div> <div class="row" id="filters-and-map" style="margin-top: 20px;padding-right: 20px;padding-left: 20px;"> <div class="col col-md-3 col-sm-6"> <h3>Filters</h3> <form id="filters"> <div class="form-check"><input class="form-check-input" type="checkbox" id="filter_created"><label class="form-check-label" for="formCheck-1">You created</label></div> <div class="form-check"><input class="form-check-input" type="checkbox" id="filter_others"><label class="form-check-label" for="formCheck-1">Others created</label></div> <div class="form-check"><input class="form-check-input" type="checkbox" id="filter_shared"><label class="form-check-label" for="formCheck-1">Shared</label></div> <div class="form-check"><input class="form-check-input" type="checkbox" id="filter_unshared"><label class="form-check-label" for="formCheck-1">Unshared</label></div> <div class="form-check"><input class="form-check-input" type="checkbox" id="filter_short_length"><label class="form-check-label" for="formCheck-1">0-10 miles</label></div> <div class="form-check"><input class="form-check-input" type="checkbox" id="filter_medium_length"><label class="form-check-label" for="formCheck-1">10-50 miles</label></div> <div class="form-check"><input class="form-check-input" type="checkbox" id="filter_long_length"><label class="form-check-label" for="formCheck-1">50+ miles</label></div> <div class="form-check"><input class="form-check-input" type="checkbox" id="filter_favorites"><label class="form-check-label" for="formCheck-1">Favorites</label></div> <div class="form-check"><input class="form-check-input" type="checkbox" id="filter_suggested"><label class="form-check-label" for="formCheck-1">Suggested</label></div> </form> </div> <div class="col col-md-9 col-sm-6"><div id="map" style="height:345px;margin:0;padding:0;"></div></div> </div> <div class="row" id="sort-ride-row"> <div class="col" style="margin-left: auto;margin-right: auto;"> <div class="dropdown" style="padding-top: 20px;text-align: center;"><button class="btn btn-primary dropdown-toggle vzfit-btn" aria-expanded="false" data-toggle="dropdown" id="ride-sort-by" type="button" aria-haspopup="true">Sort by:</button> <div class="dropdown-menu"><a class="dropdown-item ride-sort-by" id="ridesort-dist-up" href="javascript:void(0)">by Distance&nbsp;<i class="fa fa-arrow-up"></i></a><a class="dropdown-item ride-sort-by" id="ridesort-dist-down" href="javascript:void(0)">by Distance&nbsp;<i class="fa fa-arrow-down"></i></a><a class="dropdown-item ride-sort-by" id="ridesort-create-up" href="javascript:void(0)">by Creation Date<i class="fa fa-arrow-up"></i></a><a class="dropdown-item ride-sort-by" id="ridesort-create-down" href="javascript:void(0)">by Creation Date<i class="fa fa-arrow-down"></i></a><a class="dropdown-item ride-sort-by" id="ridesort-pop" href="javascript:void(0)">by Popularity</a><a class="dropdown-item ride-sort-by" id="ridesort-progress" href="javascript:void(0)">by Progress</a><a class="dropdown-item ride-sort-by" id="ridesort-fave" href="javascript:void(0)">by My Favorites</a></div> </div> </div> </div> <div class="row" id="route-table-row"> <div class="col" style="margin: 10px;"> <div class="table-responsive"> <table class="table table-striped" id="ride-table"> <thead> <tr> <th class="all">Place</th> <th class="all">Name</th> <th>Miles</th> <th>Created</th> <th>Popularity</th> <th>Progress</th> <th>Favorite</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><a id="created" href="#">emala's Ride</a></td> <td>Cell 1</td> <td>Cell 1</td> <td>Cell 1&nbsp;<i class="fa fa-thumbs-up"></i></td> <td>Cell 1</td> <td><input type="checkbox"></td> </tr> <tr> <td>2</td> <td>Cell 3</td> <td>Cell 3</td> <td>Cell 3</td> <td>Cell 3<i class="fa fa-thumbs-up"></i></td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="text-center" id="loading-section"><span class="spinner-border text-center vz-loading" role="status" id="loading-rides"></span></div> <div class="container" style="background: #ffffff;"></div> </div> <div class="modal fade" role="dialog" tabindex="-1" id="created_modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header" style="background: rgb(30,40,51);color: #4faf81;"> <h4 class="modal-title">userName's Long Alaska Ride</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body" style="background: rgb(30,40,51);color: var(--light);"> <div class="container"> <div class="row"> <div class="col"><div id="path-map" style="height: 245px;margin: 0;padding: 0;"></div></div> </div> <div class="row" style="padding-top: 0px;"> <div class="col-8" style="padding-left: 5px;padding-right: 5px;padding-top: 5px;"> <p id="modal-created-region">region, country</p> <p id="modal-created-data"><strong>created</strong>: 2020-12-16</p> <p id="modal-distance-data"><strong>distance</strong>: 2361 miles</p> <p id="modal-progress-data"><strong>progress</strong>: 1% complete</p> </div> <div class="col-4 d-flex flex-column justify-content-between" style="padding-top: 5px;"> <div id="top-modal-right"> <div class="form-check" id="created_favorite_label"><input class="form-check-input" type="checkbox" id="created_favorite"><label class="form-check-label" for="created_favorite">Favorite</label></div> <div id="share_checkbox_wrapper" title="You can only share rides you've completed."> <div class="form-check" id="created_share_label"><input class="form-check-input" type="checkbox" id="created_share"><label class="form-check-label" for="created_share">Shared</label></div> </div> </div> <div class="text-center d-block" data-toggle="tooltip" data-bss-tooltip="" id="bottom-modal-right"><button class="btn btn-light text-left" id="created_delete_button" type="button">Delete</button></div> </div> </div> <div class="row" id="created-only-section" style="padding-top: 10px;"> <div class="col" style="padding-left: 5px;"> <p><strong>Ambient FX:</strong></p> <div class="dropdown"><button class="btn btn-primary dropdown-toggle vzfit-btn" aria-expanded="false" data-toggle="dropdown" id="amb-current-selection" type="button">Current: Country</button> <div class="dropdown-menu" id="AmbientSoundBG"><a class="dropdown-item ambient-sel-item" href="#">Country</a><a class="dropdown-item ambient-sel-item" href="#">City</a><a class="dropdown-item ambient-sel-item" href="#">Fields</a><a class="dropdown-item ambient-sel-item" href="#">Fields2</a><a class="dropdown-item ambient-sel-item" href="#">Forest</a><a class="dropdown-item ambient-sel-item" href="#">Lake</a><a class="dropdown-item ambient-sel-item" href="#">Mountain</a><a class="dropdown-item ambient-sel-item" href="#">Beach</a><a class="dropdown-item ambient-sel-item" href="#">Ocean</a><a class="dropdown-item ambient-sel-item" href="#">River</a><a class="dropdown-item ambient-sel-item" href="#">Savannah</a><a class="dropdown-item ambient-sel-item" href="#">Jungle</a><a class="dropdown-item ambient-sel-item" href="#">Swamp</a><a class="dropdown-item ambient-sel-item" href="#">Wind</a></div> </div> </div> <div class="col d-none" style="padding-left: 5px;"> <p><strong>street view:</strong></p> <div class="dropdown"><button class="btn btn-primary dropdown-toggle vzfit-btn" aria-expanded="false" data-toggle="dropdown" id="rendering-current-selection" type="button">Current: Country</button> <div class="dropdown-menu" id="RenderingModeBG"><a class="dropdown-item rendering-sel-item" href="#">Country</a><a class="dropdown-item rendering-sel-item" href="#">City</a><a class="dropdown-item rendering-sel-item" href="#">Comfort</a></div> </div> </div> </div> <div class="row"> <div class="col"> <p class="text-center" id="created_confirm" style="margin-top: 20px;">Are you sure you want to delete this ride?</p> </div> </div> </div> </div> <div class="modal-footer d-flex flex-row" style="background: rgb(30,40,51);"> <div id="delete-buttons"><button class="btn btn-light modal-btn" id="delete-confirm-no" type="button">No</button><button class="btn btn-light modal-btn" id="delete-confirm-yes" type="button" data-dismiss="modal">Yes</button></div> </div> </div> </div> </div> <div class="modal fade" role="dialog" tabindex="-1" id="ach_modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header" style="background: #4faf81; color:white;"> <h4 class="modal-title" id="ach-modal-title">Modal Title</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="row"> <div class="col-4" style="padding-left: 5px;padding-right: 5px;"><img id="ach-modal-icon" src="https://dev.vzfit.com/static/img/ach_explorer/Ach_TriedEachSteeringMode.png"></div> <div class="col-8"> <p id="ach-modal-metric">The content of your modal.</p> <p id="ach-modal-progress">The content of your modal.</p> </div> </div> </div> <div class="modal-footer"><button class="btn btn-primary vzfit-btn" type="button" data-dismiss="modal">Close</button></div> </div> </div> </div> <div class="modal fade" role="dialog" tabindex="-1" id="ach_modal-dark"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header" style="background: rgb(30,40,51);color: #4faf81;"> <h4 class="modal-title" id="ach-modal-title-dk">Achievement</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body" style="background: rgb(30,40,51);color: var(--light);"> <div class="container"> <div class="row"> <div class="col-8"> <p id="ach-modal-metric-dk">region, country</p> <p id="ach-modal-progress-dk"><strong>created</strong>: 2020-12-16</p> </div> </div> </div> </div> </div> </div> </div> <div id="snapshots-page" class="page-class vzfit-page"> <div class="jumbotron text-center header-image" id="header-settings" style="text-align: center;background: url(&quot;/assets/img/NoLogo_CoverLandscape.jpg&quot;);background-size: cover;"> <div class="vzfit-jumbo vzfit-jumbo-text"> <h1 class="text-light" id="snapshots-heading">Snapshots</h1> <p class="text-light" id="snapshots-heading-subtext">Manage your in-game snapshots</p> </div> </div> <div id="snapshots-page-section" class="below-fold"> <div class="container settings-block" id="snapshot-intro"> <h4 class="section-heading">From VZfit</h4> </div> <section class="photo-gallery"> <div class="container"> <div class="row photos" id="snapshot-row"> <div class="col-sm-6 col-md-4 col-lg-3 item"><a id="thumb-1-link" data-lightbox="photos" href="desk.jpg"><img class="img-fluid" id="thumb-1" src="/assets/img/vzfitsnap.jpg"></a></div> <div class="col-sm-6 col-md-4 col-lg-3 item"><a id="thumb-2-link" data-lightbox="photos" href="building.jpg"><img class="img-fluid" id="thumb-2" src="/assets/img/vzfitsnap.jpg"></a></div> <div class="col-sm-6 col-md-4 col-lg-3 item"><a id="thumb-3-link" data-lightbox="photos" href="loft.jpg"><img class="img-fluid" id="thumb-3" src="/assets/img/vzfitsnap.jpg"></a></div> <div class="col-sm-6 col-md-4 col-lg-3 item"><a id="thumb-4-link" data-lightbox="photos" href="building.jpg"><img class="img-fluid" id="thumb-4" src="/assets/img/vzfitsnap.jpg"></a></div> <div class="col-sm-6 col-md-4 col-lg-3 item"><a id="thumb-5-link" data-lightbox="photos" href="building.jpg"><img class="img-fluid" id="thumb-5" src="/assets/img/vzfitsnap.jpg"></a></div> <div class="col-sm-6 col-md-4 col-lg-3 item"><a id="thumb-6-link" data-lightbox="photos" href="loft.jpg"><img class="img-fluid" id="thumb-6" src="/assets/img/vzfitsnap.jpg"></a></div> <div class="col-sm-6 col-md-4 col-lg-3 item"><a id="thumb-7-link" data-lightbox="photos" href="desk.jpg"><img class="img-fluid" id="thumb-7" src="/assets/img/vzfitsnap.jpg"></a></div> <div class="col-sm-6 col-md-4 col-lg-3 item"><a id="thumb-8-link" data-lightbox="photos" href="desk.jpg"><img class="img-fluid" id="thumb-8" src="/assets/img/vzfitsnap.jpg"></a></div> </div> </div> </section> <div class="d-flex justify-content-between" id="snapshot-buttons"><button class="btn btn-primary vzfit-btn" id="prev-page-snapshots" type="button">Prev</button><button class="btn btn-primary vzfit-btn" id="next-page-snapshots" type="button">Next</button></div> </div> </div> <div class="modal fade" role="dialog" tabindex="-1" id="delete-snapshot-confirm"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Delete Confirmation</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body" style="text-align: center;"> <p style="margin-left: 0;">Are you sure you want to delete this image?</p><img class="d-none" id="del-confirm-img"> </div> <div class="modal-footer"><button class="btn btn-primary vzfit-btn" id="no-delete" type="button" style="margin-top: 4px;" data-dismiss="modal">CANCEL</button><button class="btn btn-light vzfit-btn" id="yes-delete" type="button" data-dismiss="modal" style="margin-top: 4px;">DELETE</button></div> </div> </div> </div> <div class="modal fade" role="dialog" tabindex="-1" id="disconnect-fitbit-confirm"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Disconnect Confirmation</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body" style="text-align: center;"> <p style="margin-left: 0;">VZfit data will no longer be sent to FitBit. Are you sure?</p> </div> <div class="modal-footer"><button class="btn btn-primary vzfit-btn" id="no-stop-fitbit" type="button" style="margin-top: 4px;" data-dismiss="modal">CANCEL</button><button class="btn btn-light vzfit-btn" id="yes-stop-fitbit" type="button" data-dismiss="modal" style="margin-top: 4px;">DISCONNECT</button></div> </div> </div> </div> <div class="modal fade" role="dialog" tabindex="-1" id="confirm-member-cancel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Confirm Cancellation</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body" style="text-align: center;"> <div class="row"> <div class="col-9"> <p id="confirm-cancel-msg" style="margin-left: 0;">Your premium membership currently lasts through date. If you cancel now, you will revert to a free memberhsip after that date.</p> </div> <div class="col-3"><button class="btn btn-light vzfit-btn" id="yes-stop-membership" type="button" data-dismiss="modal" style="margin-top: 4px;">Confirm&nbsp;</button></div> </div> </div> <div class="modal-footer"><button class="btn btn-light" type="button" style="margin-top: 4px;" data-dismiss="modal">CLOSE</button></div> </div> </div> </div> <div class="modal fade" role="dialog" tabindex="-1" id="signup-modal"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">VZfit Premium License</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body" style="text-align: center;"> <div class="row"> <div class="col-9"> <p id="confirm-cancel-msg-1" style="margin-left: 0;">Sign up for a monthly recurring membership of $10 / month.<br><br></p> </div> <div class="col-3"><button class="btn btn-light vzfit-btn" id="yes-stop-membership" type="button" data-dismiss="modal" style="margin-top: 4px;">Confirm&nbsp;</button></div> </div> <div class="row"> <div class="col-9"> <p id="confirm-cancel-msg-1" style="margin-left: 0;">Sign up for a annual recurring membership of $100 / year (a 16% savings). Your first payment will be for $x.<br><br></p> </div> <div class="col-3"><button class="btn btn-light vzfit-btn" id="yes-stop-membership-1" type="button" data-dismiss="modal" style="margin-top: 4px;">Confirm&nbsp;</button></div> </div> </div> <div class="modal-footer"><button class="btn btn-primary vzfit-btn" type="button" style="margin-top: 4px;" data-dismiss="modal">CLOSE</button></div> </div> </div> </div> <div class="modal fade" role="dialog" tabindex="-1" id="exit-survey"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Thank you for trying VZfit, we are sorry to see you go!</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="row"> <div class="col" style="padding-left: 25px;padding-right: 25px;"> <p id="confirm-cancel-msg" style="margin-left: 0;">We are always trying to improve our service. Please help by providing a reason for cancelling your account.</p> <div id="exit-survey-reasons" style="padding-left: 25px;"> <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-1"><label class="form-check-label" id="exit-seasonality" for="formCheck-1">Not biking indoors due to the season</label></div> </div> <div style="padding: 10px;padding-left: 25px;"> <p style="font-size: 14px;margin-bottom: 0px;">Comments:</p><input type="text" id="exit_comments"> </div> </div> </div> </div> <div class="modal-footer"><button class="btn btn-primary vzfit-btn" id="submit-cancel-button" type="submit" style="margin-top: 4px;">SUBMIT</button></div> </div> </div> </div> <div class="modal fade" role="dialog" tabindex="-1" id="exit-survey2"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <form id="cancel_form">{% csrf_token %} <div class="modal-header"> <h4 class="modal-title">Thank you for trying VZfit, we are sorry to see you go!</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="form-row"> <div class="col" style="padding-left: 25px;padding-right: 25px;"> <p id="confirm-cancel-msg-2" style="margin-left: 0;">We are always trying to improve our service. Please help by providing a reason for cancelling your account.</p> <div id="exit-survey-reasons2" style="padding-left: 25px;"> <div class="form-check"><input class="form-check-input" type="radio" id="formCheck-1"><label class="form-check-label" id="exit-seasonality" for="formCheck-1">Not biking indoors due to the season</label></div> </div> <div style="padding: 10px;padding-left: 25px;"> <p style="font-size: 14px;margin-bottom: 0px;">Comments:</p><input class="form-control" type="text" id="exit_comments2"> </div> </div> </div> </div> <div class="modal-footer"><button class="btn btn-primary vzfit-btn" id="submit-cancel-button2" type="submit" style="margin-top: 4px;">SUBMIT</button></div> </form> </div> </div> </div> <div class="d-none lb-data" id="test-html-snapshots"> <div class="row float-right"> <div class="col d-flex" id="lb-socialContainer"><a id="lb-twitter" class="lb-icon" href="#"><i class="fa fa-twitter-square"></i></a><a id="lb-facebook" class="lb-icon" href="#"><i class="fa fa-facebook-square"></i></a><a id="lb-pinterest" class="lb-icon" href="#"><i class="fa fa-pinterest-square"></i></a></div> <div class="col" id="lb-delContainer"><a class="lb-delete" href="#"><i class="fa fa-trash" style="font-size: 40px;"></i></a></div> <div class="col" id="lb-closeContainer"><a class="lb-close" href="#">Link</a></div> </div> </div> <div id="leaderboard-page" class="page-class vzfit-page"> <div class="jumbotron text-center header-image" id="header-leaderboard" style="text-align: center;background: url(&quot;/assets/img/NoLogo_CoverLandscape.jpg&quot;);background-size: cover;"> <div class="vzfit-jumbo vzfit-jumbo-text"> <h1 class="text-light" id="snapshots-heading">Leaderboard</h1> <p class="text-light" id="snapshots-heading-subtext">See who's top of the charts!</p> </div> </div> <div id="leaderboard-page-section" class="below-fold"> <div class="container settings-block"> <h4 id="leaderboard-title" class="section-heading">VZcals</h4> </div> <div class="row"> <div class="col col-md-12"> <div class="table-responsive"> <table class="table table-striped" id="vzcal-leaderboard-table"> <thead> <tr> <th>Rank</th> <th>Name</th> <th>VZcals</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 3</td> </tr> </tbody> </table> </div> </div> </div> </div> </div><div> <!-- Start of virzoom Zendesk Widget script --> <script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=bf1331fd-15b0-4da6-994c-be25910bf0f8"> </script> <!-- End of virzoom Zendesk Widget script --> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5XC9MQC');</script> <!-- End Google Tag Manager --> </div> <footer class="footer-dark"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-3 item"> <h3>Looking for your old stats?</h3> <ul> <li><a id="legacy-stats" href="javascript:void(0)">Stats</a></li> <li><a id="legacy-events" href="javascript:void(0)">Events</a></li> <li><a id="legacy-usage" href="javascript:void(0)">Detailed Usage</a></li> </ul> </div> <div class="col-sm-6 col-md-3 item"> <h3>Helpful Links</h3> <ul> <li><a class="account-settings-link" href="javascript:void(0)">Download VZplay</a></li> <li><a id="help-desk" href="https://virzoom.zendesk.com">Help Desk</a></li> <li><a href="https://virzoom.zendesk.com/hc/en-us/articles/360056428751-VirZOOM-Privacy-Policy">Privacy Policy</a></li> </ul> </div> <div class="col-md-6 d-flex flex-column justify-content-between item"> <h3>Virzoom</h3> <p>Enjoy the Ride<br>Have Fun. Explore the World. Get Fit.<br></p> <p><a href="https://www.virzoom.com/">Learn more</a></p> </div> <div class="col item social"><a href="https://www.facebook.com/groups/vzfit" target="_blank"><i class="icon ion-social-facebook"></i></a><a href="https://twitter.com/virzoom" target="_blank"><i class="icon ion-social-twitter"></i></a><a href="https://instagram.com/virzoom" target="_blank"><i class="icon ion-social-instagram"></i></a><a href="https://www.youtube.com/virzoom" target="_blank"><i class="icon ion-social-youtube"></i></a></div> </div> <p class="copyright">Virzoom © 2021</p> </div> </footer> {% block script %}{% endblock %} <script src="/assets/js/jquery.min.js"></script> <script src="/assets/bootstrap/js/bootstrap.min.js"></script> <script src="/assets/js/chart.min.js"></script> <script src="/assets/js/bs-init.js"></script> <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxCQNn1Antc0PwSsOJyMFqgR559lyD2Ew&amp;libraries=geometry&amp;v=weekly"></script> <script src="/assets/js/manageRides.js"></script> <script src="/assets/js/lightbox.js"></script> <script src="/assets/js/snapshots.js"></script> <script src="/assets/js/userProfile.js"></script> <script src="/assets/js/vzfit.js"></script> <script src="https://cdn.datatables.net/plug-ins/1.10.24/sorting/any-number.js"></script> <script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/history.js/1.8/native.history.min.js"></script> <script src="https://js.stripe.com/v2/"></script> <script src="/assets/js/jquery.cookieMessage.min.js"></script> <script src="/assets/js/polyline.js"></script> </body> </html>