<<HTML5登入頁面展示>>

說明：

這是一個運用單一 HTML5 登入頁面（純前端 only），主要功能與構成如下：

視覺：使用大量 CSS（glass、neon、scanlines、vignette）、一個 canvas 畫布。

登入驗證（純前端）：在表單 submit 時攔截，程式碼內含一個 lkd 陣列（兩個 ckey 字串），會依序嘗試呼叫 AesDecrypt(ckey, uk)，其中 uk = "aes_"+userid+"_"+pwd。若解密回傳非空值，即視為登入成功，會把解密結果與使用者資訊寫入 cookie，並轉址到 sys_login_start_fear4ddju.php；否則顯示錯誤 modal（ACCESS DENIED）。

 

外部資源：

載入兩個外部檔案(前端驗證用)，如自行改為CGI/ AJAX 驗證，則無需引用。

JavaScript：

https://jplop.neocities.org/js/aes.js

https://jplop.neocities.org/js/ex_md2.js

 

展示、原始碼(Demo)：

深海

駭客任務

DOS 6.22

大腦連線

火星(引用 1 JPG圖)

草原(引用 1 JPG圖)

攻殼機動隊(引用 1 JPG圖)

自動人型(引用 1 JPG圖)

生化奇兵(引用 1 JPG圖)

MAC(引用 1 JPG圖)

Windows Server(引用 1 JPG圖)

Linux(引用 1 JPG圖)

最終幻想(引用 1 JPG圖)

惡靈古堡(引用 1 JPG圖)

展示用的正確帳號、密碼均為 "admin"

 

使用教學：

1. 複製 login*.html 至自己網站中。

只需把提供的 login*.html 複製到網站即可運作，不需要額外安裝後端模組。

2. 純前端驗證方式，設定登入帳號密碼：

前端登入流程使用 AES 加密方式，需要準備兩個要素：

• 後端密碼（後端實際驗證用）
• 登入帳號 / 密碼（給使用者輸入的）

A.設定後端密碼：請自行設定一組後端密碼。

(假設後端密碼為： udeMuHTMubLAmeHMALAHERfELmMDRm4EyLLaGG6j8)

B.使用私鑰來建立前端登入帳號密碼：

• 假設帳號為：admin
• 假設登入密碼為：ppp2025

請前往 AES 建立工具：https://jplop.neocities.org/util_aes_utility

密鑰欄位輸入：aes_admin_ppp2025

（格式：aes_帳號_密碼）

內容欄位輸入(輸入後端密碼)：udeMuHTMubLAmeHMALAHERfELmMDRm4EyLLaGG6j8

得到結果(AES結果每次都不同)：U2FsdGVkX18T...

將得到的結果放到 login*.html 程式碼中

var lkd= [ { "ckey":"U2FsdGVkX18T..." }, { "ckey":"[第二組帳號密碼]" }, { "ckey":"[第三組帳號密碼]" } ]

 

C. 設定後端 Cookie 驗證：

建立後端PHP程式碼(檔名：sys_login_start_fear4ddju.php)：

<?php // 目標 Cookie 名稱 $cookie_name = 'jobs_login_key'; // 檢查是否有收到該 Cookie if (!isset($_COOKIE[$cookie_name])) { echo "登入失敗"; exit(); } // 取得 Cookie 值 $cookie_value = $_COOKIE[$cookie_name]; // 正確值 $correct_value = "udeMuHTMubLAmeHMALAHERfELmMDRm4EyLLaGG6j8"; // 比對 if ($cookie_value === $correct_value) { echo "登入成功"; } else { echo "登入失敗"; exit(); } ?>

 

相容性說明：

現代瀏覽器（建議）

Chrome / Firefox / Edge / Safari

最新版本：支援 Canvas、requestAnimationFrame、CSS 變數 (--var)、backdrop-filter（Safari/Chrome 支援度不同）、ES6 class/let/const。

可能的問題 / 限制

Internet Explorer（尤其 IE11）不支援 CSS 變數、class、let/const、backdrop-filter 等，會造成樣式或 JS 錯誤。

若需支援 IE，須做 ES5 轉譯與 CSS fallback。