blob: 25c98f9b51fd7ccf7b4f15ded972e24d18bf09a7 [file] [log] [blame]
<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
<meta charset="utf-8">
<meta name="theme-color" content="#fff">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<title>$i18n{title}</title>
<link rel="stylesheet" href="../../../components/security_interstitials/core/common/resources/interstitial_core.css">
<link rel="stylesheet" href="../../../components/security_interstitials/core/common/resources/interstitial_common.css">
<link rel="stylesheet" href="neterror.css">
<script src="../../../components/security_interstitials/core/common/resources/interstitial_common.js"></script>
<script src="../../../components/security_interstitials/core/common/resources/interstitial_mobile_nav.js"></script>
<script src="neterror.js"></script>
<script src="offline.js"></script>
</head>
<body id="t" style="font-family: $i18n{fontfamily}; font-size: $i18n{fontsize}">
<div id="main-frame-error" class="interstitial-wrapper">
<div id="main-content">
<div class="icon"
jseval="updateIconClass(this.classList, iconClass)" alt=""></div>
<div id="main-message">
<h1>
<span jsselect="heading" jsvalues=".innerHTML:msg"></span>
<a id="error-information-button" class="hidden" onclick="toggleErrorInformationPopup();"></a>
</h1>
<p jsselect="summary" jsvalues=".innerHTML:msg"></p>
<!--The suggestion list and error code are normally presented inline,
in which case error-information-popup-* divs have no effect. When
error-information-popup-container has the use-popup-container class, this
information is provided in a popup instead.-->
<div id="error-information-popup-container">
<div id="error-information-popup">
<div id="error-information-popup-box">
<div id="error-information-popup-content">
<div id="suggestions-list" style="display:none"
jsdisplay="(suggestionsSummaryList && suggestionsSummaryList.length)">
<p jsvalues=".innerHTML:suggestionsSummaryListHeader"></p>
<ul jsvalues=".className:suggestionsSummaryList.length == 1 ? 'single-suggestion' : ''">
<li jsselect="suggestionsSummaryList" jsvalues=".innerHTML:summary"></li>
</ul>
</div>
<div class="error-code" jscontent="errorCode"></div>
<p id="error-information-popup-close">
<a class="link-button" jscontent="closeDescriptionPopup" onclick="toggleErrorInformationPopup();"></a>
</p>
</div>
</div>
</div>
</div>
<div id="diagnose-frame" class="hidden"></div>
<div id="download-links-wrapper" class="hidden">
<div id="download-link-wrapper">
<a id="download-link" class="link-button"
onclick="downloadButtonClick()" jsselect="downloadButton"
jscontent="msg" jsvalues=".disabledText:disabledMsg">
</a>
</div>
<div id="download-link-clicked-wrapper" class="hidden">
<div id="download-link-clicked" class="link-button"
jsselect="downloadButton" jscontent="disabledMsg">
</div>
</div>
</div>
<div id="offline-content-list" hidden>
<div class="offline-content-list-title" jsselect="offlineContentList"
jscontent="title"></div>
<div id="offline-content-suggestions"></div>
<div class="offline-content-list-action">
<a class="link-button" onclick="launchDownloadsPage()"
jsselect="offlineContentList" jscontent="actionText">
</a>
</div>
</div>
<div id="offline-content-summary" onclick="launchDownloadsPage()" hidden>
<div class="offline-content-summary-images">
<div class="offline-content-summary-image-truncate">
<img id="earth" src="images/generic-globe.svg">
</div>
<div class="offline-content-summary-image-truncate">
<img id="music-note" src="images/music-note.svg">
</div>
<div class="offline-content-summary-image-truncate">
<img id="video" src="images/video.svg">
</div>
<div>
<img id="image" src="images/image.svg">
</div>
</div>
<div class="offline-content-summary-description"
jsselect="offlineContentSummary" jscontent="description">
</div>
<a class="offline-content-summary-action link-button"
jsselect="offlineContentSummary" jscontent="actionText">
</a>
</div>
</div>
</div>
<div id="buttons" class="nav-wrapper">
<div id="control-buttons" hidden>
<button id="reload-button"
class="blue-button text-button"
onclick="trackClick(this.trackingId);
reloadButtonClick(this.url);"
jsselect="reloadButton"
jsvalues=".url:reloadUrl; .trackingId:reloadTrackingId"
jscontent="msg"></button>
<button id="show-saved-copy-button"
class="blue-button text-button"
onclick="showSavedCopyButtonClick()"
jsselect="showSavedCopyButton"
jscontent="msg" jsvalues="title:title; .primary:primary">
</button>
<button id="download-button"
class="blue-button text-button"
onclick="downloadButtonClick()"
jsselect="downloadButton"
jscontent="msg" jsvalues=".disabledText:disabledMsg">
</button>
</div>
<button id="details-button" class="secondary-button text-button small-link"
onclick="detailsButtonClick(); toggleHelpBox()" jscontent="details"
jsdisplay="(suggestionsDetails && suggestionsDetails.length > 0) || diagnose"
jsvalues=".detailsText:details; .hideDetailsText:hideDetails;"></button>
</div>
<div id="details" class="hidden">
<div class="suggestions" jsselect="suggestionsDetails">
<div class="suggestion-header" jsvalues=".innerHTML:header"></div>
<div class="suggestion-body" jsvalues=".innerHTML:body"></div>
</div>
</div>
</div>
<div id="sub-frame-error">
<!-- Show details when hovering over the icon, in case the details are
hidden because they're too large. -->
<div class="icon"
jseval="updateIconClass(this.classList, iconClass)"></div>
<div id="sub-frame-error-details" jsselect="summary" jsvalues=".innerHTML:msg"></div>
</div>
<div id="offline-resources">
<img id="offline-resources-1x" src="images/default_100_percent/offline/100-offline-sprite.png">
<img id="offline-resources-2x" src="images/default_200_percent/offline/200-offline-sprite.png">
<template id="audio-resources">
<audio id="offline-sound-press" src="sounds/button-press.mp3"></audio>
<audio id="offline-sound-hit" src="sounds/hit.mp3"></audio>
<audio id="offline-sound-reached" src="sounds/score-reached.mp3"></audio>
</template>
</div>
</body>
</html>