docs: Further work on the Android Auto dev site
Added partner logos (car OEMs, aftermarket, apps)
Added platform screenshots to the hero page
Change-Id: I41669dd4ec29569f300b64ed9689c0a8dd78fda4
diff --git a/docs/html/auto/index.jd b/docs/html/auto/index.jd
index c7a3a4e..810fc67 100644
--- a/docs/html/auto/index.jd
+++ b/docs/html/auto/index.jd
@@ -23,6 +23,34 @@
#hero-height {
height:calc(100% - 100px);
}
+.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>
@@ -40,13 +68,14 @@
<div class="landing-h1 hero">Android Auto</div>
<div class="landing-subhead hero">Entertainment and services on your dashboard</div>
<div class="landing-hero-description">
- <p>Display and control your handheld app in vehicles.
+ <p style="width:450px">Display and control your handheld app in vehicles.
Build apps with easy-to-use UI templates that
let users keep their eyes on the road.</p>
</div>
<div class="landing-body">
- <a href="{@docRoot}auto/overview.html" class="landing-button landing-primary" style="margin-top: 40px;">
+ <a href="{@docRoot}auto/overview.html" class="landing-button landing-primary"
+ style="margin-top:40px;font-weight:300">
Developer Overview
</a>
</div>
@@ -68,17 +97,32 @@
<div class="landing-section landing-gray-background" id="android-in-car">
<div class="wrap">
<div class="landing-section-header">
- <div class="landing-h1">Bringing Android to Your Car</div>
+ <div class="landing-h1">Create Experiences for the Car</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="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" />
+ </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" />
+ </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 to run.
- </p>
- <p>Android Auto provides new APIs and tools that your existing Android apps can
- leverage to run on any compatible vehicle. Users interact with your apps through the
- touch screen and the physical buttons on the vehicle’s dashboard. Your apps can also
- respond to voice commands.
+ system shows an interface that lets users select compatible apps and services.</p>
</p>
</div>
@@ -93,14 +137,32 @@
</div>
<div class="landing-body">
- <p>Android Auto is an extension of the Android platform. You can easily adapt
- existing apps for Android Auto and reuse many of the Android APIs and services you
- are already familiar with.</p>
- <p>The Android Auto platform and SDK let you write your apps only once, without having
+ <p>You can easily adapt existing apps for Android Auto and use many of the APIs you
+ already know.</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/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/02_b_switcher.gif" />
+ </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>
</div>
+
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
@@ -114,28 +176,31 @@
<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" />
+ </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" />
+ </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>
</div>
- </div> <!-- end .wrap -->
- </div> <!-- end .landing-section -->
- <div class="landing-section landing-white-background">
- <div class="wrap">
- <div class="landing-section-header">
- <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>
- <div style="width:800px;margin:0 auto">
- <img src="{@docRoot}auto/images/carlogos.png" alt="Partners" />
- </div>
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
@@ -153,6 +218,51 @@
</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>
+ <div class="col-5">
+ <img src="/auto/images/logos/apps/joyride.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/apps/mlb.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/apps/pandora.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/apps/pocketcasts.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ </div>
+ <div class="cols">
+ <div class="col-5">
+ <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" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/apps/stitcher.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/apps/tunein.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/apps/umano.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ </div>
+
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
@@ -191,6 +301,225 @@
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
+
+
+ <div class="landing-section landing-white-background">
+ <div class="wrap">
+ <div class="landing-section-header">
+ <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>
+ <div class="cols">
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/acura.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/audi.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/bentley.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/chevrolet.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/chrysler.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ </div>
+ <div class="cols">
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/datsun.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/fiat.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/honda.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/hyundai.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/infinity.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ </div>
+ <div class="cols">
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/kia.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/maserati.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/mazda.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/mercedesbenz.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/mitsubishi.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ </div>
+ <div class="cols">
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/nissan.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/opel.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/renault.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/seat.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/skoda.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ </div>
+ <div class="cols">
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/subaru.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/suzuki.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/volkswagen.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/auto/volvo.png"
+ width="120" height="120" class="img-logo" />
+ </div>
+ <div class="col-5">
+ <!--<img src="/auto/images/logos/auto/skoda.png"
+ width="120" height="120" class="img-logo" />-->
+ </div>
+ </div>
+
+ <div class="landing-body landing-align-center">
+ <p style="margin-top:80px;margin-bottom:20px">
+ Android Auto is also coming soon to aftermarket systems from these manufacturers:
+ </p>
+ </div>
+ <div class="cols">
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/alpine.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/clarion.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/cloudcar.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/delphi.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/freescale.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ </div>
+ <div class="cols">
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/fujitsuten.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/harman.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/jvc.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/kenwood.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/lg.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ </div>
+ <div class="cols">
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/panasonic.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/parrot.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/pioneer.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/renesas.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/symphonyteleca.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ </div>
+ <div class="cols">
+ <div class="col-5">
+ <img src="/auto/images/logos/hard/texasinstruments.png"
+ width="120" height="120" class="img-logo-thin" />
+ </div>
+ <div class="col-5">
+ <!--<img src="/auto/images/logos/hard/.png"
+ width="120" height="120" class="img-logo-thin" />-->
+ </div>
+ <div class="col-5">
+ <!--<img src="/auto/images/logos/hard/.png"
+ width="120" height="120" class="img-logo-thin" />-->
+ </div>
+ <div class="col-5">
+ <!--<img src="/auto/images/logos/hard/.png"
+ width="120" height="120" class="img-logo-thin" />-->
+ </div>
+ <div class="col-5">
+ <!--<img src="/auto/images/logos/hard/.png"
+ width="120" height="120" class="img-logo-thin" />-->
+ </div>
+ </div>
+ </div> <!-- end .wrap -->
+ </div> <!-- end .landing-section -->
+
</div> <!-- end .landing-rest-of-page -->