├── README.md
├── code.js
├── resources
    ├── checkin-controller.png
    ├── email.png
    ├── entry-point.png
    ├── form.png
    ├── gscript.png
    ├── info-sheet.png
    ├── mail-template.png
    ├── run-code.png
    ├── workflow.jpg
    └── workflow2.jpg
└── template.html


/README.md:
--------------------------------------------------------------------------------
 1 | # Attendance system using QR code
 2 | Hệ thống điểm danh người tham gia sự kiện qua QR gửi trong thư mời.
 3 | 
 4 | Cập nhật lần cuối 23/09/2023.
 5 | 
 6 | ## Giới thiệu
 7 | Với việc triển khai các bước dưới đây, bạn có thể:
 8 | - Tạo email thư mời/vé tham gia sự kiện/chiến dịch,... trong đó kèm mã QR.
 9 | - Khi người dùng đến tham gia, bạn có thể sử dụng thiết bị (của bạn), quét QR trên ticket/thư mời của người dùng, để
10 |     - Biết được người tham gia đó có hợp lệ (nhận được thư mời từ ban tổ chức hoặc đã mua vé) hay không.
11 |     - Kiểm soát được danh sách người đã đến tham dự sự kiện theo **thời gian thực**. 
12 | 
13 | ## Luồng hoạt động
14 | <img src="resources/workflow2.jpg" width=match-parent> 
15 | 
16 | - Về cơ bản, ảnh trên đã mô tả các thành phần và chức năng riêng của chúng trong hệ thống của mình, trông thì có vẻ phức tạp nhưng thực ra đơn giản thôi.
17 | - Một số trick được áp dụng khi dùng từng công cụ mà kết hợp chúng lại nó thực hiện được công việc mình đang cần:
18 |   - `Google script`: thường mọi người dùng Google Sheets chỉ để làm bảng tính, thay thế Excel thôi, nhưng thực tế thì nó còn có khả năng tự động hóa các công việc rất mạnh nữa. Trong trường hợp này mình sẽ viết code để gửi mail tới cho danh sách người tham gia. 
19 |   - `Google Forms`: Forms thì ai cũng biết, nhưng mình tìm hiểu được thêm việc có thể submit form tự động bằng link kèm params. Tức là QR code của mỗi người thực tế sẽ là một link trỏ đến link điền form với param là login code của người đó, vậy khi mình scan lúc điểm danh (thực chất là truy cập link đó), thì kết quả sẽ được lưu lại là 1 phản hồi cho form đó. Đây cũng là chìa khóa của công cụ này.
20 |   - `image-charts API`: API để gen ra QR được cá nhân hóa theo từng người. API này mở, không giới hạn lượt dùng, không limit thời gian sử dụng (bạn không lo bị khóa link sau một thời gian).
21 | 
22 | ## Cách thực hiện
23 | - Đầu tiên bạn truy cập [sheet này](https://docs.google.com/spreadsheets/d/134WF55HkPuSOizzZRZ8eW9xXsTUWFQwtFiXPMBiw1tI/edit?usp=sharing). Chọn `File` > `Make a copy` cho tiện hoặc bạn cứ đọc để hiểu nguyên lý hoạt động chứ sheet này mình vừa làm vừa nháp, hơi xấu nên khó nhìn.
24 | 
25 |   <img src="resources/info-sheet.png" width="800px">
26 | 
27 | 
28 | - Có một số cột mình cần giải thích:
29 |   - `Email`: email của từng người tham gia, tất nhiên vì bảo mật của sự kiện nên mình đã xóa đi.
30 |   - `Login code`: như đã giải thích bên trên, cái này là mã đăng nhập của mỗi người, bạn tự tạo theo format nào bạn thích, miễn không trùng nhau là được. Bạn có thể dùng MSSV, CCCD nếu thích.
31 |   - `Link form`: link đến form điểm danh. Các ô trong cột đấy đều có giá trị như nhau, mình kéo xuống để cho tiện thôi.
32 |   - `Form entry point`: nó là entry point của ô câu trả lời khi bạn điền form. Cái này hơi technical 1 xíu, tí giải thích bên dưới. Tương tự cột link form, các ô trong cột này đều có giá trị như nhau, mình kéo xuống để cho tiện thôi.
33 |   - `Generated QR link`: mình dùng API từ [image-charts.com](image-charts.com) để tạo từ **_link form_** + **_entry point_** + **_login code_**, để tạo ra một link QR cho từng người. Bạn chỉ cần copy y hệt là được.
34 | 
35 | 
36 | - Tiếp theo, mình đi viết [script](https://viblo.asia/p/google-apps-script-co-gi-hay-ho-07LKX2xElV4) cho sheet này. Bạn có thể nhấn vào phần `Extensions` > `App Script`. Mình đã viết sẵn script trong đó, bao gồm 2 file.
37 |   - `template.html`: Đây là template mail động như bình thường thôi, mình dùng MJML để viết rồi dịch sang HTML, bạn hoàn toàn có thể sử dụng các công cụ khác. Mail có kèm hình ảnh và thông tin sự kiện của mình, tên người tham gia và QR. Vì mình muốn customize phần tên và QR code cho từng người nên những phần đó mình sẽ để dưới dạng biến truyền vào.
38 |     <img src="resources/mail-template.png" width="800px">
39 |   - `mã.gs`: đây là phần script của mình. Có 3 function chính:
40 |     - _getData()_: lấy thông tin người tham dự (tên, email, QR) từ sheet.
41 |     - _getEmailHtml()_: lấy template mail mình đã chuẩn bị ở file `template.html`.
42 |     - _sendMail()_: lấy thông tin, template mail để gửi đến email của từng người dùng.
43 |     <img src="resources/gscript.png" width="800px">
44 |   - 2 file mình đều đã để trong repo github này, bạn có thể vào đọc trước xem.
45 | 
46 | 
47 | - Tiếp theo mình đi tạo Form checkin:
48 |   - `Giao diện Form`: đơn giản thôi, chỉ cần 1 câu hỏi duy nhất.
49 |   
50 |     <img src="resources/form.png" width="400px">
51 |     
52 |   - `Lấy địa chỉ entry point`: đầu tiên mình bật F12, rồi thử gửi 1 câu trả lời mẫu, rồi vào tab `Network`, tìm `formResponse` rồi xem phần `Payload` là ra, copy lại vào Sheet bên trên là được.
53 |   
54 |     <img src="resources/entry-point.png" width="800px">
55 |   
56 |   - Phần form check-in này mọi người nhớ chỉ cấp quyền điền form cho địa chỉ email của Ban tổ chức máy dùng để scan khi người ta đi vào sự kiện. Chứ ai cũng scan & điền form được thì họ tự điểm danh cho nhau rồi.
57 | 
58 | - Customize sheet phản hồi để kiểm soát người tham gia theo thời gian thực (kiểu như là đến thì nó hiện chữ có mặt và nền màu xanh). Cái này múa vài dòng lệnh sheet cơ làm được rồi, nên mình cũng không nói dài nữa & chỉ để [mẫu](https://docs.google.com/spreadsheets/d/1WR0jBY9Mn63x19XxeQhmGXuzvN-sr1pXHGQPQASSbfc/edit?usp=sharing) thôi nhé.
59 | 
60 |   <img src="resources/checkin-controller.png" width="800px">
61 | 
62 | - Xong rồi thì quay lại sheet thông tin rồi chạy phần script đã chuẩn bị để tự động gửi mail đến người tham gia thôi.<br/>⚠️ **PLEASE NOTE**: hãy kiểm tra thật kỹ thông tin, test code cẩn thận trước khi run code, nếu không thì email với thông tin và QR sai được gửi tới người dùng thì không thể cứu vãn được đâu <br/><br/>
63 |   <img src="resources/run-code.png" width="800px">
64 |   <img src="resources/email.png" width="800px">
65 | 
66 | ## Các link liên quan
67 | - [Mẫu sheet thông tin người tham gia](https://docs.google.com/spreadsheets/d/134WF55HkPuSOizzZRZ8eW9xXsTUWFQwtFiXPMBiw1tI/edit?usp=sharing)
68 | - [Mẫu sheet checkin](https://docs.google.com/spreadsheets/d/1WR0jBY9Mn63x19XxeQhmGXuzvN-sr1pXHGQPQASSbfc/edit?usp=drive_link)
69 | - [Gscript sử dụng](code.js)
70 | - [Template mail động](template.html)
71 | - [MJML để viết mail động](https://mjml.io/)
72 | - [Extension Simple Mass Downloader](https://chrome.google.com/webstore/detail/simple-mass-downloader/abdkkegmcbiomijcbdaodaflgehfffed)
73 | - [Image Chart API](https://documentation.image-charts.com/qr-codes/)
74 | 
75 | ## Phần bổ sung
76 | - Đây là phần nghiên cứu mình hoàn toàn tự mày mò dựa trên sự kiện mình tham gia ở năm ngoái, không tham khảo ở bất cứ nguồn nào. Vì vậy, mình hi vọng nếu các bạn thấy bài viết này có ích & sử dụng ý tưởng này có thể dẫn link tới repo này của mình để nhiều người biết hơn nhé.
77 | - Nếu gặp những vấn đề khi triển khai, bạn có thể liên lạc với mình qua [facebook](https://www.facebook.com/huythai855/) hoặc [email](mailto:nguyenhuythai15@gmail.com), mình sẽ cố gắng giải đáp.
78 | - Nếu bạn thấy bài hướng dẫn có ích, hãy để lại cho mình 1 star ⭐ nhé, cảm ơn bạn rất nhiều!
79 | 


--------------------------------------------------------------------------------
/code.js:
--------------------------------------------------------------------------------
 1 | function getData(i) {
 2 |   var sheet = SpreadsheetApp.getActive().getSheetByName("sheet1");
 3 |   var data = sheet.getRange(2, 1, 121, 25).getValues();
 4 |   var stocks = [];
 5 |   var stock = {};
 6 |   stock.name = data[i][3];
 7 |   stock.link = "" + data[i][18] + "";
 8 |   stocks.push(stock);
 9 |   return stocks;
10 | }
11 | 
12 | 
13 | function getEmailHtml(stockData) {
14 |   var htmlTemplate = HtmlService.createTemplateFromFile("template.html");
15 |   htmlTemplate.stockData = stockData;
16 |   var htmlBody = htmlTemplate.evaluate().getContent();
17 |   return htmlBody;
18 | }
19 | 
20 | 
21 | function sendEmail() {
22 |   var sheet = SpreadsheetApp.getActiveSheet();
23 |   var startRow = 2;
24 |   var numRows = 120;
25 |   var dataRange = sheet.getRange(startRow, 1, numRows, 25)
26 |   var data = dataRange.getValues();
27 | 
28 |   var count = 0;
29 | 
30 |   for (i in data) {
31 |     var row = data[i];
32 |     var emailAddress = row[10];
33 | 
34 |     var stockData = getData(i);
35 |     var htmlBody = getEmailHtml(stockData);
36 | 
37 |     // MailApp.sendEmail({
38 |     //   to: emailAddress,
39 |     //   subject: "[SGUET] Chúc mừng bạn đã nhận được tấm vé tham gia BIGGAME 2022!!!",
40 |     //   htmlBody: htmlBody
41 |     // });
42 | 
43 | 
44 |     ++count;
45 |     Logger.log(count);
46 |     Logger.log(stockData[0].name);
47 |     Logger.log(stockData[0].link);
48 |     Logger.log("Gửi email thành công đến" + JSON.stringify(emailAddress));
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/resources/checkin-controller.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huythai855/Attendance-system-using-QR-code/fb67d17a0ea074b9e6ab1d83b7c78878ceffc69c/resources/checkin-controller.png


--------------------------------------------------------------------------------
/resources/email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huythai855/Attendance-system-using-QR-code/fb67d17a0ea074b9e6ab1d83b7c78878ceffc69c/resources/email.png


--------------------------------------------------------------------------------
/resources/entry-point.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huythai855/Attendance-system-using-QR-code/fb67d17a0ea074b9e6ab1d83b7c78878ceffc69c/resources/entry-point.png


--------------------------------------------------------------------------------
/resources/form.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huythai855/Attendance-system-using-QR-code/fb67d17a0ea074b9e6ab1d83b7c78878ceffc69c/resources/form.png


--------------------------------------------------------------------------------
/resources/gscript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huythai855/Attendance-system-using-QR-code/fb67d17a0ea074b9e6ab1d83b7c78878ceffc69c/resources/gscript.png


--------------------------------------------------------------------------------
/resources/info-sheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huythai855/Attendance-system-using-QR-code/fb67d17a0ea074b9e6ab1d83b7c78878ceffc69c/resources/info-sheet.png


--------------------------------------------------------------------------------
/resources/mail-template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huythai855/Attendance-system-using-QR-code/fb67d17a0ea074b9e6ab1d83b7c78878ceffc69c/resources/mail-template.png


--------------------------------------------------------------------------------
/resources/run-code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huythai855/Attendance-system-using-QR-code/fb67d17a0ea074b9e6ab1d83b7c78878ceffc69c/resources/run-code.png


--------------------------------------------------------------------------------
/resources/workflow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huythai855/Attendance-system-using-QR-code/fb67d17a0ea074b9e6ab1d83b7c78878ceffc69c/resources/workflow.jpg


--------------------------------------------------------------------------------
/resources/workflow2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/huythai855/Attendance-system-using-QR-code/fb67d17a0ea074b9e6ab1d83b7c78878ceffc69c/resources/workflow2.jpg


--------------------------------------------------------------------------------
/template.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | 
  4 | <head>
  5 |   <title> Thư mời tham dự Talkshow: A Step Forward - Tiền sự kiện Big Game 2022 </title>
  6 |   <!--[if !mso]><!-->
  7 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |   <!--<![endif]-->
  9 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 10 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 11 |   <style type="text/css">
 12 |     #outlook a {
 13 |       padding: 0;
 14 |     }
 15 | 
 16 |     body {
 17 |       margin: 0;
 18 |       padding: 0;
 19 |       -webkit-text-size-adjust: 100%;
 20 |       -ms-text-size-adjust: 100%;
 21 |     }
 22 | 
 23 |     table,
 24 |     td {
 25 |       border-collapse: collapse;
 26 |       mso-table-lspace: 0pt;
 27 |       mso-table-rspace: 0pt;
 28 |     }
 29 | 
 30 |     img {
 31 |       border: 0;
 32 |       height: auto;
 33 |       line-height: 100%;
 34 |       outline: none;
 35 |       text-decoration: none;
 36 |       -ms-interpolation-mode: bicubic;
 37 |     }
 38 | 
 39 |     p {
 40 |       display: block;
 41 |       margin: 13px 0;
 42 |     }
 43 |   </style>
 44 |   <!--[if mso]>
 45 |         <noscript>
 46 |         <xml>
 47 |         <o:OfficeDocumentSettings>
 48 |           <o:AllowPNG/>
 49 |           <o:PixelsPerInch>96</o:PixelsPerInch>
 50 |         </o:OfficeDocumentSettings>
 51 |         </xml>
 52 |         </noscript>
 53 |         <![endif]-->
 54 |   <!--[if lte mso 11]>
 55 |         <style type="text/css">
 56 |           .mj-outlook-group-fix { width:100% !important; }
 57 |         </style>
 58 |         <![endif]-->
 59 |   <!--[if !mso]><!-->
 60 |   <link href="https://fonts.googleapis.com/css?family=opensans:300,500" rel="stylesheet" type="text/css">
 61 |   <style type="text/css">
 62 |     @import url(https://fonts.googleapis.com/css?family=opensans:300,500);
 63 |   </style>
 64 |   <!--<![endif]-->
 65 |   <style type="text/css">
 66 |     @media only screen and (min-width:480px) {
 67 |       .mj-column-per-100 {
 68 |         width: 100% !important;
 69 |         max-width: 100%;
 70 |       }
 71 | 
 72 |       .mj-column-per-50 {
 73 |         width: 50% !important;
 74 |         max-width: 50%;
 75 |       }
 76 | 
 77 |       .mj-column-per-20 {
 78 |         width: 20% !important;
 79 |         max-width: 20%;
 80 |       }
 81 | 
 82 |       .mj-column-per-80 {
 83 |         width: 80% !important;
 84 |         max-width: 80%;
 85 |       }
 86 | 
 87 |       .mj-column-per-65 {
 88 |         width: 65% !important;
 89 |         max-width: 65%;
 90 |       }
 91 |     }
 92 |   </style>
 93 |   <style media="screen and (min-width:480px)">
 94 |     .moz-text-html .mj-column-per-100 {
 95 |       width: 100% !important;
 96 |       max-width: 100%;
 97 |     }
 98 | 
 99 |     .moz-text-html .mj-column-per-50 {
100 |       width: 50% !important;
101 |       max-width: 50%;
102 |     }
103 | 
104 |     .moz-text-html .mj-column-per-20 {
105 |       width: 20% !important;
106 |       max-width: 20%;
107 |     }
108 | 
109 |     .moz-text-html .mj-column-per-80 {
110 |       width: 80% !important;
111 |       max-width: 80%;
112 |     }
113 | 
114 |     .moz-text-html .mj-column-per-65 {
115 |       width: 65% !important;
116 |       max-width: 65%;
117 |     }
118 |   </style>
119 |   <style type="text/css">
120 |     @media only screen and (max-width:480px) {
121 |       table.mj-full-width-mobile {
122 |         width: 100% !important;
123 |       }
124 | 
125 |       td.mj-full-width-mobile {
126 |         width: auto !important;
127 |       }
128 |     }
129 |   </style>
130 | </head>
131 | 
132 | <body style="word-spacing:normal;">
133 |   <div style="">
134 |     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
135 |     <div style="margin:0px auto;max-width:600px;">
136 |       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
137 |         <tbody>
138 |           <tr>
139 |             <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
140 |               <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
141 |               <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
142 |                 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
143 |                   <tbody>
144 |                     <tr>
145 |                       <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
146 |                         <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
147 |                           <tbody>
148 |                             <tr>
149 |                               <td style="width:550px;">
150 |                                 <a href="https://www.facebook.com/huythai855/" target="_blank">
151 |                                   <img height="auto" src="https://raw.githubusercontent.com/nyvietnam/big-game-2022/main/welcome.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="550" />
152 |                                 </a>
153 |                               </td>
154 |                             </tr>
155 |                           </tbody>
156 |                         </table>
157 |                       </td>
158 |                     </tr>
159 |                   </tbody>
160 |                 </table>
161 |               </div>
162 |               <!--[if mso | IE]></td></tr></table><![endif]-->
163 |             </td>
164 |           </tr>
165 |         </tbody>
166 |       </table>
167 |     </div>
168 |     <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
169 |     <div style="margin:0px auto;max-width:600px;">
170 |       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
171 |         <tbody>
172 |           <tr>
173 |             <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
174 |               <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
175 |               <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
176 |                 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
177 |                   <tbody>
178 |                     <tr>
179 |                       <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
180 |                         <p style="border-top:solid 2px #616161;font-size:1px;margin:0px auto;width:45%;">
181 |                         </p>
182 |                         <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 2px #616161;font-size:1px;margin:0px auto;width:247.5px;" role="presentation" width="247.5px" ><tr><td style="height:0;line-height:0;"> &nbsp;
183 | </td></tr></table><![endif]-->
184 |                       </td>
185 |                     </tr>
186 |                     <tr>
187 |                       <td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
188 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:18px;font-weight:1000;line-height:24px;text-align:center;color:#616161;"><strong>Chúc mừng bạn đã nhận được</strong></div>
189 |                       </td>
190 |                     </tr>
191 |                     <tr>
192 |                       <td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
193 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:18px;font-weight:500;line-height:24px;text-align:center;color:#616161;"><strong>tấm vé tham gia BIGGAME 2022</strong></div>
194 |                       </td>
195 |                     </tr>
196 |                   </tbody>
197 |                 </table>
198 |               </div>
199 |               <!--[if mso | IE]></td></tr></table><![endif]-->
200 |             </td>
201 |           </tr>
202 |         </tbody>
203 |       </table>
204 |     </div>
205 |     <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
206 |     <div style="margin:0px auto;max-width:600px;">
207 |       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
208 |         <tbody>
209 |           <tr>
210 |             <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
211 |               <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
212 |               <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
213 |                 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
214 |                   <tbody>
215 |                     <tr>
216 |                       <td align="left" style="font-size:0px;padding:10px 25px;padding-top:50px;word-break:break-word;">
217 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;color:#616161;">
218 |                           <p>Xin chào, <strong> <?= stockData[0].name ?> </strong> ! </p>
219 |                         </div>
220 |                       </td>
221 |                     </tr>
222 |                   </tbody>
223 |                 </table>
224 |               </div>
225 |               <!--[if mso | IE]></td></tr></table><![endif]-->
226 |             </td>
227 |           </tr>
228 |         </tbody>
229 |       </table>
230 |     </div>
231 |     <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
232 |     <div style="margin:0px auto;max-width:600px;">
233 |       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
234 |         <tbody>
235 |           <tr>
236 |             <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
237 |               <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
238 |               <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
239 |                 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
240 |                   <tbody>
241 |                     <tr>
242 |                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
243 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;color:#616161;">
244 |                           <p>Lời đầu tiên, SGUET xin cảm ơn bạn đã quan tâm và dành thời gian đăng ký tham gia BIGGAME 2022. Sau quá trình lọc đơn đăng ký tham gia rất kỹ lưỡng, SGUET xin được chúc mừng bạn đã trở thành chủ nhân của chiếc vé may mắn tham dự sự kiện đặc biệt này. </p>
245 |                           <p><strong>BIGGAME 2022</strong> là sự kiện dành cho các tân sinh viên K67 trường Đại học Công nghệ. Sự kiện sẽ kéo dài trong vòng 1 tuần, người tham gia sẽ được tham gia lần lượt những hoạt động hấp dẫn như bonding, chơi game online, giải đáp thắc mắc, tâm sự chuyện đại học,.. đây đều là các trải nghiệm thú vị được diễn ra dưới sự hướng dẫn của các supporter và Ban tổ chức. Điểm nhấn của Tuần Biggame này sẽ là 2 sự kiện: talkshow <strong>“A Step Forward”</strong> và hội chính <strong>“Biggame: The Ancient Code”</strong>. </p>
246 |                         </div>
247 |                       </td>
248 |                     </tr>
249 |                     <tr>
250 |                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
251 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;color:#616161;">
252 |                           <p>
253 | 
254 |                               <? for (var i = 0; i < stockData.length+3; i++) { ?>
255 |                             <strong>Timeline của sự kiện:</strong> <? } ?>
256 | 
257 |                           </p>
258 |                           <p> 🔹Các hoạt động bonding, làm quen, giao lưu onl/offline của các team sẽ diễn ra từ chiều nay. </p>
259 |                           <p> 🔹Các minigame sẽ được tổ chức trên group facebook Big Game 2022 </p>
260 |                           <p> 🔹Talkshow <strong>"A Step Forward"</strong>
261 |                           </p>
262 |                           <ul>
263 |                             <li>⏰: <strong>Thời gian:</strong> 19h ngày 6/10/2022 (thứ 5) </li>
264 |                             <li>🗺: <strong>Địa điểm: </strong> <a href="https://goo.gl/maps/9pn3gMW87vrzYgov8">Giảng đường 3-G3</a>, Đại học Quốc gia Hà Nội. </li>
265 |                           </ul>
266 |                           <p> 🔹Hội chính <strong>"Biggame: The Ancient Code"</strong>
267 |                           </p>
268 |                           <ul>
269 |                             <li>⏰: <strong>Thời gian:</strong> 13h ngày 9/10/2022 (chủ nhật) </li>
270 |                             <li>🗺: <strong>Địa điểm: </strong> <a href="https://goo.gl/maps/9pn3gMW87vrzYgov8">Công viên Hòa Bình</a>, Xuân Đỉnh, Bắc Từ Liêm, Hà Nội. </li>
271 |                           </ul>
272 |                         </div>
273 |                       </td>
274 |                     </tr>
275 |                     <tr>
276 |                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
277 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;color:#616161;">
278 |                           <p>
279 |                             <strong>Đây là tấm vé thông hành trong cả chuỗi sự kiện Big Game của bạn:</strong>
280 |                           </p>
281 |                         </div>
282 |                       </td>
283 |                     </tr>
284 |                     <tr>
285 |                       <td align="center" vertical-align="top" style="font-size:0px;word-break:break-word;">
286 |                         <div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
287 |                           <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
288 |                             <tbody>
289 |                               <tr>
290 |                                 <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
291 |                                   <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
292 |                                     <tbody>
293 |                                       <tr>
294 |                                         <td style="width:250px;">
295 |                                           <a href="https://www.facebook.com/SupportGroupUET" target="_blank">
296 |                                             <img height="auto" src= <?= stockData[0].link ?> ; style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="250" />
297 |                                           </a>
298 |                                         </td>
299 |                                       </tr>
300 |                                     </tbody>
301 |                                   </table>
302 |                                 </td>
303 |                               </tr>
304 |                             </tbody>
305 |                           </table>
306 |                         </div>
307 |                       </td>
308 |                     </tr>
309 |                     <tr>
310 |                       <td align="left" style="font-size:0px;padding:10px 25px;padding-top:20px;word-break:break-word;">
311 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;color:#616161;">
312 |                           <p>Hãy nhanh tay <strong>lưu lại chiếc vé này</strong> để có thể tham gia check-in vào các sự kiện nhé. Việc cần làm của bạn ngay bây giờ chuẩn bị cho mình một tâm hồn đẹp để giao lưu cùng các diễn giả trong ngày Talkshow và hòa mình vào cổ ngữ Rune độc đáo trong ngày Hội chính. Đặc biệt, người tham gia sẽ có một phần quà đặc biệt, vì vậy hãy nhanh chóng follow SGUET để có thể cập nhật thông tin nhanh và chính xác nhất. </p>
313 |                         </div>
314 |                       </td>
315 |                     </tr>
316 |                     <tr>
317 |                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
318 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;color:#616161;">
319 |                           <p>
320 |                             <i>Hẹn gặp lại các bạn ở BIGGAME 2022!</i>
321 |                           </p>
322 |                         </div>
323 |                       </td>
324 |                     </tr>
325 |                     <tr>
326 |                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
327 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;color:#616161;">
328 |                           <p>Trân trọng,</p>
329 |                           <p>
330 |                             <strong>SGUET</strong>
331 |                           </p>
332 |                         </div>
333 |                       </td>
334 |                     </tr>
335 |                     <tr>
336 |                       <td style="font-size:0px;word-break:break-word;">
337 |                         <div style="height:30px;line-height:30px;">&#8202;</div>
338 |                       </td>
339 |                     </tr>
340 |                   </tbody>
341 |                 </table>
342 |               </div>
343 |               <!--[if mso | IE]></td></tr></table><![endif]-->
344 |             </td>
345 |           </tr>
346 |         </tbody>
347 |       </table>
348 |     </div>
349 |     <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
350 |     <div style="margin:0px auto;max-width:600px;">
351 |       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
352 |         <tbody>
353 |           <tr>
354 |             <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
355 |               <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
356 |               <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
357 |                 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
358 |                   <tbody>
359 |                     <tr>
360 |                       <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
361 |                         <p style="border-top:solid 0.5px #616161;font-size:1px;margin:0px auto;width:80%;">
362 |                         </p>
363 |                         <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 0.5px #616161;font-size:1px;margin:0px auto;width:440px;" role="presentation" width="440px" ><tr><td style="height:0;line-height:0;"> &nbsp;
364 | </td></tr></table><![endif]-->
365 |                       </td>
366 |                     </tr>
367 |                   </tbody>
368 |                 </table>
369 |               </div>
370 |               <!--[if mso | IE]></td><td class="" style="vertical-align:middle;width:120px;" ><![endif]-->
371 |               <div class="mj-column-per-20 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
372 |                 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">
373 |                   <tbody>
374 |                     <tr>
375 |                       <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
376 |                         <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
377 |                           <tbody>
378 |                             <tr>
379 |                               <td style="width:70px;">
380 |                                 <a href="https://www.facebook.com/SupportGroupUET" target="_blank">
381 |                                   <img height="auto" src="https://raw.githubusercontent.com/nyvietnam/mjml/main/logo-sguet.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="70" />
382 |                                 </a>
383 |                               </td>
384 |                             </tr>
385 |                           </tbody>
386 |                         </table>
387 |                       </td>
388 |                     </tr>
389 |                   </tbody>
390 |                 </table>
391 |               </div>
392 |               <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:480px;" ><![endif]-->
393 |               <div class="mj-column-per-80 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
394 |                 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
395 |                   <tbody>
396 |                     <tr>
397 |                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
398 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:15px;font-weight:300;line-height:24px;text-align:left;color:#616161;"><strong>Câu lạc bộ Hỗ trợ sinh viên trường Đại học Công nghệ - SGUET</strong></div>
399 |                       </td>
400 |                     </tr>
401 |                     <tr>
402 |                       <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
403 |                         <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:300;line-height:18px;text-align:left;color:#616161;">
404 |                           <p>
405 |                             <strong>Email:</strong>
406 |                             <a href="mailto:lienhe.sguet@gmail.com">lienhe.sguet@gmail.com</a>
407 |                           </p>
408 |                           <p>
409 |                             <strong>Fanpage:</strong>
410 |                             <a href="facebook.com/SupportGroupUET">facebook.com/SupportGroupUET</a>
411 |                           </p>
412 |                           <p>
413 |                             <strong>Địa chỉ:</strong> 144 Xuân Thủy, Dịch Vọng, Cầu Giấy, Hà Nội
414 |                           </p>
415 |                           <p>
416 |                             <strong>Điện thoại:</strong> 0932 321 211 - Chủ nhiệm Nguyễn Trung Hiếu
417 |                           </p>
418 |                         </div>
419 |                       </td>
420 |                     </tr>
421 |                     <tr>
422 |                       <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
423 |                         <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
424 |                         <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
425 |                           <tr>
426 |                             <td style="padding:4px;vertical-align:middle;">
427 |                               <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3b5998;border-radius:3px;width:30px;">
428 |                                 <tr>
429 |                                   <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
430 |                                     <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.facebook.com/SupportGroupUET" target="_blank">
431 |                                       <img height="30" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border-radius:3px;display:block;" width="30" />
432 |                                     </a>
433 |                                   </td>
434 |                                 </tr>
435 |                               </table>
436 |                             </td>
437 |                           </tr>
438 |                         </table>
439 |                         <!--[if mso | IE]></td><td><![endif]-->
440 |                         <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
441 |                           <tr>
442 |                             <td style="padding:4px;vertical-align:middle;">
443 |                               <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#EB3323;border-radius:3px;width:30px;">
444 |                                 <tr>
445 |                                   <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
446 |                                     <a href="https://www.youtube.com/c/SGUET/" target="_blank">
447 |                                       <img height="30" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png" style="border-radius:3px;display:block;" width="30" />
448 |                                     </a>
449 |                                   </td>
450 |                                 </tr>
451 |                               </table>
452 |                             </td>
453 |                           </tr>
454 |                         </table>
455 |                         <!--[if mso | IE]></td><td><![endif]-->
456 |                         <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
457 |                           <tr>
458 |                             <td style="padding:4px;vertical-align:middle;">
459 |                               <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3f729b;border-radius:3px;width:30px;">
460 |                                 <tr>
461 |                                   <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
462 |                                     <a href="https://www.instagram.com/sguet_cfs/" target="_blank">
463 |                                       <img height="30" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/instagram.png" style="border-radius:3px;display:block;" width="30" />
464 |                                     </a>
465 |                                   </td>
466 |                                 </tr>
467 |                               </table>
468 |                             </td>
469 |                           </tr>
470 |                         </table>
471 |                         <!--[if mso | IE]></td><td><![endif]-->
472 |                         <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
473 |                           <tr>
474 |                             <td style="padding:4px;vertical-align:middle;">
475 |                               <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#dc4e41;border-radius:3px;width:30px;">
476 |                                 <tr>
477 |                                   <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
478 |                                     <a href="https://plus.google.com/share?url=mailto:lienhe.sguet@gmail.com" target="_blank">
479 |                                       <img height="30" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/google-plus.png" style="border-radius:3px;display:block;" width="30" />
480 |                                     </a>
481 |                                   </td>
482 |                                 </tr>
483 |                               </table>
484 |                             </td>
485 |                           </tr>
486 |                         </table>
487 |                         <!--[if mso | IE]></td></tr></table><![endif]-->
488 |                       </td>
489 |                     </tr>
490 |                   </tbody>
491 |                 </table>
492 |               </div>
493 |               <!--[if mso | IE]></td></tr></table><![endif]-->
494 |             </td>
495 |           </tr>
496 |         </tbody>
497 |       </table>
498 |     </div>
499 |     <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
500 |     <div style="margin:0px auto;max-width:600px;">
501 |       <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
502 |         <tbody>
503 |           <tr>
504 |             <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
505 |               <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:390px;" ><![endif]-->
506 |               <div class="mj-column-per-65 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
507 |                 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
508 |                   <tbody>
509 |                   </tbody>
510 |                 </table>
511 |               </div>
512 |               <!--[if mso | IE]></td></tr></table><![endif]-->
513 |             </td>
514 |           </tr>
515 |         </tbody>
516 |       </table>
517 |     </div>
518 |     <!--[if mso | IE]></td></tr></table><![endif]-->
519 |   </div>
520 | </body>
521 | 
522 | </html>


--------------------------------------------------------------------------------