2011-12-22 16:18:19 -08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
|
<title>
|
|
|
|
|
|
|
|
|
|
Android Design - Application Structure
|
|
|
|
|
</title>
|
|
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
|
|
|
|
|
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
|
|
|
|
|
<link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
|
|
|
|
|
<link rel="stylesheet" href="../static/default.css">
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div id="page-container">
|
|
|
|
|
|
|
|
|
|
<div id="page-header"><a href="../index.html">Android Design</a></div>
|
|
|
|
|
|
|
|
|
|
<div id="main-row">
|
|
|
|
|
|
|
|
|
|
<ul id="nav">
|
|
|
|
|
|
|
|
|
|
<li class="nav-section">
|
|
|
|
|
<div class="nav-section-header"><a href="../index.html">Get Started</a></div>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
|
|
|
|
|
<li><a href="../get-started/principles.html">Design Principles</a></li>
|
|
|
|
|
<li><a href="../get-started/ui-overview.html">UI Overview</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="nav-section">
|
|
|
|
|
<div class="nav-section-header"><a href="../style/index.html">Style</a></div>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="../style/devices-displays.html">Devices and Displays</a></li>
|
|
|
|
|
<li><a href="../style/themes.html">Themes</a></li>
|
|
|
|
|
<li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
|
|
|
|
|
<li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
|
|
|
|
|
<li><a href="../style/typography.html">Typography</a></li>
|
|
|
|
|
<li><a href="../style/color.html">Color</a></li>
|
|
|
|
|
<li><a href="../style/iconography.html">Iconography</a></li>
|
|
|
|
|
<li><a href="../style/writing.html">Writing Style</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="nav-section">
|
|
|
|
|
<div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
|
|
|
|
|
<li><a href="../patterns/gestures.html">Gestures</a></li>
|
|
|
|
|
<li><a href="../patterns/app-structure.html">App Structure</a></li>
|
|
|
|
|
<li><a href="../patterns/navigation.html">Navigation</a></li>
|
|
|
|
|
<li><a href="../patterns/actionbar.html">Action Bar</a></li>
|
|
|
|
|
<li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
|
|
|
|
|
<li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
|
|
|
|
|
<li><a href="../patterns/selection.html">Selection</a></li>
|
|
|
|
|
<li><a href="../patterns/notifications.html">Notifications</a></li>
|
|
|
|
|
<li><a href="../patterns/compatibility.html">Compatibility</a></li>
|
|
|
|
|
<li><a href="../patterns/pure-android.html">Pure Android</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="nav-section">
|
|
|
|
|
<div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="../building-blocks/tabs.html">Tabs</a></li>
|
|
|
|
|
<li><a href="../building-blocks/lists.html">Lists</a></li>
|
|
|
|
|
<li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
|
|
|
|
|
<li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
|
|
|
|
|
<li><a href="../building-blocks/spinners.html">Spinners</a></li>
|
|
|
|
|
<li><a href="../building-blocks/buttons.html">Buttons</a></li>
|
|
|
|
|
<li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
|
|
|
|
|
<li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
|
|
|
|
|
<li><a href="../building-blocks/progress.html">Progress & Activity</a></li>
|
|
|
|
|
<li><a href="../building-blocks/switches.html">Switches</a></li>
|
|
|
|
|
<li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
|
|
|
|
|
<li><a href="../building-blocks/pickers.html">Pickers</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
|
2012-02-29 11:59:32 -08:00
|
|
|
<li class="nav-section">
|
|
|
|
|
<div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div>
|
|
|
|
|
</li>
|
|
|
|
|
|
2011-12-22 16:18:19 -08:00
|
|
|
<li>
|
2012-01-10 23:59:20 -08:00
|
|
|
<div id="back-dac-section"><a href="../../index.html">Developers</a></div>
|
2011-12-22 16:18:19 -08:00
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<div id="content">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="layout-content-row content-header">
|
|
|
|
|
<div class="layout-content-col span-9">
|
|
|
|
|
<h2>Application Structure</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="paging-links layout-content-col span-4">
|
|
|
|
|
<a href="#" class="prev-page-link">Previous</a>
|
|
|
|
|
<a href="#" class="next-page-link">Next</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>Apps come in many varieties that address very different needs. For example:</p>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Apps such as Calculator or Camera that are built around a single focused activity handled from a
|
|
|
|
|
single screen</li>
|
|
|
|
|
<li>Apps such as Phone whose main purpose is to switch between different activities without deeper
|
|
|
|
|
navigation</li>
|
|
|
|
|
<li>Apps such as Gmail or Market that combine a broad set of data views with deep navigation</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p>
|
2012-02-29 11:59:32 -08:00
|
|
|
<h2 id="general-structure">General Structure</h2>
|
|
|
|
|
|
2011-12-22 16:18:19 -08:00
|
|
|
<p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is
|
|
|
|
|
deep and complex, category views connect top level and detail views.</p>
|
|
|
|
|
|
|
|
|
|
<div class="layout-content-row">
|
|
|
|
|
<div class="layout-content-col span-9">
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_overview.png">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layout-content-col span-4">
|
|
|
|
|
|
|
|
|
|
<h4>Top level views</h4>
|
|
|
|
|
<p>The top level of the app typically consists of the different views that your app supports. The views
|
|
|
|
|
either show different representations of the same data or expose an altogether different functional
|
|
|
|
|
facet of your app.</p>
|
|
|
|
|
<div class="vspace size-3"> </div>
|
|
|
|
|
|
|
|
|
|
<h4>Category views</h4>
|
|
|
|
|
<p>Category views allow you to drill deeper into your data.</p>
|
|
|
|
|
<div class="vspace size-11"> </div>
|
|
|
|
|
|
|
|
|
|
<h4>Detail/edit view</h4>
|
|
|
|
|
<p>The detail/edit view is where you consume or create data.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2012-02-29 11:59:32 -08:00
|
|
|
<h2 id="top-level">Top Level</h2>
|
|
|
|
|
|
2011-12-22 16:18:19 -08:00
|
|
|
<p>The layout of your start screen requires special attention. This is the first screen people see
|
|
|
|
|
after launching your app, so it should be an equally rewarding experience for new and frequent
|
|
|
|
|
visitors alike.</p>
|
|
|
|
|
<p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure
|
|
|
|
|
your start screen experience accordingly.</p>
|
|
|
|
|
|
|
|
|
|
<div class="layout-content-row">
|
|
|
|
|
<div class="layout-content-col span-5">
|
|
|
|
|
|
|
|
|
|
<h4>Put content forward</h4>
|
|
|
|
|
<p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to
|
|
|
|
|
the meat of your app right away by making content the centerpiece of your start screen. Choose
|
|
|
|
|
layouts that are visually engaging and appropriate for the data type and screen size.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layout-content-col span-8">
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_market.png">
|
|
|
|
|
<div class="figure-caption">
|
2012-01-23 11:23:46 -08:00
|
|
|
Market's start screen primarily allows navigation into the stores for Apps, Music, Books,
|
|
|
|
|
Movies and Games. It is also enriched with tailored recommendations and promotions that
|
|
|
|
|
surface content of interest to the user. Search is readily available from the action bar.
|
2011-12-22 16:18:19 -08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layout-content-row">
|
|
|
|
|
<div class="layout-content-col span-5">
|
|
|
|
|
|
|
|
|
|
<h4>Set up action bars for navigation and actions</h4>
|
|
|
|
|
<p>All screens in your app should display action bars to provide consistent navigation and surface
|
|
|
|
|
important actions.</p>
|
|
|
|
|
<p>At the top level, special considerations apply to the action bar:</p>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Use the action bar to display your app's icon or title.</li>
|
|
|
|
|
<li>If your top level consists of multiple views, or if switching between data from different user
|
|
|
|
|
accounts is a significant use case, make sure that it's easy for the user to navigate between them
|
|
|
|
|
by adding view controls to your action bar.</li>
|
|
|
|
|
<li>If your app allows people to create content, consider making the content accessible right from the
|
|
|
|
|
top level.</li>
|
|
|
|
|
<li>If your content is searchable, include the Search action in the action bar so people can cut
|
|
|
|
|
through the navigation hierarchy.</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layout-content-col span-8">
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_gmail.png">
|
|
|
|
|
<div class="figure-caption">
|
|
|
|
|
Email is about productivity, so an efficient, easy-to-skim list with higher data density works
|
|
|
|
|
well. Navigation supports switching between accounts and recent labels. Icons for creating a
|
|
|
|
|
new message or searching are prominent in the split action bar at the bottom.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layout-content-row">
|
|
|
|
|
<div class="layout-content-col span-5">
|
|
|
|
|
|
|
|
|
|
<h4>Create an identity for your app</h4>
|
|
|
|
|
<p>Creating an identity for your app goes beyond the action bar. Your app communicates its identity
|
|
|
|
|
through its data, the way that data is arranged, and how people interact with it. Especially for
|
|
|
|
|
media-rich applications, try to create unique layouts that showcase your data and go beyond the
|
|
|
|
|
monotony of simple list views.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layout-content-col span-8">
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_music_lndscp.png">
|
|
|
|
|
<div class="figure-caption">
|
|
|
|
|
The 3D carousel celebrates cover art and establishes a unique identity for the Music app.
|
|
|
|
|
Defaulting to the Recent view keeps the focus on music the user has been listening to lately.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2012-02-29 11:59:32 -08:00
|
|
|
<h2 id="categories">Categories</h2>
|
|
|
|
|
|
2011-12-22 16:18:19 -08:00
|
|
|
<p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories
|
|
|
|
|
to the detail level, where data can be viewed and managed. Minimize perceived navigation effort by
|
|
|
|
|
keeping your apps shallow.</p>
|
|
|
|
|
<p>Even though the number of vertical navigation steps from the top level down to the detail views is
|
|
|
|
|
typically dictated by the structure of your app's content, there are several ways you can cut down
|
|
|
|
|
on the perception of onerous navigation.</p>
|
|
|
|
|
<h4>Use tabs to combine category selection and data display</h4>
|
|
|
|
|
<p>This can be successful if the categories are familiar or the number of categories is small. It has
|
|
|
|
|
the advantage that a level of hierarchy is removed and data remains at the center of the user's
|
|
|
|
|
attention. Navigating laterally between data-rich categories is more akin to a casual browsing
|
|
|
|
|
experience than to an explicit navigation step.</p>
|
|
|
|
|
|
|
|
|
|
<div class="vspace size-1"> </div>
|
|
|
|
|
|
|
|
|
|
<div class="layout-content-row">
|
|
|
|
|
<div class="layout-content-col span-8">
|
|
|
|
|
|
|
|
|
|
<p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all
|
|
|
|
|
items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to
|
|
|
|
|
minimize navigational effort. Rule of thumb: no more than 5–7 tabs.</p>
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_scrolltabs.png">
|
|
|
|
|
<div class="figure-caption">
|
|
|
|
|
Market uses tabs to simultaneously show category choice and content. To navigate between
|
|
|
|
|
categories, users can swipe left/right on the content.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layout-content-col span-5">
|
|
|
|
|
|
|
|
|
|
<p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are
|
|
|
|
|
in view at the same time.</p>
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_fixedtabs.png">
|
|
|
|
|
<div class="figure-caption">
|
|
|
|
|
YouTube uses fixed tabs to switch between different, relatively unrelated functional areas.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h4>Allow cutting through hierarchies</h4>
|
|
|
|
|
<p>Take advantage of shortcuts that allow people to reach their goals quicker. To allow top-level
|
|
|
|
|
invocation of actions for a data item from within list or grid views, display prominent actions
|
|
|
|
|
directly on list view items using drop-downs or split list items. This lets people invoke actions on
|
|
|
|
|
data without having to navigate all the way down the hierarchy.</p>
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_shortcut_on_item.png">
|
|
|
|
|
<div class="figure-caption">
|
|
|
|
|
Music allows the user to act upon a data item (song) from within the category view (album),
|
|
|
|
|
thereby removing the need to navigate all the way down to the song's detail view.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h4>Acting upon multiple data items</h4>
|
|
|
|
|
<p>Even though category views mostly serve to guide people to content detail, keep in mind that there
|
|
|
|
|
are often good reasons to act on collections of data as well.</p>
|
|
|
|
|
<p>For example, if you allow people to delete an item in a detail view, you should also allow them to
|
|
|
|
|
delete multiple items in the category view. Analyze which detail view actions are applicable to
|
|
|
|
|
collections of items. Then use multi-select to allow application of those actions to multiple items
|
|
|
|
|
in a category view.</p>
|
2012-02-29 11:59:32 -08:00
|
|
|
<h2 id="details">Details</h2>
|
|
|
|
|
|
2011-12-22 16:18:19 -08:00
|
|
|
<p>The detail view allows you to view and act on your data. The layout of the detail view depends on
|
|
|
|
|
the data type being displayed, and therefore differs widely among apps.</p>
|
|
|
|
|
|
|
|
|
|
<div class="layout-content-row">
|
|
|
|
|
<div class="layout-content-col span-4">
|
|
|
|
|
|
|
|
|
|
<h4>Layout</h4>
|
|
|
|
|
<p>Consider the activities people will perform in the detail view and arrange the layout accordingly.
|
|
|
|
|
For immersive content, make use of the lights-out mode to allow for distraction-free viewing of
|
|
|
|
|
full-screen content.</p>
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_people_detail.png">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layout-content-col span-9">
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_book_detail_page_flip.png">
|
|
|
|
|
<div class="figure-caption">
|
|
|
|
|
Google Books' detail view is all about replicating the experience of reading an actual book.
|
|
|
|
|
The page-flip animation reinforces that notion. To create an immersive experience the app
|
|
|
|
|
enters lights-out mode, which hides all system UI affordances.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="figure-caption">
|
|
|
|
|
The purpose of the People app's detail view is to surface communication options. The list view
|
|
|
|
|
allows for efficient scanning and quick access of phone numbers, email addresses and other
|
|
|
|
|
information items. Split items are used to combine calling and messaging into one compact line
|
|
|
|
|
item.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h4>Make navigation between detail views efficient</h4>
|
|
|
|
|
<p>If your users are likely to want to look at multiple items in sequence, allow them to navigate
|
|
|
|
|
between items from within the detail view. Use swipe views or other techniques, such as filmstrips,
|
|
|
|
|
to achieve this.</p>
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_gmail_swipe.png">
|
|
|
|
|
<div class="figure-caption">
|
|
|
|
|
Gmail using swipe views to navigate from detail view to detail view.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<img src="../static/content/app_structure_gallery_filmstrip.png">
|
|
|
|
|
<div class="figure-caption">
|
|
|
|
|
In addition to supporting swipe gestures to move left or right through images, Gallery provides a
|
|
|
|
|
filmstrip control that lets people quickly jump to specific images.
|
|
|
|
|
</div>
|
|
|
|
|
|
2012-02-29 11:59:32 -08:00
|
|
|
<h2 id="checklist">Checklist</h2>
|
|
|
|
|
|
2011-12-22 16:18:19 -08:00
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
<p>Find ways to display useful content on your start screen.</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>Use action bars to provide consistent navigation.</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>Keep your hierarchies shallow by using horizontal navigation and shortcuts.</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>Use multi-select to allow the user to act on collections of data.</p>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>Allow for quick navigation between detail items with swipe views.</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="layout-content-row content-footer">
|
|
|
|
|
<div class="paging-links layout-content-col span-9"> </div>
|
|
|
|
|
<div class="paging-links layout-content-col span-4">
|
|
|
|
|
<a href="#" class="prev-page-link">Previous</a>
|
|
|
|
|
<a href="#" class="next-page-link">Next</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="page-footer">
|
|
|
|
|
|
|
|
|
|
<p id="copyright">
|
|
|
|
|
Except as noted, this content is licensed under
|
2012-01-10 23:59:20 -08:00
|
|
|
<a href="http://creativecommons.org/licenses/by/2.5/">
|
2011-12-22 16:18:19 -08:00
|
|
|
Creative Commons Attribution 2.5</a>.<br>
|
|
|
|
|
For details and restrictions, see the
|
2012-01-10 23:59:20 -08:00
|
|
|
<a href="http://developer.android.com/license.html">Content License</a>.
|
2011-12-22 16:18:19 -08:00
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<p>
|
2012-01-10 23:59:20 -08:00
|
|
|
<a href="http://www.android.com/terms.html">Site Terms of Service</a> –
|
|
|
|
|
<a href="http://www.android.com/privacy.html">Privacy Policy</a> –
|
|
|
|
|
<a href="http://www.android.com/branding.html">Brand Guidelines</a>
|
2011-12-22 16:18:19 -08:00
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="../static/jquery-1.6.2.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
var SITE_ROOT = '../';
|
|
|
|
|
</script>
|
|
|
|
|
<script src="../static/default.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
|
|
|
|
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
|
|
|
|
</script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var pageTracker = _gat._getTracker("UA-5831155-1");
|
|
|
|
|
pageTracker._trackPageview();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
