API tools faq
paste
basictomonokai

音声メモ帳のHTML画面

basictomonokai
Jun 21st, 2016
280
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.44 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <head >
  4.  
  5.   <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
  6.  
  7. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  8.  
  9.  
  10.  
  11. <style type="text/css">/* ラジオボタンを消す */
  12. #slidemenu input{
  13.     display: none;
  14. }
  15. /* 開閉ボタン */
  16. #button_open,
  17. #button_close {
  18.     position: fixed;
  19.     top: 3px;
  20.     left: 3px;
  21.     width: 50px;
  22.     height: 50px;
  23.     text-align: right;
  24.     cursor: pointer;
  25. }
  26. /* 初期値はオープンボタンはblock、クローズボタンはnone */
  27. #button_open {
  28.     display: block;
  29. }
  30. #button_close {
  31.     display: none;
  32. }
  33.  
  34. /****************************************
  35. ボタンのスタイル ここから
  36. ****************************************/
  37. #button_open span,
  38. #button_close span {
  39.     margin: 0 auto;
  40.     width: 50px;
  41.     height: 50px;
  42.     display: inline-block;
  43.     position: relative;
  44.     background: #555555;
  45. }
  46. /* 擬似要素で横線を描写（border-top） */
  47. #button_open span:after,
  48. #button_close span:after {
  49.     content: "";
  50.     position: absolute;
  51.     top: 23px;
  52.     left: 12px;
  53.     width: 24px;
  54.     border-top: 3px solid #FFFFFF;
  55. }
  56. /* オープンボタンはbox-shadowを上下に描写して3本線に */
  57. #button_open span:after {
  58.     box-shadow: 0 6px 0 #CACACA, 0 -6px 0 #FFFFFF;
  59. }
  60. /****************************************
  61. ボタンのスタイル ここまで
  62. ****************************************/
  63.  
  64. /****************************************
  65. メニューのスタイル ここから
  66. ****************************************/
  67. #menu {
  68.     margin: 0;
  69.     padding: 0;
  70.     width: 0; /* 初期値は横幅が0で見えない状態 */
  71.     position: fixed;
  72.     top: 54px;
  73.     left: 3px;
  74.     color: #FFFFFF;
  75.     z-index: 99999;
  76.     overflow: hidden;
  77.     /* 表示するときにアニメーションさせる */
  78.     -webkit-transition: all ease-in-out;
  79.     -webkit-transition-delay: 0.5s;
  80.     -moz-transition: all ease-in-out 0.5s;
  81.     -o-transition: all ease-in-out 0.5s;
  82.     transition: all ease-in-out 0.5s;
  83. }
  84. #menu ul {
  85.     margin: 0;
  86.     padding: 0;
  87.     color: #FFFFFF;
  88.     border-top: #CACACA;
  89.     text-align: left;
  90.     list-style: none inside;
  91. }
  92. #menu li {
  93.     margin: 0;
  94.     padding: 0;
  95.     overflow: hidden;
  96.     width: 100%;
  97. }
  98. #menu li a {
  99.     margin: 0;
  100.     padding: 5px;
  101.     overflow: hidden;
  102.     display: block;
  103.     height: 60px;
  104.     line-height: 60px;
  105.     background: #555555;
  106.     text-decoration: none;
  107.     color: #FFFFFF;
  108. }
  109. #menu li a:hover {
  110.     background: #252525;
  111. }
  112. /****************************************
  113. メニューのスタイル ここまで
  114. ****************************************/
  115.  
  116. /****************************************
  117. オープンボタンにチェック時の処理 ここから
  118. ****************************************/
  119. /* オープンボタンを非表示 */
  120. #open:checked ~ #button_open {
  121.     display: none;
  122. }
  123. /* クローズボタンを表示 */
  124. #open:checked ~ #button_close {
  125.     display: inline;
  126. }
  127. /* メニューを表示（横幅をつける） */
  128. #open:checked ~ #menu {
  129.     width: 80%;
  130. }
  131. /****************************************
  132. オープンボタンにチェック時の処理 ここまで
  133. ****************************************/
  134.  
  135. </style>
  136.  
  137.  
  138. <style type="text/css">
  139. <!--
  140. div#floating-menu {
  141.    position: fixed;
  142.    text-align: right;
  143.    top: 0px;
  144.    left: 70%;
  145.    right: 0px;
  146.    background-color: #FFFFFF;
  147.    border: 1px solid #000000;
  148.    z-index: 9999;
  149.    opacity: 0.5;
  150. }
  151. -->
  152. </style>
  153.  
  154.  
  155. <style type="text/css">
  156. <!--
  157. input,textarea {
  158.  font-size: 1.5em;
  159.  width:90%;
  160.  height:70%;
  161. }
  162. -->
  163. </style>
  164.  
  165. <style type="text/css">
  166. <!--
  167.  
  168. #buttonx {
  169.  width:30%;
  170.  color:#ffffff;
  171.  background:#337fcc;
  172.  font-family: fantasy,sans-serif;
  173.  font-size:24px;
  174.  font-weight:bold;
  175.  text-shadow:0 1px 0px #143352,0 2px 0px #143352;
  176.  text-align:center;
  177.  display:inline-block;
  178.  text-decoration:none;
  179.  border:1px solid #225588;
  180.  padding:15px 0 12px 0;
  181.  border-radius:5px;
  182.  margin-bottom:20px;
  183. }
  184.  
  185. -->
  186.  
  187. </style>
  188.  
  189.  
  190.   <title>音声メモ帳</title>
  191.  
  192. </head>
  193.  
  194. <!--
  195. This simple Javascript Function sends
  196. the string "data" to the the excuting BASIC!
  197. program.
  198.  
  199. The BASIC command, "html.getdatalink data$", is
  200. used to read linked data. If data$ is empty ("") then
  201. not data has been sent.  The BASIC! programmer
  202. can loop on this value until a non-empty string is
  203. returned.
  204.  
  205. This function is the heart the HTML/BASIC! interactive
  206. interface.
  207. -->
  208.  
  209. <script type="text/javascript">
  210.     function doDataLink(data) {
  211.         Android.dataLink(data);
  212.     }
  213. </script>
  214.  
  215. <script type="text/javascript">
  216.     function doDataLink2() {
  217.         var dataxx=document.getElementById('ken1').value
  218.         Android.dataLink(dataxx);
  219.  
  220.     }
  221. </script>
  222.  
  223.  
  224. <script type="text/javascript">
  225.     function doDataint() {
  226.         setInterval("doDataLink2()",20000);
  227.  
  228.     }
  229. </script>
  230.  
  231.  
  232. <body bgcolor="azure">
  233.  
  234. <div id="slidemenu">
  235.     <input type="radio" name="text" value="1" id="open" />
  236.     <label for="open" id="button_open"><span></span></label>
  237.     <input type="radio" name="text" value="1" id="close" />
  238.     <label for="close" id="button_close"><span></span></label>
  239.     <div id="menu">
  240.         <ul>
  241.             <li><a onmouseover="this.style.background='#252525'" onmouseout="this.style.background='#555555'" onclick="this.style.background='#43cd80';doDataLink('//y//'+document.getElementById('ken1').value)">ファイル保存</a></li>
  242.             <li><a onmouseover="this.style.background='#252525'" onmouseout="this.style.background='#555555'" onclick="this.style.background='#43cd80';doDataLink('//x//')">終了</a></li>
  243.         </ul>
  244.     </div>
  245. </div>
  246.  
  247.  
  248. <div id="floating-menu">
  249. <p id="RealtimeClockArea">時計表示エリア</p>
  250. </div>
  251.  <script type="text/javascript">
  252. function set2fig(num) {
  253.     // 桁数が1桁だったら先頭に0を加えて2桁に調整する
  254.    var ret;
  255.     if( num < 10 ) { ret = "0" + num; }
  256.    else { ret = num; }
  257.    return ret;
  258. }
  259.  
  260. function showClock1() {
  261.    var nowTime = new Date();
  262.   var nowHour = set2fig( nowTime.getHours() );
  263.    var nowMin = set2fig( nowTime.getMinutes() );
  264.    var nowSec = set2fig( nowTime.getSeconds() );
  265.    var nowYear = nowTime.getFullYear();
  266.    var nowMonth = nowTime.getMonth() + 1;
  267.    var nowDate = nowTime.getDate();
  268.    var yobi = ["日","月","火","水","木","金","土"];
  269.    var nowYobi = yobi[nowTime.getDay()];
  270.    var msg = nowYear + "/" + nowMonth + "/" + nowDate
  271.    var msg = msg + "(" + nowYobi + ") [" + nowHour + ":" + nowMin + ":" + nowSec + "]";
  272.    document.getElementById("RealtimeClockArea").innerHTML = msg;
  273. }
  274. setInterval('showClock1()',1000);
  275. </script>
  276.  
  277.   <div align="center">
  278.   <!--
  279. Display an image located on the internet
  280. -->
  281.  
  282.     <h1><b>音声メモ帳</b></h1>
  283.  
  284. <BR>
  285. <a id="buttonx" style="width:200px" onmouseover="this.style.background='#43cd80'" onmouseout="this.style.background='#337fcc'" onclick="this.style.background='#43cd80';doDataLink('//a//'+document.getElementById('ken1').value)">録　音</a>
  286. &nbsp;&nbsp;&nbsp;<a id="buttonx" style="width:200px" onmouseover="this.style.background='#43cd80'" onmouseout="this.style.background='#337fcc'" onclick="this.style.background='#43cd80';doDataLink('//b//'+document.getElementById('ken1').value)">読　上</a>
  287. <p>
  288. <textarea name="msg" cols="40" rows="10" id="ken1">@@@1@@@</textarea>
  289. </p>
  290.  
  291.   </div>
  292.  
  293.  
  294.  
  295.  
  296. </body>
  297.  
  298. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!