<!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/fontawesome-all.min.css">
<link rel="stylesheet" href="/assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="/assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="/assets/css/animate.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="/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 d-none manage-events-button" data-bss-hover-animate="pulse" id="nav-events" href="javascript:void(0)">Events</a></li>
<li class="nav-item"><a class="nav-link manage-snapshots-button" data-bss-hover-animate="pulse" id="nav-snap-1" 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("/assets/img/NoLogo_CoverLandscape.jpg") 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("/assets/img/NoLogo_CoverLandscape.jpg") 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? <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="wefunder-enter" class="login-dark vzfit-page">
<form style="width: 320px;background: rgb(30, 40, 51);text-align: center;font-family: Montserrat, sans-serif;font-size: 14px;" 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">Welcome to Lifetime Membership!</h4>
</div>
<div id="reg-wefunder-username"></div>
<p class="text-center caption" style="font-size: 16px;color: rgb(255,255,255);">Thank you for your investment! Please enter the code found in your email:</p>
<div class="form-group"><input class="form-control" type="text" id="wefunder-code" name="Registration Code" placeholder="Registration Code" style="text-align: left;"><input class="form-control" type="text" id="wefunder-oculus-id" name="Oculus ID" placeholder="Oculus ID"><input class="form-control" type="text" id="wefunder-oculus-id-confirm" name="Oculus ID" placeholder="Re-Enter Oculus ID"></div>
<p class="text-center caption" style="font-size: 16px;color: rgb(255,255,255);">You can look up your Oculus ID on the profile page of the Oculus website under "Username". <br> <a href="https://secure.oculus.com/my/profile/" target="_blank">CLICK HERE</a><br><br></p>
<div class="form-group"><button class="btn btn-primary btn-block" id="reg-wefunder-button" type="button">Submit</button></div>
<p id="reg-wefunder-message" style="padding-top: 20px;text-align: center;color: var(--red);">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? <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>
<p id="eula-message" style="text-align: center;color: var(--gray);font-style: italic;">By continuing use of VZfit you agree to all terms and conditions of the agreement at virzoom.com/eula</p>
<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="wefunder-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">Lifetime Registration Success!</h4><i class="icon ion-android-checkbox"></i>
</div>
<div></div>
<div class="form-group"><button class="btn btn-primary btn-block" id="wefunder-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 </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 </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 </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: </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("/assets/img/NoLogo_CoverLandscape.jpg") 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 & 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 & 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" class="self-stats"><strong>Member since:</strong> 9/17/2020<br></p>
<p id="profile-last-played" class="self-stats"><strong>Last Played:</strong> 2/17/2021<br></p>
<p class="text-center" id="ytd-heading"><strong>Year to Date Stats:</strong><br></p>
<p class="text-center" id="ytd-distance">76 Miles Traveled<br></p>
<p class="text-center" id="ytd-vzcals">7540 VZcals <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">
<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>Your Stats:</h4>
<p class="d-none" id="lifetime-minutes"><strong>Lifetime:</strong> 3:59:55<br></p>
<p class="d-none" 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;margin-top: 0px;margin-right: 50px;margin-left: 50px;">You are at 50 VZcals of your weekly goal of 1500 VZcals</p>
<p class="d-none" id="weekly-avg-message" style="padding: 10px;">You need 55 minutes to match your average week</p>
</div>
<div class="btn-group" role="group" id="stat-time-group" style="margin-bottom: 10px;"><button class="btn btn-primary vzfit-btn" id="stat-by-days-button" type="radio" data-toggle="button">Days</button><button class="btn btn-primary vzfit-btn" id="stat-by-weeks-button" type="radio" data-toggle="button">Weeks</button><button class="btn btn-primary vzfit-btn" id="stat-by-months-button" type="radio" data-toggle="button">Months</button></div>
<div></div>
<div id="stats-chart"><canvas data-bss-chart="{"type":"bar","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"VZcals","backgroundColor":"#ed2024","borderColor":"#ed2024","data":["4500","5300","6250","7800","9800","15000","9000"]}]},"options":{"maintainAspectRatio":true,"legend":{"display":false,"labels":{"fontStyle":"normal"}},"title":{"fontStyle":"bold"},"scales":{"xAxes":[{"ticks":{"fontStyle":"normal","beginAtZero":true},"gridLines":{"drawOnChartArea":true}}],"yAxes":[{"ticks":{"fontStyle":"normal","beginAtZero":true},"gridLines":{"drawOnChartArea":false}}]}}}"></canvas></div>
<div class="btn-group" role="group" id="stat-cals-distance-group" style="margin-bottom: 10px;"><button class="btn btn-primary vzfit-btn" id="stats-vzcals-button" type="radio" data-toggle="button">VZcals</button><button class="btn btn-primary vzfit-btn" id="stats-dist-button" type="radio" data-toggle="button">Distance</button></div>
<p style="font-size: 14px;">Units match your in-game settings</p>
</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="{"type":"horizontalBar","data":{"labels":[".1-1 mile","1-5 miles","5-10 miles","10-50 miles","50+ miles"],"datasets":[{"label":"Rides","backgroundColor":"#656263","borderColor":"","borderWidth":"","data":["4","9","4","12","3"]}]},"options":{"maintainAspectRatio":true,"legend":{"display":false,"position":"bottom","reverse":false,"labels":{"fontStyle":"normal"}},"title":{"text":"How many rides have you completed in each distance bracket?","display":true,"fontSize":14,"fontFamily":"Montserrat, sans-serif","fontStyle":"normal"},"scales":{"xAxes":[{"ticks":{"fontStyle":"normal","beginAtZero":true},"gridLines":{"drawOnChartArea":false}}],"yAxes":[{"ticks":{"fontStyle":"normal","beginAtZero":true},"gridLines":{"drawOnChartArea":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="{"type":"horizontalBar","data":{"labels":["10-100 VZcals","100-250 VZcals","250-500 VZcals","500-1000 VZcals","1000+ VZcals"],"datasets":[{"label":"10-100 VZcals","backgroundColor":"#ed2024","borderColor":"#ed2024","data":["5","4","5","2","9"]}]},"options":{"maintainAspectRatio":true,"legend":{"display":false,"position":"bottom","reverse":false,"labels":{"fontStyle":"normal"}},"title":{"display":true,"text":"How many days have you earned VZcals in each zone?","fontSize":14,"fontFamily":"Montserrat, sans-serif","fontStyle":"normal"},"scales":{"xAxes":[{"gridLines":{"drawBorder":true,"borderDash":["1"],"zeroLineBorderDash":["1"],"drawOnChartArea":false},"ticks":{"fontStyle":"normal","beginAtZero":true,"padding":1}}],"yAxes":[{"gridLines":{"drawBorder":true,"borderDash":["1"],"zeroLineBorderDash":["1"],"drawOnChartArea":false},"ticks":{"fontStyle":"normal","beginAtZero":true,"padding":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="{"type":"bar","data":{"labels":["Rides Complete"],"datasets":[{"label":".1-1 mile","backgroundColor":"rgb(201,15,15)","data":["1"]},{"label":"1-5 mi","data":["2"]},{"label":"5-10 mi","data":["3"]},{"label":"10-50 mi","data":["4"]},{"label":"50+ mi","data":["5"]}]},"options":{"maintainAspectRatio":true,"legend":{"display":true,"position":"right","labels":{"fontStyle":"normal"}},"title":{"fontStyle":"normal"},"scales":{"xAxes":[{"ticks":{"fontStyle":"normal","beginAtZero":true}}],"yAxes":[{"ticks":{"fontStyle":"normal","beginAtZero":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 profile-section self-stats" id="badge-preview" style="background: #ffffff;">
<div class="row heading-row" style="margin-top: -10px;">
<div class="col">
<h3>VZfit Badges</h3>
</div>
</div>
<div class="row ach-info-section" id="user-badge-preview"></div>
<div class="row ach-info-section" id="user-zero-badges">
<div class="col">
<p>Participate in a Challenge to Earn Your First Badge!</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("/assets/img/NoLogo_CoverLandscape.jpg");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>
<div id="non-oculus-membership">
<p class="account-info-heading"><strong>Membership Status:</strong></p>
<p id="membership-state">Account Created</p>
<p id="membership">Please download our apps, launch one of them, and follow the instructions to login with the username listed above.</p>
</div>
<div id="oculus_subscription">
<p class="account-info-heading"><strong>Oculus Membership:</strong></p>
<p>please visit <a href="https://secure.oculus.com/my/subscriptions/">https://secure.oculus.com/my/subscriptions/</a> to view its current status or make any changes.</p>
</div>
<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" 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>
<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 <a href="https://www.virzoom.com/buy/">VZfit-compatible bike</a> <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 <a href="https://www.virzoom.com/buy/">VZfit-compatible bike</a> <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> </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 <a href="https://www.strava.com/clubs/vzfit">VZfit Strava Club</a> 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("/assets/img/NoLogo_CoverLandscape.jpg");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="events-page" class="page-class vzfit-page">
<div id="events-top"></div>
<div class="container profile-section" id="events-vz-play" style="background: #ffffff;">
<div class="jumbotron text-center header-image" id="header-events" style="text-align: center;background: url("/assets/img/NoLogo_CoverLandscape.jpg");background-size: cover;">
<div class="vzfit-jumbo vzfit-jumbo-text">
<h1 class="text-light" id="ach-heading-1">Events</h1>
<p class="text-light" id="ach-heading-subtext-1">View how you stack up in each month's challenge events</p>
</div>
</div>
<div class="row heading-row" id="events-heading-row">
<div class="col">
<h3>Active events</h3>
</div>
</div>
<div class="row ach-info-section" id="user-events-active">
<div class="col">
<div id="events-page-section" class="below-fold">
<div class="container settings-block">
<h4 id="event-leaderboard-title" class="section-heading">VZcals</h4>
</div>
<div class="row">
<div class="col-12 col-md-3"><img id="event-leaderboard-image" class="event-image" src="/assets/img/vz_logo_64.png">
<p id="event-leaderboard-description">Paragraph</p>
</div>
<div class="col-12 col-md-9">
<div class="table-responsive">
<table class="table table-striped" id="event-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>
</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("/assets/img/NoLogo_CoverLandscape.jpg");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="{"type":"horizontalBar","data":{"labels":["January","February","March","April","May","June","","","","","","","",""],"datasets":[{"label":"Revenue","backgroundColor":"#4e73df","borderColor":"#4e73df","data":["4500","","","","","","","","","","","","","",""]}]},"options":{"maintainAspectRatio":true,"legend":{"display":false,"labels":{"fontStyle":"normal"}},"title":{"display":false,"fontStyle":"normal"}}}"></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("/assets/img/NoLogo_CoverLandscape.jpg");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" id="old-hidden-instruction">
<div class="col">
<p class="text-center" style="margin-top: 10px;">With VZfit and <a href="https://google.com/mymaps" target="_blank">Google My Maps</a> you can create rides all over the world!<br></p>
<p class="text-center" style="margin-top: 10px;">UPDATE!<br>New Instructions</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="create-instruction-hide-button">
<div class="col-6">
<p>Click to Toggle Intro Instructions On/Off</p>
<div class="btn-group btn-group-sm border rounded-0 btn-group-toggle" role="group" id="create-help-toggle-group"><button class="btn btn-primary vzfit-toggle-button" id="create-help-off-button" style="margin-right: 0px;margin-left: 0px;width: 60px;">Off</button><button class="btn btn-primary vzfit-toggle-button active" id="create-help-on-button" type="button" style="width: 60px;">On</button></div>
</div>
<div class="col-6"><button class="btn btn-primary btn-lg d-none vzfit-btn" id="create-toggle-intro-instructions" type="button" style="width: 396px;">Toggle Intro Instructions</button></div>
</div>
<div class="row heading-row" id="create-hidden-rows">
<div class="col">
<h4 class="main-heading">(Steps 1-5 hidden)</h4>
</div>
</div>
<div class="row directions-row create-instructions" id="step1-new">
<div class="col-12 col-md-8">
<h4><span style="color: rgb(244, 21, 7);">NEW</span> Step 1: Create Map</h4>
<p>Go to <a href="https://google.com/mymaps">Google My Maps</a>. <span style="color: rgb(29, 28, 29); background-color: rgb(248, 248, 248);">Click on Draw a Line or Driving Instructions, and start mapping your route.</span><br><br></p>
<p><br></p>
</div>
<div class="col-12 col-md-4"><img src="/assets/img/map2.png" width="100%"></div>
</div>
<div class="row directions-row create-instructions" id="step1-part2">
<div class="col-12 col-md-8">
<h4 class="d-none"><span style="color: rgb(244, 21, 7);">NEW </span>Step 3: Add Notes</h4>
<p>To the left you will see your map details. Notice the 3 dot menu icons, one next to the Map Title and another below it "Directions from...". That "Directions" section is known as a map LAYER.</p>
</div>
<div class="col-12 col-md-4"><img src="/assets/img/mapdetails.png" width="100%"></div>
</div>
<div class="row directions-row create-instructions" id="step1-part-4">
<div class="col-12 col-md-8">
<h4 class="d-none"><span style="color: rgb(244, 21, 7);">NEW </span>Step 3: Add Notes</h4>
<p>If you like, click on the 3 dot icon next to the words "Untitled map", and give your map a <strong>title </strong>and a <strong>description</strong>. This description will appear in game on the Ride Details panel. The title is just for Google My Maps!</p>
</div>
<div class="col-12 col-md-4"><img src="/assets/img/description.jpg" width="100%"></div>
</div>
<div class="row directions-row create-instructions" id="step2-rename-route">
<div class="col-12 col-md-8">
<h4><span style="color: rgb(244, 21, 7);">NEW </span>Step 2: Rename Layer: Route</h4>
<p>When you route is finished, click the 3 dots next to that layer, and choose "Rename this layer". </p>
</div>
<div class="col-12 col-md-4"><img src="/assets/img/map_rename.png" width="100%"></div>
</div>
<div class="row directions-row create-instructions" id="step2-rename-route-1">
<div class="col-12 col-md-8">
<p>To export to VZfit, you must name the layer <strong>Route</strong> - see image here</p>
</div>
<div class="col-12 col-md-4"><img src="/assets/img/editlayer.jpg" width="100%"></div>
</div>
<div class="row directions-row create-instructions" id="step3-markers">
<div class="col-12 col-md-8">
<h4><span style="color: rgb(244, 21, 7);">NEW </span>Step 3: Add Notes layer (optional)</h4>
<p>For a guided route, you should add a second layer by clicking <strong>Add layer</strong></p>
</div>
<div class="col-12 col-md-4"><img src="/assets/img/maplayer.png" width="100%"></div>
</div>
<div class="row directions-row create-instructions" id="step3-markers-2">
<div class="col-12 col-md-8">
<p>Click the 3 dot icon next to that new layer, select Rename layer, and rename it <strong>Notes</strong> - see image here</p>
</div>
<div class="col-12 col-md-4"><img src="/assets/img/notes1.jpg" width="100%"></div>
</div>
<div class="row directions-row create-instructions" id="step3-markers-1">
<div class="col-12 col-md-8">
<h4 class="d-none"><span style="color: rgb(244, 21, 7);">NEW </span>Step 3: Add Notes</h4>
<p>Next click on the marker icon to get into marker mode. Your next mouse click will place it along your route. </p>
</div>
<div class="col-12 col-md-4"><img src="/assets/img/notes2.jpg" width="100%"></div>
</div>
<div class="row directions-row create-instructions" id="step3-markers-4">
<div class="col-12 col-md-8">
<h4 class="d-none"><span style="color: rgb(244, 21, 7);">NEW </span>Step 3: Add Notes</h4>
<p>Add your note text! You can use both title and description fields </p>
</div>
<div class="col-12 col-md-4"><img src="/assets/img/notes3.jpg" width="100%"></div>
</div>
<div class="row directions-row create-instructions" id="step3-markers-3">
<div class="col-12 col-md-8">
<h4 class="d-none"><span style="color: rgb(244, 21, 7);">NEW </span>Step 3: Add Notes</h4>
<p>Repeat adding markers and writing your notes along the route.</p>
</div>
<div class="col-12 col-md-4"><img src="/assets/img/notes4.jpg" width="100%"></div>
</div>
<div class="row directions-row create-instructions" id="step4-export">
<div class="col-12 col-md-8">
<h4>Step 4: 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 directions-row create-instructions" id="step5-download">
<div class="col-12 col-md-6">
<h4>Step 5: Download</h4>
<p style="color: var(--red);">NEW!</p>
<p>Make sure <strong>Entire map</strong> is selected, 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 src="/assets/img/exportkml.jpg" width="100%"></div>
</div>
<div class="row directions-row" id="step6-kml">
<div class="col">
<h4 class="section-heading">Step 6: 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="step7-title">
<div class="col">
<h4 class="section-heading">Step 7: Enter Ride Title</h4>
<p>Enter a short descriptive name of your ride (max 30 characters). <br>We will add your user name to the front of it!<br><br></p><input type="text" id="upload-ride-title" maxlength="30" minlength="1" title="max 30 characters">
<p style="font-style: italic;margin-bottom: 2px;color: var(--gray);font-size: 14px;">Will appear in game as:</p>
<p id="upload-ride-title-preview" style="margin-bottom: 2px;color: var(--gray);font-size: 14px;">Paragraph</p>
</div>
</div>
<div class="row directions-row" id="step8-upload-ambient">
<div class="col">
<h4 class="section-heading">Step 8: 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" alt="Country">Current: Country</button>
<div class="dropdown-menu" id="UpAmbientSoundBG"><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Country">Country</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-City">City</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Fields">Fields</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-FIelds2">Fields2</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Forest">Forest</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Lake">Lake</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Mountain">Mountain</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Beach">Beach</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Ocean">Ocean</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-River">River</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Savannah">Savannah</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Jungle">Jungle</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Swamp">Swamp</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Wind">Wind</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-None">None</a></div>
</div>
</div>
</div>
<div class="row directions-row" id="create-warning-message" style="background: #bdbbbc;">
<div class="col">
<h4 class="d-none section-heading">WARNING</h4>
<p>Please note that the content you are creating can be shared by you with the VZfit community. As such, it must meet the guidelines expressed in our<a href="https://virzoom.zendesk.com/hc/en-us/articles/360056435331"> End User License Agreement</a> and <a href="https://virzoom.zendesk.com/hc/en-us/articles/360055990152">Code of Conduct</a> policies.<br><br>Generally speaking, please avoid any language that could be deemed offensive. This includes profanity, social statements, political statements, religious statements, and anything else that may potentially offend someone or be considered unlawful. The VirZOOM team will monitor this content and reserves the right to remove anything considered questionable or offensive. Repeated violations could also result in your account being disabled from the platform.<br><br>We're sorry that we must make these statements, but the most important thing to us is that we maintain a friendly and welcoming VZfit community. Thank you for cooperating.</p>
</div>
</div>
<div class="row directions-row" id="step9">
<div class="col-12 col-sm-6">
<h4>Step 9: 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" style="margin-bottom: 5px;">Ride Name</p>
<p id="created-ride-file">from File Name</p>
<p id="created-ride-outcome">Outcome</p>
<p id="created-ride-errors" style="color: var(--red);">Error Message</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 <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> 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">VIrzoom recommends using driving directions when creating your route. Experienced users may experiment with laying out walking or biking routes, but be aware that the Streetview coverage may not be what you expect.<br><a class="dark-link" href="https://www.google.com/maps" target="_blank"></a></li>
<li class="list-item">It is helpful to compare your route in <a href="https://www.google.com/maps/d/">MyMaps </a>to Google Street View coverage in <a href="https://www.google.com/maps/">google.com/maps.</a> Try opening two tabs to see both. <br><a class="dark-link" href="https://www.google.com/maps" target="_blank"></a></li>
</ul>
</div>
</div>
</div>
<div class="d-none page-class vzfit-page" id="create-ride-page-1">
<div class="jumbotron text-center header-image" id="header-create-ride-1" style="text-align: center;background: url("/assets/img/NoLogo_CoverLandscape.jpg");background-size: cover;">
<div class="vzfit-jumbo vzfit-jumbo-text">
<h1 class="text-light" id="create-heading-1">Create Ride</h1>
<p class="text-light" id="create-heading-subtext-1">Upload rides you've created all over the world</p>
</div>
</div>
<div id="create-page-section-1" class="below-fold">
<div class="container" id="create-instructions-1">
<div class="row">
<div class="col">
<p class="text-center" style="margin-top: 10px;">With VZfit and <a href="https://google.com/mymaps" target="_blank">Google My Maps</a> you can create rides all over the world!<br></p>
<p class="text-center" style="margin-top: 10px;"> <a href="https://youtu.be/HgN9ZI37qb4" target="_blank">Watch our how-to video</a> and learn how to creates rides both in-game and via website. Or expand our step by step instructions below!<br></p>
</div>
</div>
<div class="row heading-row" id="create-head-1">
<div class="col">
<h4 class="main-heading">Upload Ride</h4>
</div>
</div>
<div class="row directions-row" id="step1-3-accordion-1">
<div class="col">
<div role="tablist" id="accordion-instruction-1">
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-instruction-1 .item-1" href="#accordion-instruction-1 .item-1">Step 1: Create Map▼<br></a></h5>
</div>
<div class="collapse item-1" role="tabpanel" data-parent="#accordion-instruction-1">
<div class="card-body">
<div class="row directions-row" id="step-4">
<div class="col-12 col-md-8">
<p><br>Go to <a href="https://google.com/mymaps">Google My Maps</a>. Choose or create a map. Be sure to use Driving Directions, not biking or walking.<br></p>
<p><br>Click here for a <a href="https://youtu.be/HgN9ZI37qb4?t=260">quick tutorial</a> 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-1 .item-2" href="#accordion-instruction-1 .item-2">Step 2: Export▼<br></a></h5>
</div>
<div class="collapse item-2" role="tabpanel" data-parent="#accordion-instruction-1">
<div class="card-body">
<div class="row directions-row" id="step-5">
<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-1 .item-3" href="#accordion-instruction-1 .item-3">Step 3: Download▼<br></a></h5>
</div>
<div class="collapse item-3" role="tabpanel" data-parent="#accordion-instruction-1">
<div class="card-body">
<div class="row directions-row" id="step-6">
<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="exportkml.png" width="100%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row d-none directions-row" id="step1-old-1">
<div class="col-12 col-md-8">
<h4>Step 1: Create Map</h4>
<p><br>Go to <a href="https://google.com/mymaps">Google My Maps</a>. Choose or create a map. <br></p>
<p><br>Click here for a <a href="https://www.youtube.com/watch?time_continue=61&v=9KNkiNExSl0&feature=emb_logo">quick tutorial</a> 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-2">
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-instruction-2 .item-1" href="#accordion-instruction-2 .item-1">Step 1: Create Map▼<br></a></h5>
</div>
<div class="collapse item-1" role="tabpanel" data-parent="#accordion-instruction-2">
<div class="card-body">
<div class="row directions-row" id="step-7">
<div class="col-12 col-md-8">
<h4>Step 1: Create Map</h4>
<p><br>Go to <a href="https://google.com/mymaps">Google My Maps</a>. Choose or create a map. <br></p>
<p><br>Click here for a <a href="https://www.youtube.com/watch?time_continue=61&v=9KNkiNExSl0&feature=emb_logo">quick tutorial</a> 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-2 .item-2" href="#accordion-instruction-2 .item-2">Step 2: Export▼<br></a></h5>
</div>
<div class="collapse item-2" role="tabpanel" data-parent="#accordion-instruction-2">
<div class="card-body">
<div class="row directions-row" id="step-8">
<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-2 .item-3" href="#accordion-instruction-2 .item-3">Step 3: Download▼<br></a></h5>
</div>
<div class="collapse item-3" role="tabpanel" data-parent="#accordion-instruction-2">
<div class="card-body">
<div class="row directions-row" id="step-9">
<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="exportkml.png" width="100%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row d-none directions-row" id="step2-old-1">
<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-1">
<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="exportkml.png" width="100%"></div>
</div>
<div class="row directions-row" id="step-10">
<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-1"></form>
</div>
</div>
<div class="row directions-row" id="step-11">
<div class="col">
<h4 class="section-heading">Step 5: Enter Ride Title</h4>
<p>Enter a short descriptive name of your ride (max 30 characters). <br>We will add your user name to the front of it!<br><br></p><input type="text" id="upload-ride-title-1" maxlength="30" minlength="1" title="max 30 characters">
<p style="font-style: italic;margin-bottom: 2px;color: var(--gray);font-size: 14px;">Will appear in game as:</p>
<p id="upload-ride-title-preview-1" style="margin-bottom: 2px;color: var(--gray);font-size: 14px;">Paragraph</p>
</div>
</div>
<div class="row directions-row" id="upload-step-ambient-1">
<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-1"><button class="btn btn-primary dropdown-toggle vzfit-btn" aria-expanded="false" data-toggle="dropdown" id="current-upload-amb-selection-1" type="button" alt="Country">Current: Country</button>
<div class="dropdown-menu" id="UpAmbientSoundBG-1"><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Country-1" href="#">Country</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-City-1" href="#">City</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Fields-1" href="#">Fields</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-FIelds-1" href="#">Fields2</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Forest-1" href="#">Forest</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Lake-1" href="#">Lake</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Mountain-1" href="#">Mountain</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Beach-1" href="#">Beach</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Ocean-1" href="#">Ocean</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-River-1" href="#">River</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Savannah-1" href="#">Savannah</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Jungle-1" href="#">Jungle</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Swamp-1" href="#">Swamp</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-Wind-1" href="#">Wind</a><a class="dropdown-item upload-ambient-sel-item" id="AmbUp-None-1" href="#">None</a></div>
</div>
</div>
</div>
<div class="row directions-row" id="step-12">
<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-1" 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-1" style="margin-bottom: 5px;">Ride Name</p>
<p id="created-ride-file-1">from File Name</p>
<p id="created-ride-outcome-1">Outcome</p>
<p id="created-ride-errors-1">Error Message</p>
</div>
</div>
</div>
<div class="container" id="create-notes-1" style="background: #bdbbbc;">
<h1>NOTES</h1>
<ul>
<li id="create-hint-2" class="list-item">Your ride will appear as "snowpelt's <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> 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 <strong>Driving</strong> directions not biking or walking. Check by going to <a class="dark-link" href="https://www.google.com/maps">google.com/maps</a> and select your ride from Menu->Your Places->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("/assets/img/NoLogo_CoverLandscape.jpg");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. Select favorite rides you want to see in-game. Give rides you've tried a rating. 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-12 col-md-3">
<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_notstarted"><label class="form-check-label" for="filter_notstarted">Not Started</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>
<div class="form-check"><input class="form-check-input" type="checkbox" id="filter_guided"><label class="form-check-label" for="filter_guided">Guided</label></div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="filter_challenge"><label class="form-check-label" for="filter_challenge">Challenge</label></div>
</form>
</div>
<div class="col-12 col-md-9"><div id="map" style="height: 345px;margin: 0;padding: 0;"></div>
<p style="text-align: center;">Click anywhere on map to sort rides by proximity to that point</p>
</div>
</div>
<div class="row text-center d-none .below-fold" id="MilesKM" style="padding-top: 10px;">
<div class="col" style="margin-right: 50px;">
<div class="btn-group btn-group-sm border rounded-0 float-right btn-group-toggle" role="group" id="km-miles-group"><button class="btn btn-primary vzfit-toggle-button active" id="rides-km-button" style="margin-right: 0px;margin-left: 0px;width: 60px;">KM</button><button class="btn btn-primary vzfit-toggle-button" id="rides-miles-button" type="button" style="width: 60px;">Miles</button></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 <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 <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">Index</th>
<th>Label</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>Cell 2</td>
<td><a id="created" href="#">emala's Ride</a></td>
<td>Cell 1</td>
<td>Cell 1</td>
<td>Cell 1 <i class="fa fa-thumbs-up"></i></td>
<td>Cell 1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>Cell 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" id="modal-ride-title">userName's Long Alaska Ride</h4>
<p class="d-none" id="modal-title-lookup">Paragraph</p><button class="close" type="button" aria-label="Close" data-dismiss="modal"><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="center-modal-right"><button class="btn btn-light text-center created_button" id="ride_copy_link_button" type="button">Copy Link</button><button class="btn btn-light text-center d-none created_button" id="ride_post_FB_button" type="button">Post FB</button></div>
<div class="text-center d-block" data-toggle="tooltip" data-bss-tooltip="" id="bottom-modal-right"><button class="btn btn-light text-center created_button" id="created_delete_button" type="button">Delete</button></div>
</div>
</div>
<div class="row" style="padding-top: 10px;">
<div class="col" style="padding-right: 0px;padding-left: 0px;">
<p id="modal-created-description" style="margin-left: 5px;">description text<br><br>blah</p>
</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" id="Amb-Country" href="#">Country</a><a class="dropdown-item ambient-sel-item" id="Amb-City" href="#">City</a><a class="dropdown-item ambient-sel-item" id="Amb-Fields" href="#">Fields</a><a class="dropdown-item ambient-sel-item" id="Amb-Fields2" href="#">Fields2</a><a class="dropdown-item ambient-sel-item" id="Amb-Forest" href="#">Forest</a><a class="dropdown-item ambient-sel-item" id="Amb-Lake" href="#">Lake</a><a class="dropdown-item ambient-sel-item" id="Amb-Mountain" href="#">Mountain</a><a class="dropdown-item ambient-sel-item" id="Amb-Beach" href="#">Beach</a><a class="dropdown-item ambient-sel-item" id="Amb-Ocean" href="#">Ocean</a><a class="dropdown-item ambient-sel-item" id="Amb-River" href="#">River</a><a class="dropdown-item ambient-sel-item" id="Amb-Savannah" href="#">Savannah</a><a class="dropdown-item ambient-sel-item" id="Amb-Jungle" href="#">Jungle</a><a class="dropdown-item ambient-sel-item" id="Amb-Swamp" href="#">Swamp</a><a class="dropdown-item ambient-sel-item" id="Amb-Wind" href="#">Wind</a><a class="dropdown-item ambient-sel-item" id="Amb-None" href="#">None</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 class="col d-none">
<p id="current-ambient-value" data-val="Country"><strong>Ambient FX:</strong></p>
</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 class="close" type="button" aria-label="Close" data-dismiss="modal"><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 class="close" type="button" aria-label="Close" data-dismiss="modal"><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("/assets/img/NoLogo_CoverLandscape.jpg");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 class="d-none" style="height: 200px;"><button class="btn btn-primary" download="https://vz-fit.s3.amazonaws.com/snapshots/39d60b68-6648-4761-9203-33509fa75cc6.jpg" src="https://vz-fit.s3.amazonaws.com/snapshots/39d60b68-6648-4761-9203-33509fa75cc6.jpg">Button</button><a id="snaptest" download="" href="https://live-production.wcms.abc-cdn.net.au/ff1221fbfdb2fe163fdda15df5f77676?impolicy=wcms_crop_resize&cropH=394&cropW=700&xPos=0&yPos=37&width=862&height=485">Link</a></div>
<div class="row" id="search-snapshots-section">
<div class="col text-right" style="padding: 0px;"><input type="search" id="search-snapshots-field" style="height: 45px;text-align: left;width: 200px;" placeholder="search..."><button class="btn btn-primary vzfit-btn" id="snapshot-search-button" type="button" style="min-width: 46px;"><i class="fas fa-search" style="width: 20px;height: 20px;text-align: center;"></i></button></div>
</div>
</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" id="thumb-group-1"><a id="thumb-1-link" data-lightbox="photos" href="desk.jpg"><img class="img-fluid" id="thumb-1" src="/assets/img/vzfitsnap.jpg"></a>
<p class="text-center" id="thumb-date-1" style="margin-right: 0px;margin-top: 5px;">Paragraph</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 item" id="thumb-group-2"><a id="thumb-2-link" data-lightbox="photos" href="building.jpg"><img class="img-fluid" id="thumb-2" src="/assets/img/vzfitsnap.jpg"></a>
<p class="text-center" id="thumb-date-2" style="margin-right: 0px;margin-top: 5px;">Paragraph</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 item" id="thumb-group-3"><a id="thumb-3-link" data-lightbox="photos" href="loft.jpg"><img class="img-fluid" id="thumb-3" src="/assets/img/vzfitsnap.jpg"></a>
<p class="text-center" id="thumb-date-3" style="margin-right: 0px;margin-top: 5px;">Paragraph</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 item" id="thumb-group-4"><a id="thumb-4-link" data-lightbox="photos" href="building.jpg"><img class="img-fluid" id="thumb-4" src="/assets/img/vzfitsnap.jpg"></a>
<p class="text-center" id="thumb-date-4" style="margin-right: 0px;margin-top: 5px;">Paragraph</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 item" id="thumb-group-5"><a id="thumb-5-link" data-lightbox="photos" href="building.jpg"><img class="img-fluid" id="thumb-5" src="/assets/img/vzfitsnap.jpg"></a>
<p class="text-center" id="thumb-date-5" style="margin-right: 0px;margin-top: 5px;">Paragraph</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 item" id="thumb-group-6"><a id="thumb-6-link" data-lightbox="photos" href="loft.jpg"><img class="img-fluid" id="thumb-6" src="/assets/img/vzfitsnap.jpg"></a>
<p class="text-center" id="thumb-date-6" style="margin-right: 0px;margin-top: 5px;">Paragraph</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 item" id="thumb-group-7"><a id="thumb-7-link" data-lightbox="photos" href="desk.jpg"><img class="img-fluid" id="thumb-7" src="/assets/img/vzfitsnap.jpg"></a>
<p class="text-center" id="thumb-date-7" style="margin-right: 0px;margin-top: 5px;">Paragraph</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 item" id="thumb-group-8"><a id="thumb-8-link" data-lightbox="photos" href="desk.jpg"><img class="img-fluid" id="thumb-8" src="/assets/img/vzfitsnap.jpg"></a>
<p class="text-center" id="thumb-date-8" style="margin-right: 0px;margin-top: 5px;">Paragraph</p>
</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>
<p class="text-center" id="snapshot-showing-msg" style="margin-top: 20px;">1-8 <br>of 55</p><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="overwrite-ride-confirm">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ride Name Already Exists</h4><button class="close" type="button" aria-label="Close" data-dismiss="modal"><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 overwrite the existing ride?</p><img class="d-none" id="del-confirm-img">
</div>
<div class="modal-footer"><button class="btn btn-primary vzfit-btn" id="no-overwrite" type="button" style="margin-top: 4px;" data-dismiss="modal">NO</button><button class="btn btn-light vzfit-btn" id="yes-overwrite" type="button" data-dismiss="modal" style="margin-top: 4px;">YES</button></div>
</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 class="close" type="button" aria-label="Close" data-dismiss="modal"><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-1">
</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 class="close" type="button" aria-label="Close" data-dismiss="modal"><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 class="close" type="button" aria-label="Close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" style="text-align: center;">
<div class="row">
<div class="col-12 col-lg-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-12 col-lg-3"><button class="btn btn-light vzfit-btn" id="yes-stop-membership" type="button" data-dismiss="modal" style="margin-top: 4px;">Confirm </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 class="close" type="button" aria-label="Close" data-dismiss="modal"><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 </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 </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 class="close" type="button" aria-label="Close" data-dismiss="modal"><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 class="close" type="button" aria-label="Close" data-dismiss="modal"><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("/assets/img/NoLogo_CoverLandscape.jpg");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 id="pinpoint-page" class="page-class vzfit-page">
<div class="jumbotron text-center header-image" id="header-pinpoint" style="text-align: center;background: url("/assets/img/NoLogo_CoverLandscape.jpg");background-size: cover;">
<div class="vzfit-jumbo vzfit-jumbo-text">
<h1 class="text-light" id="pinpoint-heading">Pin Point</h1>
<p class="text-light" id="pinpoint-heading-subtext">A new location guessing game from VZfit!</p>
</div>
</div>
<div id="pinpoint-page-section" class="below-fold">
<div class="container settings-block">
<h4 id="leaderboard-title-2" class="section-heading">Daily Pinpoint Results</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>Score</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 class="col">
<div role="tablist" id="accordion-1">
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="true" aria-controls="accordion-1 .item-1" href="#accordion-1 .item-1">Accordion Item</a></h5>
</div>
<div class="collapse show item-1" role="tabpanel" data-parent="#accordion-1">
<div class="card-body">
<p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
<div class="table-responsive">
<table class="table table-striped" id="vzcal-leaderboard-table">
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Score</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 class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-2" href="#accordion-1 .item-2">Accordion Item</a></h5>
</div>
<div class="collapse item-2" role="tabpanel" data-parent="#accordion-1">
<div class="card-body">
<p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</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-1 .item-3" href="#accordion-1 .item-3">Accordion Item</a></h5>
</div>
<div class="collapse item-3" role="tabpanel" data-parent="#accordion-1">
<div class="card-body">
<p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</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 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>
<li><a href="https://virzoom.zendesk.com/hc/en-us/articles/360056435331-VirZOOM-End-User-License-Agreement">End User License Agreement</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://maps.googleapis.com/maps/api/js?key=AIzaSyBxCQNn1Antc0PwSsOJyMFqgR559lyD2Ew&libraries=geometry&v=weekly"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.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="/assets/js/jquery.cookieMessage.min.js"></script>
<script src="https://js.stripe.com/v2/"></script>
<script src="/assets/js/polyline.js"></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="/assets/js/events.js"></script>
<script src="/assets/js/FileSaver.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.11.5/sorting/any-number.js"></script>
</body>
</html>