index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>ChoozMo LINE傳單</title>
  7. <link rel="shortcut icon" href="icon/icon.ico" type="image/x-icon" />
  8. <link rel="icon" href="icon/icon.ico" type="image/x-icon" />
  9. <style media="screen">
  10. body {
  11. background: #eceff1;
  12. color: rgba(0, 0, 0, 0.87);
  13. font-family: Roboto, Helvetica, Arial, sans-serif;
  14. margin: 0;
  15. padding: 0;
  16. }
  17. #message {
  18. background: white;
  19. max-width: 1000px;
  20. margin: 10px auto 16px;
  21. padding: 32px 24px;
  22. border-radius: 10px;
  23. }
  24. #message h2 {
  25. color: #ffa100;
  26. font-weight: bold;
  27. font-size: 30px;
  28. margin: 0 0 8px;
  29. }
  30. #message h1 {
  31. font-size: 22px;
  32. font-weight: 300;
  33. color: rgba(0, 0, 0, 0.6);
  34. margin: 0 0 16px;
  35. }
  36. #message p {
  37. line-height: 140%;
  38. margin: 16px 0 24px;
  39. font-size: 14px;
  40. }
  41. #message a {
  42. display: block;
  43. text-align: center;
  44. background: #039be5;
  45. text-transform: uppercase;
  46. text-decoration: none;
  47. color: white;
  48. padding: 16px;
  49. border-radius: 4px;
  50. }
  51. #message,
  52. #message a {
  53. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  54. }
  55. #load {
  56. color: rgba(0, 0, 0, 0.4);
  57. text-align: center;
  58. font-size: 13px;
  59. }
  60. @media (max-width: 600px) {
  61. body,
  62. #message {
  63. margin-top: 0;
  64. background: white;
  65. box-shadow: none;
  66. }
  67. body {
  68. border-top: 16px solid #ffa100;
  69. }
  70. }
  71. table {
  72. margin-top: 10px;
  73. border: 2px solid black;
  74. border-collapse: collapse;
  75. width: 100%;
  76. }
  77. table td {
  78. border: 1px solid black;
  79. }
  80. table td.shrink {
  81. white-space: wrap;
  82. font-size: 19px;
  83. padding: 5px;
  84. background-color: yellow;
  85. }
  86. table td.shrink_context {
  87. white-space: wrap;
  88. font-size: 19px;
  89. padding: 5px;
  90. background-color: rgb(0, 255, 106);
  91. }
  92. table td.shrink_top {
  93. white-space: nowrap;
  94. background-color: black;
  95. color: white;
  96. font-size: 25px;
  97. }
  98. table td.expand {
  99. width: 99%;
  100. white-space: wrap;
  101. font-size: 19px;
  102. padding: 5px;
  103. }
  104. table td.expand_top {
  105. width: 99%;
  106. white-space: wrap;
  107. background-color: black;
  108. }
  109. tr:hover {
  110. background-color: gray;
  111. }
  112. button {
  113. background-color: #4caf50; /* Green */
  114. border: none;
  115. color: white;
  116. padding: 10px 10px;
  117. text-align: center;
  118. text-decoration: none;
  119. display: inline-block;
  120. font-size: 16px;
  121. border-radius: 5px;
  122. -webkit-transition-duration: 0.4s; /* Safari */
  123. transition-duration: 0.4s;
  124. cursor: pointer;
  125. }
  126. button:hover {
  127. background-color: honeydew;
  128. color: black;
  129. }
  130. </style>
  131. </head>
  132. <body>
  133. <div id="message">
  134. <center><h2>ChoozMo LINE傳單</h2></center>
  135. <center>
  136. <img
  137. src="https://firebasestorage.googleapis.com/v0/b/uce-bot.appspot.com/o/user.jpg?alt=media&token=554b90c5-562c-469a-bfee-f36b5e3f54c9"
  138. style="border-radius: 10px;"
  139. width="150px"
  140. height="150px"
  141. id="profileImage"
  142. />
  143. </center>
  144. <center>
  145. <button onclick="login()">登入LINE</button>
  146. <button onclick="logout()">登出LINE</button>
  147. <button id="senddm" onclick="shareTargetPicker()">發傳單給最多十位好友</button>
  148. </center>
  149. </div>
  150. <p id="load">ChoozMo</p>
  151. <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
  152. <script src="js/liff-init.js?1234"></script>
  153. <script src="js/liff-functions.js?12345"></script>
  154. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  155. </body>
  156. </html>