Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
477 lines
22 KiB
HTML
Executable file
477 lines
22 KiB
HTML
Executable file
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
|
||
<meta charset="utf-8">
|
||
<meta name="theme-color" content="#eeeeee">
|
||
<title data-l10n-id="fte">Usage First Time Experience</title>
|
||
|
||
<!-- Building blocks -->
|
||
<link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
|
||
<link rel="stylesheet" type="text/css" href="shared/style/input_areas.css">
|
||
<link rel="stylesheet" type="text/css" href="shared/style/layout.css">
|
||
|
||
<!-- App and Views -->
|
||
<link rel="stylesheet" type="text/css" href="style/app.css">
|
||
<link rel="stylesheet" type="text/css" href="style/views/settings.css">
|
||
<link rel="stylesheet" type="text/css" href="style/views/firsttime.css">
|
||
<link rel="stylesheet" type="text/css" href="style/views/datalimits.css">
|
||
|
||
<!-- Gaia Components -->
|
||
<link rel="stylesheet" type="text/css" href="app://theme.gaiamobile.org/shared/elements/gaia-theme/gaia-theme.css">
|
||
<link rel="stylesheet" type="text/css" href="/shared/elements/gaia-icons/gaia-icons.css">
|
||
|
||
<!-- Localization -->
|
||
<meta name="defaultLanguage" content="en-US">
|
||
<meta name="availableLanguages" content="en-US">
|
||
<link rel="localization" href="locales/costcontrol.{locale}.properties">
|
||
<link rel="localization" href="/shared/locales/date/date.{locale}.properties">
|
||
|
||
<!-- Firefox Desktop shims -->
|
||
<script defer src="js/desktop-only/navigator_moz_settings.js"></script>
|
||
<script defer src="js/desktop-only/navigator_moz_icc_manager.js"></script>
|
||
<script defer src="js/desktop-only/navigator_moz_mobile_connections.js"></script>
|
||
<script defer src="js/desktop-only/navigator_moz_network_stats.js"></script>
|
||
<script defer src="js/desktop-only/navigator_moz_alarms.js"></script>
|
||
<script defer src="js/desktop-only/async_storage.js"></script>
|
||
|
||
<!-- Shared code -->
|
||
<script type="text/javascript" src="shared/js/l10n.js"></script>
|
||
<script type="text/javascript" defer src="shared/js/format.js"></script>
|
||
<script type="text/javascript" src="shared/js/async_storage.js"></script>
|
||
<script type="text/javascript" src="shared/js/settings_listener.js"></script>
|
||
<script type="text/javascript" src="shared/js/lazy_loader.js"></script>
|
||
|
||
<!-- Gaia Components -->
|
||
<script defer src="/shared/elements/config.js"></script>
|
||
<script defer src="/shared/js/component_utils.js"></script>
|
||
<script defer src="/shared/elements/gaia-header/dist/gaia-header.js"></script>
|
||
<script defer src="/shared/elements/gaia_buttons/script.js"></script>
|
||
<script defer src="/shared/elements/gaia_select/script.js"></script>
|
||
<script defer src="/shared/elements/gaia_switch/script.js"></script>
|
||
<script defer src="/shared/elements/gaia_radio/script.js"></script>
|
||
|
||
<!-- Specific code -->
|
||
<script type="text/javascript" defer src="js/fte.js"></script>
|
||
</head>
|
||
|
||
<body role="application" class="theme-settings skin-organic">
|
||
|
||
<!-- First time experience -->
|
||
<section id="firsttime-view" class="view step-1">
|
||
|
||
<!-- Global Step 1 -->
|
||
<section role="region" class="view step" data-viewport="" id="step-1">
|
||
<gaia-header>
|
||
<h1 data-l10n-id="fte-welcome-title"></h1>
|
||
</gaia-header>
|
||
<section class="content vbox">
|
||
<div class="authed-sim" hidden>
|
||
<h2 data-l10n-id="fte-authed-sim">Save money by keeping track of your phone and internet usage.</h2>
|
||
</div>
|
||
<div class="nonauthed-sim" hidden>
|
||
<h2 data-l10n-id="fte-nonauthed-sim">Save money by keeping track of your internet usage.</h2>
|
||
</div>
|
||
<div class="no-sim" hidden>
|
||
<h2 data-l10n-id="fte-no-sim">Get clear information about how much internet you're using.</h2>
|
||
</div>
|
||
<p data-l10n-id="fte-sim-info2" class="info">Information shown on usage comes directly from this device. Check with your mobile service provider for detailed account information.</p>
|
||
</section>
|
||
<gaia-buttons>
|
||
<button class="recommend icon icon-next" data-navigation="next" data-l10n-id="next">Next</button>
|
||
</gaia-buttons>
|
||
</section>
|
||
|
||
<!-- Step 2 -->
|
||
<section role="region" class="view step gaia-list" data-viewport="right" id="step-2">
|
||
<gaia-header>
|
||
<h1 data-l10n-id="fte-plantype-title"></h1>
|
||
</gaia-header>
|
||
<ul class="content choices">
|
||
<li class="active">
|
||
<gaia-radio name="plan" id="prepaid-plan" value="prepaid">
|
||
<label data-l10n-id="im-prepaid"></label>
|
||
</gaia-radio>
|
||
</li>
|
||
<li class="active">
|
||
<gaia-radio name="plan" id="postpaid-plan" value="postpaid">
|
||
<label data-l10n-id="im-postpaid"></label>
|
||
</gaia-radio>
|
||
</li>
|
||
<li>
|
||
<p data-l10n-id="fte-plantype-hint">Select the type of contract you have with your mobile service provider.</p>
|
||
</li>
|
||
</ul>
|
||
<gaia-buttons data-items="2">
|
||
<button data-navigation="back" class="icon icon-previous" data-l10n-id="back">Back</button>
|
||
<button id="to-step-2" class="recommend icon icon-next" data-navigation="next" data-l10n-id="next">Next</button>
|
||
</gaia-buttons>
|
||
</section>
|
||
|
||
<!-- Prepaid step 2 -->
|
||
<section role="region" class="view step gaia-list" data-viewport="right" id="prepaid-step-2">
|
||
<gaia-header>
|
||
<h1 data-l10n-id="fte-prepaid2-title"></h1>
|
||
</gaia-header>
|
||
<section class="content">
|
||
<ul class="settings">
|
||
<li class="active">
|
||
<gaia-switch id="low-limit" class="settings-option" data-option="lowLimit">
|
||
<label data-l10n-id="low-balance-alert"></label>
|
||
</gaia-switch>
|
||
</li>
|
||
<li class="vbox">
|
||
<label class="end" for="low-limit-input" data-l10n-id="low-balance-explanation2">When balance is below</label>
|
||
<div class="low-limit-container hbox middle">
|
||
<input id="low-limit-input" class="settings-option" data-option="lowLimitThreshold" data-disable-on="lowLimit=false" type="number" step="any">
|
||
<span id="currency" dir="auto"></span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<p data-l10n-id="fte-prepaid2-hint">Set an alert to avoid running out of credit.</p>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<gaia-buttons data-items="2">
|
||
<button data-navigation="back" class="icon icon-previous" data-l10n-id="back">Back</button>
|
||
<button id="low-limit-next-button" class="recommend icon icon-next" data-navigation="next" data-l10n-id="next">Next</button>
|
||
</gaia-buttons>
|
||
</section>
|
||
|
||
<!-- Prepaid step 3 -->
|
||
<section role="region" class="view step gaia-list" data-viewport="right" id="prepaid-step-3">
|
||
<gaia-header>
|
||
<h1 data-l10n-id="fte-prepaid3-title"></h1>
|
||
</gaia-header>
|
||
<section class="content">
|
||
<ul class="settings">
|
||
<li class="vbox">
|
||
<gaia-select>
|
||
<label data-l10n-id="reset-report">Reset report</label>
|
||
<select class="settings-option" data-option="trackingPeriod">
|
||
<option value="monthly" data-l10n-id="monthly">Monthly</option>
|
||
<option value="weekly" data-l10n-id="weekly">Weekly</option>
|
||
<option value="never" data-l10n-id="never">Never</option>
|
||
</select>
|
||
</gaia-select>
|
||
</li>
|
||
<li class="vbox">
|
||
<gaia-select>
|
||
<label data-l10n-id="starting-on">Starting on</label>
|
||
<select id="pre3-select-weekday" class="settings-option" data-option="resetTime" data-hide-on="trackingPeriod!=weekly" data-disable-on="trackingPeriod!=weekly">
|
||
<option class="monday" value="1" data-l10n-id="monday">Monday</option>
|
||
<option value="2" data-l10n-id="tuesday">Tuesday</option>
|
||
<option value="3" data-l10n-id="wednesday">Wednesday</option>
|
||
<option value="4" data-l10n-id="thursday">Thursday</option>
|
||
<option value="5" data-l10n-id="friday">Friday</option>
|
||
<option value="6" data-l10n-id="saturday">Saturday</option>
|
||
<option class="sunday" value="0" data-l10n-id="sunday">Sunday</option>
|
||
</select>
|
||
</gaia-select>
|
||
</li>
|
||
<li class="vbox">
|
||
<gaia-select>
|
||
<label data-l10n-id="starting-on">Starting on</label>
|
||
<select class="settings-option icon icon-dialog" data-option="resetTime" data-hide-on="trackingPeriod!=monthly" data-disable-on="trackingPeriod!=monthly">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
<option value="6">6</option>
|
||
<option value="7">7</option>
|
||
<option value="8">8</option>
|
||
<option value="9">9</option>
|
||
<option value="10">10</option>
|
||
<option value="11">11</option>
|
||
<option value="12">12</option>
|
||
<option value="13">13</option>
|
||
<option value="14">14</option>
|
||
<option value="15">15</option>
|
||
<option value="16">16</option>
|
||
<option value="17">17</option>
|
||
<option value="18">18</option>
|
||
<option value="19">19</option>
|
||
<option value="20">20</option>
|
||
<option value="21">21</option>
|
||
<option value="22">22</option>
|
||
<option value="23">23</option>
|
||
<option value="24">24</option>
|
||
<option value="25">25</option>
|
||
<option value="26">26</option>
|
||
<option value="27">27</option>
|
||
<option value="28">28</option>
|
||
<option value="29">29</option>
|
||
<option value="30">30</option>
|
||
<option value="31">31</option>
|
||
</select>
|
||
</gaia-select>
|
||
</li>
|
||
<li class="active">
|
||
<gaia-switch class="settings-option" data-option="dataLimit">
|
||
<label data-l10n-id="data-limit-alert"></label>
|
||
</gaia-switch>
|
||
</li>
|
||
<li class="vbox">
|
||
<p data-l10n-id="data-limit-value2">When use is above</p>
|
||
<button class="settings-option icon icon-dialog" data-widget-type="data-limit" data-disable-on="dataLimit=false" data-hide-on="dataLimit=false">
|
||
<span class="tag"></span>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<p data-l10n-id="fte-prepaid3-hint">Receive reports about your Internet usage and set an alert to avoid using too much.</p>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<gaia-buttons data-items="2">
|
||
<button data-navigation="back" class="icon icon-previous" data-l10n-id="back">Back</button>
|
||
<button class="recommend" data-navigation="finish" span data-l10n-id="lets-go">Let’s go!</button>
|
||
</gaia-buttons>
|
||
</section>
|
||
|
||
<!-- Postpaid step 2 -->
|
||
<section role="region" class="view step gaia-list" data-viewport="right" id="postpaid-step-2">
|
||
<gaia-header>
|
||
<h1 data-l10n-id="fte-postpaid2-title"></h1>
|
||
</gaia-header>
|
||
<ul class="content settings">
|
||
<li class="vbox">
|
||
<gaia-select>
|
||
<label data-l10n-id="reset-report">Reset report</label>
|
||
<select class="settings-option" data-option="trackingPeriod">
|
||
<option value="monthly" data-l10n-id="monthly">Monthly</option>
|
||
<option value="weekly" data-l10n-id="weekly">Weekly</option>
|
||
<option value="never" data-l10n-id="never">Never</option>
|
||
</select>
|
||
</gaia-select>
|
||
</li>
|
||
<li class="vbox">
|
||
<gaia-select>
|
||
<label data-l10n-id="starting-on">Starting on</label>
|
||
<select id="post2-select-weekday" class="settings-option" data-option="resetTime" data-hide-on="trackingPeriod!=weekly" data-disable-on="trackingPeriod!=weekly">
|
||
<option class="monday" value="1" data-l10n-id="monday">Monday</option>
|
||
<option value="2" data-l10n-id="tuesday">Tuesday</option>
|
||
<option value="3" data-l10n-id="wednesday">Wednesday</option>
|
||
<option value="4" data-l10n-id="thursday">Thursday</option>
|
||
<option value="5" data-l10n-id="friday">Friday</option>
|
||
<option value="6" data-l10n-id="saturday">Saturday</option>
|
||
<option class="sunday" value="0" data-l10n-id="sunday">Sunday</option>
|
||
</select>
|
||
</gaia-select>
|
||
</li>
|
||
<li class="vbox">
|
||
<gaia-select>
|
||
<label data-l10n-id="starting-on">Starting on</label>
|
||
<select class="settings-option icon icon-dialog" data-option="resetTime" data-hide-on="trackingPeriod!=monthly" data-disable-on="trackingPeriod!=monthly">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
<option value="6">6</option>
|
||
<option value="7">7</option>
|
||
<option value="8">8</option>
|
||
<option value="9">9</option>
|
||
<option value="10">10</option>
|
||
<option value="11">11</option>
|
||
<option value="12">12</option>
|
||
<option value="13">13</option>
|
||
<option value="14">14</option>
|
||
<option value="15">15</option>
|
||
<option value="16">16</option>
|
||
<option value="17">17</option>
|
||
<option value="18">18</option>
|
||
<option value="19">19</option>
|
||
<option value="20">20</option>
|
||
<option value="21">21</option>
|
||
<option value="22">22</option>
|
||
<option value="23">23</option>
|
||
<option value="24">24</option>
|
||
<option value="25">25</option>
|
||
<option value="26">26</option>
|
||
<option value="27">27</option>
|
||
<option value="28">28</option>
|
||
<option value="29">29</option>
|
||
<option value="30">30</option>
|
||
<option value="31">31</option>
|
||
</select>
|
||
</gaia-select>
|
||
</li>
|
||
<li>
|
||
<p data-l10n-id="fte-postpaid2-hint">Receive reports about your phone and Internet usage.</p>
|
||
</li>
|
||
</ul>
|
||
<gaia-buttons data-items="2">
|
||
<button data-navigation="back" class="icon icon-previous" data-l10n-id="back">Back</button>
|
||
<button class="recommend icon icon-next" data-navigation="next" data-l10n-id="next">Next</button>
|
||
</gaia-buttons>
|
||
</section>
|
||
|
||
<!-- Postpaid step 3 -->
|
||
<section role="region" class="view step gaia-list" data-viewport="right" id="postpaid-step-3">
|
||
<gaia-header>
|
||
<h1 data-l10n-id="fte-postpaid3-title"></h1>
|
||
</gaia-header>
|
||
<section class="content">
|
||
<ul class="settings">
|
||
<li class="active">
|
||
<gaia-switch class="settings-option" data-option="dataLimit">
|
||
<label data-l10n-id="data-limit-alert"></label>
|
||
</gaia-switch>
|
||
</li>
|
||
<li class="vbox">
|
||
<p data-l10n-id="data-limit-value2">When use is above</p>
|
||
<button class="settings-option icon icon-dialog" data-widget-type="data-limit" data-disable-on="dataLimit=false" data-hide-on="dataLimit=false">
|
||
<span class="tag"></span>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<p data-l10n-id="fte-postpaid3-hint">Set an alert to avoid using too much data.</p>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<gaia-buttons data-items="2">
|
||
<button data-navigation="back" class="icon icon-previous" data-l10n-id="back">Back</button>
|
||
<button class="recommend" data-navigation="finish" data-l10n-id="lets-go">Let’s go!</button>
|
||
</gaia-buttons>
|
||
</section>
|
||
|
||
<!-- Non VIVO step 2 -->
|
||
<section role="region" class="view step gaia-list" data-viewport="right" id="non-vivo-step-1">
|
||
<gaia-header>
|
||
<h1 data-l10n-id="fte-onlydata2-title"></h1>
|
||
</gaia-header>
|
||
<ul class="content settings">
|
||
<li class="vbox">
|
||
<gaia-select>
|
||
<label data-l10n-id="reset-report">Reset report</label>
|
||
<select class="settings-option" data-option="trackingPeriod">
|
||
<option value="monthly" data-l10n-id="monthly">Monthly</option>
|
||
<option value="weekly" data-l10n-id="weekly">Weekly</option>
|
||
<option value="never" data-l10n-id="never">Never</option>
|
||
</select>
|
||
</gaia-select>
|
||
</li>
|
||
<li class="vbox">
|
||
<gaia-select>
|
||
<label data-l10n-id="starting-on">Starting on</label>
|
||
<select id="non2-select-weekday" class="settings-option" data-option="resetTime" data-hide-on="trackingPeriod!=weekly" data-disable-on="trackingPeriod!=weekly">
|
||
<option class="monday" value="1" data-l10n-id="monday">Monday</option>
|
||
<option value="2" data-l10n-id="tuesday">Tuesday</option>
|
||
<option value="3" data-l10n-id="wednesday">Wednesday</option>
|
||
<option value="4" data-l10n-id="thursday">Thursday</option>
|
||
<option value="5" data-l10n-id="friday">Friday</option>
|
||
<option value="6" data-l10n-id="saturday">Saturday</option>
|
||
<option class="sunday" value="0" data-l10n-id="sunday">Sunday</option>
|
||
</select>
|
||
</gaia-select>
|
||
</li>
|
||
<li class="vbox">
|
||
<gaia-select>
|
||
<label data-l10n-id="starting-on">Starting on</label>
|
||
<select class="settings-option icon icon-dialog" data-option="resetTime" data-hide-on="trackingPeriod!=monthly" data-disable-on="trackingPeriod!=monthly">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
<option value="6">6</option>
|
||
<option value="7">7</option>
|
||
<option value="8">8</option>
|
||
<option value="9">9</option>
|
||
<option value="10">10</option>
|
||
<option value="11">11</option>
|
||
<option value="12">12</option>
|
||
<option value="13">13</option>
|
||
<option value="14">14</option>
|
||
<option value="15">15</option>
|
||
<option value="16">16</option>
|
||
<option value="17">17</option>
|
||
<option value="18">18</option>
|
||
<option value="19">19</option>
|
||
<option value="20">20</option>
|
||
<option value="21">21</option>
|
||
<option value="22">22</option>
|
||
<option value="23">23</option>
|
||
<option value="24">24</option>
|
||
<option value="25">25</option>
|
||
<option value="26">26</option>
|
||
<option value="27">27</option>
|
||
<option value="28">28</option>
|
||
<option value="29">29</option>
|
||
<option value="30">30</option>
|
||
<option value="31">31</option>
|
||
</select>
|
||
</gaia-select>
|
||
</li>
|
||
<li>
|
||
<p data-l10n-id="fte-onlydata2-hint">Set an alert to avoid using too much data.</p>
|
||
</li>
|
||
</ul>
|
||
<gaia-buttons data-items="2">
|
||
<button data-navigation="back" class="icon icon-previous" data-l10n-id="back">Back</button>
|
||
<button class="recommend icon icon-next" data-navigation="next" data-l10n-id="next">Next</button>
|
||
</gaia-buttons>
|
||
</section>
|
||
|
||
<!-- Non VIVO step 3 -->
|
||
<section role="region" class="view step gaia-list" data-viewport="right" id="non-vivo-step-2">
|
||
<gaia-header>
|
||
<h1 data-l10n-id="fte-onlydata3-title"></h1>
|
||
</gaia-header>
|
||
<ul class="content settings">
|
||
<li class="active">
|
||
<gaia-switch class="settings-option" data-option="dataLimit">
|
||
<label data-l10n-id="data-limit-alert"></label>
|
||
</gaia-switch>
|
||
</li>
|
||
<li class="vbox">
|
||
<p data-l10n-id="data-limit-value2">When use is above</p>
|
||
<button class="settings-option icon icon-dialog" data-widget-type="data-limit" data-disable-on="dataLimit=false" data-hide-on="dataLimit=false">
|
||
<span class="tag"></span>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<p data-l10n-id="fte-onlydata3-hint">Set an alert to avoid using too much data.</p>
|
||
</li>
|
||
</ul>
|
||
<gaia-buttons data-items="2">
|
||
<button data-navigation="back" class="icon icon-previous" data-l10n-id="back">Back</button>
|
||
<button class="recommend" data-navigation="finish" data-l10n-id="lets-go">Let’s go!</button>
|
||
</gaia-buttons>
|
||
</section>
|
||
</section>
|
||
|
||
<!-- Data usage limits -->
|
||
<section aria-labelledby="limit-dialog-heading" id="data-limit-dialog" role="dialog" class="view" data-viewport="bottom">
|
||
<gaia-header id="limit-dialog-header" action="close">
|
||
<h1 id="limit-dialog-heading" data-l10n-id="data-limit-header"></h1>
|
||
<button id="data-usage-done-button" data-l10n-id="done" class="recommend">Done</button>
|
||
</gaia-header>
|
||
<section class="content" class="vbox">
|
||
<div class="info">
|
||
<h2 data-l10n-id="data-limit-dialog-title2">Enter a mobile data limit alert</h2>
|
||
<p data-l10n-id="data-limit-dialog-explanation2">
|
||
Connection speeds reduce after the limit is reached. Check with your data provider to set an appropriate alert level.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
<form>
|
||
<ul class="buttons-list" role="presentation">
|
||
<li role="presentation">
|
||
<label for="data-limit-input" data-l10n-id="data-limit-input-label">
|
||
<input id="data-limit-input" type="text" x-inputmode="numeric" maxlength="6" />
|
||
</label>
|
||
</li>
|
||
<li role="presentation">
|
||
<button class="icon icon-dialog switch-unit-button">
|
||
<span class="tag"></span>
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</form>
|
||
</section>
|
||
|
||
<iframe id="message-handler" src=""></iframe>
|
||
</body>
|
||
</html>
|