dqj/amipro-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New style and added ContextWizard pages

Browse Source
This commit is contained in:
qingjie.du
2025-11-18 21:49:23 +09:00
parent db88848660
commit 531021ff6d
15 changed files with 2208 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
integration.html
View File

@@ -8,7 +8,7 @@
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
content="width=device-width, initial-scale=1.0"
/>
<title> Integration - amiPro </title>
@@ -16,7 +16,7 @@
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
globalThis.dataLayer = globalThis.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
@@ -43,6 +43,7 @@
<link rel="stylesheet" href="files/core.css" class="template-customizer-core-css" />
<link rel="stylesheet" href="files/theme-default.css" class="template-customizer-theme-css" />
<link rel="stylesheet" href="files/demo.css" />
<link rel="stylesheet" href="files/modern.css" />
<!-- Vendors CSS -->
<link rel="stylesheet" href="files/perfect-scrollbar.css" />
@@ -91,6 +92,18 @@
lang_map.set("ja", "お問い合わせ（sales@amipro.me）");
i18n_messages.set("title_contact", lang_map);
lang_map = new Map();
lang_map.set("en-US", "Contact us (sales@amipro.me)");
lang_map.set("zh-CN", "联系我们（sales@amipro.me）");
lang_map.set("ja", "お問い合わせ（sales@amipro.me）");
i18n_messages.set("title_contact_cta", lang_map);
lang_map = new Map();
lang_map.set("en-US", "One month free trial<br>(After free registration of the management portal, all functions are free to try for one month)");
lang_map.set("zh-CN", "一个月免费试用<br>（免费注册管理门户后，所有功能免费试用一个月）");
lang_map.set("ja", "1ヶ月間の無料トライアル<br>（管理ポータルの無料登録後、すべての機能を1ヶ月間無料でお試しいただけます）");
i18n_messages.set("btn_portal", lang_map);
lang_map = new Map();
lang_map.set("en-US", "How to integrate");
lang_map.set("zh-CN", "如何集成");
@@ -174,6 +187,7 @@
window.onload = async function() {
setI18NText(i18n_messages)
initRevealAnimations()
}
</script>
@@ -212,87 +226,65 @@
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div style="margin: 20px;">
<small class="text-normal fw-semibold" id="label_integartion_title">Integration</small>
<div class="accordion mt-3">
<div class="card accordion-item">
<h2 class="accordion-header" id="headingOne">
<button id="btn_step1" type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionOne" aria-expanded="false" aria-controls="accordionOne">
Sample site
</button>
</h2>
<section class="hero reveal" style="margin: 24px;">
<div class="hero__text" data-animate>
<span class="hero__eyebrow" id="label_integartion_title">Integration</span>
<h1 class="hero__title">Launch Passkey journeys in six guided steps</h1>
<p class="hero__lead">
Follow the production-proven playbook: explore the sample site, drop in the JavaScript SDK,
fine-tune device management, and configure the amiPro portal for your domains.
</p>
<div class="hero__chips">
<span class="hero-chip">Browser + App SDK</span>
<span class="hero-chip">Recovery-ready</span>
<span class="hero-chip">Session control</span>
</div>
<div style="margin-top: 2rem; display: flex; gap: 0.8rem; flex-wrap: wrap;">
<a href="https://portal.amipro.me" target="_blank" class="btn btn-primary" id="btn_portal">Portal</a>
<a href="mailto:sales@amipro.me?subject=contact" class="btn btn-outline-info" id="title_contact_cta">Contact</a>
</div>
</div>
<div class="hero__media" data-animate>
<div class="hero__device">
<img src="files/build.jpg" alt="Integration">
</div>
</div>
</section>
<div id="accordionOne" class="accordion-collapse collapse" style="">
<div class="accordion-body" id="info_top_step1">
Sample site
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button id="btn_step2" type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionTwo" aria-expanded="false" aria-controls="accordionTwo">
Login integration
</button>
</h2>
<div id="accordionTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" style="">
<div class="accordion-body" id="info_top_step2">
Login integration
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingThree">
<button id="btn_step3" type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionThree" aria-expanded="false" aria-controls="accordionThree">
Device mng page
</button>
</h2>
<div id="accordionThree" class="accordion-collapse collapse" aria-labelledby="headingThree" style="">
<div class="accordion-body" id="info_top_step3">
Device mng page
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="heading4">
<button id="btn_step4" type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion4" aria-expanded="false" aria-controls="accordion4">
Session mag
</button>
</h2>
<div id="accordion4" class="accordion-collapse collapse" aria-labelledby="heading4" style="">
<div class="accordion-body" id="info_top_step4">
Session mag
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="heading5">
<button id="btn_step5" type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion5" aria-expanded="false" aria-controls="accordion5">
Session mag
</button>
</h2>
<div id="accordion5" class="accordion-collapse collapse" aria-labelledby="heading5" style="">
<div class="accordion-body" id="info_top_step5">
Session mag
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="heading6">
<button id="btn_step6" type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion6" aria-expanded="false" aria-controls="accordion6">
Session mag
</button>
</h2>
<div id="accordion6" class="accordion-collapse collapse" aria-labelledby="heading6" style="">
<div class="accordion-body" id="info_top_step6">
Session mag
</div>
</div>
<section class="timeline" style="margin: 0 24px 48px;">
<article class="timeline-step" data-step="01" data-animate>
<h4 id="btn_step1">Step 1</h4>
<p id="info_top_step1">Sample site</p>
</article>
<article class="timeline-step" data-step="02" data-animate>
<h4 id="btn_step2">Step 2</h4>
<p id="info_top_step2">Login integration</p>
</article>
<article class="timeline-step" data-step="03" data-animate>
<h4 id="btn_step3">Step 3</h4>
<p id="info_top_step3">Device management page</p>
</article>
<article class="timeline-step" data-step="04" data-animate>
<h4 id="btn_step4">Step 4</h4>
<p id="info_top_step4">Session management</p>
</article>
<article class="timeline-step" data-step="05" data-animate>
<h4 id="btn_step5">Step 5</h4>
<p id="info_top_step5">Portal registration</p>
</article>
<article class="timeline-step" data-step="06" data-animate>
<h4 id="btn_step6">Step 6</h4>
<p id="info_top_step6">Server settings</p>
</article>
</section>
<div class="cta-banner" data-animate>
<div>
<h4>Need white-glove integration help?</h4>
<p style="margin: 0; color: var(--text-muted);">Share your stack and we will tailor the SDK sample for you.</p>
</div>
<a href="mailto:sales@amipro.me?subject=amiPro%20integration" class="btn btn-primary">Talk to us</a>
</div>
<br><br>
</div>
<!-- / Content -->
<!-- Footer -->
@@ -330,15 +322,6 @@
</div>
<!-- / Layout wrapper -->
<!-- div class="buy-now">
<a
href="https://themeselection.com/products/sneat-bootstrap-html-admin-template/"
target="_blank"
class="btn btn-danger btn-buy-now"
>Upgrade to Pro</a
>
</div -->
<!-- Page JS -->
<!-- Place this tag in your head or just before your close body tag. -->