<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-KB5HTKLDM6"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-KB5HTKLDM6');
    </script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="SunSketcher, NASA, Solar Eclipse, Great American Eclise, Total Eclipse, Citizen Science, App, Heliophysics">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
    <link rel="manifest" href="./favicon/site.webmanifest">

    <!-- Fonts & Icons -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<!-- Arimo -->
<link href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

<!-- Fugaz One -->
<link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">

<!-- Montserrat -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<!-- Open Sans-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">

<!-- Oswald -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Russo One -->
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">

<!-- Teko -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Teko">
    <link rel="stylesheet" type="text/css" href="./css/theme.css">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <title>SunSketcher</title>
  </head>

  <body>

    <header>
  <div id="logoDiv">
    <a href="./index.php"><img id="favicon" alt="SunSketcher Logo" src="./resources/logos/sunsketcherTM_withHorizontalWhiteText.png"/></a>
  </div>
  <nav id="mainNav" role="menu">
      <ul>
          <li><a href="./research.php">Research</a></li>
          <li><a href="./team.php">Team</a></li>
          <li><a href="./faq.php">FAQ</a></li>
          <li><a href="./news.php">News</a></li>
          <li><a href="https://lp.constantcontactpages.com/sl/cAjW8dC/sunsketcher" id="CTA">Sign Up</a></li>
          <li><a href="./app-tutorial.php" id="CTA">App Tutorial</a></li>
          <li><a href="./resources.php" id="CTA">Resources</a></li>
          <li><button id="signup" onclick="window.location.href='./download.php'">Download</button></li>
</ul>


     <div id="header_nasaPartnerLogo">
    <a target="_blank" href="https://www.nasa.gov">
      <img src="./resources/logos/img_nasaPartner.png"/>
    </a><
  </div>
  </nav>


</header>

    <main>

      <section id="hero">
        <img id="heroBg" src="./resources/photos/lewis-annular-heroCrop.jpg" role="presentation" aria-hidden draggable="FALSE"/>
        <div id="heroCopy" class="raised">
          <h1>Reveal the True Shape of the Sun</h1>
          <div id="countdown">
            <div class="countdownPlace">
              <p id="days" class="countdownNumber">00</p>
              <p class="countdownUnit">DAYS</p>
            </div>
            <div class="countdownPlace">
              <p id="hours" class="countdownNumber">00</p>
              <p class="countdownUnit">HR</p>
            </div>
            <div class="countdownPlace">
              <p id="minutes" class="countdownNumber">00</p>
              <p class="countdownUnit">MIN</p>
            </div>
            <div class="countdownPlace" id="secondsPlace">
              <p id="seconds" class="countdownNumber">00</p>
              <p class="countdownUnit">SEC</p>
            </div>
          </div>
          <noscript><p style="font-weight: bold; color: var(--brandDarkGrey)">This countdown requires JavaScript to function. Enable JavaScript <a style="font-weight: bold; color: var(--brandDarkGrey); text-decoration: underline;" target="_blank" href="https://www.enable-javascript.com/">here</a>.</p></noscript>
        </div>
        <p id="message" class="raised"><span id="imgCred">Image Credit: Clinton Lewis / WKU</span><br/>Scroll Down to Learn More</p>
      </section>

      <script defer>
        const referenceDate = new Date('2026-08-12T17:47:44Z');


        function prefixSingleCharNumWithZero(num) {
          let returnVal = num;
          if (num.toString().length == 1) {
            returnVal = '0' + num.toString();
          }
          return returnVal;
        }

        function updateCountdown() {
          const currentDate = new Date();
          let timeDifference = Math.ceil(referenceDate - currentDate);

          // Days
          let days = Math.floor(timeDifference / (1000*60*60*24));
          timeDifference -= days * (1000*60*60*24);

          // Hours
          let hours = Math.floor(timeDifference / (1000*60*60));
          timeDifference -= hours * (1000*60*60);
          if (hours == 24) { 
            days += 1;
            hours = 23;
          }

          // Minutes
          let minutes = Math.floor(timeDifference / (1000*60));
          timeDifference -= minutes * (1000*60);
          if (minutes == 60) { 
            hours += 1
            minutes = 0;
          }

          // Seconds
          let seconds = Math.ceil(timeDifference / (1000));
          if (seconds == 60) { 
            minutes += 1;
            seconds = 0;
          }

          // Update Countdown
          days = prefixSingleCharNumWithZero(days);
          document.getElementById('days').innerHTML = days;
          hours = prefixSingleCharNumWithZero(hours);
          document.getElementById('hours').innerHTML = hours;
          minutes = prefixSingleCharNumWithZero(minutes);
          document.getElementById('minutes').innerHTML = minutes;
          seconds = prefixSingleCharNumWithZero(seconds);
          document.getElementById('seconds').innerHTML = seconds;

        }

        updateCountdown();
        setInterval(updateCountdown, 1000)
      </script>

      <div id="heroDivider"></div>

      <section id="what-is-sunsketcher" class="twoHalfLayout">
        <div class="layoutHalf even">
          <h2>What is SunSketcher?</h2>
          <p>At its core, SunSketcher is an app anyone can use to photograph a solar eclipse. First used during the April 8th, 2024 total solar eclipse, we are now counting down to the next total solar eclipse on August 12th, 2026. Mass participation will generate an incredible database of images that, when analyzed together, could allow scientists to map the Sun.
            <br/><br/>As Principal Investigator Gordon Emslie put it, "The 2024 Eclipse offers an unprecedented opportunity to measure the shape of the Sun and so to infer its inner structure. The SunSketcher project will use smartphone observations by Citizen Scientists situated along the two-thousand-mile-long eclipse path from Texas to Maine to reveal the precise shape of the solar disk."</p>
          <div class="buttonGrid">
            <a tabindex="0" class="buttonAnchor" href="./research.php">About Our Research<span class="material-symbols-outlined buttonIcon">north_east</span></a>
            <a tabindex="0" class="buttonAnchor" href="./download.php">Download the App<span class="material-symbols-outlined buttonIcon">north_east</span></a>
          </div>
        </div>
        <div class="layoutHalf even">
          <img src="./resources/photos/sunsketcherPhotos-Oct23.jpg" draggable="FALSE" alt="Images of the 2023 Annular Eclipse taken by members of the SunSketcher team"/>
          <p class="caption">These photos were taken during the October 2023 annular eclipse using a pre-release version of the SunSketcher app.</p>
        </div>
      </section>

      <section id="we-know-what-youre-thinking"  class="twoHalfLayout">
        <div class="layoutHalf thin">
          <img src="./resources/photos/travisSettingUpPhone-Oct23.jpg" draggable="FALSE" alt="Multiple phones running the SunSketcher app positioned towards the Sun during October '23 eclipse"/>
          <p class="caption">Lead Android Developer, Travis, sets up his phone to capture the 2023 Annular Eclipse during the SunSketcher beta test. The team viewed the eclipse in Odessa, TX, from the <a class="inlineA" target="_blank" href="https://en.wikipedia.org/wiki/University_of_Texas_Permian_Basin#Main_campus">UTPB Stonehenge Replica</a>.</p>
        </div>
        <div class="layoutHalf wide">
          <h2>We Know What You're Thinking...</h2>
          <p>
            "We don't know the shape of the Sun?" you ask. Nope. Well, not exactly. Scientists have a pretty good idea, but it's not nearly as precise as it could be. As you'll see on our <a tabindex="0" class="inlineA" href="./research.php">Research</a> page, our hope is to change that—measuring the Sun's oblateness to an accuracy of a few parts in a million!
            <br/><br/>Wait, maybe you were going to ask "Where can I view the eclipse?" In that case, we've linked an interactive map of the eclipse (courtesy of <a tabindex="0" class="inlineA" href="http://xjubier.free.fr/en/site_pages/SolarEclipsesGoogleMaps.html" target="_blank">Xjubier</a>) below for your convenience. That is...unless you were you actually going to ask something about the app? Or maybe about eclipse glasses? This mind reading thing is harder than I thought. If only we had a page where we address <a tabindex="0" class="inlineA" href="./faq.php">frequently asked questions</a>. *sigh*
          </p>
          <div class="buttonGrid">
            <a tabindex="0" class="buttonAnchor" href="http://xjubier.free.fr/en/site_pages/solar_eclipses/TSE_2024_GoogleMapFull.html" target="_blank">Interactive Map<span class="material-symbols-outlined buttonIcon">north_east</span></a>
            <a tabindex="0" class="buttonAnchor" href="./faq.php">FAQ<span class="material-symbols-outlined buttonIcon">north_east</span></a>
          </div>
        </div>
      </section>

      <section id="so-how-does-this-work-anyway"  class="twoHalfLayout">
        <div class="layoutHalf thin">
          <h2>How Does It Work?</h2>
          <p>
            We knew you were going to ask that! So we made this short tutorial. From downloading the app to using it on eclipse day, this video goes over it all.
            <br/><br/>If you're still wanting to dig deeper, here's those fun little buttons again. Don't you worry; we've got <em>plenty</em> of information spread through here.
          </p>
          <div class="buttonGrid">
            <a tabindex="0" class="buttonAnchor" href="./research.php">Our Research<span class="material-symbols-outlined buttonIcon">north_east</span></a>
            <a tabindex="0" class="buttonAnchor" href="./team.php">Our Team<span class="material-symbols-outlined buttonIcon">north_east</span></a>
            <a tabindex="0" class="buttonAnchor" href="./news.php">News & Blog<span class="material-symbols-outlined buttonIcon">north_east</span></a>
            <a tabindex="0" class="buttonAnchor" href="./faq.php">FAQ<span class="material-symbols-outlined buttonIcon">north_east</span></a>
            <a tabindex="0" class="buttonAnchor" href="./download.php">Download the App<span class="material-symbols-outlined buttonIcon">north_east</span></a>
            <a tabindex="0" class="buttonAnchor" href="https://lp.constantcontactpages.com/sl/cAjW8dC/sunsketcher">Mailing List<span class="material-symbols-outlined buttonIcon">north_east</span></a>
          </div>
        </div>
        <iframe id="tutorial" class="layoutHalf wide" width="500" height="315" src="https://www.youtube.com/embed/fJ3emwUOgoo?si=DR8c14dzICSjCy19" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </section>

      <section id="latest-from-sunsketcher">
        <h2>The Latest from SunSketcher</h2>
        <div class="buttonGrid" id="socialsNav">
          <a tabindex="0" class="homepageSocialButton" href="./news.php">
            <div>
              <img src="./resources/logos/sunsketcher.png" draggable="FALSE" alt="SunSketcher Logo" class="circle"/>
              <p>News Page</p>
              <span class="material-symbols-outlined buttonIcon">north_east</span>
            </div>
          </a>
          <a tabindex="0" class="homepageSocialButton" target="_blank" href="https://instagram.com/sunsketchers">
            <div>
              <img src="./resources/logos/instagram.png" draggable="FALSE" alt="Instagram Logo" class="square"/>
              <p>Instagram</p>
              <span class="material-symbols-outlined buttonIcon">north_east</span>
            </div>
          </a>
          <a tabindex="0" class="homepageSocialButton" target="_blank" href="https://www.tiktok.com/@sunsketchers">
            <div>
              <img src="./resources/logos/tiktok.png" draggable="FALSE" alt="TikTok Logo" class="circle"/>
              <p>TikTok</p>
              <span class="material-symbols-outlined buttonIcon">north_east</span>
            </div>
          </a>
          <a tabindex="0" class="homepageSocialButton" target="_blank" href="https://x.com/sunsketchers">
            <div>
              <img src="./resources/logos/x.png" draggable="FALSE" alt="X.com Logo" class="square"/>
              <p>X.com</p>
              <span class="material-symbols-outlined buttonIcon">north_east</span>
            </div>
          </a>
        </div>
        <div class="buttonGrid" id="featuredNav">
          <a href="./news.php#sunsketching-in-TX" tabindex="0"><div class="featuredStoryBox">
            <p class="readStoryLabel">Read Post</p>
            <img class="storyImage" src="./resources/photos/featStories/sunsketchingInTx.jpg" draggable="FALSE" alt="Members of the SunSketcher Team talking to Folks from UTPB in Odessa, TX"/>
            <p class="featuredStoryTitle">SunSketching in TX</p>
            <p class="featuredStoryDate">Oct 16, 2023</p>
          </div></a>
          <a href="./news.php#sunsketcher-goes-digital" tabindex="0"><div class="featuredStoryBox">
            <p class="readStoryLabel">Read Post</p>
            <img class="storyImage" src="./resources/photos/featStories/followUs.jpg" draggable="FALSE" alt="SunSketcher Logo and Social Media Icons"/>
            <p class="featuredStoryTitle">SunSketcher Goes Digital</p>
            <p class="featuredStoryDate">Oct 13, 2023</p>
          </div></a>
          <a href="./news.php#mom-were-on-tv" tabindex="0"><div class="featuredStoryBox">
            <p class="readStoryLabel">Read Post</p>
            <img class="storyImage" src="./resources/photos/featStories/momWereOnTV.jpg" draggable="FALSE" alt="The SunSketcher Team in the Lab"/>
            <p class="featuredStoryTitle">"Mom, We're On TV!"</p>
            <p class="featuredStoryDate">Sep 29, 2023</p>
          </div></a>
          <a href="./news.php#website-launch" tabindex="0"><div class="featuredStoryBox">
            <p class="readStoryLabel">Read Post</p>
            <img class="storyImage outlined" src="./resources/photos/featStories/websiteLaunch.jpg" draggable="FALSE" alt="Cursor clicking SunSketcher Logo"/>
            <p class="featuredStoryTitle">Website Launch</p>
            <p class="featuredStoryDate">Sep 7, 2023</p>
          </div></a>
        </div>
      </section>

      <section id="supported-by-nasa"  class="twoHalfLayout">
        <img id="nasaPartnerLogo-Large" class="layoutHalf min" src="./resources/logos/img_nasaPartner.png" draggable="FALSE" alt="NASA Partner Logo"/>
        <div class="layoutHalf maj">
          <h2>SunSketcher is Supported by NASA</h2>
          <p>The SunSketcher project is brought to you in part by the United States National Aeronautics and Space Administration (NASA). If you'd like to explore other citizen science and volunteer opportunities sponsored by NASA, check out the links below. You can also check out NASA's handy guide to staying safe while viewing an eclipse.</p>
          <div class="buttonGrid">
            <a tabindex="0" class="buttonAnchor" href="https://science.nasa.gov/citizen-science" target="_blank">Citizen Science<span class="material-symbols-outlined buttonIcon">north_east</span></a>
            <a tabindex="0" class="buttonAnchor" href="https://www.nasa.gov/get-involved/" target="_blank">NASA Solve<span class="material-symbols-outlined buttonIcon">north_east</span></a>
            <a tabindex="0" class="buttonAnchor" href="https://solarsystem.nasa.gov/eclipses/2024/apr-8-total/safety/" target="_blank">Eclipse Safety<span class="material-symbols-outlined buttonIcon">north_east</span></a>
          </div>
          <p id="nasa-disclaimer">Disclaimer: The material contained in this document is based upon work supported by a National Aeronautics and Space Administration (NASA) grant or cooperative agreement. Any opinions, findings, conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of NASA.</p>
        </div>
      </section>

      <section id="the-sunsketcher-universe">
        <h2>The SunSketcher Universe</h2>
        <section id="brought-to-you-by">
          <h3>Brought to You By</h3>
          <div class="buttonGrid">
            <a tabindex="0" href="https://wkuxr.com/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/img_WKU-XR-Logo.png" draggable="FALSE" alt="Western Kentucky University Extended Reality Lab Logo"/></div>
                <p>WKU Extended Reality Lab<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
            <a tabindex="0" href="https://www.wku.edu/seas/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/WKU-SEAS.jpeg" draggable="FALSE" alt="Western Kentucky University School of Engineering and Applied Sciences Logo"/></div>
                <p>WKU School of Engineering and Applied Sciences<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
            <a tabindex="0" href="https://www.wku.edu/art/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/WKU-Art-and-Design.png" draggable="FALSE" alt="Western Kentucky University Department of Art & Design Logo"/></div>
                <p>WKU Department of Art & Design<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
          </div>
        </section>

        <section id="friends-of-sunsketcher">
          <h3>Friends of SunSketcher</h3>
          <div class="buttonGrid">
            <a tabindex="0" href="https://aas.org/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/aas.png" draggable="FALSE" alt="American Astronomical Society Logo"/></div>
                <p>American Astronomical Society<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
            <a tabindex="0" href="https://aurorasaurus.org/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/aurorasaurus.png" draggable="FALSE" alt="Aurorasaurus Logo"/></div>
                <p>Aurorasaurus<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
            <a tabindex="0" href="https://citizencate.org/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/citizen-cate.jpeg" draggable="FALSE" alt="Citizen CATE Logo"/></div>
                <p>Citizen CATE<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
            <a tabindex="0" href="https://debinitiative.org/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/deb-initiative.jpeg" draggable="FALSE" alt="DEB Institute Logo"/></div>
                <p>Dynamic Eclipse Broadcast Institute<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
            <a tabindex="0" href="https://eclipsecamera.com/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/eclipse-camera.png" draggable="FALSE" alt="Eclipse Camera Logo"/></div>
                <p>Eclipse Camera<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
            <a tabindex="0" href="https://eclipsemegamovie.org/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/eclipse-megamovie.png" draggable="FALSE" alt="Eclipse Megamovie Logo"/></div>
                <p>Eclipse Megamovie<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
            <a tabindex="0" href="https://scistarter.org/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/scistarter.png" draggable="FALSE" alt="SciStarter Logo"/></div>
                <p>SciStarter<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
            <a tabindex="0" href="https://www.utpb.edu/success/2023/09/solar-eclipse" target="_blank">
              <div class="sunsketcherUniverseButton">
                <div class="logo"><img src="./resources/logos/utpb.png" draggable="FALSE" alt="UTPB Logo"/></div>
                <p>University of Texas Permian Basin<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
            <a tabindex="0" href="https://science.nasa.gov/eclipses/citizen-science/" target="_blank">
              <div class="sunsketcherUniverseButton">
                <p>Other Citizen Science Eclipse Projects (NASA)<p>
                <span class="material-symbols-outlined buttonIcon">north_east</span>
              </div>
            </a>
          </div>
        </section>

      </section>

    </main>
    
    <footer>
  <p>&copy; <span id="copyright-notice-year">2023</span> SunSketcher. All rights reserved.</p>
  <nav id="socialsNav">
    <a href="https://instagram.com/sunsketchers" target="_blank">Instagram</a>
    <a href="https://www.tiktok.com/@sunsketchers" target="_blank">TikTok</a>
    <a href="https://x.com/sunsketchers" target="_blank">X.com</a>
    <a style="color: var(--brandBlue)" href="./privacy.php">Privacy Policy</a>
  </nav>
  <p><span class="material-symbols-outlined appIcon">cookie</span> We use cookies and similar technologies to optimize our website.</p>

  <script defer>
    const year = new Date().getFullYear();
    document.getElementById("copyright-notice-year").innerHTML = year.toString();
  </script>

</footer>
  </body>

</html>