DC
/
InnovationLab
Observar 5
Favorito 0
Fork 0
Código Issues 0 Pull Requests 0 Versões 0 Wiki Atividade
Ver código fonte

update edm

OMEGA\ericky.hsiao 2 anos atrás
pai
bc51e20bdd
commit
e53733f565
17 arquivos alterados com 375 adições e 238 exclusões
Visão unificada Mostrar estatísticas do Diff
  1. BIN
      public/EDM/2022-Q4/img/img-1.jpg
  2. BIN
      public/EDM/2022-Q4/img/img-1.png
  3. BIN
      public/EDM/2022-Q4/img/img-2.png
  4. 0
    235
      public/EDM/2022-Q4/index.html
  5. 0
    3
      public/EDM/2022-Q4/prototype-face-fusion.html
  6. BIN
      public/EDM/EDMVo.2/img/.DS_Store
  7. 0
    0
      public/EDM/EDMVo.2/img/bg.jpg
  8. 0
    0
      public/EDM/EDMVo.2/img/btn.png
  9. 0
    0
      public/EDM/EDMVo.2/img/cover.jpg
  10. 0
    0
      public/EDM/EDMVo.2/img/footer-1.png
  11. 0
    0
      public/EDM/EDMVo.2/img/footer-2.png
  12. BIN
      public/EDM/EDMVo.2/img/img-1.jpg
  13. BIN
      public/EDM/EDMVo.2/img/img-2.jpg
  14. BIN
      public/EDM/EDMVo.2/img/img-3-1.jpg
  15. BIN
      public/EDM/EDMVo.2/img/img-3.jpg
  16. 282
    0
      public/EDM/EDMVo.2/index.html
  17. 93
    0
      public/assets/js/loginGate.js

BIN
public/EDM/2022-Q4/img/img-1.jpg Ver arquivo


BIN
public/EDM/2022-Q4/img/img-1.png Ver arquivo


BIN
public/EDM/2022-Q4/img/img-2.png Ver arquivo


+ 0
- 235
public/EDM/2022-Q4/index.html Ver arquivo

1 
-<!DOCTYPE html>
2 
-<html
3 
-  xmlns="http://www.w3.org/1999/xhtml"
4 
-  xmlns:o="urn:schemas-microsoft-com:office:office"
5 
-  xmlns:v="urn:schemas-microsoft-com:vml"
6 
->
7 
-  <head>
8 
-    <meta charset="UTF-8" />
9 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
10 
-    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
11 
-    <title></title>
12 
-    <meta name="x-apple-disable-message-reformatting" />
13 
-    <!--[if !mso]><!-->
14 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
15 
-    <!--<![endif]-->
16 
-    <!--[if gte mso 9]>
17 
-      <xml>
18 
-        <o:OfficeDocumentSettings>
19 
-          <o:AllowPNG />
20 
-          <o:PixelsPerInch>96</o:PixelsPerInch>
21 
-        </o:OfficeDocumentSettings>
22 
-      </xml>
23 
-    <![endif]-->
24 
-  </head>
25 
-  <body style="font-size: 10px; font-family: 'Noto Sans CJK TC'; margin: 0">
26 
-    <table
27 
-      border="0"
28 
-      cellpadding="0"
29 
-      cellspacing="0"
30 
-      width="650"
31 
-      style="width: 650px; margin: auto; padding: 3em;background-image: url(./img/bg.jpg);    background: #e9e9e9;"
32 
-    >
33 
-      <tbody>
34 
-        <tr>
35 
-          <td
36 
-            style="
37 
-              color: #9fa0a0;
38 
-              font-size: 1.2em;
39 
-              font-weight: 900;
40 
-              line-height: 2;
41 
-            "
42 
-          >
43 
-            Innovation Lab Vo.1
44 
-          </td>
45 
-        </tr>
46 
-        <tr>
47 
-          <td style="font-size: 1.6em; font-weight: 900; line-height: 2">
48 
-            <span
49 
-              style="
50 
-                display: inline-block;
51 
-                width: 6.25em;
52 
-                height: 1.625em;
53 
-                background-color: #000000;
54 
-                transform: translateY(25%);
55 
-              "
56 
-            ></span>
57 
-            Innovation Lab 集結成冊 第一期 - 2022/07/XX
58 
-          </td>
59 
-        </tr>
60 
-        <tr>
61 
-          <td style="font-size: 1.2em; line-height: 2"></td>
62 
-        </tr>
63 
-        <tr>
64 
-          <td style="color: #9fa0a0; font-size: 1.2em; padding: 2em 0">
65 
-            XX XX
66 
-          </td>
67 
-        </tr>
68 
-        <tr>
69 
-          <td align="center">
70 
-            <img
71 
-              width="650"
72 
-              style="margin: 3em 0"
73 
-              src="./img/cover.jpg"
74 
-              alt="alt"
75 
-            />
76 
-          </td>
77 
-        </tr>
78 
-        <tr style="display: block; padding-left: 3em; padding-bottom: 3em">
79 
-          <td
80 
-            style="
81 
-              color: #9fa0a0;
82 
-              font-size: 1.2em;
83 
-              line-height: 1.75;
84 
-              padding-left: 3em;
85 
-              margin-top: 3em;
86 
-              border-left: 1em solid #919292;
87 
-            "
88 
-          >
89 
-          Innovation Lab是一群新時代的特務，專在瞬息萬變、資訊爆炸的世代，<br>追尋宇宙中最酷、最創新的科技產物。
90 
-          我們將每個破案的案件整理為超機密檔案，再一一解碼釋出，<br>供您一起窺見二元碼中的奧秘⋯⋯
91 
-          </td>
92 
-        </tr>
93 
-        <tr>
94 
-          <td style="font-size: 1.4em; font-weight: 700; padding: 1em 0">
95 
-            知己小姐是由一百位女人共創而生
96 
-          </td>
97 
-        </tr>
98 
-        <tr>
99 
-          <td style="font-size: 1.2em; line-height: 1.25">
100 
-            農純鄉客群以 35＋以上女性為主，為與其他滴雞精品牌做出差異，濃純鄉決定透過知己小姐來深化與女性的關係，為女性發聲，讓他們不用活在別人的期待底下而能自在地做自己，去理解女性、療癒女性，讓女性對品牌產生好感。
101 
-
102 
-            </td>
103 
-        </tr>
104 
-        <tr>
105 
-          <td
106 
-            style="
107 
-              font-size: 1.2em;
108 
-              font-weight: 700;
109 
-              line-height: 2;
110 
-              padding-top: 1em;
111 
-            "
112 
-          >
113 
-          </td>
114 
-        </tr>
115 
-        <tr>
116 
-          <td>
117 
-            <p>
118 
-              <span
119 
-                style="
120 
-                  display: inline-block;
121 
-                  width: 0.6em;
122 
-                  height: 0.6em;
123 
-                  background-color: #000000;
124 
-                  margin-right: 0.5em;
125 
-                  transform: translateY(-0.15em);
126 
-                "
127 
-              ></span
128 
-              >多人共創
129 
-            </p>
130 
-            <p>
131 
-              <span
132 
-                style="
133 
-                  display: inline-block;
134 
-                  width: 0.6em;
135 
-                  height: 0.6em;
136 
-                  background-color: #000000;
137 
-                  margin-right: 0.5em;
138 
-                  transform: translateY(-0.15em);
139 
-                "
140 
-              ></span
141 
-              >客製化分享內容
142 
-            </p>
143 
-            <p>
144 
-              <span
145 
-                style="
146 
-                  display: inline-block;
147 
-                  width: 0.6em;
148 
-                  height: 0.6em;
149 
-                  background-color: #000000;
150 
-                  margin-right: 0.5em;
151 
-                  transform: translateY(-0.15em);
152 
-                "
153 
-              ></span
154 
-              >HTML5 濾鏡
155 
-            </p>
156 
-          </td>
157 
-        </tr>
158 
-        <tr>
159 
-          <td align="center">
160 
-            <img
161 
-              width="520"
162 
-              style="margin-top: 3em; margin-bottom: 4em"
163 
-              src="./img/img-1.jpg"
164 
-              alt="alt"
165 
-            />
166 
-          </td>
167 
-        </tr>
168 
-        <tr>
169 
-          <td style="font-size: 1.4em; font-weight: 700; padding: 1em 0">
170 
-          </td>
171 
-        </tr>
172 
-        <tr>
173 
-          <td style="font-size: 1.2em; line-height: 1.25">
174 
-            農純鄉公所分專募集心聲、AI 分析人物臉孔，紀錄人物 3D 建模的過程，融合第一代知己小姐現身。
175 
-            第二階段讓更多女性加入計畫，畫出有自己成分的第二代知己小姐，讓這個數與每個女人的自己x知己小姐不斷有機成長。
176 
-            <center>
177 
-              <img
178 
-              width="520"
179 
-              style="margin-top: 3em; margin-bottom: 4em"
180 
-              src="./img/img-2.png"
181 
-              alt="alt"
182 
-            />
183 
-            </center>
184 
-
185 
-            <span style="line-height: 1.5;background-color: #000;color: #fff;width: fit-content;padding: 0.2em;">即時人臉特徵融合AI</span>
186 
-            特徵辨識使用者「眼、鼻、口」等五官特徵，並以知己小姐臉部作為模板，使用AI臉部融合技術根據比例參數與使用者五官融合，創造獨一無二的自己x知己小姐。
187 
-
188 
-
189 
-          </td>
190 
-        </tr>
191 
-
192 
-        <tr>
193 
-          <td align="center" style="padding: 3em 0 2em">
194 
-            <a
195 
-              href="https://omgww-my.sharepoint.com/:f:/g/personal/ericky_hsiao_ogilvy_com/Et2jO2r19apDryglPc26MGABW8RP5YiQcASxLQeAbWHNEA?e=yW3BFt"
196 
-              target="_blank"
197 
-              style="padding: 0px; text-decoration: none; display: inline-block"
198 
-            >
199 
-              <img style="width: 15em" src="./img/btn.png" alt="btn" />
200 
-            </a>
201 
-          </td>
202 
-        </tr>
203 
-
204 
-      </tbody>
205 
-    </table>
206 
-    <table
207 
-      border="0"
208 
-      cellpadding="0"
209 
-      cellspacing="0"
210 
-      width="650"
211 
-      style="
212 
-        width: 650px;
213 
-        margin: auto;
214 
-        padding: 3.6em 0 13.6em;
215 
-        background: url('./img/footer-2.png') no-repeat bottom / 100% 7em;
216 
-      "
217 
-    >
218 
-      <tbody>
219 
-        <tr>
220 
-          <td align="center">
221 
-            <img src="./img/footer-1.png" alt="footer" />
222 
-          </td>
223 
-        </tr>
224 
-        <tr>
225 
-          <td
226 
-            align="center"
227 
-            style="font-size: 1.2em; font-weight: 700; padding: 1em 0"
228 
-          >
229 
-            定時解密
230 
-          </td>
231 
-        </tr>
232 
-      </tbody>
233 
-    </table>
234 
-  </body>
235 
-</html>

+ 0
- 3
public/EDM/2022-Q4/prototype-face-fusion.html Ver arquivo

1 
-<script>
2 
-  location.href = "https://innovationlab.cecmartech.com/%5bEric%5dphotoHelper/";
3 
-</script>

BIN
public/EDM/EDMVo.2/img/.DS_Store Ver arquivo


public/EDM/2022-Q4/img/bg.jpg → public/EDM/EDMVo.2/img/bg.jpg Ver arquivo


public/EDM/2022-Q4/img/btn.png → public/EDM/EDMVo.2/img/btn.png Ver arquivo


public/EDM/2022-Q4/img/cover.jpg → public/EDM/EDMVo.2/img/cover.jpg Ver arquivo


public/EDM/2022-Q4/img/footer-1.png → public/EDM/EDMVo.2/img/footer-1.png Ver arquivo


public/EDM/2022-Q4/img/footer-2.png → public/EDM/EDMVo.2/img/footer-2.png Ver arquivo


BIN
public/EDM/EDMVo.2/img/img-1.jpg Ver arquivo


BIN
public/EDM/EDMVo.2/img/img-2.jpg Ver arquivo


BIN
public/EDM/EDMVo.2/img/img-3-1.jpg Ver arquivo


BIN
public/EDM/EDMVo.2/img/img-3.jpg Ver arquivo


+ 282
- 0
public/EDM/EDMVo.2/index.html Ver arquivo

1 
+<!DOCTYPE html>
2 
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"
3 
+  xmlns:v="urn:schemas-microsoft-com:vml">
4 
+
5 
+<head>
6 
+  <meta charset="UTF-8" />
7 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8 
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
9 
+  <title></title>
10 
+  <meta name="x-apple-disable-message-reformatting" />
11 
+  <!--[if !mso]><!-->
12 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
13 
+  <!--<![endif]-->
14 
+  <!--[if gte mso 9]>
15 
+      <xml>
16 
+        <o:OfficeDocumentSettings>
17 
+          <o:AllowPNG />
18 
+          <o:PixelsPerInch>96</o:PixelsPerInch>
19 
+        </o:OfficeDocumentSettings>
20 
+      </xml>
21 
+    <![endif]-->
22 
+</head>
23 
+
24 
+<body style="font-size: 15px; font-family: 'Noto Sans CJK TC'; margin: 0">
25 
+  <table border="0" cellpadding="0" cellspacing="0" width="650"
26 
+    style="width: 650px; margin: auto; padding: 3em;background-image: url(./img/bg.jpg);    background-color: #e9e9e9;">
27 
+    <tbody>
28 
+      <tr>
29 
+        <td style="
30 
+              color: #9fa0a0;
31 
+              font-size: 1.2em;
32 
+              font-weight: 900;
33 
+              line-height: 2;
34 
+            ">
35 
+          Ogilvy Innovation Lab Vo.2
36 
+        </td>
37 
+      </tr>
38 
+      <tr>
39 
+        <td style="font-size: 1.6em; font-weight: 900; line-height: 2">
40 
+          <span style="
41 
+                display: inline-block;
42 
+                width: 6.25em;
43 
+                height: 1.625em;
44 
+                background-color: #000000;
45 
+                transform: translateY(25%);
46 
+              "></span>
47 
+          Ogilvy Innovation Lab 集結成冊 第二期
48 
+        </td>
49 
+      </tr>
50 
+      <tr>
51 
+        <td style="font-size: 1.2em; line-height: 2"></td>
52 
+      </tr>
53 
+      <tr>
54 
+        <td style="color: #9fa0a0; font-size: 1.2em; padding: 2em 0">
55 
+          2023 02
56 
+        </td>
57 
+      </tr>
58 
+      <tr>
59 
+        <td align="center">
60 
+          <img width="650" style="margin: 3em 0" src="./img/cover.jpg" alt="alt" />
61 
+        </td>
62 
+      </tr>
63 
+      <tr style="display: block; padding-left: 3em; padding-bottom: 3em">
64 
+        <td style="
65 
+              color: #9fa0a0;
66 
+              font-size: 1.2em;
67 
+              line-height: 2;
68 
+              padding-left: 3em;
69 
+              margin-top: 3em;
70 
+              border-left: 1em solid #919292;
71 
+            ">
72 
+          Innovation Lab是一群新時代的特務，專在瞬息萬變、資訊爆炸的世代，追尋宇宙中最酷、最創新的科技產物。
73 
+          我們將每個破案的案件整理為超機密檔案，再一一解碼釋出，<br>供您一起窺見二元碼中的奧秘⋯⋯
74 
+        </td>
75 
+      </tr>
76 
+
77 
+
78 
+      <tr>
79 
+        <td style="font-size: 1.4em; font-weight: 700; padding: 1em 0">
80 
+          完美身柴 | 完美聲柴<br>
81 
+          網路迷因 X 影音音樂 X 可愛
82 
+        </td>
83 
+      </tr>
84 
+      <tr>
85 
+        <td style="font-size: 1.2em; line-height: 2">
86 
+          將客戶產品特色並結合可愛萌寵-柴柴，製作三項H5體感遊戲模組；『柴柴吃罐罐』『柴柴不迷路』點點按按就能將柴柴訓練成完美身柴；『柴卡貝拉樂隊』藉由挑戰評分展現 24bit Hi-Fi 保真音質確實得來不易。
87 
+        </td>
88 
+      </tr>
89 
+      <tr>
90 
+        <td style="
91 
+              font-size: 1.2em;
92 
+              font-weight: 700;
93 
+              line-height: 2;
94 
+              padding-top: 1em;
95 
+            ">
96 
+        </td>
97 
+      </tr>
98 
+      <tr>
99 
+        <td>
100 
+          <p>
101 
+            <span style="
102 
+                  display: inline-block;
103 
+                  width: 0.6em;
104 
+                  height: 0.6em;
105 
+                  background-color: #000000;
106 
+                  margin-right: 0.5em;
107 
+                  transform: translateY(-0.15em);
108 
+                "></span>HTML5 Mini-Game
109 
+          </p>
110 
+          <p>
111 
+            <span style="
112 
+                  display: inline-block;
113 
+                  width: 0.6em;
114 
+                  height: 0.6em;
115 
+                  background-color: #000000;
116 
+                  margin-right: 0.5em;
117 
+                  transform: translateY(-0.15em);
118 
+                "></span>體感互動
119 
+          </p>
120 
+          <p>
121 
+            <span style="
122 
+                  display: inline-block;
123 
+                  width: 0.6em;
124 
+                  height: 0.6em;
125 
+                  background-color: #000000;
126 
+                  margin-right: 0.5em;
127 
+                  transform: translateY(-0.15em);
128 
+                "></span>聲音互動
129 
+          </p>
130 
+        </td>
131 
+      </tr>
132 
+      <tr>
133 
+        <td align="center">
134 
+          <img width="520" style="margin-top: 3em; margin-bottom: 1em" src="./img/img-1.jpg" alt="alt" />
135 
+        </td>
136 
+      </tr>
137 
+      <!-- <tr>
138 
+        <td style="font-size: 1.4em; font-weight: 700; padding: 1em 0">
139 
+        </td>
140 
+      </tr> -->
141 
+      <tr>
142 
+        <td style="font-size: 1.2em; line-height: 2">
143 
+          在手機上復刻經典遊戲『電流急急棒』，同樣消費者僅須一隻手指，體驗Watch5 系列『自動返航功能』，避開障礙物引導柴柴走到正確的回家路線。
144 
+          <center>
145 
+            <img width="520" style="margin-top: 3em; margin-bottom: 1em" src="./img/img-2.jpg" alt="alt" />
146 
+          </center>
147 
+
148 
+          <span
149 
+            style="line-height: 2;background-color: #000;color: #fff;width: fit-content;padding: 0.2em;">Outcome</span>
150 
+            你訓練出來的是總柴？腫柴？還是骨瘦如柴？邀請更多朋友也來玩，分享結果更好玩。
151 
+            可愛萌寵吸引眼球，消費者分享自己的『完美身柴』建立互動習慣，擴散引發討論。
152 
+
153 
+
154 
+        </td>
155 
+      </tr>
156 
+
157 
+      <tr>
158 
+        <td align="center" style="padding: 3em 0 2em">
159 
+          <a href="https://omgww-my.sharepoint.com/:f:/g/personal/ericky_hsiao_ogilvy_com/Et2jO2r19apDryglPc26MGABW8RP5YiQcASxLQeAbWHNEA?e=yW3BFt"
160 
+            target="_blank" style="padding: 0px; text-decoration: none; display: inline-block">
161 
+            <img style="width: 10em" src="./img/btn.png" alt="btn" />
162 
+          </a>
163 
+          <br>
164 
+          <br>
165 
+          <br>
166 
+        </td>
167 
+      </tr>
168 
+
169 
+      <!-- NEXT paeg -->
170 
+
171 
+      <tr>
172 
+        <td style="font-size: 1.4em; font-weight: 700; padding: 1em 0">
173 
+          『Prototype』
174 
+        </td>
175 
+      </tr>
176 
+
177 
+      <tr>
178 
+        <td width="200" style="padding: 1em 0 4em;">
179 
+          <p style="font-size: 1.2em; line-height: 3; margin: 0;">From UGC to
180 
+          </p><br>
181 
+          <p style="display: inline-block;font-size: 2.2em; font-weight: 700; line-height: 1; margin: 0;">
182 
+            <span
183 
+            style="background-color: #000;color: #fff;width: fit-content;padding: 0 0.3em;">AI
184 
+          </span>
185 
+          </p>
186 
+          <span style="font-size: 2.2em; font-weight: 700; line-height: 1">、</span>
187 
+          <p style="display: inline-block;font-size: 2.2em; font-weight: 700; line-height: 1; margin: 0;">
188 
+            <span
189 
+            style="background-color: #000;color: #fff;width: fit-content;padding: 0 0.3em;">G</span>enerated
190 
+          </p>
191 
+          <span style="font-size: 2.2em; font-weight: 700; line-height: 1">、</span>
192 
+          <p style="display: inline-block;font-size: 2.2em; font-weight: 700; line-height: 1; margin: 0;">
193 
+            <span
194 
+            style="background-color: #000;color: #fff;width: fit-content;padding: 0 0.3em;">C</span>ontent
195 
+          </p>
196 
+        </td>
197 
+      </tr>
198 
+      <tr>
199 
+        <td style="background-color: #b3b3b3; color: #ffffff; padding: 1em 5em 1.5em 5em;">
200 
+          <p style="font-size: 1.4em; line-height: 2; margin: 0 0 0.3em 0; font-weight: bold;letter-spacing: 2px;"><q>未來十年，AIGC將徹底顛覆內容生產行業。</q></p>
201 
+          <address style="text-align: right;">-  2022 百度世界大會 百度執行長 李彦宏</address>
202 
+        </td>
203 
+      </tr>
204 
+      <tr>
205 
+        <td style="font-size: 1.2em; line-height: 2; padding-top: 2em;">
206 
+          AIGC是PGC、UGC之後，全新的內容生產方式。<br>
207 
+          它不僅會提升內容生產的效率，也會創造出有獨特價值和獨立、多元視角的內容。
208 
+        </td>
209 
+      </tr>
210 
+      <tr>
211 
+        <td style="font-size: 1.4em; font-weight: 700; padding: 2em 0 0">
212 
+          <p style="width: 520px; margin: 0 auto; text-align: left;">AI繪圖 - Amazing! 顛覆想像</p>
213 
+        </td>
214 
+      </tr>
215 
+      <td align="center">
216 
+        <center>
217 
+          <img width="520" style="margin-top: 1em; margin-bottom: 0.2em" src="./img/img-3-1.jpg" alt="alt" />
218 
+        </center>
219 
+        <p style="width: 520px; margin: 0 auto; text-align: left; line-height: 2;"><span style="
220 
+          display: inline-block;
221 
+          width: 0.6em;
222 
+          height: 0.6em;
223 
+          background-color: #000000;
224 
+          margin-right: 0.5em;
225 
+          transform: translateY(-0.15em);
226 
+        "></span>提案DEMO，AI對以文字描述自由創作<br>
227 
+          『台大的傅鐘每天會敲響21聲，來自傅前校長勉勵同學每天要花三小時沉思，但據說若你認真數了21響，可是會遭致被21的命運唷~』</p>
228 
+      </td>
229 
+      </tr>
230 
+      <!-- <tr>
231 
+        <td style="font-size: 1.4em; font-weight: 700; padding: 1em 0">
232 
+        </td>
233 
+      </tr> -->
234 
+      <tr>
235 
+        <td style="font-size: 1.2em; line-height: 2">
236 
+          <center>
237 
+            <img width="520" style="margin-top: 3em; margin-bottom: 1em" src="./img/img-3.jpg" alt="alt" />
238 
+          </center>
239 
+
240 
+          <span
241 
+            style="line-height: 2;background-color: #000;color: #fff;width: fit-content;padding: 0.2em;">不同AI的運行需要特殊伺服器架構<br>想DEMO動手玩起來~
242 
+            </span>
243 
+
244 
+
245 
+        </td>
246 
+      </tr>
247 
+
248 
+      <tr>
249 
+        <td align="center" style="padding: 3em 0 2em">
250 
+          <a href="https://omgww-my.sharepoint.com/:f:/g/personal/ericky_hsiao_ogilvy_com/Et2jO2r19apDryglPc26MGABW8RP5YiQcASxLQeAbWHNEA?e=yW3BFt"
251 
+            target="_blank" style="padding: 0px; text-decoration: none; display: inline-block">
252 
+            <img style="width: 10em" src="./img/btn.png" alt="btn" />
253 
+          </a>
254 
+        </td>
255 
+      </tr>
256 
+
257 
+    </tbody>
258 
+
259 
+
260 
+  </table>
261 
+  <table border="0" cellpadding="0" cellspacing="0" width="650" style="
262 
+        width: 650px;
263 
+        margin: auto;
264 
+        padding: 3.6em 0 13.6em;
265 
+        background: url('./img/footer-2.png') no-repeat bottom / 100% 7em;
266 
+      ">
267 
+    <tbody>
268 
+      <tr>
269 
+        <td align="center">
270 
+          <img src="./img/footer-1.png" alt="footer" />
271 
+        </td>
272 
+      </tr>
273 
+      <tr>
274 
+        <td align="center" style="font-size: 1.2em; font-weight: 700; padding: 1em 0">
275 
+          定時解密
276 
+        </td>
277 
+      </tr>
278 
+    </tbody>
279 
+  </table>
280 
+</body>
281 
+
282 
+</html>

+ 93
- 0
public/assets/js/loginGate.js Ver arquivo

1 
+function LoginGate() {
2 
+
3 
+  let loginPopup = null, style = null;
4 
+
5 
+  function closePopup() {
6 
+    document.body.removeChild(loginPopup);
7 
+    document.head.removeChild(style);
8 
+  }
9 
+
10 
+  function onSubmit() {
11 
+    const idNo = $('#idNo').val();
12 
+    const telExt = $('#telExt').val();
13 
+    let output = false;
14 
+
15 
+    if (!/\d{4}/.test(idNo)) {
16 
+      $('.invalid-feedback--idNo').css('display', 'block');
17 
+    } else {
18 
+      $('.invalid-feedback--idNo').css('display', 'none');
19 
+      output = true;
20 
+    }
21 
+
22 
+    if (!/\d{3}/.test(telExt)) {
23 
+      $('.invalid-feedback--telExt').css('display', 'block');
24 
+    } else {
25 
+      $('.invalid-feedback--telExt').css('display', 'none');
26 
+      output = true;
27 
+    }
28 
+
29 
+    if (!output) return;
30 
+
31 
+    $.ajax({
32 
+      url: 'https://ogilvytw.azurewebsites.net/api/verifyMember.ashx',
33 
+      data: {
34 
+        idNo: idNo,
35 
+        telExt: telExt,
36 
+      },
37 
+      success: (response) => {
38 
+        if (!response.success) {
39 
+          alert(response.msg);
40 
+          return;
41 
+        }
42 
+        alert('登入成功');
43 
+        $.cookie('innovationlab_cognitive_user', idNo + ':' + telExt, {  path: '/' }); // expires: 30,
44 
+        closePopup();
45 
+        afterLogin();
46 
+      },
47 
+      error: err => {
48 
+        console.log(err);
49 
+        alert(err)
50 
+      }
51 
+    });
52 
+  }
53 
+
54 
+  function init() {
55 
+    const customcss = '.login__popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:1000}.login__popup table,.login__popup tr,.login__popup td{border:none;vertical-align:top}.login__popup .container{position:relative;background-color:#fff;padding-top:10px;padding-bottom:50px}.login__popup .button__close{font-size:36px;background:unset;border:none;color:#000;position:absolute;right:10px;top:0;cursor:pointer}.login__popup h2{padding-top:50px}.login__popup label{position:relative;width:160px;text-align:left}'
56 
+    style = document.createElement('style');
57 
+    style.innerText = customcss;
58 
+    document.head.appendChild(style);
59 
+
60 
+    loginPopup = document.createElement('div');
61 
+    loginPopup.className = 'login__popup';
62 
+    loginPopup.innerHTML = '<div class="login__popup"><div class="container mt-5"><button type="button" class="button__close" aria-label="Close"><span aria-hidden="true">&times;</span></button><h2 class="text-center">Welcome To Innovation Lab</h2><div><table class="mx-auto"><tbody><tr class="form-group"><td><label for="idNo">請輸入身分證後四碼:</label></td><td><input type="text" id="idNo" maxlength="4"><div class="invalid-feedback invalid-feedback--idNo">身分證後四碼不正確</div></td></tr><tr class="form-group"><td><label for="idNo">請輸入分機號碼:</label></td><td><input type="text" id="telExt" maxlength="3"><div class="invalid-feedback invalid-feedback--telExt">分機號碼不正確</div></td></tr></tbody></table><div class="mt-3" align="center"><button class="button__login" class="mx-auto">登入使用服務</button></div></div><hr></div></div>';
63 
+    document.body.appendChild(loginPopup);
64 
+
65 
+    loginPopup.querySelector('.button__login').addEventListener('click', onSubmit);
66 
+    loginPopup.querySelector('.button__close').addEventListener('click', closePopup);
67 
+  }
68 
+
69 
+  function beforeLogin() {
70 
+    $('.app').css('display', 'none');
71 
+  }
72 
+
73 
+  function afterLogin() {
74 
+    $('.app').css('display', 'block');
75 
+  }
76 
+
77 
+  function execute() {
78 
+    beforeLogin();
79 
+    if ($.cookie('innovationlab_cognitive_user')) {
80 
+      afterLogin();
81 
+      return;
82 
+    }
83 
+    init();
84 
+  }
85 
+
86 
+  {
87 
+    $( document ).ready(function() {
88 
+      execute();
89 
+    })
90 
+  }
91 
+}
92 
+
93 
+window.loginGate = new LoginGate();