Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 5d9681a3 authored by Robert Ly's avatar Robert Ly
Browse files

docs: auto landing cleanup 

Change-Id: I9b9f706341047613fd536ba44b6e887922f13d54
parent e7e8c1b4

docs/html/auto/index.jd

+192 −145
Original line number Diff line number Diff line
@@ -54,6 +54,54 @@ page.type=about 
</style>





    <style>

.fullpage>#footer,

#jd-content>.content-footer.wrap {

  display:none;

}

</style>



<style>

#footer {

  display: none;

}

.content-footer {

  display: none;

}

#hero-height {

  height:calc(100% - 110px);

}

.img-logo {

  margin:0 auto;

  display:block;

  margin-bottom:-28px !important;

}

.img-logo-thin {

  margin:0 auto;

  display:block;

  margin-bottom:-55px !important;

}

.col-5 {

  width:170px;

}

.auto-img-container-cols {

  position:relative;

  margin-bottom:25px;

  margin-top:25px;

}

.auto-img-frame-cols {

  z-index:2;

  position:relative;

}

.auto-img-shot-cols {

  position:absolute;

  top:5px;

  left:2px;

  z-index:1;

}

</style>





<div class="landing-body-content">

  <div class="landing-hero-container">
@@ -74,8 +122,8 @@ page.type=about 
                </div>



              <div class="landing-body">

                <a href="{@docRoot}auto/overview.html" class="landing-button landing-primary"

                   style="margin-top:40px;font-weight:300">

                <a href="/auto/overview.html" class="landing-button landing-primary"

                   style="margin-top:40px;">

                  Developer Overview

                </a>

              </div>
@@ -86,7 +134,7 @@ page.type=about 


      <div class="landing-scroll-down-affordance">

        <a class="landing-down-arrow" href="#android-in-car">

          <img src="{@docRoot}wear/images/carrot.png" alt="Scroll down to read more">

          <img src="/wear/images/carrot.png" alt="Scroll down to read more">

        </a>

      </div>

    </div> <!-- end .landing-section .landing-hero -->
@@ -96,206 +144,206 @@ page.type=about 


      <div class="landing-section landing-gray-background" id="android-in-car">

        <div class="wrap">

          <div class="landing-section-header">

            <div class="landing-h1">Create Experiences for the Car</div>

          <div class="landing-section-h1">

            <div class="landing-h1">Build Experiences for the Road</div>

          </div>



          <div class="landing-body">

            <p>Android Auto provides APIs and tools that your existing apps can leverage to run

            on any compatible vehicle.</p>

          </div>



            <div class="landing-subhead">Android Auto brings apps to the car, integrating with

            the vehicle's input controls and display.</div>

            <div class="cols">

              <div class="col-8">

                <div class="auto-img-container-cols">

                <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />

                <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/01_a_maps.png" />

                  <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />

                  <img class="auto-img-shot-cols" src="/auto/images/assets/01_a_maps.png" />

                </div>

              </div>

              <div class="col-8">

                <div class="auto-img-container-cols">

                <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />

                <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/01_b_now.png" />

                  <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />

                  <img class="auto-img-shot-cols" src="/auto/images/assets/01_b_now.png" />

                </div>

              </div>

            </div>



          <div class="landing-body">

            <p>When users connect their Android phone to an Android Auto enabled vehicle, the

            system shows an interface that lets users select compatible apps and services.</p>

            <p>When users connect their Android phones to compatible vehicles, Android Auto

             shows a standard interface that lets them start enabled apps and services.

             Android Auto locks the handheld device when connected, so drivers

            interact with your app using the vehicle's input controls and touch display.</p>

            </p>

          </div>



        </div> <!-- end .wrap -->

      </div> <!-- end .landing-section -->





      <div class="landing-section" >

        <div class="wrap">

          <div class="landing-section-header">

            <div class="landing-h1">One Platform</div>

            <div class="landing-h1">Minimize Distraction</div>

            <div class="landing-subhead">

             Standard UI templates for several app categories let users focus on the road. 

            </div>       



          <div class="landing-body">

            <p>You can easily adapt existing apps for Android Auto and use many of the APIs you

            already know.</p>

          </div>



          <div class="landing-body">

            <div class="cols">

              <div class="col-8">

                <div class="auto-img-container-cols">

                <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />

                <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/02_a_notif.gif" />

                  <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />

                  <img class="auto-img-shot-cols" src="/auto/images/assets/03_b_voice.gif" />

                </div>

              </div>

              <div class="col-8">

                <div class="auto-img-container-cols">

                <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />

                <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/02_b_switcher.gif" />

                  <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />

                  <img class="auto-img-shot-cols" src="/auto/images/assets/03_a_musict.png" />

                </div>

              </div>

            </div>



          <div class="landing-body">

            <p>Write your apps only once, without having

            to worry about vehicle-specific hardware differences like screen resolution, software

            interfaces, knobs and touch controls. Your app runs the same on any compatible

            vehicle.</p>

            <p>These templates define the user interaction model for all

             apps and let you hook into a standard UI with touch and voice controls. The templates

             meet international best practices for reducing driver

             distraction while still letting you customize and brand them to properly deliver your

             content.

             </p>

          </div>



        </div> <!-- end .wrap -->

      </div> <!-- end .landing-section -->



      <div class="landing-section landing-gray-background">

        <div class="wrap">

          <div class="landing-section-header">

            <div class="landing-h1">Minimizing Distraction</div>

            <div class="landing-h1">Run on One Platform</div>

            <div class="landing-subhead">Extend your existing apps with the Auto SDK and get the

            same experience on any compatible vehicle.

            </div>

          </div>



          <div class="landing-body">

            <p>We designed Android Auto to minimize driver distraction. Android Auto provides UI

              templates for several app categories. These templates define the user interaction model

              for any app and follow international best practices for reducing driver distraction.</p>

          </div>



            <div class="cols">

              <div class="col-8">

                <div class="auto-img-container-cols">

                <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />

                <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/03_a_musict.png" />

                  <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />

                  <img class="auto-img-shot-cols" src="/auto/images/assets/02_a_notif.gif" />

                </div>

              </div>

              <div class="col-8">

                <div class="auto-img-container-cols">

                <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />

                <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/03_b_voice.gif" />

                  <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />

                  <img class="auto-img-shot-cols" src="/auto/images/assets/02_b_switcher.gif" />

                </div>

              </div>

            </div>



          <div class="landing-body">

            <p>You can customize these templates to fit your brand and link them to your app’s

              content and functionality, instead of building new UIs and testing them for driver

              distraction, which is a lengthy and costly process.</p>

            <p>Android Auto locks any device that users connect to a compatible vehicle, so drivers

              interact with the device using voice actions and the vehicle’s input controls.</p>

            <p>Write your app once, without having

            to worry about vehicle-specific hardware differences like screen resolution, software

            interfaces, knobs, and touch controls. Your app runs the same on any compatible

            vehicle.</p>

          </div>



        </div> <!-- end .wrap -->

      </div> <!-- end .landing-section -->





      <div class="landing-section" >



      <div class="landing-section" style="background-color:#f5f5f5">

        <div class="wrap">

          <div class="landing-section-header">

            <div class="landing-h1">Developer Stories</div>

            <div class="landing-pre-h1">Coming soon</div>

            <div class="landing-h1">Android Auto SDK</div>

            <div style="text-align:center;margin-top:20px;font-size:14pt;margin-bottom:-5px">

                <a href="https://docs.google.com/a/google.com/forms/d/1ANgYOoYLkfyZ2JRPSU34Nep5yNaU-Ha2syXJ9b4xLrA/viewform">Sign up for updates</a>

            </div>

          </div>



          <div class="landing-body">

            <p>We're working with developers to bring many popular apps to Android Auto:</p>

            <p>

            <p>In the coming months, we’ll be releasing the Android Auto SDK, which includes APIs

              and tools to make your existing apps compatible with Android Auto. The first version

              of the SDK will provide templates and APIs for music, podcast, live radio, and audio

              news apps, as well as limited voice actions.</p>

            <p style="margin-bottom:40px">

              Future versions of the Android Auto SDK will include support for a selection of

              Android notifications, additional voice actions, and templates and APIs for

              messaging, communication, local search, and more.</p>



              <a target="_blank" href="http://g.co/androidautodev">

                <img class="landing-social-image" src="//www.google.com/images/icons/product/gplus-128.png" alt="+Android Auto Developers">

              </a>

              <p>

                Join the Android Auto developer community on Google+ to stay involved, get the

                latest updates, and exchange experiences with other developers.

                <a target="_blank" href="http://g.co/androidautodev">+Android Auto Developers</a>

              </p>

          </div>



          <div class="cols">

            <div class="col-5">

              <img src="/auto/images/logos/apps/iheartradio.png"

                   width="120" height="120" class="img-logo" />

        </div> <!-- end .wrap -->

      </div> <!-- end .landing-section -->







      <div class="landing-section landing-gray-background" >

        <div class="wrap">

          <div class="landing-section-header">

            <div class="landing-h1">See What Others Have Done</div>

            <div class="landing-subhead">We're working with developers to bring many popular apps

            to Android Auto</div>

          </div>

            <div class="col-5">

          <div class="landing-body">

          <div class="cols">



            <div class="col-4">

              <img src="/auto/images/logos/apps/joyride.png"

                   width="120" height="120" class="img-logo" />

                   width="160" height="160" class="img-logo" />

            </div>

            <div class="col-5">

            <div class="col-4">

              <img src="/auto/images/logos/apps/mlb.png"

                   width="120" height="120" class="img-logo" />

                   width="160" height="160" class="img-logo" />

            </div>

            <div class="col-5">

            <div class="col-4">

              <img src="/auto/images/logos/apps/pandora.png"

                   width="120" height="120" class="img-logo" />

                   width="160" height="160" class="img-logo" />

            </div>

            <div class="col-5">

            <div class="col-4">

              <img src="/auto/images/logos/apps/pocketcasts.png"

                   width="120" height="120" class="img-logo" />

                   width="160" height="160" class="img-logo" />

            </div>

          </div>

          <div class="cols">

            <div class="col-5">

            <div class="col-4">

              <img src="/auto/images/logos/apps/songza.png"

                   width="120" height="120" class="img-logo" />

            </div>

            <div class="col-5">

              <img src="/auto/images/logos/apps/spotify.png"

                   width="120" height="120" class="img-logo" />

                   width="160" height="160" class="img-logo" />

            </div>

            <div class="col-5">

            <div class="col-4">

              <img src="/auto/images/logos/apps/stitcher.png"

                   width="120" height="120" class="img-logo" />

                   width="160" height="160" class="img-logo" />

            </div>

            <div class="col-5">

            <div class="col-4">

              <img src="/auto/images/logos/apps/tunein.png"

                   width="120" height="120" class="img-logo" />

                   width="160" height="160" class="img-logo" />

            </div>

            <div class="col-5">

            <div class="col-4">

              <img src="/auto/images/logos/apps/umano.png"

                   width="120" height="120" class="img-logo" />

                   width="160" height="160" class="img-logo" />

            </div>

          </div>

          <div class="cols" style="margin-top:40px">

             <div class="col-4">

                <img src="/auto/images/logos/apps/iheartradio.png"

                     width="160" height="160" class="img-logo" />

              </div>

              <div class="col-12">

                <p><em>

                "The Android Auto APIs provide an easy way to integrate the most important features and functionality of iHeartRadio’s robust music service into a safety-minded automotive infotainment solution. The process was seamless, utilizing a flexible construct that allowed us to quickly adapt our existing product without losing any of the core experience our listeners know and love."</em></p>



        </div> <!-- end .wrap -->

      </div> <!-- end .landing-section -->





      <div class="landing-section" style="background-color:#f5f5f5">

        <div class="wrap">

          <div class="landing-section-header">

            <div class="landing-pre-h1">Coming soon</div>

            <div class="landing-h1">Android Auto SDK</div>

            <div style="text-align:center;margin-top:20px;font-size:14pt;margin-bottom:-5px">

                <a href="https://docs.google.com/a/google.com/forms/d/1ANgYOoYLkfyZ2JRPSU34Nep5yNaU-Ha2syXJ9b4xLrA/viewform">Sign up for updates</a>

                <b>Ryan Goff<br>

                Director of Automotive Integrations for Clear Channel Media and Entertainment</b>

              </div>

          </div>

          <div class="cols" style="margin-top:60px">



          <div class="landing-body">

            <p>In the coming months, we’ll be releasing the Android Auto SDK, which includes APIs

              and tools to make your existing apps compatible with Android Auto. The first version

              of the SDK will provide templates and APIs for music, podcast, live radio, and audio

              news apps, as well as limited voice actions.</p>

            <p style="margin-bottom:40px">

              Future versions of the Android Auto SDK will include support for a selection of

              Android notifications, additional voice actions, and templates and APIs for

              messaging, communication, local search, and more.</p>



              <a target="_blank" href="http://g.co/androidautodev">

                <img class="landing-social-image" src="//www.google.com/images/icons/product/gplus-128.png" alt="+Android Auto Developers">

              </a>

              <p style="margin-bottom:5px">G+ Community</p>

              <p class="landing-small">

                Join the Android Auto developer community on Google+ to stay involved, get the

                latest updates, and exchange experiences with other developers.

                <a target="_blank" href="http://g.co/androidautodev">+Android Auto Developers</a>

              </p>

              <div class="col-4">

                <img src="/auto/images/logos/apps/spotify.png"

                     width="160" height="160" class="img-logo" />

              </div>

              <div class="col-12"><p style="margin-top:20px"><em>

              "Android Auto offers Spotify the exciting opportunity to easily enable safe access to millions of songs while driving. We were able to quickly develop for the platform using the new Android voice and media API extensions. As a result, Android users will soon be able to continue the Spotify experience in their cars, including being able to play any song, artist, album or playlist by voice.</em></p>

              </div>

          </div>

        </div>



      </div> <!-- end .wrap -->
@@ -309,9 +357,9 @@ page.type=about 
            <div class="landing-h1">Building an Ecosystem</div>

          </div>

          <div class="landing-body landing-align-center">

              <p style="margin-bottom:20px">

                Android Auto is coming soon to new cars from these manufacturers:

              </p>

              <div class="landing-subhead">

                Android Auto is coming soon to new cars from these manufacturers

              </div>

          </div>

          <div class="cols">

            <div class="col-5">
@@ -425,9 +473,9 @@ page.type=about 
          </div>



          <div class="landing-body landing-align-center">

              <p style="margin-top:80px;margin-bottom:20px">

              <div class="landing-subhead" style="margin-top:80px">

                Android Auto is also coming soon to aftermarket systems from these manufacturers:

              </p>

              </div>

          </div>

          <div class="cols">

            <div class="col-5">
@@ -519,7 +567,6 @@ page.type=about 
          </div>

        </div> <!-- end .wrap -->

      </div> <!-- end .landing-section -->



    </div> <!-- end .landing-rest-of-page -->