Initial commit: AIFO official portal web.
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
# Footer 实现备份（2026-06-10）
|
||||
|
||||
新版 Footer UI 上线前，对当前公共布局方案的完整快照。
|
||||
|
||||
## 架构
|
||||
|
||||
```
|
||||
页面 HTML
|
||||
└── <div id="footer-container"></div>
|
||||
└── <script src="/js/layout.js"></script>
|
||||
│
|
||||
└── fetch /components/footer.html → 注入 + #current-year 年份
|
||||
```
|
||||
|
||||
- **组件**：`components/footer.html`
|
||||
- **加载器**：`js/layout.js`（Nav + Footer，`updateCopyrightYear`）
|
||||
- **样式**：`assets/css/theme.css`（`.footer` 主样式）、`assets/css/index.css`（订阅表单、移动端）
|
||||
- **背景图**：`assets/images/backgrounds/footer_bg.png`
|
||||
- **社交图标**：`assets/css/index.css` → `.icon-media-box.*`
|
||||
- **支付图**：`assets/images/backgrounds/icon/media/payout_logos.png`
|
||||
|
||||
## 本目录文件
|
||||
|
||||
| 文件 | 说明 |
|
||||
|------|------|
|
||||
| `footer.html` | 当前 Footer 组件副本 |
|
||||
| `layout.js` | 当前 layout 加载器副本（含 Footer 逻辑） |
|
||||
| `footer-styles-excerpt.css` | 从 theme.css / index.css 摘录的 Footer 相关样式 |
|
||||
| `page-integration-snippet.html` | 页面接入示例（footer-container + script） |
|
||||
|
||||
## 恢复方式
|
||||
|
||||
1. 将 `footer.html` 复制回 `components/footer.html`
|
||||
2. 若 layout 逻辑有变，将 `layout.js` 复制回 `js/layout.js`
|
||||
3. 样式以线上 `theme.css` / `index.css` 为准；本目录 `footer-styles-excerpt.css` 仅作对照
|
||||
|
||||
## 已接入页面（`#footer-container` + `/js/layout.js`）
|
||||
|
||||
见 `docs/layout-migration-report.md`。主要包括：`index.html`、`pages/payout.html`、`pages/faq.html` 等 22 个标准布局页。
|
||||
|
||||
## 新版更新建议
|
||||
|
||||
1. 在 Figma/参考稿确认新结构后，优先改 `components/footer.html`
|
||||
2. 新样式可写入 `theme.css` / `index.css`，或独立 `assets/css/footer.css` 再在页面引入
|
||||
3. 若加载方式不变，**无需改**各页面的 `#footer-container` 与 `layout.js` 引用
|
||||
4. 更新完成后可再建 `footer-backup-YYYYMMDD` 留存本版
|
||||
@@ -0,0 +1,57 @@
|
||||
/*
|
||||
* Footer 样式摘录备份 — 2026-06-10
|
||||
* 源文件：assets/css/theme.css、assets/css/index.css
|
||||
* 仅作对照/恢复参考；线上仍以源文件为准。
|
||||
*/
|
||||
|
||||
/* --- theme.css: .footer 主体 --- */
|
||||
.footer {
|
||||
background-image: url('../images/backgrounds/footer_bg.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.footer .container:first-child { margin-top: 6.25rem; }
|
||||
.footer .paymont_title { color: #6c757d; font-size: 0.75rem; margin-bottom: 1.25rem; }
|
||||
.footer .footer-doc .nav-item a { text-decoration: underline !important; }
|
||||
.footer .footer-rights { margin-top: 25px; }
|
||||
.footer .container .d-flex { padding-bottom: 2.5rem; }
|
||||
.footer .container .col-lg-5,
|
||||
.footer .container .col-md-5 { margin-right: 80px; }
|
||||
.footer .nav .nav-item .nav-link,
|
||||
.footer .footer-link { color: #6c757d !important; }
|
||||
.footer .nav .nav-item .nav-link:hover,
|
||||
.footer .footer-link:hover { color: #288cff !important; }
|
||||
.footer .list-unstyled li a { display: inline-block; padding: .125rem 0; font-size: 0.875rem; }
|
||||
.footer .list-unstyled li a:hover { color: #288cff !important; }
|
||||
.footer-dark .heading { color: var(--aifo-white); font-size: 0.9375rem !important; }
|
||||
.footer .list-unstyled { margin-top: 2.1875rem; }
|
||||
.footer .list-unstyled li { margin-bottom: 0.9375rem; font-size: 0.875em; }
|
||||
.footer .paymout .nav-item { height: 36px; margin: 5px 0; }
|
||||
.footer .paymout .nav-item img { height: 100%; }
|
||||
.footer .media-nav-link { padding: .5rem .5rem; }
|
||||
.footer .foot-academy { margin-right: 36px; }
|
||||
|
||||
/* --- index.css: logo & social icons --- */
|
||||
.foot-logo { width: 7.9375rem; height: 2rem; }
|
||||
.icon-media-box { width: 27px; height: 27px; display: inline-block; background-size: contain; background-repeat: no-repeat; }
|
||||
/* .icon-media-box.discord / .telegram / .facebook / .x / .instagram / .youtu / .linkedin → media_*.svg */
|
||||
|
||||
/* --- index.css: newsletter subscribe --- */
|
||||
.subscribe-wrapper { display: flex; align-items: center; background: rgba(15,15,15,0.8); border-radius: 12px; padding: 4px; max-width: 550px; width: 100%; margin: auto; }
|
||||
.subscribe-input { flex: 1; background: transparent; border: none !important; padding: 14px 16px; color: white; font-size: 16px; }
|
||||
.subscribe-input::placeholder { color: #b8a898; }
|
||||
.subscribe-btn { background: #ff9500; border: none; padding: 0 26px; border-radius: 10px; font-weight: 600; color: white; cursor: pointer; }
|
||||
.subscribe-btn:hover { background: #ffad33; }
|
||||
.mb-show { display: none; }
|
||||
.mb-hidden { display: block; }
|
||||
|
||||
/* --- index.css: footer mobile @media (max-width: 768px) --- */
|
||||
@media (max-width: 768px) {
|
||||
.mobile-no-flex { display: block !important; }
|
||||
.footer .nav { margin-top: 30px; }
|
||||
.footer .nav.social .nav-item { width: 27px; height: 27px; margin-right: 20px; }
|
||||
.footer .footer_nav { display: none; }
|
||||
.mb-hidden { display: none !important; }
|
||||
.mb-show { display: block; }
|
||||
.footer .paymout .nav-item img { width: 50%; }
|
||||
.footer .text-muted { padding: 0 15px; }
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
<footer class="pb-3 footer footer-dark">
|
||||
|
||||
<div class="container">
|
||||
<!-- pt-5 -->
|
||||
<div class="d-flex mobile-no-flex align-items-center border-bottom border-primary">
|
||||
<span class="">
|
||||
<img class="foot-logo" src="/assets/images/brand/logo.png" alt="AIFO UI Kit" />
|
||||
</span>
|
||||
<ul class="nav ml-lg-auto social">
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank">
|
||||
<i class="icon-media-box discord"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank">
|
||||
<i class="icon-media-box telegram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank">
|
||||
<i class="icon-media-box facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank">
|
||||
<i class="icon-media-box x"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank">
|
||||
<i class="icon-media-box instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank"><i class="icon-media-box youtu"></i></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="media-nav-link" href="" target="_blank"> <i class="icon-media-box linkedin"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row pt-5 ">
|
||||
<div class="col-12 col-md-5">
|
||||
<div class="mb-6 contect">
|
||||
<h1 class="heading h6 font-weight-300 mb-3 text-orange">Contact</h1>
|
||||
<p class="fade-in">+ 1891989-11-91 </p>
|
||||
<h1 class="heading h6 font-weight-300 mb-3 text-orange">Email</h1>
|
||||
<p class="fade-in">info@logoipsum.com </p>
|
||||
<h1 class="heading h6 font-weight-300 mb-3 text-orange">Address</h1>
|
||||
<p class="fade-in">2972 Westheimer Rd. Santa Ana, lllinois 85486</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 paymout">
|
||||
<p class="paymont_title">Payment Options</p>
|
||||
<ul class="nav ml-lg-auto w-100 justify-content-between">
|
||||
<img src="/assets/images/backgrounds/icon/media/payout_logos.png" alt="payout_logos" >
|
||||
<!-- <li class="nav-item">
|
||||
<a class=" active" href="" target="_blank">
|
||||
<i class="fab fa-instagram"></i>
|
||||
<img src="/assets/images/backgrounds/icon/payment-logo/Apple_Pay_logo-white.png" alt="Apple_Pay_logo" >
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="" href="" target="_blank">
|
||||
|
||||
<img src="/assets/images/backgrounds/icon/payment-logo/Confirmo_white.png" alt="Confirmo" >
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="" href="" target="_blank">
|
||||
|
||||
<img src="/assets/images/backgrounds/icon/payment-logo/Google_Pay_Logo-white.svg" alt="Google_Pay_Logo" >
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="" href="" target="_blank">
|
||||
|
||||
<img src="/assets/images/backgrounds/icon/payment-logo/MasterCard_Logo.svg" alt="MasterCard_Logo" >
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="" href="" target="_blank">
|
||||
|
||||
<img src="/assets/images/backgrounds/icon/payment-logo/Nuvei_Organization_logo-white.png" alt="Nuvei_Organization_logo" >
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="" href="" target="_blank">
|
||||
|
||||
<img src="/assets/images/backgrounds/icon/payment-logo/pay-checkout-white.png" alt="checkout" >
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="" href="" target="_blank">
|
||||
|
||||
<img src="/assets/images/backgrounds/icon/payment-logo/PayPal_Logo2014.png" alt="" >
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="" href="" target="_blank">
|
||||
|
||||
<img src="/assets/images/backgrounds/icon/payment-logo/Skrill_logo.svg" alt="Skrill_logo" >
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="" href="" target="_blank">
|
||||
|
||||
<img src="/assets/images/backgrounds/icon/payment-logo/Visa_Inc._logo.svg" alt="Visa_Inc" >
|
||||
</a>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md footer_nav foot-academy">
|
||||
<h5 class="heading h6 font-weight-300 mb-3 text-nowrap">Academy & Programs</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li><a class="text-muted" href="#">Academy</a></li>
|
||||
<li><a class="text-muted" href="#">Mind & Growth</a></li>
|
||||
<li><a class="text-muted" href="#">Funding Programs</a></li>
|
||||
<li><a class="text-muted" href="#">Payout</a></li>
|
||||
<li><a class="text-muted" href="#">Affiliate Program</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-md footer_nav">
|
||||
<h5 class="heading h6 font-weight-300 mb-3">Company</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li><a class="text-muted" href="#">About Us</a></li>
|
||||
<li><a class="text-muted" href="#">Company News</a></li>
|
||||
<li><a class="text-muted" href="#">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-md footer_nav">
|
||||
<h5 class="heading h6 font-weight-300 mb-3">Resources</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li><a class="text-muted" href="#">Blog</a></li>
|
||||
<li><a class="text-muted" href="#">Video Hub</a></li>
|
||||
<li><a class="text-muted" href="#">Join Hub</a></li>
|
||||
<li><a class="text-muted" href="#">Join Telegram</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12 col-md-5">
|
||||
|
||||
<div class="trustpilot-section">
|
||||
<div class="d-flex mobile-no-flex align-items-center flex-wrap gap-2">
|
||||
<span class="text-primary fw-bold">Rated Excellent</span>
|
||||
<span class="px-1">
|
||||
<img src="/assets/images/backgrounds/img-05.png" alt="Star Rating" class="img-fluid" >
|
||||
</span>
|
||||
<span class="text-muted" style="margin-left: 10px;"><a href="https://www.trustpilot.com/" target="_blank" style=" text-decoration: underline;
|
||||
text-decoration-color: #fff;">43,636 reviews on </a></span>
|
||||
<span>
|
||||
<a href="https://www.trustpilot.com/" target="_blank" class="text-decoration-none">
|
||||
<img src="/assets/images/backgrounds/Frame 427320868.svg" alt="Trustpilot Logo" class="img-fluid" style="margin-left: 5px;">
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="disclaimer-section mb-hidden">
|
||||
<p class="text-muted small mb-0" style="line-height: 1.5; font-size: 0.875rem;">
|
||||
<strong>Disclaimer:</strong> AIFO provides educational resources and simulated evaluations for traders. We do not offer investment advice or guarantee profits. Trading financial markets carries a high level of risk and may not be suitable for all individuals. Past performance is not indicative of future results. Please trade responsibly and never risk capital you cannot afford to lose.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subscript-block col-12 col-sm-12 col-md col-lg-4">
|
||||
<h6 class="text-white mb-3 fw-semibold">Stay updated with our newsletter!</h6>
|
||||
<div class="subscribe-wrapper">
|
||||
<input type="email" name="subscript_email" class="subscribe-input" placeholder="Email" required>
|
||||
<button class="subscribe-btn" type="submit">Subscribe</button>
|
||||
</div>
|
||||
<div class="footer-doc mb-show">
|
||||
<ul class="nav ml-lg-auto d-flex w-100 justify-content-between">
|
||||
<li class="nav-item flex-fill text-center">
|
||||
<a class="text-decoration-underline text-primary" href="#" target="_blank">Legal Documents</a>
|
||||
</li>
|
||||
<li class="nav-item flex-fill text-center">
|
||||
<a class="text-decoration-underline text-primary" href="#" target="_blank">Privacy & Cookies</a>
|
||||
</li>
|
||||
<li class="nav-item flex-fill text-center">
|
||||
<a class="text-decoration-underline text-primary" href="#" target="_blank">Risk Disclosure</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="disclaimer-section mb-show">
|
||||
<p class="small mb-0 text-justify" style="line-height: 15px; font-size: 0.628rem;">
|
||||
<strong>Disclaimer:</strong> AIFO provides educational resources and simulated evaluations for traders. We do not offer investment advice or guarantee profits. Trading financial markets carries a high level of risk and may not be suitable for all individuals. Past performance is not indicative of future results. Please trade responsibly and never risk capital you cannot afford to lose.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row footer-rights">
|
||||
<div class="col-12 col-md-5">
|
||||
<span class="">
|
||||
© <span id="current-year"></span> <a href="" class="footer-link" target="_blank">AIFO Co.Ltd.</a>. All rights reserved.
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-6 col-md footer-doc mb-hidden">
|
||||
<ul class="nav ml-lg-auto d-flex w-100 justify-content-between">
|
||||
<li class="nav-item flex-fill text-center">
|
||||
<a class="text-decoration-underline text-primary" href="#" target="_blank">Legal Documents</a>
|
||||
</li>
|
||||
<li class="nav-item flex-fill text-center">
|
||||
<a class="text-decoration-underline text-primary" href="#" target="_blank">Privacy & Cookies</a>
|
||||
</li>
|
||||
<li class="nav-item flex-fill text-center">
|
||||
<a class="text-decoration-underline text-primary" href="#" target="_blank">Risk Disclosure</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
@@ -0,0 +1,131 @@
|
||||
/**
|
||||
* Loads shared nav/footer and applies active menu + copyright year.
|
||||
* Requires pages to be served over HTTP (see server.js).
|
||||
*/
|
||||
(function () {
|
||||
var NAV_URL = "/components/nav.html";
|
||||
var FOOTER_URL = "/components/footer.html";
|
||||
|
||||
function normalizePath(pathname) {
|
||||
if (!pathname) return "/";
|
||||
var p = pathname.split("?")[0].split("#")[0];
|
||||
try {
|
||||
p = decodeURIComponent(p);
|
||||
} catch (e) {
|
||||
/* ignore */
|
||||
}
|
||||
if (p.endsWith("/index.html")) {
|
||||
p = p.slice(0, -"/index.html".length) || "/";
|
||||
}
|
||||
if (p.length > 1 && p.endsWith("/")) {
|
||||
p = p.slice(0, -1);
|
||||
}
|
||||
return p.toLowerCase();
|
||||
}
|
||||
|
||||
function hrefToPath(href) {
|
||||
if (!href || href === "#" || href.indexOf("javascript:") === 0) return null;
|
||||
try {
|
||||
var url = new URL(href, window.location.origin);
|
||||
if (url.origin !== window.location.origin) return null;
|
||||
return normalizePath(url.pathname);
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function pathsMatch(current, target) {
|
||||
if (!target) return false;
|
||||
if (current === target) return true;
|
||||
if (
|
||||
(current === "/" || current === "/index.html") &&
|
||||
(target === "/" || target === "/index.html")
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function highlightActiveNav(container) {
|
||||
var current = normalizePath(window.location.pathname);
|
||||
var links = container.querySelectorAll("a[href]");
|
||||
|
||||
links.forEach(function (anchor) {
|
||||
var target = hrefToPath(anchor.getAttribute("href"));
|
||||
if (!pathsMatch(current, target)) return;
|
||||
|
||||
anchor.classList.add("active");
|
||||
var item = anchor.closest(".nav-item");
|
||||
if (item) item.classList.add("active");
|
||||
|
||||
if (anchor.classList.contains("dropdown-item")) {
|
||||
var parentItem = anchor.closest(".nav-item.dropdown");
|
||||
if (parentItem) {
|
||||
parentItem.classList.add("active");
|
||||
var toggle = parentItem.querySelector(".nav-link.dropdown-toggle");
|
||||
if (toggle) toggle.classList.add("active");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateCopyrightYear(root) {
|
||||
var year = String(new Date().getFullYear());
|
||||
root.querySelectorAll("#current-year").forEach(function (el) {
|
||||
el.textContent = year;
|
||||
});
|
||||
}
|
||||
|
||||
function fetchText(url) {
|
||||
return fetch(url, { credentials: "same-origin" }).then(function (res) {
|
||||
if (!res.ok) throw new Error("Failed to load " + url + " (" + res.status + ")");
|
||||
return res.text();
|
||||
});
|
||||
}
|
||||
|
||||
function injectHtml(containerId, html) {
|
||||
var el = document.getElementById(containerId);
|
||||
if (!el) return null;
|
||||
el.innerHTML = html;
|
||||
return el;
|
||||
}
|
||||
|
||||
function initLayout() {
|
||||
var navContainer = document.getElementById("nav-container");
|
||||
var footerContainer = document.getElementById("footer-container");
|
||||
if (!navContainer && !footerContainer) return;
|
||||
|
||||
var tasks = [];
|
||||
if (navContainer) tasks.push(fetchText(NAV_URL));
|
||||
else tasks.push(Promise.resolve(null));
|
||||
if (footerContainer) tasks.push(fetchText(FOOTER_URL));
|
||||
else tasks.push(Promise.resolve(null));
|
||||
|
||||
Promise.all(tasks)
|
||||
.then(function (parts) {
|
||||
var navHtml = parts[0];
|
||||
var footerHtml = parts[1];
|
||||
if (navHtml) {
|
||||
var navRoot = injectHtml("nav-container", navHtml);
|
||||
if (navRoot) highlightActiveNav(navRoot);
|
||||
}
|
||||
if (footerHtml) {
|
||||
var footerRoot = injectHtml("footer-container", footerHtml);
|
||||
if (footerRoot) updateCopyrightYear(footerRoot);
|
||||
}
|
||||
if (navHtml && window.jQuery && window.jQuery.fn.dropdown) {
|
||||
window.jQuery("#nav-container [data-toggle=\"dropdown\"]").dropdown();
|
||||
}
|
||||
document.dispatchEvent(new CustomEvent("aifo:layout-ready"));
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error("[layout.js]", err);
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", initLayout);
|
||||
} else {
|
||||
initLayout();
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,11 @@
|
||||
<!--
|
||||
页面接入 Footer（当前实现）
|
||||
来源：pages/payout.html 等标准布局页
|
||||
日期：2026-06-10
|
||||
-->
|
||||
</main>
|
||||
|
||||
<div id="footer-container"></div>
|
||||
|
||||
<!-- Core scripts ... -->
|
||||
<script src="/js/layout.js"></script>
|
||||
Reference in New Issue
Block a user