VulpesOS/assets/webapps/costcontrol.gaiamobile.org/fte.html
OverSu b38dea0597 Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
2026-09-30 23:13:03 +02:00

479 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>