ecard/template.html at main · galaxy-luke/ecard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數位行銷中心 - 陳天祥 Sean Chen</title>
    <!-- 引入 Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css?v=4.0">
</head>

<body>

    <div class="card-container">

        <!-- ===== 上段：Header + 大頭照 ===== -->
        <div class="card-header">
            <div class="header">
                <img src="assets/header.png" class="header-bg" alt="">
                <img src="assets/logo.svg" alt="Logo" class="logo">
            </div>
            <div class="profile-section">
                <div class="profile-pic-wrapper">
                    <img src="images/default.png" alt="Profile Picture" class="profile-pic">
                </div>
            </div>
        </div>

        <!-- ===== 中段：個人資訊 + 聯絡清單 ===== -->
        <main class="card-main">
            <div class="info-section">
                <div class="dept-title">數位行銷中心 行銷企劃組 專員</div>
                <h1 class="name">陳天祥 <span class="nickname">小天</span></h1>
                <div class="english-name">Sean Chen</div>
            </div>

            <ul class="contact-list">
                <li>
                    <div class="icon-box"><img src="assets/phone_icon.png" alt="Phone"></div>
                    <div class="contact-text"><a href="tel:0956723423">0956-723-423</a></div>
                </li>
                <li>
                    <div class="icon-box"><img src="assets/tel_icon.png" alt="Tel"></div>
                    <div class="contact-text"><a href="tel:0287681168">02-8768-1168 #312</a></div>
                </li>
                <li>
                    <div class="icon-box"><img src="assets/mail_icon.png" alt="Email"></div>
                    <div class="contact-text"><a href="mailto:annayang@geosun.com.tw">annayang@geosun.com.tw</a></div>
                </li>
                <li>
                    <div class="icon-box"><img src="assets/add_icon.png" alt="Address"></div>
                    <div class="contact-text">110 台北市信義區東興路51號9樓</div>
                </li>
                <!-- Line ID (目前隱藏，需要時取消註解)
                <li class="copy" style="cursor: pointer;">
                    <div class="icon-box icon-line"><img src="https://img.icons8.com/color/48/000000/line-me.png" alt="Line" style="width: 20px;"></div>
                    <div class="contact-text" id="lineId">annayang0407</div>
                    <span style="font-size: 10px; color: #999; margin-left: 5px;">(點擊複製 ID)</span>
                </li>
                -->
                <li>
                    <div class="icon-box icon-web"><img src="assets/web_icon.png" alt="Web"></div>
                    <div class="contact-text"><a href="https://www.geosun.com.tw/" target="_blank">https://www.geosun.com.tw/</a></div>
                </li>
            </ul>
        </main>

        <!-- ===== 下段：波浪 Footer + 功能按鈕 ===== -->
        <footer class="card-footer">
            <div class="bottom-bg">
                <img src="assets/bottom.png" alt="Bottom Wave">
            </div>
            <div class="actions">
                <button id="code-btn" title="QR Code">
                    <img src="assets/qr_icon.png" alt="QR Code">
                </button>
                <button id="share-btn" onclick="ShareLink()" title="分享連結">
                    <img src="assets/share_icon.png" alt="Share">
                </button>
            </div>
        </footer>

    </div>

    <!-- QR Code 彈窗 (Modal) -->
    <div id="qrcode" class="popup-mask">
        <div class="modal">
            <div class="modal-close">×</div>
            <h2>掃描 QR code</h2>
            <div id="qrcode-img-container">
                <!-- 動態注入 QR Code 圖片 -->
            </div>
            <div class="btn-outline">關閉</div>
        </div>
    </div>

    <!-- 預留隱藏欄位供 JS 抓取名稱 -->
    <input type="hidden" id="hdnNameCH" value="陳天祥">
    <input type="hidden" id="hdnNameEN" value="Sean Chen">
    <!-- QR Code 自訂連結 (若無值則使用當前頁面網址) -->
    <input type="hidden" id="qrLink" value="">

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="js/main.js"></script>
</body>

</html>