popup.html

﻿<!doctype html>
<html>
	<head>
		<title>网页监控助手设置</title>
		<style>
			body{
				min-width:357px;
				overflow-x:hidden;
			}
      .form-text{
        height: 20px;
        padding: 6px 12px;
        font-size: 14px;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      .form-button{
        color: #333;
        background-color: #fff;
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      .form-button:hover{
        background-color: #d9534f;
        color:white;
      }
		</style>
    
		<script src="scripts/popup.js"></script>
	</head>
	<body>
	<p align="center" style="font-size:20px;">欢迎使用网页监控助手！</p>
  <div style="margin-top:5px;">

    <div style="margin-left:auto;margin-right:auto;width:300px;">
      <div>
        <label>添加邮箱：</label><input class="form-text" type="text" placeholder="目前只支持QQ邮箱" id="emailAddress"/> 
      </div>
      <div style="margin-top:10px;">
        <label>刷新频率：</label><input class="form-text" type="text" value="600" id="timeInterval" placeholder="请输入刷新频率"/> <label style="margin-left:-35px;border-left:1px solid #ccc;padding-left:5px;">秒</label>
      </div>
    <div style="margin-top:20px;margin-bottom:20px;" align="center">
      <input class="form-button" type="button" value="开始监听" id="btStart"/>
      <input class="form-button" type="button" value="停止监听" id="btStop" style="margin-left:20px;" >
    </div>
  </div>
	</body>
</html>