From 717ebab4793b219d404730630b7fb706e6bc5cde Mon Sep 17 00:00:00 2001
From: buzz-lightsnack-2007
 <73412182+buzz-lightsnack-2007@users.noreply.github.com>
Date: Tue, 21 May 2024 14:36:41 +0800
Subject: [PATCH] the cards' texts is a caption

---
 pages/popup/hello.htm | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/pages/popup/hello.htm b/pages/popup/hello.htm
index f739086..9c64806 100644
--- a/pages/popup/hello.htm
+++ b/pages/popup/hello.htm
@@ -28,7 +28,8 @@
 				<li id="OOBE_QuickGuide">
 					<header class="collapsible-header waves-effect"><span for="OOBE_header_QuickGuide"></span></header>
 					<section class="collapsible-body">
-						
+						<section card-id="OOBE_quickstart_tip">
+						</section>
 					</section>
 				</li>
 				<li id="OOBE_APISetup">
@@ -38,42 +39,42 @@
 							<label class="input-description">
 								<p for="settings_analysis_description"></p>
 								<p for="OOBE_quickstart_API_intro"></p>
-								<label id="OOBE_quickstart_API_steps">
+								<section>
 									<section class="card">
 										<figure class="card-image">
 											<img src="/media/screenshots/API Step 1.png">
 											<a class="btn-floating halfway-fab" href="https://console.cloud.google.com/projectcreate" target="_blank" data-icon="open-in-new"></a>
 										</figure>
-										<div class="card-content">
+										<figcaption class="card-content">
 											<p for="OOBE_quickstart_API_Step1"></p>
-										</div>
+										</figcaption>
 									</section>
 									<section class="card">
 										<figure class="card-image">
 											<img src="/media/screenshots/API Step 2.png">
 											<a class="btn-floating halfway-fab" href="https://aistudio.google.com/app/apikey" target="_blank" data-icon="open-in-new"></a>
 										</figure>
-										<div class="card-content">
+										<figcaption class="card-content">
 											<p for="OOBE_quickstart_API_Step2"></p>
-										</div>
+										</figcaption>
 									</section>
 									<section class="card">
 										<figure class="card-image">
 											<img src="/media/screenshots/API Step 3.png">
 										</figure>
-										<div class="card-content">
+										<figcaption class="card-content">
 											<p for="OOBE_quickstart_API_Step3"></p>
-										</div>
+										</figcaption>
 									</section>
 									<section class="card">
 										<figure class="card-image">
 											<img src="/media/screenshots/API Step 4.png">
 										</figure>
-										<div class="card-content">
+										<figcaption class="card-content">
 											<p for="OOBE_quickstart_API_Step4"></p>
-										</div>
+										</figcaption>
 									</section>
-								</label>
+								</section>
 							</label>
 							<div class="input-field">
 								<input type="password" data-store="settings,analysis,api,key" data-store-location="1" placeholder=" " class="validate" required />