Merge branch 'master' of http://git.choozmo.com:3000/jared/liff_test

css/style.css

@@ -0,0 +1,290 @@
+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: 17px 24px;
+  border-radius: 10px;
+}
+
+#message h1 {
+  font-size: 22px;
+  font-weight: 300;
+  color: rgba(0, 0, 0, 0.6);
+  margin: 0 0 16px;
+}
+
+#message h2 {
+  color: #ea5413;
+  font-weight: bold;
+  font-size: 30px;
+  margin: 0 0 8px;
+  letter-spacing: 1px;
+}
+
+#message p {
+  line-height: 140%;
+}
+
+#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 {
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+          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;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+  }
+  body {
+    border-top: 16px solid #ff7338;
+  }
+}
+
+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: #00ff6a;
+}
+
+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;
+}
+
+table tr:hover {
+  background-color: gray;
+}
+
+button {
+  margin: 0 3px;
+  background-color: #4caf50;
+  /* Green */
+  color: white;
+  padding: 10px 10px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  -webkit-transition-duration: 0.4s;
+  letter-spacing: 1px;
+  /* Safari */
+  transition-duration: 0.4s;
+  cursor: pointer;
+}
+
+button:hover {
+  color: #4caf50;
+  border: 1px solid #4caf50;
+  background-color: honeydew;
+}
+
+img {
+  margin: 20px 0;
+}
+
+.step-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 30px 150px;
+}
+
+@media (max-width: 968px) {
+  .step-container {
+    margin: 30px 50px;
+  }
+}
+
+@media (max-width: 767px) {
+  .step-container img:first-child {
+    display: none;
+  }
+}
+
+@media (max-width: 575px) {
+  .step-container {
+    margin: 20px 15px;
+  }
+}
+
+.step-container img {
+  width: 95%;
+  max-width: 300px;
+  border-radius: 40px;
+  image-rendering: -webkit-optimize-contrast;
+}
+
+.step-container .step-item {
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding: 10px 50px;
+  background: #fff9f6;
+  -webkit-box-shadow: 3px 3px 10px #ccc;
+          box-shadow: 3px 3px 10px #ccc;
+}
+
+@media (max-width: 767px) {
+  .step-container .step-item {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    padding: 30px 20px;
+  }
+}
+
+.step-container .step-item .text {
+  margin-left: 50px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+@media (max-width: 767px) {
+  .step-container .step-item .text {
+    margin-left: 0;
+  }
+}
+
+.step-container .step-item .text h3 {
+  margin-top: 0;
+  font-weight: 800;
+  font-size: 25px;
+  letter-spacing: 2px;
+}
+
+@media (max-width: 575px) {
+  .step-container .step-item .text h3 {
+    font-size: 22px;
+  }
+}
+
+.step-container .step-item .text div {
+  width: 100%;
+  border-radius: 15px;
+  -webkit-box-shadow: 3px 3px 10px #ccc;
+          box-shadow: 3px 3px 10px #ccc;
+}
+
+.step-container .step-item .text img {
+  width: 3px;
+  margin: 15px 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+  image-rendering: -webkit-optimize-contrast;
+}
+
+.step-container .step-item .text p:first-child {
+  margin: 0;
+  padding: 10px 20px;
+  color: #fff;
+  background-image: -webkit-gradient(linear, left top, right top, from(#d12d9c), to(#ff7338));
+  background-image: linear-gradient(to right, #d12d9c 0%, #ff7338 100%);
+  font-size: 20px;
+  font-weight: bold;
+  border-radius: 15px 15px 0 0;
+}
+
+.step-container .step-item .text p:last-child {
+  margin: 0;
+  padding: 10px 20px;
+  font-size: 14px;
+  background-color: #fff;
+  border-radius: 0 0 15px 15px;
+  letter-spacing: 1px;
+}
+
+@media (max-width: 485px) {
+  #senddm {
+    margin-top: 10px;
+    padding: 10px 20px;
+  }
+}
+/*# sourceMappingURL=style.css.map */

css/style.scss

@@ -0,0 +1,225 @@
+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: 17px 24px;
+  border-radius: 10px;
+  h1 {
+    font-size: 22px;
+    font-weight: 300;
+    color: rgba(0, 0, 0, 0.6);
+    margin: 0 0 16px;
+  }
+  h2 {
+    color: #ea5413;
+    font-weight: bold;
+    font-size: 30px;
+    margin: 0 0 8px;
+    letter-spacing: 1px;
+  }
+  p {
+    line-height: 140%;
+  }
+  a {
+    display: block;
+    text-align: center;
+    background: #039be5;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: white;
+    padding: 16px;
+    border-radius: 4px;
+  }
+  &,
+  & 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 #ff7338;
+  }
+}
+
+table {
+  margin-top: 10px;
+  border: 2px solid black;
+  border-collapse: collapse;
+  width: 100%;
+  td {
+    border: 1px solid black;
+    &.shrink {
+      white-space: wrap;
+      font-size: 19px;
+      padding: 5px;
+      background-color: yellow;
+    }
+    &.shrink_context {
+      white-space: wrap;
+      font-size: 19px;
+      padding: 5px;
+      background-color: rgb(0, 255, 106);
+    }
+    &.shrink_top {
+      white-space: nowrap;
+      background-color: black;
+      color: white;
+      font-size: 25px;
+    }
+    &.expand {
+      width: 99%;
+      white-space: wrap;
+      font-size: 19px;
+      padding: 5px;
+    }
+    &.expand_top {
+      width: 99%;
+      white-space: wrap;
+      background-color: black;
+    }
+  }
+
+  tr:hover {
+    background-color: gray;
+  }
+}
+
+button {
+  margin: 0 3px;
+  background-color: #4caf50;
+  /* Green */
+  color: white;
+  padding: 10px 10px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  -webkit-transition-duration: 0.4s;
+  letter-spacing: 1px;
+  /* Safari */
+  transition-duration: 0.4s;
+  cursor: pointer;
+  &:hover {
+    color: #4caf50;
+    border: 1px solid #4caf50;
+    background-color: honeydew;
+  }
+}
+
+img {
+  margin: 20px 0;
+}
+
+.step-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 30px 150px;
+  @media (max-width: 968px) {
+    margin: 30px 50px;
+  }
+  @media (max-width: 767px) {
+    & img:first-child {
+      display: none;
+    }
+  }
+  @media (max-width: 575px) {
+    margin: 20px 15px;
+  }
+  img {
+    width: 95%;
+    max-width: 300px;
+    border-radius: 40px;
+    image-rendering: -webkit-optimize-contrast;
+  }
+  .step-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 50px;
+    background: #fff9f6;
+    box-shadow: 3px 3px 10px #ccc;
+    @media (max-width: 767px) {
+      flex-direction: column;
+      padding: 30px 20px;
+    }
+    .text {
+      margin-left: 50px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      @media (max-width: 767px) {
+        margin-left: 0;
+      }
+      h3 {
+        margin-top: 0;
+        font-weight: 800;
+        font-size: 25px;
+        letter-spacing: 2px;
+        @media (max-width: 575px) {
+          font-size: 22px;
+        }
+      }
+      div {
+        width: 100%;
+        border-radius: 15px;
+        box-shadow: 3px 3px 10px #ccc;
+      }
+      img {
+        width: 3px;
+        margin: 15px 0;
+        object-fit: cover;
+        image-rendering: -webkit-optimize-contrast;
+      }
+      & p:first-child {
+        margin: 0;
+        padding: 10px 20px;
+        color: #fff;
+        background-image: linear-gradient(to right, #d12d9c 0%, #ff7338 100%);
+        font-size: 20px;
+        font-weight: bold;
+        border-radius: 15px 15px 0 0;
+      }
+      & p:last-child {
+        margin: 0;
+        padding: 10px 20px;
+        font-size: 14px;
+        background-color: #fff;
+        border-radius: 0 0 15px 15px;
+        letter-spacing: 1px;
+      }
+    }
+  }
+}
+
+@media (max-width: 485px) {
+  #senddm {
+    margin-top: 10px;
+    padding: 10px 20px;
+  }
+}

index copy.html

@@ -1,255 +1,274 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>LIFF 2.0 Example</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;
-      }
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>LIFF 2.0 Example</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;
-        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%;
+        box-shadow: none;
       }
 
-      table td {
-        border: 1px solid black;
+      body {
+        border-top: 16px solid #ffa100;
       }
+    }
 
-      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;
-      }
+    table {
+      margin-top: 10px;
+      border: 2px solid black;
+      border-collapse: collapse;
+      width: 100%;
+    }
 
-      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;
-      }
+    table td {
+      border: 1px solid black;
+    }
 
-      button:hover {
-        background-color: honeydew;
-        color: black;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <center><h2>LIFF 2.0 | Example</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()">liff.login()</button>
-        <button onclick="logout()">liff.logout()</button>
-        <button onclick="sendMessage()">liff.sendMessage()</button>
-        <button onclick="scanCode()">liff.scanCode()</button>
-        <button onclick="openWindow()">liff.openWindow()</button>
-        <button onclick="closeWindow()">liff.closeWindow()</button>
-        <button onclick="shareTargetPicker()">liff.shareTargetPicker()</button>
-      </center>
-      <table>
-        <tr>
-          <td class="shrink_top">* Profile</td>
-          <td class="expand_top">
-            <button onclick="getProfile()">View raw JSON Data</button>
-          </td>
-        </tr>
-        <tr>
-          <td class="shrink">userId</td>
-          <td class="expand" id="userId">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink">displayName</td>
-          <td class="expand" id="displayName">Loading. . .</td>
-        </tr>
-        <tr>
-          <td class="shrink">statusMessage</td>
-          <td class="expand" id="statusMessage">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink">Email</td>
-          <td class="expand" id="email">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink">pictureUrl</td>
-          <td class="expand">
-            <a id="pictureUrl" target="_blank">Loading . . .</a>
-          </td>
-        </tr>
-        <tr>
-          <td class="shrink_top">* LIFF Context</td>
-          <td class="expand_top"></td>
-        </tr>
-        <tr>
-          <td class="shrink_context">liff.getOS()</td>
-          <td class="expand" id="getOS">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink_context">liff.getLanguage()</td>
-          <td class="expand" id="getLanguage">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink_context">liff.getVersion()</td>
-          <td class="expand" id="getVersion">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink_context">liff.isInClient()</td>
-          <td class="expand" id="isInClient">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink_context">liff.isLoggedIn()</td>
-          <td class="expand" id="isLoggedIn">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink_context">liff.getAccessToken()</td>
-          <td class="expand" id="getAccessToken">
-            <button onclick="getAccessToken()">show AccessToken</button>
-          </td>
-        </tr>
-        <tr>
-          <td class="shrink_context">liff.getContext()</td>
-          <td class="expand" id="">
-            <button onclick="getContext()">show raw JSON Data</button>
-          </td>
-        </tr>
-        <tr>
-          <td class="shrink_context">| -> type</td>
-          <td class="expand" id="context_type">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink_context">| -> viewType</td>
-          <td class="expand" id="context_viewType">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink_context">| -> userId</td>
-          <td class="expand" id="context_userId">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink_context">| -> utouId</td>
-          <td class="expand" id="context_utouId">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink_context">| -> roomId</td>
-          <td class="expand" id="context_roomId">Loading . . .</td>
-        </tr>
-        <tr>
-          <td class="shrink_context">| -> groupId</td>
-          <td class="expand" id="context_groupId">Loading . . .</td>
-        </tr>
-      </table>
-    </div>
-
-    <p id="load">Develop with ♡ by Siratee K.</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>
-  </body>
-</html>
+    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 2.0 | Example</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()">liff.login()</button>
+      <button onclick="logout()">liff.logout()</button>
+      <button onclick="sendMessage()">liff.sendMessage()</button>
+      <button onclick="scanCode()">liff.scanCode()</button>
+      <button onclick="openWindow()">liff.openWindow()</button>
+      <button onclick="closeWindow()">liff.closeWindow()</button>
+      <button onclick="shareTargetPicker()">liff.shareTargetPicker()</button>
+    </center>
+    <table>
+      <tr>
+        <td class="shrink_top">* Profile</td>
+        <td class="expand_top">
+          <button onclick="getProfile()">View raw JSON Data</button>
+        </td>
+      </tr>
+      <tr>
+        <td class="shrink">userId</td>
+        <td class="expand" id="userId">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink">displayName</td>
+        <td class="expand" id="displayName">Loading. . .</td>
+      </tr>
+      <tr>
+        <td class="shrink">statusMessage</td>
+        <td class="expand" id="statusMessage">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink">Email</td>
+        <td class="expand" id="email">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink">pictureUrl</td>
+        <td class="expand">
+          <a id="pictureUrl" target="_blank">Loading . . .</a>
+        </td>
+      </tr>
+      <tr>
+        <td class="shrink_top">* LIFF Context</td>
+        <td class="expand_top"></td>
+      </tr>
+      <tr>
+        <td class="shrink_context">liff.getOS()</td>
+        <td class="expand" id="getOS">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink_context">liff.getLanguage()</td>
+        <td class="expand" id="getLanguage">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink_context">liff.getVersion()</td>
+        <td class="expand" id="getVersion">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink_context">liff.isInClient()</td>
+        <td class="expand" id="isInClient">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink_context">liff.isLoggedIn()</td>
+        <td class="expand" id="isLoggedIn">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink_context">liff.getAccessToken()</td>
+        <td class="expand" id="getAccessToken">
+          <button onclick="getAccessToken()">show AccessToken</button>
+        </td>
+      </tr>
+      <tr>
+        <td class="shrink_context">liff.getContext()</td>
+        <td class="expand" id="">
+          <button onclick="getContext()">show raw JSON Data</button>
+        </td>
+      </tr>
+      <tr>
+        <td class="shrink_context">| -> type</td>
+        <td class="expand" id="context_type">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink_context">| -> viewType</td>
+        <td class="expand" id="context_viewType">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink_context">| -> userId</td>
+        <td class="expand" id="context_userId">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink_context">| -> utouId</td>
+        <td class="expand" id="context_utouId">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink_context">| -> roomId</td>
+        <td class="expand" id="context_roomId">Loading . . .</td>
+      </tr>
+      <tr>
+        <td class="shrink_context">| -> groupId</td>
+        <td class="expand" id="context_groupId">Loading . . .</td>
+      </tr>
+    </table>
+  </div>
+
+  <p id="load">Develop with ♡ by Siratee K.</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>
+</body>
+
+</html>

index.html

@@ -1,162 +1,61 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>ChoozMo LINE傳單</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;
-      }
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ChoozMo LINE傳單</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>
 
-      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;
-      }
+<body>
+  <div id="message">
+    <center>
+      <img style="margin: 0; width: 250px; image-rendering: -webkit-optimize-contrast;" src="/liff2/img/CMM_LOGO.png"
+        alt="">
+      <h2>LINE 傳單</h2>
+    </center>
 
-      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;
-      }
+    <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>
 
-      button:hover {
-        background-color: honeydew;
-        color: black;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <center><h2>ChoozMo LINE傳單</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>
-        <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 onclick="shareTargetPicker()">發傳單給最多五個好友</button>
-      </center>
+    <center>
+      <button onclick="login()">登入 LINE</button>
+      <button onclick="logout()">登出 LINE</button>
+      <button id="senddm" onclick="shareTargetPicker()">發傳單給最多五個好友</button>
+    </center>
+  </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>
 
-    <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>
-  </body>
-</html>
+</html>

liff2/index.html

@@ -1,164 +1,61 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>ChoozMo LINE傳單</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>ChoozMo LINE傳單</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>ChoozMo LINE傳單</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="/liff2/img/CMM_LOGO.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>

liff2/js/liff-functions.js

@@ -29,6 +29,7 @@ function sendMessage() {
 }
 
 function login() {
+  console.log('login');
   liff.login();
 }
 
@@ -65,40 +66,49 @@ function logout() {
 
 function createFlexMessageData() {
   var flex = {
-      "type": "flex",
-      "altText": redistitle,
-      "contents": redisdata,
-    };
+    "type": "flex",
+    "altText": redistitle,
+    "contents": redisdata,
+  };
 
   return flex;
 }
 
- var redisdata='';
+var redisdata = '';
 
 function shareTargetPicker() {
-  
+
   const url = 'https://liff.googo.org:9898/getbtn'
   axios
     .get(url)
-    .then(({data}) => {
-      redisdata=data.data;
-      redistitle=data.title;
+    .then(({ data }) => {
+      console.log('data', data);
+      redisdata = data.data;
+      redistitle = data.title;
       console.log(redistitle);
       console.log(redisdata);
 
       liff
-      .shareTargetPicker([
-        createFlexMessageData()      
-      ])
-      .then(() => {
-        alert("Shared to the friend(s) you picked");
-      })
-      .catch(function(res) {
-        alert(res);
-      });
-  
+        .shareTargetPicker([
+          createFlexMessageData()
+        ])
+        .then(() => {
+          alert("Shared to the friend(s) you picked");
+        })
+        .catch(function (res) {
+          alert(res);
+        });
+
     });
 
 
 
 }
+
+(function test() {
+
+  setTimeout(() => {
+    liff.isLoggedIn();
+    console.log('123');
+  }, 3000);
+})();

liff2/js/liff-init.js

@@ -19,66 +19,67 @@ function initLIFF() {
     liff
       .getProfile()
       .then(profile => {
+        console.log('profile', profile);
         document.getElementById("profileImage").src = profile.pictureUrl;
-//        document.getElementById("userId").innerHTML = profile.userId;
-  //      document.getElementById("displayName").innerHTML = profile.displayName;
-  //      document.getElementById("statusMessage").innerHTML =
-    //      profile.statusMessage;
-//        document.getElementById("pictureUrl").href = profile.pictureUrl;
-  //      document.getElementById("pictureUrl").innerHTML = profile.pictureUrl;
-    //    document.getElementById(
-      //    "email"
-      //  ).innerHTML = liff.getDecodedIDToken().email;
+        //        document.getElementById("userId").innerHTML = profile.userId;
+        //      document.getElementById("displayName").innerHTML = profile.displayName;
+        //      document.getElementById("statusMessage").innerHTML =
+        //      profile.statusMessage;
+        //        document.getElementById("pictureUrl").href = profile.pictureUrl;
+        //      document.getElementById("pictureUrl").innerHTML = profile.pictureUrl;
+        //    document.getElementById(
+        //    "email"
+        //  ).innerHTML = liff.getDecodedIDToken().email;
       })
       .catch(e => {
-      //  document.getElementById("userId").innerHTML = "No data, " + e;
-      //  document.getElementById("displayName").innerHTML = "No data, " + e;
-      //  document.getElementById("statusMessage").innerHTML = "No data, " + e;
-       // document.getElementById("pictureUrl").innerHTML = "No data, " + e;
+        //  document.getElementById("userId").innerHTML = "No data, " + e;
+        //  document.getElementById("displayName").innerHTML = "No data, " + e;
+        //  document.getElementById("statusMessage").innerHTML = "No data, " + e;
+        // document.getElementById("pictureUrl").innerHTML = "No data, " + e;
         //document.getElementById("email").innerHTML = "No data, " + e;
       });
   } else {
-//    document.getElementById("userId").innerHTML = "No data, Login first";
-  //  document.getElementById("displayName").innerHTML = "No data, Login first";
- //   document.getElementById("statusMessage").innerHTML = "No data, Login first";
-  //  document.getElementById("pictureUrl").innerHTML = "No data, Login first";
-  //  document.getElementById("email").innerHTML = "No data, Login first";
+    //    document.getElementById("userId").innerHTML = "No data, Login first";
+    //  document.getElementById("displayName").innerHTML = "No data, Login first";
+    //   document.getElementById("statusMessage").innerHTML = "No data, Login first";
+    //  document.getElementById("pictureUrl").innerHTML = "No data, Login first";
+    //  document.getElementById("email").innerHTML = "No data, Login first";
   }
 
-//  document.getElementById("getOS").innerHTML = liff.getOS();
+  //  document.getElementById("getOS").innerHTML = liff.getOS();
   //document.getElementById("getLanguage").innerHTML = liff.getLanguage();
- // document.getElementById("getVersion").innerHTML = liff.getVersion();
- // document.getElementById("isInClient").innerHTML = liff.isInClient();
+  // document.getElementById("getVersion").innerHTML = liff.getVersion();
+  // document.getElementById("isInClient").innerHTML = liff.isInClient();
   //document.getElementById("isLoggedIn").innerHTML = liff.isLoggedIn();
   var context = liff.getContext();
   if (context !== null) {
-//    document.getElementById("context_type").innerHTML = context.type;
- //   document.getElementById("context_viewType").innerHTML = context.viewType;
-  //  document.getElementById("context_userId").innerHTML = context.userId;
+    //    document.getElementById("context_type").innerHTML = context.type;
+    //   document.getElementById("context_viewType").innerHTML = context.viewType;
+    //  document.getElementById("context_userId").innerHTML = context.userId;
     if (context.utouId) {
-//      document.getElementById("context_utouId").innerHTML = context.utouId;
+      //      document.getElementById("context_utouId").innerHTML = context.utouId;
     } else {
- //     document.getElementById("context_utouId").innerHTML =
-  //      "You are not in the utou";
+      //     document.getElementById("context_utouId").innerHTML =
+      //      "You are not in the utou";
     }
     if (context.roomId) {
-//      document.getElementById("context_roomId").innerHTML = context.roomId;
+      //      document.getElementById("context_roomId").innerHTML = context.roomId;
     } else {
- //     document.getElementById("context_roomId").innerHTML =
-  //      "You are not in the room";
+      //     document.getElementById("context_roomId").innerHTML =
+      //      "You are not in the room";
     }
     if (context.groupId) {
-  //    document.getElementById("context_groupId").innerHTML = context.groupId;
+      //    document.getElementById("context_groupId").innerHTML = context.groupId;
     } else {
-  //    document.getElementById("context_groupId").innerHTML =
-   //     "You are not in the group ";
+      //    document.getElementById("context_groupId").innerHTML =
+      //     "You are not in the group ";
     }
   } else {
- //   document.getElementById("context_type").innerHTML = "No data.";
-  //  document.getElementById("context_viewType").innerHTML = "No data.";
-   // document.getElementById("context_userId").innerHTML = "No data.";
-   // document.getElementById("context_utouId").innerHTML = "No data.";
+    //   document.getElementById("context_type").innerHTML = "No data.";
+    //  document.getElementById("context_viewType").innerHTML = "No data.";
+    // document.getElementById("context_userId").innerHTML = "No data.";
+    // document.getElementById("context_utouId").innerHTML = "No data.";
     //document.getElementById("context_roomId").innerHTML = "No data.";
-   // document.getElementById("context_groupId").innerHTML = "No data.";
+    // document.getElementById("context_groupId").innerHTML = "No data.";
   }
 }