Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
479 lines
23 KiB
HTML
479 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<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="ar:201601260729, bg:201601260729, bn-BD:201601260729, ca:201601260729, cs:201601260729, da:201601260729, de:201601260729, el:201601260729, en-US:201601260729, es:201601260729, eu:201601260729, fr:201601260729, gl:201601260729, hr:201601260729, hu:201601260729, it:201601260729, ja:201601260729, km:201601260729, ko:201601260729, lt:201601260729, mk:201601260729, ms:201601260729, ne-NP:201601260729, nl:201601260729, pa:201601260729, pl:201601260729, pt-BR:201601260729, ro:201601260729, ru:201601260729, sk:201601260729, sq:201601260729, sr-Cyrl:201601260729, sr-Latn:201601260729, sv-SE:201601260729, tr:201601260729, zh-CN:201601260729, zh-TW:201601260729">
|
||
<link rel="localization" href="/locales-obj/fte.{locale}.json">
|
||
|
||
|
||
<!-- Firefox Desktop shims -->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- 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> --><script src="./gaia_build_fte.js" type="text/javascript"></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> --><script src="./gaia_build_defer_fte.js" defer="" type="text/javascript"></script>
|
||
<meta content="2.5" name="appVersion"></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">Welcome</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">Type of Contract</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">I’m Pre-paid</label>
|
||
</gaia-radio>
|
||
</li>
|
||
<li class="active">
|
||
<gaia-radio name="plan" id="postpaid-plan" value="postpaid">
|
||
<label data-l10n-id="im-postpaid">I’m Post-paid</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">Low Balance Alert</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">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" step="any" type="number">
|
||
<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">Data Report and Alert</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">Data use 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">Phone and Data Report</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">Data Alert</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">Data use 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">Data Report</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">Receive reports about your 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>
|
||
|
||
<!-- 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">Data Alert</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">Data use 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">Data usage limit</h1>
|
||
<button id="data-usage-done-button" data-l10n-id="done" class="recommend">Done</button>
|
||
</gaia-header>
|
||
<section class="content">
|
||
<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 aria-label="Data limit" for="data-limit-input" data-l10n-id="data-limit-input-label">
|
||
<input id="data-limit-input" x-inputmode="numeric" maxlength="6" type="text">
|
||
</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>
|