| <!doctype html> |
| <!-- Copyright 2019 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. --> |
| <html> |
| <head> |
| <!-- Set the title to an empty value, which will be replaced by a localized |
| name by JavaScript --> |
| <title></title> |
| <meta charset="utf-8"> |
| <link rel="stylesheet" href="../css/main.css"> |
| <script src="../js/google-analytics-bundle.js"></script> |
| <script src="../js/metrics.js"></script> |
| <script src="../js/util.js"></script> |
| <script src="../js/resolution_event_broker.js"></script> |
| <script src="../js/toast.js"></script> |
| <script src="../js/tooltip.js"></script> |
| <script src="../js/state.js"></script> |
| <script src="../js/sound.js"></script> |
| <script src="../js/scrollbar.js"></script> |
| <script src="../js/gallerybutton.js"></script> |
| <script src="../js/models/filenamer.js"></script> |
| <script src="../js/models/gallery.js"></script> |
| <script src="../js/models/filesystem.js"></script> |
| <script src="../js/mojo/mojo_bindings_lite.js"></script> |
| <script src="../js/mojo/camera_metadata_tags.mojom-lite.js"></script> |
| <script src="../js/mojo/camera_metadata.mojom-lite.js"></script> |
| <script src="../js/mojo/camera_common.mojom-lite.js"></script> |
| <script src="../js/mojo/image_capture.mojom-lite.js"></script> |
| <script src="../js/mojo/cros_image_capture.mojom-lite.js"></script> |
| <script src="../js/mojo/imagecapture.js"></script> |
| <script src="../js/views/view.js"></script> |
| <script src="../js/views/gallery_base.js"></script> |
| <script src="../js/views/camera.js"></script> |
| <script src="../js/views/camera/layout.js"></script> |
| <script src="../js/views/camera/options.js"></script> |
| <script src="../js/views/camera/preview.js"></script> |
| <script src="../js/views/camera/recordtime.js"></script> |
| <script src="../js/views/camera/resolution_preference.js"></script> |
| <script src="../js/views/camera/timertick.js"></script> |
| <script src="../js/views/camera/modes.js"></script> |
| <script src="../js/views/dialog.js"></script> |
| <script src="../js/views/browser.js"></script> |
| <script src="../js/views/settings.js"></script> |
| <script src="../js/views/warning.js"></script> |
| <script src="../js/nav.js"></script> |
| <script src="../js/main.js"></script> |
| </head> |
| <body class="sound mirror mic _3x3"> |
| <div id="camera"> |
| <div id="preview-wrapper" aria-hidden="true"> |
| <video id="preview-video"></video> |
| <div id="preview-grid"> |
| <div id="preview-grid-horizontal"></div> |
| <div id="preview-grid-vertical"></div> |
| </div> |
| <div id="preview-focus"> |
| <object id="preview-focus-aim" type="image/svg+xml" |
| data="../images/camera_focus_aim.svg" |
| tabindex="-1" hidden></object> |
| </div> |
| <div class="centered-overlay" id="camera-mode"></div> |
| </div> |
| <div id="modes-group" class="buttons right-stripe"> |
| <div class="mode-item"> |
| <input type="radio" name="mode" |
| data-mode="video-mode" tabindex="0" |
| i18n-aria="switch_record_video_button"> |
| <span i18n-content="label_switch_record_video_button" |
| aria-hidden="true"></span> |
| </div> |
| <div class="mode-item"> |
| <input type="radio" name="mode" |
| data-mode="photo-mode" tabindex="0" |
| i18n-aria="switch_take_photo_button"> |
| <span i18n-content="label_switch_take_photo_button" |
| aria-hidden="true"></span> |
| </div> |
| <div class="mode-item"> |
| <input type="radio" name="mode" |
| data-mode="square-mode" tabindex="0" |
| i18n-aria="switch_take_square_photo_button"> |
| <span i18n-content="label_switch_take_square_photo_button" |
| aria-hidden="true"></span> |
| </div> |
| <div class="mode-item"> |
| <input type="radio" name="mode" |
| data-mode="portrait-mode" tabindex="0" |
| i18n-aria="switch_take_portrait_photo_button"> |
| <span i18n-content="label_switch_take_portrait_photo_button" |
| aria-hidden="true"></span> |
| </div> |
| </div> |
| <div id="shutters-group" class="buttons right-stripe circle"> |
| <button id="start-recordvideo" class="shutter" tabindex="0" |
| i18n-label="record_video_start_button"></button> |
| <button id="stop-recordvideo" class="shutter" tabindex="0" |
| i18n-label="record_video_stop_button"></button> |
| <button id="start-takephoto" class="shutter" tabindex="0" |
| i18n-label="take_photo_button"></button> |
| <button id="stop-takephoto" class="shutter" tabindex="0" |
| i18n-label="take_photo_cancel_button"></button> |
| </div> |
| <div class="top-stripe right-stripe buttons"> |
| <input type="checkbox" id="toggle-mic" tabindex="0" |
| i18n-label="toggle_mic_button" data-state="mic" |
| data-key="toggleMic" checked> |
| </div> |
| <div class="top-stripe left-stripe buttons"> |
| <button id="open-settings" tabindex="0" |
| i18n-label="settings_button" aria-haspopup="true"></button> |
| </div> |
| <div id="options-group" class="left-stripe buttons"> |
| <input type="checkbox" id="toggle-mirror" tabindex="0" |
| i18n-label="toggle_mirror_button" data-state="mirror" checked> |
| <input type="checkbox" id="toggle-grid" tabindex="0" |
| i18n-label="toggle_grid_button" data-state="grid" |
| data-key="toggleGrid"> |
| <input type="checkbox" id="toggle-timer" tabindex="0" |
| i18n-label="toggle_timer_button" data-state="timer" |
| data-key="toggleTimer"> |
| </div> |
| <div class="bottom-stripe left-stripe buttons circle"> |
| <button id="switch-device" tabindex="0" |
| i18n-label="switch_camera_button"></button> |
| </div> |
| <div class="bottom-stripe right-stripe buttons circle"> |
| <button id="gallery-enter" tabindex="0" |
| i18n-label="gallery_button" hidden></button> |
| </div> |
| <div class="top-stripe horizontal-center-stripe" id="record-time" hidden> |
| <div class="icon"></div> |
| <div id="record-time-msg"></div> |
| </div> |
| <div class="centered-overlay"> |
| <div id="timer-tick-msg"></div> |
| </div> |
| </div> |
| <div id="settings"> |
| <div class="menu"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div i18n-content="settings_button"></div> |
| </div> |
| <button class="menu-item circle" id="settings-gridtype" tabindex="0" |
| aria-describedby="gridtype-desc"> |
| <div class="icon"></div> |
| <div> |
| <div i18n-content="grid_type_button"></div> |
| <div class="description" id="gridtype-desc" aria-hidden="true"> |
| <span i18n-content="label_grid_3x3" i18n-aria="aria_grid_3x3"></span> |
| <span i18n-content="label_grid_4x4" i18n-aria="aria_grid_4x4"></span> |
| <span i18n-content="label_grid_golden"></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button class="menu-item circle" id="settings-timerdur" tabindex="0" |
| aria-describedby="timerdur-desc"> |
| <div class="icon"></div> |
| <div> |
| <div i18n-content="timer_duration_button"></div> |
| <div class="description" id="timerdur-desc" aria-hidden="true"> |
| <span i18n-content="label_timer_3s"></span> |
| <span i18n-content="label_timer_10s"></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button class="menu-item circle" id="settings-resolution" tabindex="0" |
| aria-describedby="resolution-desc"> |
| <div class="icon"></div> |
| <div> |
| <div>Camera resolution</div> |
| <div class="description" id="resolution-desc" aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button class="menu-item circle" id="settings-feedback" tabindex="0"> |
| <div class="icon"></div> |
| <div i18n-content="feedback_button"></div> |
| </button> |
| <button class="menu-item circle" id="settings-help" tabindex="0"> |
| <div class="icon"></div> |
| <div i18n-content="help_button"></div> |
| </button> |
| </div> |
| </div> |
| <div id="gridsettings"> |
| <div class="menu"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div i18n-content="grid_type_button"></div> |
| </div> |
| <label class="menu-item circle" for="grid-3x3"> |
| <input class="icon" id="grid-3x3" type="radio" tabindex="0" |
| name="gridtype" data-state="_3x3" data-key="toggle3x3" checked> |
| <span i18n-content="label_grid_3x3" i18n-aria="aria_grid_3x3"></span> |
| </label> |
| <label class="menu-item circle" for="grid-4x4"> |
| <input class="icon" id="grid-4x4" type="radio" tabindex="0" |
| name="gridtype" data-state="_4x4" data-key="toggle4x4"> |
| <span i18n-content="label_grid_4x4" i18n-aria="aria_grid_4x4"></span> |
| </label> |
| <label class="menu-item circle" for="grid-golden"> |
| <input class="icon" id="grid-golden" type="radio" tabindex="0" |
| name="gridtype" data-state="golden" data-key="toggleGolden"> |
| <span i18n-content="label_grid_golden"></span> |
| </label> |
| </div> |
| </div> |
| <div id="timersettings"> |
| <div class="menu"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div i18n-content="timer_duration_button"></div> |
| </div> |
| <label class="menu-item circle" for="timer-3s"> |
| <input class="icon" id="timer-3s" type="radio" tabindex="0" |
| name="timerdur" data-state="_3sec" data-key="toggle3sec" |
| checked> |
| <span i18n-content="label_timer_3s"></span> |
| </label> |
| <label class="menu-item circle" for="timer-10s"> |
| <input class="icon" id="timer-10s" type="radio" tabindex="0" |
| name="timerdur" data-state="_10sec" data-key="toggle10sec"> |
| <span i18n-content="label_timer_10s"></span> |
| </label> |
| </div> |
| </div> |
| <div id="resolutionsettings"> |
| <div class="menu"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div>Camera resolutions</div> |
| </div> |
| <div id="builtin-photo-header" class="menu-item">Photo</div> |
| <button class="menu-item resol-item circle" |
| id="settings-front-photores" tabindex="0" |
| aria-describedby="front-photores-desc"> |
| <div> |
| <div>Front camera</div> |
| <div class="description" id="front-photores-desc" |
| aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button class="menu-item resol-item circle" |
| id="settings-back-photores" tabindex="0" |
| aria-describedby="back-photores-desc"> |
| <div> |
| <div>Back camera</div> |
| <div class="description" id="back-photores-desc" aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <div id="builtin-video-header" class="menu-item">Video</div> |
| <button class="menu-item resol-item circle" |
| id="settings-front-videores" tabindex="0" |
| aria-describedby="front-videores-desc"> |
| <div> |
| <div>Front camera</div> |
| <div class="description" id="front-videores-desc" aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button class="menu-item resol-item circle" |
| id="settings-back-videores" tabindex="0" |
| aria-describedby="back-videores-desc"> |
| <div> |
| <div>Back camera</div> |
| <div class="description" id="back-videores-desc" aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| </div> |
| </div> |
| <div id="photoresolutionsettings"> |
| <div class="menu" data-name="photores"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div>Photo resolution</div> |
| </div> |
| </div> |
| </div> |
| <div id="videoresolutionsettings"> |
| <div class="menu" data-name="videores"> |
| <div class="menu-header circle"> |
| <button class="icon" tabindex="0" i18n-aria="back_button"></button> |
| <div>Video resolution</div> |
| </div> |
| </div> |
| </div> |
| <div class="centered-overlay" id="spinner"></div> |
| <div id="browser" role="listbox" i18n-aria="gallery_images"> |
| <div class="padder"> |
| <div class="bounds-padder"></div> |
| <div class="bounds-padder"></div> |
| </div> |
| <div class="buttons"> |
| <button id="browser-back" tabindex="0" |
| i18n-label="back_button"></button> |
| <button id="browser-print" disabled tabindex="0" |
| i18n-label="print_button"></button> |
| <button id="browser-export" disabled tabindex="0" |
| i18n-label="export_button"></button> |
| <button id="browser-delete" disabled tabindex="0" |
| i18n-label="delete_button"></button> |
| </div> |
| </div> |
| <div id="warning"> |
| <div id="error-msg" aria-live="polite"></div> |
| </div> |
| <div id="message-dialog" class="dialog"> |
| <div class="dialog-popup" role="dialog" aria-labelledby="dialog-msg"> |
| <div class="dialog-msg dialog-msg-holder"></div> |
| <div class="dialog-buttons"> |
| <button class="dialog-negative-button" tabindex="0" |
| i18n-content="dialog_cancel_button"></button> |
| <button class="dialog-positive-button" tabindex="0" |
| i18n-content="dialog_ok_button"></button> |
| </div> |
| </div> |
| </div> |
| <div id="intro-dialog" class="dialog"> |
| <div class="dialog-popup" role="dialog" aria-labelledby="dialog-msg"> |
| <div class="dialog-title-icon"></div> |
| <div class="dialog-title" i18n-content="dialog_intro_title"></div> |
| <div class="dialog-msg" i18n-content="dialog_intro_msg"></div> |
| <div class="dialog-buttons"> |
| <button class="dialog-positive-button" tabindex="0" |
| i18n-content="dialog_got_it_button"></button> |
| </div> |
| </div> |
| </div> |
| <div class="centered-overlay" id="toast" aria-live="polite"></div> |
| <div id="tooltip" aria-hidden="true"></div> |
| <audio id="sound-tick" src="../sounds/tick.ogg" data-timeout="200"> |
| <audio id="sound-shutter" src="../sounds/shutter.ogg" data-timeout="350"> |
| <audio id="sound-rec-start" src="../sounds/record_start.ogg" data-timeout="200"> |
| <audio id="sound-rec-end" src="../sounds/record_end.ogg" data-timeout="450"> |
| <template id="resolution-item-template"> |
| <label class="menu-item circle"> |
| <input class="icon" type="radio" tabindex="0"> |
| <span></span> |
| </label> |
| </template> |
| <template id="extcam-resolution-item-template"> |
| <div class="menu-item external-camera">External camera</div> |
| <button class="menu-item resol-item external-camera" |
| tabindex="0"> |
| <div> |
| <div>Photo resolution</div> |
| <div class="description" aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| <button class="menu-item resol-item circle external-camera" |
| tabindex="0"> |
| <div> |
| <div>Video resolution</div> |
| <div class="description" aria-hidden="true"> |
| <span></span> |
| </div> |
| </div> |
| <div class="icon end"></div> |
| </button> |
| </template> |
| </body> |
| </html> |
