|
|
@@ -1,164 +1,61 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
- <head>
|
|
|
- <meta charset="utf-8" />
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
- <title>Liff Test</title>
|
|
|
- <link rel="shortcut icon" href="icon/icon.ico" type="image/x-icon" />
|
|
|
- <link rel="icon" href="icon/icon.ico" type="image/x-icon" />
|
|
|
- <style media="screen">
|
|
|
- body {
|
|
|
- background: #eceff1;
|
|
|
- color: rgba(0, 0, 0, 0.87);
|
|
|
- font-family: Roboto, Helvetica, Arial, sans-serif;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- #message {
|
|
|
- background: white;
|
|
|
- max-width: 1000px;
|
|
|
- margin: 10px auto 16px;
|
|
|
- padding: 32px 24px;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
- #message h2 {
|
|
|
- color: #ffa100;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 30px;
|
|
|
- margin: 0 0 8px;
|
|
|
- }
|
|
|
- #message h1 {
|
|
|
- font-size: 22px;
|
|
|
- font-weight: 300;
|
|
|
- color: rgba(0, 0, 0, 0.6);
|
|
|
- margin: 0 0 16px;
|
|
|
- }
|
|
|
- #message p {
|
|
|
- line-height: 140%;
|
|
|
- margin: 16px 0 24px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- #message a {
|
|
|
- display: block;
|
|
|
- text-align: center;
|
|
|
- background: #039be5;
|
|
|
- text-transform: uppercase;
|
|
|
- text-decoration: none;
|
|
|
- color: white;
|
|
|
- padding: 16px;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
- #message,
|
|
|
- #message a {
|
|
|
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
|
|
- }
|
|
|
- #load {
|
|
|
- color: rgba(0, 0, 0, 0.4);
|
|
|
- text-align: center;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
- @media (max-width: 600px) {
|
|
|
- body,
|
|
|
- #message {
|
|
|
- margin-top: 0;
|
|
|
- background: white;
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
- body {
|
|
|
- border-top: 16px solid #ffa100;
|
|
|
- }
|
|
|
- }
|
|
|
- table {
|
|
|
- margin-top: 10px;
|
|
|
- border: 2px solid black;
|
|
|
- border-collapse: collapse;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- table td {
|
|
|
- border: 1px solid black;
|
|
|
- }
|
|
|
-
|
|
|
- table td.shrink {
|
|
|
- white-space: wrap;
|
|
|
- font-size: 19px;
|
|
|
- padding: 5px;
|
|
|
- background-color: yellow;
|
|
|
- }
|
|
|
- table td.shrink_context {
|
|
|
- white-space: wrap;
|
|
|
- font-size: 19px;
|
|
|
- padding: 5px;
|
|
|
- background-color: rgb(0, 255, 106);
|
|
|
- }
|
|
|
- table td.shrink_top {
|
|
|
- white-space: nowrap;
|
|
|
- background-color: black;
|
|
|
- color: white;
|
|
|
- font-size: 25px;
|
|
|
- }
|
|
|
- table td.expand {
|
|
|
- width: 99%;
|
|
|
- white-space: wrap;
|
|
|
- font-size: 19px;
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
- table td.expand_top {
|
|
|
- width: 99%;
|
|
|
- white-space: wrap;
|
|
|
- background-color: black;
|
|
|
- }
|
|
|
- tr:hover {
|
|
|
- background-color: gray;
|
|
|
- }
|
|
|
-
|
|
|
- button {
|
|
|
- background-color: #4caf50; /* Green */
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
- padding: 10px 10px;
|
|
|
- text-align: center;
|
|
|
- text-decoration: none;
|
|
|
- display: inline-block;
|
|
|
- font-size: 16px;
|
|
|
- border-radius: 5px;
|
|
|
- -webkit-transition-duration: 0.4s; /* Safari */
|
|
|
- transition-duration: 0.4s;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- button:hover {
|
|
|
- background-color: honeydew;
|
|
|
- color: black;
|
|
|
- }
|
|
|
- </style>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <div id="message">
|
|
|
- <center><h2>Liff Test</h2></center>
|
|
|
-
|
|
|
- <center>
|
|
|
- <img
|
|
|
- src="https://firebasestorage.googleapis.com/v0/b/uce-bot.appspot.com/o/user.jpg?alt=media&token=554b90c5-562c-469a-bfee-f36b5e3f54c9"
|
|
|
- style="border-radius: 10px;"
|
|
|
- width="150px"
|
|
|
- height="150px"
|
|
|
- id="profileImage"
|
|
|
- />
|
|
|
- </center>
|
|
|
- <center>
|
|
|
- <button onclick="login()">登入LINE</button>
|
|
|
- <button onclick="logout()">登出LINE</button>
|
|
|
- <button id="senddm" onclick="shareTargetPicker()">發傳單給最多十位好友</button>
|
|
|
- </center>
|
|
|
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
+ <title>MISA 資訊分享</title>
|
|
|
+ <link rel="shortcut icon" href="icon/icon.ico" type="image/x-icon" />
|
|
|
+ <link rel="icon" href="icon/icon.ico" type="image/x-icon" />
|
|
|
+ <link rel="stylesheet" href="/css/style.css">
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="message">
|
|
|
+ <center>
|
|
|
+ <img style="margin: 0; width: 250px; image-rendering: -webkit-optimize-contrast;" src="https://s3cdn.yourator.co/banners/banners/000/001/645/home/06dc43274281d1bd66f4a49adbbae354ec3426b8.png"
|
|
|
+ alt="">
|
|
|
+ <h2>LINE 傳單分享</h2>
|
|
|
+ </center>
|
|
|
+
|
|
|
+ <div class="step-container">
|
|
|
+ <div class="step-item">
|
|
|
+ <div>
|
|
|
+ <img src="/liff2/img/phone.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <h3>如何 2 步驟分享給好友</h3>
|
|
|
+ <div>
|
|
|
+ <p>步驟 １</p>
|
|
|
+ <p>請點擊登入 LINE 帳號。<br>（第一次使用需授予許可）</p>
|
|
|
+ </div>
|
|
|
+ <img src="/liff2/img/arrow.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p>步驟 ２</p>
|
|
|
+ <p>請點擊「發傳單給最多十位好友」，<br>選擇發送對象後按下分享即可傳送。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <p id="load">ChoozMo</p>
|
|
|
- <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
|
|
|
- <script src="js/liff-init.js?1234"></script>
|
|
|
- <script src="js/liff-functions.js?12345"></script>
|
|
|
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
-
|
|
|
- </body>
|
|
|
-</html>
|
|
|
+ <center>
|
|
|
+ <img
|
|
|
+ src="https://firebasestorage.googleapis.com/v0/b/uce-bot.appspot.com/o/user.jpg?alt=media&token=554b90c5-562c-469a-bfee-f36b5e3f54c9"
|
|
|
+ style="border-radius: 10px;" width="150px" height="150px" id="profileImage" />
|
|
|
+ </center>
|
|
|
+
|
|
|
+ <center>
|
|
|
+ <button onclick="login()">登入 LINE</button>
|
|
|
+ <button onclick="logout()">登出 LINE</button>
|
|
|
+ <button id="senddm" onclick="shareTargetPicker()">發傳單給最多十個好友</button>
|
|
|
+ </center>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p id="load">ChoozMo</p>
|
|
|
+ <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
|
|
|
+ <script src="js/liff-init.js?1234"></script>
|
|
|
+ <script src="js/liff-functions.js?12345"></script>
|
|
|
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
