﻿

<!-- START SB-2544 -->
<html>
<head>
<!-- === === temporary mobile_Head === === -->
	
	<!-- SB-3251 -->
	<!-- 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-TPJ8GC3');</script>
	<!-- End Google Tag Manager -->
	
	<!--JAL, 122117 -->
	<meta charset="utf-8" />
	<meta http-equiv="content-language" content="en-us" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 

	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
 
    <!-- Disable phone number detection. -->
    <meta name="format-detection" content="telephone=no">

	<link rel="apple-touch-startup-image" href="/startup.png">

	<!-- non-retina iPhone pre iOS 7 -->
	<link rel="apple-touch-icon" href="/apple-touch-icon-57x57-precomposed.png?version=2.54" sizes="57x57">
	<!-- non-retina iPad pre iOS 7 -->
	<link rel="apple-touch-icon" href="/apple-touch-icon-72x72-precomposed.png?version=2.54" sizes="72x72">
	<!-- non-retina iPad iOS 7 -->
	<link rel="apple-touch-icon" href="/apple-touch-icon-76x76-precomposed.png?version=2.54" sizes="76x76">
	<!-- retina iPhone pre iOS 7 -->
	<link rel="apple-touch-icon" href="/apple-touch-icon-114x114-precomposed.png?version=2.54" sizes="114x114">
	<!-- retina iPhone iOS 7 -->
	<link rel="apple-touch-icon" href="/apple-touch-icon-120x120-precomposed.png?version=2.54" sizes="120x120">
	<!-- retina iPad pre iOS 7 -->
	<link rel="apple-touch-icon" href="/apple-touch-icon-144x144-precomposed.png?version=2.54" sizes="144x144">
	<!-- retina iPad iOS 7 -->
	<link rel="apple-touch-icon" href="/apple-touch-icon-152x152-precomposed.png?version=2.54" sizes="152x152">

	 <!-- Startup images -->
 
    <!-- iOS 6 & 7 iPad (retina, portrait) -->
    <link href="/mobile/images/startup/apple-touch-startup-image-1536x2008.png"
            media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
            rel="apple-touch-startup-image">
 
    <!-- iOS 6 & 7 iPad (retina, landscape) -->
    <link href="/mobile/images/startup/apple-touch-startup-image-2048x1496.png"
            media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"
            rel="apple-touch-startup-image">
 
    <!-- iOS 6 iPad (portrait) -->
    <link href="/mobile/images/startup/apple-touch-startup-image-768x1004.png"
            media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)"
            rel="apple-touch-startup-image">
 
    <!-- iOS 6 iPad (landscape) -->
    <link href="/mobile/images/startup/apple-touch-startup-image-1024x748.png"
            media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)"
            rel="apple-touch-startup-image">
 
    <!-- iOS 6 & 7 iPhone 5 -->
    <link href="/mobile/images/startup/apple-touch-startup-image-640x1096.png"
            media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
            rel="apple-touch-startup-image">
 
    <!-- iOS 6 & 7 iPhone (retina) -->
    <link href="/mobile/images/startup/apple-touch-startup-image-640x920.png"
            media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"
            rel="apple-touch-startup-image">
 
    <!-- iOS 6 iPhone -->
    <link href="/mobile/images/startup/apple-touch-startup-image-320x460.png"
            media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)"
            rel="apple-touch-startup-image">


	<link href="/favicon.ico?version=2.54" type="image/x-icon" rel="shortcut icon" />
	
	
	<script
      type="text/javascript"
      src="/assets/js/vendor/jquery-3.5.1.min.js"
    ></script>

	<!-- Mobiscroll JS and CSS Includes -->
	<script  src="/includes/jquery/mobiscroll/js/mobiscroll.javascript.min.js"></script>
    <link href="/includes/jquery/mobiscroll/css/mobiscroll.javascript.min.css" rel="stylesheet" />

	<script src="https://www.google.com/recaptcha/api.js?render=6LfTMNwZAAAAADifUGxySeEhrlIh6antOMlOlAIF"></script>

	
<!-- === === temporary mobile_Head === === -->

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Scoutbook</title>
    <meta name="robots" content="noindex,nofollow" />
    <link rel="dns-prefetch" href="//s.w.org" />
    <link
      rel="stylesheet"
      id="style-css-css"
      href="/assets/css/style.min.css"
      type="text/css"
      media="all"
    />
    
    <!-- Fontawesome brand icons -->
    <link rel="stylesheet" href="/assets/fontawesome/css/all.min.css" rel="stylesheet" type="text/css" media="all" />
	<script src="/assets/fontawesome/js/all.min.js"></script>

    <link rel="canonical" href="https://scoutbook.scouting.org/" />
    <link rel="shortlink" href="https://scoutbook.scouting.org/" />
    <!-- TODO: replace client id with SB.com client -->
    <meta
      name="google-signin-client_id"
      content="364170442919-3teb9cg74dt5583vog2brqvnhu8qlkd5.apps.googleusercontent.com.apps.googleusercontent.com"
    />

    <!-- or false defaults to false -->
    <meta name="google-signin-client_id" content="364170442919-3teb9cg74dt5583vog2brqvnhu8qlkd5.apps.googleusercontent.com">
    <script type="text/javascript" src="/assets/js/vendor/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/popper.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/bootstrap.min.js"></script>
    <script type="text/javascript" src="/assets/js/main.min.js"></script>
    <script src="https://apis.google.com/js/api:client.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
	<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;300;500;700&display=swap');
    </style>

  </head>
<!-- START SB-2163 Google Sign In -->
  <script>
	var googleUser = {};
	function startApp() {
		setTimeout(function () {
			gapi.load('auth2', function(){
				// Retrieve the singleton for the GoogleAuth library and set up the client.
				auth2 = gapi.auth2.init({
					client_id: '364170442919-3teb9cg74dt5583vog2brqvnhu8qlkd5.apps.googleusercontent.com',
					cookiepolicy: 'single_host_origin',
					// Request scopes in addition to 'profile' and 'email'
					//scope: 'additional_scope'
				});
				attachSignin(document.getElementById('customBtn'));
			});
		}, 500);
	};

  function attachSignin(element) {
    auth2.attachClickHandler(element, {},
        function(googleUser) {
			//console.log("Signed in: " + googleUser.getBasicProfile().getName());
			var profile = googleUser.getBasicProfile();
			var id_token = googleUser.getAuthResponse().id_token;

			$('#idToken').val(id_token);

			if (id_token != '') {
				$('#googleSignIn').val("1");
				$('#loginPopupForm').submit();
			}
        }, function(error) {
          console.log(error);
        });
  }
  function handleCredentialResponse(response) {
	$('#idToken').val(response.credential);
	if (response.credential != '') {
		$('#googleSignIn').val("1");
		$('#loginPopupForm').submit();
	}

  }

  </script>
<!-- START LOADER -->
<style>
/* Center the loginLoader */
#loginLoader {
  z-index: 1;
  width: 50px;
  height: 50px;
  margin: auto;
  border: 10px solid #bbbaba;
  border-radius: 50%;
  border-top: 10px solid #003f87;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display: none;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
</style>
<!-- END LOADER -->
  <style type="text/css">
	#gSignInWrapper { text-align: center; padding-top: 15px; padding-bottom: 15px; }
    #appleid-signin { display: inline-block; width: 190px; height: 42px; border-radius: 5px; box-shadow: 1px 1px 1px grey; white-space: nowrap; }
    #customBtn { display: inline-block; background: white; color: #444; width: 190px; border-radius: 5px; border: thin solid #888; box-shadow: 1px 1px 1px grey; white-space: nowrap; }
    #customBtn:hover { cursor: pointer; }
    span.label { font-family: serif; font-weight: normal; }
    span.g-icon { background: url('/images/icons/social/g-logo.svg') transparent 5px 50% no-repeat; display: inline-block; vertical-align: middle; width: 42px; height: 42px; }
    span.buttonText { display: inline-block; vertical-align: middle; padding-left: 5px; padding-right: 5px; font-size: 14px; font-weight: bold;
      /* Use the Roboto font that is loaded in the <head> */
      font-family: 'Roboto',create-account
          sans-serif; }
/* new banner messager alert style */
.alert { padding: 5px; background-color: #f44336; color: white; margin : 5px; font-size : 14px; }
.closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; }
.closebtn:hover { color: black; }
#showBannerMessage { padding-top: 20px; }

/* button login show in mobile */

    #btnLogin { height: 30px ;width: 100%;line-height: 30px;text-align: center;background: #003F87;padding: 10px;text-align: center;color: white;padding: 0; }

#btnLogin a { display: block; margin: auto; width: 100%; height: 100%; }

/* mobile or the menu turned into burger */
@media only screen and (min-width: 992px) {
    #btnLogin {
        display: none;
    }
    #showBannerMessage {
        padding-top: 5px;
    }
}

/* space at the bottom */
form { margin: 0; }
.bsa-LoginModal--Content { overflow: auto; padding: 0; }

</style>
<!-- END SB-2163 Google Sign In -->
  <body class="scoutbook home page page-home frontend">
       
	<!-- Google Tag Manager (noscript) -->
	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TPJ8GC3"
	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
	<!-- End Google Tag Manager (noscript) -->
	
    <header class="fixed-top">
      <nav id="top-nav" class="navbar flex-wrap navbar-expand-lg p-0">
        <div
          class="col-12 mb-auto d-flex flex-wrap align-items-center justify-content-between upper"
        >
          <!-- Navbar Brand -->
          <a href="https://www.scouting.org/" class="p-0 navbar-brand">
            <img
              class="d-none d-lg-block"
              src="/assets/images/logo-lg.svg"
              alt="BSA Logo"
            />
            <img
              class="d-lg-none"
              src="/assets/images/logo.svg"
              alt="BSA Logo"
            />
          </a>
          <div class="text-logo d-none d-lg-block">
            <h5 class="text-uppercase m-0">Scouting America</h5>
          </div>
          <!-- Desktop Menu -->
          <div
            id="desktop-menu"
            class="collapse navbar-collapse ml-auto justify-content-end"
          >
            <ul id="desktop-menu-main-menu" class="ml-auto navbar-nav">
              <li
                itemscope="itemscope"
                itemtype="https://www.schema.org/SiteNavigationElement"
                id="menu-item-67"
                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67 nav-item"
              >
                <a
                  title="Need Help?"
                  href="https://help.scoutbook.scouting.org/"
                  class="nav-link px-4 py-2"
                  >Need Help?</a
                >
              </li>
                <li
                itemscope="itemscope"
                itemtype="https://www.schema.org/SiteNavigationElement"
                id="menu-item-68"
                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68 nav-item"
                >
                <a
                    title="Sign Up"
                    href="https://my.scouting.org/create-account?redirectUrl=scoutbook.scouting.org"
                    class="nav-link bg-primary px-4 py-2 text-center"
                    style="border-radius: 50px; min-width: 124px;"
                    ><strong>Sign Up</strong></a
                >
                </li>
              <li
                itemscope="itemscope"
                itemtype="https://www.schema.org/SiteNavigationElement"
                id="menu-item-66"
                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 nav-item"
              >
            
                <a
                  title="Login"
                    href="javascript:void(0)"
                  onclick="openLoginModal()"
                  class="nav-link bg-info px-4 py-2 text-center"
                  style="border-radius: 50px; min-width: 124px;"
                  ><strong>Login</strong></a>
            
                 </li>
            </ul>
          </div>
        </div>

        <!-- Mobile -->
        <div
          class="col-12 d-flex d-lg-none justify-content-end align-items-center lower"
        >
          <div
            class="h-100 d-flex align-items-center justify-content-between buttons"
          >
            <a
              data-toggle="collapse"
              data-target="#mobile-menu"
              aria-controls="mobile-menu"
              href="javascript:void(0);"
              class="ml-auto text-white mobile-menu-toggler"
            >
              <i class="material-icons align-middle">menu</i>
            </a>
          </div>
        </div>
        <div id="mobile-menu" class="collapse">
          <ul id="mobile-main-menu" class="navbar-nav">
            <li
              class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67 nav-item"
            >
              <a
                title="Need Help?"
                href="https://help.scoutbook.scouting.org/"
                class="nav-link"
                >Need Help?</a
              >
            </li>
            <li
              class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 nav-item"
            >
            
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 nav-item">
                  <a title="Login" onclick="openLoginModal()" class="nav-link">Login</a>
                </li>
            
            </li>
            <li
              class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68 nav-item"
            >
              <a
                title="Sign Up"
                href="https://my.scouting.org/create-account?redirectUrl=scoutbook.scouting.org"
                class="nav-link"
                >Sign Up</a
              >
            </li>
          </ul>
        </div>
        <div id="btnLogin" >            
		  <a title="Login" onclick="openLoginModal()" >
			  Login 
		  </a>
        </div>
      </nav>
    </header>
    <main>
	<div id="showBannerMessage">
	<div class="alert" style="background-color: #B41818; color:white;"><span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> Merit Badge Counselor functionality has been migrated to Scoutbook Plus. Here is a <a href="https://help.scoutbook.scouting.org/knowledge-base/scoutbook-plus-merit-badge-counselor-guide/" target="_blank">link</a> to the help guide which describes the new functionality.</div>	
	</div>
    
      <!-- FIRST SECTION -->
      <div class="container pt-3 pb-4">
        <div class="row flex-column-reverse flex-md-row align-items-md-center">
          <div class="col-md-7">
            <img
              class="w-100"
              loading="lazy"
              src="/assets/images/scoutbook-app.png"
              alt="Scoutbook App"
            />
          </div>
          <div class="col-md-5">
            <article class="py-5">
              <header class="px-4 pb-4 d-flex align-items-center">
                <img
                  class="d-inline pr-2"
                  src="/assets/images/Fleur-de-lis_Color-wide.png"
                  alt="Scouting America"
                  style="max-width: 82px;"
                />
                <h1 class="d-inline text-gray">
                  SCOUT <span class="font-weight-light">BOOK</span>
                </h1>
              </header>
              <p class="text-justify">
                From the first knot tied to final hours of service performed,
                the Scouting experience is a journey like none other. And
                Scoutbook is your go-to tool to ensure not a moment is missed -
                tracking advancement, milestone achievements and all the fun
                along the way.
              </p>
              <p class="text-justify">
                If your pack, troop, crew, or ship is already using Scoutbook,
                <a href="javascript:void(0)"
                  onclick="openLoginModal()"
                  >Login to get started</a
                >. If not,
                <a
                  href="https://help.scoutbook.scouting.org/knowledge-base/getting-a-unit-started-in-scoutbook/"
                  >find out how to set up a unit in Scoutbook</a
                >.
              </p>
            </article>
          </div>
        </div>
      </div>

      <!-- SECOND SECTION -->
      <div class="bg-primary text-white mt-md-80-neg">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <article class="mx-auto py-5" style="max-width: 820px;">
                <h3 class="text-center text-white pb-3">NEED HELP?</h3>
                <p style="font-size: 24px;">
                  Visit
                  <a href="https://help.scoutbook.scouting.org/"
                    ><strong>help.scoutbook.scouting.org</strong></a
                  >
                  for answers to commonly asked Scoutbook questions, Scoutbook
                  How To's, and so much more!
                </p>
              </article>
            </div>
          </div>
        </div>
      </div>

      <!-- THIRD SECTION -->
      <div class="container pt-3 pb-4">
        <div class="row flex-column-reverse flex-md-row align-items-md-center">
          <div class="col-md-7">
            <img
              class="w-100"
              loading="lazy"
              src="/assets/images/scoutbook-app-2.png"
              alt="Scoutbook App 2"
            />
          </div>
          <div class="col-md-5">
            <article class="py-5">
              <header class="pb-4">
                <h3 class="text-uppercase">
                  For Troop, Pack, and Crew Leaders
                </h3>
              </header>
              <p class="text-justify">
                There is nothing more rewarding than helping Scouts through
                their Scouting journey and down the path to success. But
                sometimes the act of leading can get lost in the act of
                reporting, limiting the amount of time actually spent with
                Scouts. Scoutbook provides access to valuable tools and
                resources that will help with the day-to-day management of a
                unit, giving every leader more of what they need most: TIME.
              </p>
              <p class="text-justify">
                With Scoutbook you can create customizable calendar of events,
                send text messaging alerts to Scouts and parents, easily access
                trainings and leadership resources… and so much more!
              </p>
            </article>
          </div>
        </div>
      </div>

      <!-- FOURTH SECTION -->

      <!-- FIFTH SECTION -->
      <div class="container pt-3 pb-4">
        <div class="row flex-column-reverse flex-md-row align-items-md-center">
          <div class="col-md-7">
            <img
              class="w-100"
              loading="lazy"
              src="/assets/images/scoutbook-app-4.png"
              alt="Scoutbook App 4"
            />
          </div>
          <div class="col-md-5">
            <article class="py-5">
              <header class="pb-4">
                <h3 class="text-uppercase">
                  For Parents and Scouts
                </h3>
              </header>
              <p class="text-justify">
                With the Scouting app, it’s easier than ever for youth and
                parents to track advancement and stay connected to their unit!
                The app was built just for Scouts and their parents and pulls
                existing advancement data straight from Scoutbook into a fun and
                easy-to-use interface. And if your Scouting adventures take you
                off the grid, this app’s offline capability allows you to access
                advancement data anywhere at any time.
              </p>
              <p class="text-justify">
                The Scouting app is available for download on
                <a
                  href="https://itunes.apple.com/us/app/scouting/id1218464473?mt=8"
                  target="_blank"
                  >Apple</a
                >
                and
                <a
                  href="https://play.google.com/store/apps/details?id=com.bsa.sbm&hl=en"
                  target="_blank"
                  >Android</a
                >
                devices.
              </p>
            </article>
          </div>
          <!-- <div class="col-12">
            <a
              href="#"
              class="btn btn-lg btn-info mt-4 mx-auto py-3 px-4 d-block font-serif"
              style="border-radius: 50px; max-width: 300px;"
              >GET STARTED</a
            >
          </div> -->
        </div>
      </div>
    </main>
    <footer>
      <div id="footer">
        <div class="footer-bottom pt-5 pb-5">
          <div class="container-fluid footer-links">
            <div class="row">
              <div class="col-12 text-center">
                <div id="text-1" class="widget widget_text">
                  <div class="textwidget">
                    <p class="m-0 p-0 pb-3">
                      <a
                        class="social-link"
                        href="https://www.facebook.com/theboyscoutsofamerica/?fref=ts"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <i class="fab fa-facebook"></i>
                      </a>
                      <a
                        class="social-link"
                        href="https://twitter.com/boyscouts"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <i class="fab fa-twitter"></i>
                      </a>
                      <a
                        class="social-link"
                        href="https://www.instagram.com/boyscoutsofamerica/"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <i class="fab fa-instagram"></i>
                      </a>
                      <a
                        class="social-link"
                        href="https://www.pinterest.com/boyscouts/"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <i class="fab fa-pinterest"></i>
                      </a>
                      <a
                        class="social-link"
                        href="https://www.youtube.com/user/ChattahoocheeBSA"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <i class="fab fa-youtube"></i>
                      </a>
                    </p>
                  </div>
                </div>
                <div style="color: #ffffff; margin-bottom: 15px;">
                  © 2020 Boy Scouts of America - All Rights Reserved
                </div>
              </div>
              <div class="col-12 footer-menu">
                <div class="menu-footer-links-container">
                  <ul id="menu-footer-links" class="nav justify-content-center">
                    <li
                      id="menu-item-123"
                      class="menu-item menu-item-type-custom menu-item-object-custom menu-item-123 nav-item"
                    >
                      <a
                        href="https://www.scouting.org/about/contact-us/"
                        class="nav-link"
                        >Contact</a
                      >
                    </li>
                    <li
                      id="menu-item-119"
                      class="menu-item menu-item-type-custom menu-item-object-custom menu-item-119 nav-item"
                    >
                      <a
                        href="https://www.scouting.org/legal/terms-and-conditions/"
                        class="nav-link"
                        >Terms and condiitons</a
                      >
                    </li>
                    <li
                      id="menu-item-120"
                      class="menu-item menu-item-type-custom menu-item-object-custom menu-item-120 nav-item"
                    >
                      <a
                        href="https://www.scouting.org/legal/privacy-policy/"
                        class="nav-link"
                        >Privacy Policy</a
                      >
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- Modal -->
    <div
      class="modal bsa--LoginModal"
      id="loginModal"
      tabindex="-1"
      aria-labelledby="loginModalSection"
      aria-hidden="true"
    >
        <!-- oldlogin -->
        <form action="#" id="loginPopupForm" method="POST">
        <input type="hidden" name="CSRF" value="4F6CD7DE96" />
        <input type="hidden" name="Action" value="Login" />
        
        <!-- oldlogin -->

      <div class="modal-dialog bsa-LoginModal--Dialog">
        <div class="modal-content bsa-LoginModal--Content">
          <div class="modal-body bsa-LoginModal--Body">
            <button
              onclick="closeLoginModal()"
              type="button"
              class="close bsa--LoginModal--closeBtn"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h1 class="d-inline text-gray">
                SCOUT <span class="font-weight-light">BOOK</span>
            </h1>
            <img
              class="bsa-LoginModal--Logo"
              src="/assets/images/bsalogo.png"
              alt="BSA logo"
            />

            <!-- PP SANDBOX -->
            
            <!-- /PP SANDBOX -->
            
            <input
              type="text"
              name="Email" id="email"
              class="bsa--Input bsa--LoginInput"
              placeholder="Username or Email"
                value="" 
                  required="required" 
                  data-clear-btn="true"
            />


            <input
              type="password"
              name="Password"
                id="password"
              class="bsa--Input bsa--LoginInput"
              placeholder="Password"
              style="margin-bottom: 8px;"
                value="" 
                required="required" 
                data-clear-btn="true"
                autocomplete="off"
            />

            <div
              style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 328px;
              "
            >
              <div class="d-flex align-items-center">
                <input type="checkbox" class="bsa--Checkbox" name="RememberEmail" id="rememberEmail"  data-mini="true" />
                <span class="bsa--LoginModal--caption">Remember Me</span>
              </div>
              <a href="https://my.scouting.org/recover-credentials" target="_blank" class="bsa--LoginModal--forgotLink forgotPasswordIcon"
                >Forgot Password / Username</a
              >
            </div>
            <!--TODO: please implement here recaptcha-->

            <div style="margin: 10px auto;">
                <input type="hidden" name="ReCaptcha3Response" value="" />
                <div id="reCaptcha2"></div>
            </div>
            <div>
                <input class="bsa--Btn-primary bsa--LoginBtn" type="submit" value="Login" id="buttonSubmit" data-theme="g" data-inline="false" />
            </div>
            <div style="margin: 10px auto;">
                <div id="loginLoader"></div>
            </div>
            <span class="bsa--LoginModal--caption text-center"
              >Don't have an account.
              <a href="https://my.scouting.org/create-account" target="_blank">Create Account</a>
            </span>
            <!-- Display Google sign-in button -->
	        
	            <input type="hidden" name="IdToken" id="idToken" value="" />
	            <input type="hidden" name="GoogleSignIn" id="googleSignIn" value="" />
	
				<script src="https://accounts.google.com/gsi/client" async defer></script>
				<div id="g_id_onload"
					 data-client_id="364170442919-3teb9cg74dt5583vog2brqvnhu8qlkd5.apps.googleusercontent.com"
					 data-callback="handleCredentialResponse">
				</div>
				<div class="g_id_signin" data-type="standard"></div>
	              
	        
	            <!-- SB-2453 Apple Signin -->
	            <input type="hidden" name="AppleIdToken" id="appleIdToken" value="" />
	            <input type="hidden" name="AppleSignIn" id="appleSignIn" value="" />
	            <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
	            <div id="aSignInWrapper">
		            <div class="apple-signin-button" id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
	            </div>
	        
          </div>
            <div style="font-size: 9px; color: black; text-decoration: none; margin-top: 1em; ">
                This site is protected by reCAPTCHA and the Google
                <a href="https://policies.google.com/privacy" target="_blank">Privacy Policy</a> and
                <a href="https://policies.google.com/terms" target="_blank">Terms of Service</a> apply.
            </div>
        </div>
        
      </div>
    
    </form>
    </div>

    <style>
      @keyframes slide-in {
        100% {
          transform: translateX(0%);
        }
      }

      @-webkit-keyframes slide-in {
        100% {
          -webkit-transform: translateX(0%);
        }
      }

      @keyframes slide-out {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-100%);
        }
      }

      @-webkit-keyframes slide-out {
        0% {
          -webkit-transform: translateX(0%);
        }
        100% {
          -webkit-transform: translateX(-100%);
        }
      }

      .bsa-LoginModal--Dialog {
        margin: 0;
        height: 100%;
        left: -100%;
        transition: all 0.5s;
      }
      .bsa--LoginModal.show .bsa-LoginModal--Dialog {
        left: 0;
        transition: all 0.2s;
        background-color: black;
      }

      .bsa-LoginModal--Body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .bsa-LoginModal--Content {
        height: 100%;
        background-color: #f2f2f2;
      }

      .bsa--Input {
        width: 328px;
        height: 56px;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 7px 64px 0 rgba(0, 0, 0, 0.07);
        border: solid 1px #e6e6e6;
        background-color: white;
      }
      .bsa--Input:focus {
        outline: #067eeb auto 1px;
        border-radius: 12px;
      }

      .bsa--Checkbox {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        box-shadow: 0 7px 24px 0 rgba(0, 0, 0, 0.07);
        background-color: #067eeb;
        margin-right: 6px;
      }

      .bsa-LoginModal--Logo {
        margin-bottom: 40px;
      }

      .bsa--LoginModal--caption {
        font-family: Roboto;
        font-size: 12px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 2;
        letter-spacing: normal;
        color: #373737;
      }
      .bsa--LoginModal--closeBtn {
        position: absolute;
        right: 12px;
        top: 12px;
        font-size: 32px;
      }
      .bsa--LoginModal--forgotLink {
        font-family: Roboto;
        font-size: 12px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 2;
        letter-spacing: normal;
        text-align: right;
        color: #067eeb;
      }

      .bsa--Btn-primary {
        color: white;
        width: 328px;
        height: 56px;
        font-family: "Roboto Slab";
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 1px;
        text-align: center;
        border-radius: 28px;
        box-shadow: 0 6px 12px -3px rgba(16, 91, 177, 0.2);
        background-color: #003f87;
      }

      .bsa--LoginInput {
        margin-bottom: 24px;
      }
      .bsa--LoginBtn {
        margin-top: 24px;
      }

      .bsa--externalLoginBtn {
        width: 200px;
        margin-top: 1rem;
      }

      .bsa--LoginModal {
      }
    </style>
    
    <script type="text/javascript">
        function openLoginModal() {
            $("#loginModal").modal("show");
        }

        function closeLoginModal() {
            $("#loginModal").modal("hide");
        }

        // SB-2453 Apple Signin
        AppleID.auth.init({
            clientId: 'org.scouting.my',
            scope: 'name email',
            redirectURI: 'https://scoutbook.scouting.org/mobile/?ShowLogin=1',
            usePopup: true //or false defaults to false
        });

        //Listen for authorization success
        document.addEventListener('AppleIDSignInOnSuccess', (data) => {
            //handle successful response
            var apple_id_token = data.detail.authorization.id_token;

            $('#appleIdToken').val(apple_id_token);

            if (apple_id_token != '') {
                $('#appleSignIn').val("1");
                $('#loginPopupForm').submit();
            }
        });
        //Listen for authorization failures
        document.addEventListener('AppleIDSignInOnFailure', (error) => {
            //handle error.
            console.log(error);
        });

        // Google Signin
        function onSignIn(googleUser) {
            // properties :
            //profile.getId(), profile.getName(), profile.getImageUrl(), profile.getEmail()getAuthResponse().id_token
            var profile = googleUser.getBasicProfile();
            var id_token = googleUser.getAuthResponse().id_token;

            $('#idToken').val(id_token);

            if (id_token != '') {
                $('#googleSignIn').val("1");
                $('#loginPopupForm').submit();
            }
        }
    </script>
  </body>
<!-- END SB-2544 -->
<script type="text/javascript">

    grecaptcha.ready(function () {
        grecaptcha.execute('6LfTMNwZAAAAADifUGxySeEhrlIh6antOMlOlAIF', { action: 'login' }).then(function (token) {
            $('#loginPopupForm input[name=ReCaptcha3Response]').val(token);
        });
    });

    // called from mobile.js
    $('#loginHelpDIV').click(function () {
        alert('Use your username to login if you have linked your my.Scouting Tools account to Scoutbook. Otherwise, please use your email address to login.');
    });

    $('#forgotPasswordLink').click(function () {
        // replace content with lookup content
        $('#loginPopup').fadeOut(function () {
            $(this).load('/mobile/passwordlookup.asp?' + $('#email').serialize(), function (data) {
                $(this).trigger('create').fadeIn();
                if ($('#lookupEmail').val() == '') {
                    //$('#lookupEmail').focus();
                }
            });
        });
        return false;
    });

    $('#forgotUsernameLink').click(function () {
        // replace content with lookup content
        $('#loginPopup').fadeOut(function () {
            $(this).load('/mobile/usernamelookup.asp?', function (data) {
                $(this).trigger('create').fadeIn();
                if ($('#lookupEmail').val() == '') {
                    //$('#lookupEmail').focus();
                }
            });
        });
        return false;
    });

    $('#loginPopupForm').submit(function () {

        document.getElementById("loginLoader").style.display = "block";
        var formPost = $('#loginPopupForm').serialize();
        // disable all inputs
        $('input', '#loginPopupForm').attr('disabled', true);

        var url = 'default.asp?Source=&Redir=%2Fmobile%2Fdashboard%2FDefault%2Easp%3F';
        $.ajax({
            type: 'POST',
            url: url,
            dataType: 'script',
            data: formPost,
			
	error: function (xhr, ajaxOptions, thrownError) {
		location.href = '/mobile/500.asp?Error=' + escape('url: ' + url + ' Status: ' + xhr.status + ' thrownError: ' + thrownError + ' responseText: ' + xhr.responseText.substring(0, 400))
	}
	,
            success: function (data) {
                //var d = new Date();
                //d.setTime(d.getTime() + (365*24*60*60*1000));
                //var expires = "expires="+d.toUTCString();
                //document.cookie = "DateLastLogin=" + data.DateLastLogin + "; " + expires;
            }
		});
    // enable all inputs
    $('input', '#loginPopupForm').attr('disabled', false);
    return false;
	});

    function pageShow() {

    }

    function setFocus() {
        return;
        if ($('#email').val() == '') {
            $('#email').focus();
        }
        else if ($('#password').val() == '') {
            $('#password').focus();
        }
        else {
            $('#password').select();
        }
    }

    function chooseTestAccount(data)
    {
        if (data.value == '') {
            $("#email").prop('required',true);
            $("#password").prop('required',true);
            
            $("#email").prop('disabled', false);
            $("#password").prop('disabled', false);
        } else {

            $('#loginPopupForm').submit();

            $("#email").prop('required',false);
            $("#password").prop('required',false);

            $("#email").prop('disabled', true);
            $("#password").prop('disabled', true);
        }
        
    }

</script>
</html>
