add show month, date, day before button pressed

fortune_generator/fortune.js

@@ -14,13 +14,36 @@ fetch("fortune.json")
   badFortunes = data.badFortunes;
 })
 
-const textColor = ["#e74c3c", "#e74c3c", "#e74c3c", "#70ad47", "#000000bf", "#000000bf", "#000000bf"];
+const textColor = ["#e74c3c", "#e74c3c", "#e74c3c", "#5eb95e", "#000000bf", "#000000bf", "#000000bf"];
 const fortuneStatus = ["大吉", "中吉", "小吉", "中平", "凶", "小凶", "大凶"];
+const chineseMonth = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十一", "十二"];
+const week = ['日', '一', '二', '三', '四', '五', '六'];
 
+const title = `<span style='font-size: 5.8vmin; color: #000000CC;'><b>今日運勢<b></span>`;
 const allGood = `<span style='font-size: 5.8vmin; color: #000000bf;'><b>萬事皆宜<b></span>`;
 const allBad = `<span style='font-size: 5.8vmin; color: #e74c3c;'><b>諸事不宜<b></span>`;
 
+const d = new Date();
+const date = d.getDate();
+const day = d.getDay();
+console.log(day);
+const month = d.getMonth() + 1;
+const year = d.getFullYear();
+
+const showMonth = `<span style='font-size: 11.5vmin; color: #054310C9; -webkit-writing-mode: vertical-lr;'><b>${chineseMonth[month - 1] + "月"}<b></span>`;
+const showDate = `<span style='font-size: 28vmin; color: #054310C9; align-items: top;'><b>${("0" + date).substr(-2)}<b></span>`;
+const showDay = `<span style='font-size: 11.5vmin; color: #054310C9; -webkit-writing-mode: vertical-lr;'><b>${"星期" + week[day]}<b></span>`;
+
+$('#month').html(showMonth);
+$('#date').html(showDate);
+$('#weekday').html(showDay);
+
 function Appear() {
+  $('#title').html(title);
+  $('#month').html('');
+  $('#date').html('');
+  $('#weekday').html('');
+
   $('#btn').html('打卡成功');
   let p = 0;
   let num = [0, 0, 0, 0];
@@ -32,17 +55,14 @@ function Appear() {
     num[p] = num[p] * 10 + parseInt(ip[i]);
   }
 
-  let d = new Date();
-  let date = d.getDate();
-  let month = d.getMonth() + 1;
-  let year = d.getFullYear();
+  
   let hashDate = Math.round(Math.log10(year * ((month << 3) ^ (date << 1))));
   let seed1 = (num[0] >> hashDate) * (num[1] >> Math.min(hashDate, 2)) + (num[2] << 1) * (num[3] >> 3) + (date << 3) * (month << hashDate) + year;
   let seed2 = (num[0] << (hashDate + 2)) * (num[1] << hashDate) + (num[2] << 1) * (num[3] << 3) + (date << (hashDate - 1)) * (month << 4) + year >> hashDate;
   const goodLen = goodFortunes.length;
   const badLen = badFortunes.length;
 
-  let status = `<span style='font-size: 10vmin; color: ${textColor[seed1 % 7]};'><b>§ ${fortuneStatus[seed1 % 7]} §</b></span>`;
+  let status = `<span style='font-size: 12vmin; color: ${textColor[seed1 % 7]};'><b>§ ${fortuneStatus[seed1 % 7]} §</b></span>`;
   $('#ip-to-fortune').html(status);
 
   let l_1_event, l_1_desc, l_2_event, l_2_desc, r_1_event, r_1_desc, r_2_event, r_2_desc;
@@ -58,13 +78,13 @@ function Appear() {
   set.add(badFortunes[r1].event);
   r2 = (((((seed1 << 3 ) + (d.getFullYear() >> 5) * (date << 2)) % badLen) * seed2) >> 6) % badLen;
   while(set.has(badFortunes[r2].event)) r2 = (r2 + 1) % badLen;
-  l_1_event = `<span style='font-size: 5.3vmin; color: #e74c3c;'><b>宜: </b>${goodFortunes[l1].event}</span>`;
+  l_1_event = `<span style='font-size: 5.4vmin; color: #e74c3c;'><b>宜: </b>${goodFortunes[l1].event}</span>`;
   l_1_desc = `<span style='font-size: 3.2vmin; color: #7f7f7f;'>${goodFortunes[l1].description}</span>`;
-  l_2_event = `<span style='font-size: 5.3vmin; color: #e74c3c;'><b>宜: </b>${goodFortunes[l2].event}</span>`;
+  l_2_event = `<span style='font-size: 5.4vmin; color: #e74c3c;'><b>宜: </b>${goodFortunes[l2].event}</span>`;
   l_2_desc = `<span style='font-size: 3.2vmin; color: #7f7f7f;'>${goodFortunes[l2].description}</span>`;
-  r_1_event = `<span style='font-size: 5.3vmin; color: #000000bf;'><b>忌: </b>${badFortunes[r1].event}</span>`;
+  r_1_event = `<span style='font-size: 5.4vmin; color: #000000bf;'><b>忌: </b>${badFortunes[r1].event}</span>`;
   r_1_desc = `<span style='font-size: 3.2vmin; color: #7f7f7f;'>${badFortunes[r1].description}</span>`;
-  r_2_event = `<span style='font-size: 5.3vmin; color: #000000bf;'><b>忌: </b>${badFortunes[r2].event}</span>`;
+  r_2_event = `<span style='font-size: 5.4vmin; color: #000000bf;'><b>忌: </b>${badFortunes[r2].event}</span>`;
   r_2_desc = `<span style='font-size: 3.2vmin; color: #7f7f7f;'>${badFortunes[r2].description}</span>`;
   if(seed1 % 7 == 0){
     $('#r-1-event').html(allGood);

fortune_generator/index.html

@@ -12,7 +12,18 @@
 <body>
   <div class="container">
     <div class="row">
-      <h1>今日運勢</h1>
+      <p id="title"></p>
+    </div>
+    <div class="row">
+      <div class="col-3">
+        <p id="month"></p>
+      </div>
+      <div class="col-6">
+        <p id="date"></p>
+      </div>
+      <div class="col-3">
+        <p id="weekday"></p>
+      </div>
     </div>
     <div class="row">
       <p id="ip-to-fortune"></p>

fortune_generator/matrix.js

@@ -1,8 +1,8 @@
 const canvas = document.getElementById("Matrix")
 const context = canvas.getContext("2d")
 
-canvas.height = window.innerHeight;
-canvas.width = window.innerWidth;
+canvas.height = window.innerHeight + 100;
+canvas.width = window.innerWidth + 5;
 
 const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+#$%^@!~?><:;[]{}\」=_αβΓγΔδεζηΘθικΛλμΞξΠπρΣσςτυΦφχΨψΩω×≦≧≠∞≒≡～∩∠∪∟⊿∫∮∵∴＄￥〒￠￡℃€℉╩◢ⅩⅨⅧⅦⅥⅤⅣⅢⅡⅠあいうえおがぎぐげござじずぜぞだぢつでづどにぬのばひぴぶへぺぼみゃょァゐゎè";
 

fortune_generator/styles.css

@@ -28,8 +28,8 @@ body {
   text-align: center;
   transform: translate(-50%, -50%);
   background-color: var(--white);
-  border-radius: 30px;
-  padding: 30px;
+  border-radius: 40px;
+  padding: 10px;
 }
 
 .left-result {