chrome/common/extensions/docs/examples/extensions/talking_alarm_clock/popup.html - Issue 8114011: Add sample extensions that use the text-to-speech (TTS) API.

Unified Diff: chrome/common/extensions/docs/examples/extensions/talking_alarm_clock/popup.html

Issue 8114011: Add sample extensions that use the text-to-speech (TTS) API. (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/

Patch Set: '' Created 9 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « chrome/common/extensions/docs/examples/extensions/talking_alarm_clock/play.png ('k') | chrome/common/extensions/docs/examples/extensions/talking_alarm_clock/popup.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: chrome/common/extensions/docs/examples/extensions/talking_alarm_clock/popup.html

===================================================================

--- chrome/common/extensions/docs/examples/extensions/talking_alarm_clock/popup.html (revision 0)

+++ chrome/common/extensions/docs/examples/extensions/talking_alarm_clock/popup.html (revision 0)

@@ -0,0 +1,208 @@

+<html>

+<head>

+ <title>Talking Alarm Clock</title>

+ <link href='http://fonts.googleapis.com/css?family=Nova%20Mono' rel='stylesheet' type='text/css'>

+ <style>

+ body {

+ overflow: hidden;

+ margin-top: 0px;

+ }

+ #main {

+ width: 200px;

+ font-family: arial, helvetica, sans-serif;

+ font-size: 13;

+ }

+ #clock {

+ cursor: pointer;

+ }

+ .alarm_wrap {

+ margin-top: 6px;

+ padding: 6px;

+ background-color: #dfd;

+ border: 1px solid #aaa;

+ border-radius: 4px;

+ }

+ .alarm_wrap.disabled {

+ background-color: #eee;

+ }

+ .alarm_wrap[aria-invalid] {

+ background-color: #f99;

+ }

+ .alarm_wrap[aria-invalid] input {

+ color: #900;

+ }

+ .alarm_wrap input {

+ font-size: 20;

+ }

+ .alarm_wrap input[type=time] {

+ font-size: 20;

+ width: 85px;

+ }

+ .alarm_wrap.disabled input {

+ color: #999;

+ }

+ .ctrl_label {

+ float: left;

+ width: 100%;

+ margin-top: 6px;

+ }

+ .ctrl_wrap {

+ width: 200px;

+ float: left;

+ }

+ .ctrl_wrap input[type=range] {

+ width: 180px;

+ height: 16px;

+ }

+ .buttons {

+ margin-top: 10px;

+ }

+ .voice_options {

+ }

+ #sound {

+ float: left;

+ width: 160px;

+ margin: 8px 0px;

+ }

+ #playsound {

+ padding: 5px;

+ margin: 5px;

+ }

+ #phrase {

+ float: left;

+ width: 160px;

+ }

+ #playspeech {

+ padding: 5px;

+ margin: 5px;

+ }

+ #a1_tt {

+ font-family: Nova Mono;

+ height: 34px;

+ }

+ #a2_tt {

+ font-family: Nova Mono;

+ height: 34px;

+ }

+ #a1_ampm {

+ font-family: Nova Mono;

+ }

+ #a2_ampm {

+ font-family: Nova Mono;

+ }

+ #current_time {

+ font-family: Nova Mono;

+ font-size: 24;

+ height: 32px;

+ }

+ body.nooutline * {

+ outline: none;

+ }

+ .footer {

+ clear:left;

+ }

+ </style>

+ <script src="common.js"></script>

+ <script src="popup.js"></script>

+</head>

+<body onload="load()">

+<div id="main">

+ <center>

+ <canvas id="clock" width="150" height="150"

+ role="button" tabindex="0"></canvas>

+ <div id="current_time">00:00:00</div>

+ </center>

+ <div id="a1_wrap" class="alarm_wrap">

+ <label for="a1_on">Alarm 1</label>

+ <br>

+ <input id="a1_on" type="checkbox">

+ <input id="a1_tt" type="time" step="300" size="5">

+ <select id="a1_ampm">

+ <option>AM</option>

+ <option selected>PM</option>

+ </select>

+ </div>

+ <div id="a2_wrap" class="alarm_wrap">

+ <label for="a2_on">Alarm 2</label>

+ <br>

+ <input id="a2_on" type="checkbox">

+ <input id="a2_tt" type="time" step="300" size="5">

+ <select id="a2_ampm">

+ <option>AM</option>

+ <option selected>PM</option>

+ </select>

+ </div>

+ <div class="voice_options">

+ <div>

+ <div class="ctrl_label">

+ <label for="sound">Sound:</label>

+ </div>

+ <div class="ctrl_wrap">

+ <select id="sound" class="ctrl">

+ <option value="none">None</option>

+ <option selected value="cuckoo">Cuckoo Clock</option>

+ <option value="digital">Digital Alarm Clock</option>

+ <option value="grandfather">Grandfather Clock</option>

+ <option value="groove">Groove</option>

+ <option value="metal">Metal</option>

+ <option value="forest">Morning in the Forest</option>

+ <option value="ringing">Ringing Alarm Clock</option>

+ <option value="rooster">Rooster</option>

+ </select>

+ <button id="playsound" title="Play Sound">

+ <img src="play.png">

+ </button>

+ </div>

+ <div class="ctrl_label">

+ <label for="sound">Phrase (use $TIME to say time):</label>

+ </div>

+ <div class="ctrl_wrap">

+ <textarea id="phrase"></textarea>

+ <button id="playspeech" title="Play Speech">

+ <img src="play.png">

+ </button>

+ </div>

+ <div class="ctrl_label">

+ <label for="voice">Voice:</label>

+ </div>

+ <div class="ctrl_wrap">

+ <select id="voice" class="ctrl"></select>

+ </div>

+ <div class="ctrl_label">

+ <label for="rate">Speech rate:</label>

+ </div>

+ <div class="ctrl_wrap">

+ <input id="rate" type="range" class="ctrl"

+ min=0.5 max=1.5 step=0.1 value=1.0></input>

+ </div>

+ <div class="ctrl_label">

+ <label for="volume">Speech and sound volume:</label>

+ </div>

+ <div class="ctrl_wrap">

+ <input id="volume" type="range" class="ctrl"

+ min=0.0 max=1.0 step=0.1 value=1.0></input>

+ </div>

+ <div class="footer">

+ <a href="credits.html" target="_blank">Credits</a>

+  | 

+ <a href="https://chrome.google.com/webstore/search?q=tts"

+ target="_blank">Get more voices</a>

+ </div>

+</div>

+</body>

+</html>

Property changes on: chrome/common/extensions/docs/examples/extensions/talking_alarm_clock/popup.html

___________________________________________________________________

Added: svn:eol-style

+ LF