feat: add icon

itshenrywu · Jan 11, 2025 · 3841558 · 3841558
1 parent d66b65a
commit 3841558
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 8 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -29,6 +29,8 @@ jobs:
         mkdir deploy
         cp index.html deploy/
         cp tocas.min.css deploy/
+        mkdir deploy/fonts
+        cp fonts/* deploy/fonts/
 
     - name: Deploy to GitHub Pages
       uses: peaceiris/actions-gh-pages@v3

diff --git a/fonts/icomoon.eot b/fonts/icomoon.eot
diff --git a/fonts/icomoon.svg b/fonts/icomoon.svg
diff --git a/fonts/icomoon.ttf b/fonts/icomoon.ttf
diff --git a/fonts/icomoon.woff b/fonts/icomoon.woff
diff --git a/index.ejs b/index.ejs
@@ -7,6 +7,37 @@
 	<meta name="description" content="Henry 距離海底撈黑海會員還需要多少積分呢？">
 	<link rel="stylesheet" href="tocas.min.css" />
 	<style>
+		@font-face {
+			font-family: 'icomoon';
+			src: url('fonts/icomoon.eot?6smp2p');
+			src: url('fonts/icomoon.eot?6smp2p#iefix') format('embedded-opentype'),
+				url('fonts/icomoon.ttf?6smp2p') format('truetype'),
+				url('fonts/icomoon.woff?6smp2p') format('woff'),
+				url('fonts/icomoon.svg?6smp2p#icomoon') format('svg');
+			font-weight: normal;
+			font-style: normal;
+			font-display: block;
+		}
+
+		[class^="icon-"], [class*=" icon-"] {
+			font-family: 'icomoon' !important;
+			speak: never;
+			font-style: normal;
+			font-weight: normal;
+			font-variant: normal;
+			text-transform: none;
+			line-height: 1;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+		}
+
+		.icon-trophy:before {
+			content: "\e900";
+		}
+		.icon-check-circle:before {
+			content: "\e901";
+		}
+
 		.progress-levels {
 			text-align: right;
 			line-height: 1rem;
@@ -28,6 +59,16 @@
 			color: var(--ts-gray-500);
 			padding-left: 1rem;
 		}
+
+		.icon-trophy {
+			position: absolute;
+			bottom: -1rem;
+			right: -1rem;
+			font-size: 6rem;
+			z-index: 0;
+			opacity: .1;
+			overflow: hidden;
+		}
 	</style>
 </head>
 <body>
@@ -42,16 +83,11 @@
 				</div>
 				<div class="ts-grid progress-levels">
 					<% levels.forEach((level, index) => { %>
-						<div class="column <%= index === levels.length - 1 ? 'is-fluid' : '' %>"
-							<% if (index !== levels.length - 1) { %>
-								style="width: <%= (level.addPoint / target) * 100 %>%"
-							<% } %>>
+						<div class="column <%= index === levels.length - 1 ? 'is-fluid' : '' %>" <% if (index !== levels.length - 1) { %> style="width: <%= (level.addPoint / target) * 100 %>%" <% } %>>
 							<%= level.name %>
 							<small>
 								<%= level.point.toLocaleString() %>
-								<% if (level.point <= totalPoint) { %>
-									<span class="ts-icon is-circle-check-icon"></span>
-								<% } %>
+								<% if (level.point <= totalPoint) { %> <span class="icon-check-circle"></span> <% } %>
 							</small>
 						</div>
 					<% }) %>
@@ -64,7 +100,7 @@
 						<small>( $ <%= ((target - totalPoint) * 5).toLocaleString() %> )</small>
 					</div>
 				</div>
-				<div class="symbol"><span class="ts-icon is-trophy-icon"></span></div>
+				<span class="icon-trophy"></span>
 			</div>
 			<div class="ts-box">
 				<table class="ts-table is-small">