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

427
contextwizard_top.html Normal file
View File

@@ -0,0 +1,427 @@
<!DOCTYPE html>
<html
lang="en-US"
class="light-style"
>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title> ContextWizard - amiPro </title>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-850DCHX9EJ"></script>
<script>
globalThis.dataLayer = globalThis.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-850DCHX9EJ');
</script>
<meta name="description" content="ContextWizard keeps every AI conversation searchable, private, and under your control" />
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="files/favicon.ico" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet"
/>
<!-- Icons. Uncomment required icon fonts -->
<link rel="stylesheet" href="files/boxicons.css?v=20230405" />
<!-- Core CSS -->
<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" />
<!-- Helpers -->
<script src="files/helpers.js"></script>
<style>
body {
color: var(--text-bright, #f8fafc);
background: radial-gradient(circle at top, #0f172a, #040b1f);
background-color: #040b1f;
}
.hero__text .hero__title {
font-size: clamp(2rem, 4vw, 3.25rem);
color: var(--text-bright, #f8fafc);
}
.hero__text .hero__lead {
max-width: 560px;
color: rgba(248, 250, 252, 0.85);
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.8rem;
border-radius: 999px;
background: rgba(248, 250, 252, 0.18);
border: 1px solid rgba(248, 250, 252, 0.3);
color: var(--text-bright, #f8fafc);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hero__media img {
width: 100%;
height: auto;
border-radius: 1.25rem;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}
.section-heading {
margin: 0 0 0.5rem;
font-weight: 600;
color: var(--text-bright, #f8fafc);
}
.section-lead {
color: var(--text-muted, #cbd5f5);
max-width: 720px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.feature-card {
border: none;
border-radius: 1rem;
box-shadow: 0 16px 50px rgba(15, 23, 42, 0.08);
transition: transform 200ms ease, box-shadow 200ms ease;
background: rgba(255, 255, 255, 0.95);
color: #0f172a;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 55px rgba(15, 23, 42, 0.12);
}
.feature-icon {
display: inline-flex;
width: 48px;
height: 48px;
border-radius: 16px;
align-items: center;
justify-content: center;
background: #eef2ff;
color: #4338ca;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.feature-card ul {
padding-left: 1rem;
margin-bottom: 0;
color: #334155;
}
.checklist {
list-style: none;
padding: 0;
margin: 0;
}
.checklist li {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text-bright, #f8fafc);
}
.checklist li i {
color: #16a34a;
}
.data-callout {
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 1rem;
padding: 1.5rem;
background: #ffffff;
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.1);
color: #0f172a;
}
.card {
color: #0f172a;
background-color: rgba(255, 255, 255, 0.95);
}
.card .checklist li,
.data-callout .checklist li {
color: #0f172a;
}
.pay-attention {
border-left: 4px solid #f97316;
background: #fff7ed;
color: #7c2d12;
}
</style>
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<script src="files/config.js"></script>
<script src="files/jquery.js"></script>
<script src="files/popper.js"></script>
<script src="files/bootstrap.js"></script>
<script src="files/perfect-scrollbar.js"></script>
<script src="files/menu.js"></script>
<script src="files/main.js"></script>
<script src="files/ua-parser.js"></script>
<script src="files/amipro_utils.js?v=20230401402"></script>
<script>
const i18n_messages = new Map();
let lang_map = new Map();
lang_map.set('en-US', 'amiPro - Trustworthy passkey & privacy tooling');
lang_map.set('zh-CN', 'amiPro - 值得信赖的 Passkey 与隐私工具');
lang_map.set('ja', 'amiPro - 信頼できるパスキーとプライバシーツール');
i18n_messages.set('label_welcome', lang_map);
lang_map = new Map();
lang_map.set('en-US', 'Management Portal');
lang_map.set('zh-CN', '管理门户');
lang_map.set('ja', '管理ポータル');
i18n_messages.set('label_portal', lang_map);
window.onload = async function() {
setI18NText(i18n_messages);
initRevealAnimations();
}
</script>
</head>
<body>
<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
<div class="layout-container">
<!-- Layout container -->
<div class="layout-page">
<!-- Navbar -->
<!-- / Navbar -->
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div style="margin: 24px;">
<section class="hero reveal">
<div class="hero__text" data-animate>
<span class="hero__badge"><i class="bx bx-bot"></i> ContextWizard</span>
<h1 class="hero__title">Never lose an AI conversation again.</h1>
<p class="hero__lead">
Harness each assistant's strengths, one-click backup or migrate every thread, and start immediately with zero configuration.
</p>
<ul class="checklist" style="margin-top: 1.25rem;">
<li><i class="bx bx-check-circle"></i>All your data never leaves your PC</li>
<li><i class="bx bx-check-circle"></i>Automatic capture across your favorite AI chat platforms</li>
<li><i class="bx bx-check-circle"></i>Search, filter, and relaunch chats instantly</li>
</ul>
</div>
<div class="hero__media" data-animate>
<div class="hero__orb"></div>
<img src="contextwizard-files/screen-platforms-640-400.jpg" alt="ContextWizard platform overview screenshot" loading="lazy" />
</div>
</section>
<div class="alert alert-success data-callout reveal" role="alert" data-animate style="margin-top: 24px;">
<i class="bx bx-lock-alt bx-sm me-2"></i>
<div>
<strong>Local-first:</strong> A unified conversation manager for AI chat platforms. ContextWizard automatically captures and organizes your conversations while keeping everything encrypted on-device.
</div>
</div>
<section class="reveal" data-animate style="margin-top: 40px;">
<h2 class="section-heading">Why ContextWizard?</h2>
<p class="section-lead">
ContextWizard automatically captures and organizes your conversations across multiple AI assistants, making every insight searchable, portable, and ready to revisit.
</p>
</section>
<div class="feature-grid" style="margin-top: 24px;">
<article class="card feature-card reveal" data-animate>
<div class="card-body">
<div class="feature-icon">🤖</div>
<h3 class="card-title">Multi-Platform Support</h3>
<ul>
<li><strong>10 built-in platforms</strong>: ChatGPT, Claude, Gemini, Copilot, Perplexity, HuggingChat, Poe, Grok, DeepSeek, Qwen.</li>
<li><strong>Custom platforms</strong>: Add any AI chat site via URL patterns.</li>
<li><strong>Automatic detection</strong> as soon as you land on supported hosts.</li>
</ul>
</div>
</article>
<article class="card feature-card reveal" data-animate>
<div class="card-body">
<div class="feature-icon">💾</div>
<h3 class="card-title">Smart Recording</h3>
<ul>
<li>Real-time capture using MutationObserver.</li>
<li>Platform-specific selectors for accurate transcripts.</li>
<li>Debounced saves, visual indicator, and URL-aware logic for clean history.</li>
</ul>
</div>
</article>
<article class="card feature-card reveal" data-animate>
<div class="card-body">
<div class="feature-icon">🔍</div>
<h3 class="card-title">Powerful Search</h3>
<ul>
<li>Full-text search across titles, summaries, and message bodies.</li>
<li>Platform filters plus smart ranking by recency and relevance.</li>
<li>Jump back into any conversation with one click.</li>
</ul>
</div>
</article>
<article class="card feature-card reveal" data-animate>
<div class="card-body">
<div class="feature-icon">📊</div>
<h3 class="card-title">Conversation Management</h3>
<ul>
<li>Unified list for every assistant you use.</li>
<li>Quick access, deletion, export, and import workflows.</li>
<li>Local storage ensures nothing syncs beyond your machine.</li>
</ul>
</div>
</article>
<article class="card feature-card reveal" data-animate>
<div class="card-body">
<div class="feature-icon">🌐</div>
<h3 class="card-title">Internationalization</h3>
<ul>
<li>Localized UI across 12 languages.</li>
<li>Automatic browser-language detection.</li>
<li>Fast language switching with persistent preferences.</li>
</ul>
</div>
</article>
<article class="card feature-card reveal" data-animate>
<div class="card-body">
<div class="feature-icon">⚙️</div>
<h3 class="card-title">Customization</h3>
<ul>
<li>Enable/disable platforms individually.</li>
<li>Add custom URL patterns for new AI sites.</li>
<li>Manage data with stats, exports, imports, and clears.</li>
</ul>
</div>
</article>
</div>
<section class="card mb-4 mt-5 reveal" data-animate>
<div class="card-body">
<h3 class="card-title" style="margin-bottom: 1rem;">How capturing works</h3>
<p>
ContextWizard watches the DOM of supported AI chat pages with lightweight MutationObservers, extracts each assistant/user message via platform-optimized selectors, and stores condensed transcripts in Chrome storage. Debouncing keeps your archive tidy, while the overlay indicator shows when a session is recording.
</p>
<ul class="checklist" style="margin-top: 1rem;">
<li><i class="bx bx-check-circle"></i>Works with tabs you actively view—no background scraping.</li>
<li><i class="bx bx-check-circle"></i>Landing pages (e.g., Gemini /app) are skipped until a unique conversation URL appears.</li>
<li><i class="bx bx-check-circle"></i>All saved data lives in <code>chrome.storage.local</code> unless you export it.</li>
</ul>
</div>
</section>
<section class="card mb-4 reveal" data-animate>
<div class="row g-0 align-items-center">
<div class="col-md-6">
<div class="card-body">
<h3 class="card-title" style="margin-bottom: 1rem;">Stay coordinated across assistants</h3>
<p>
Bring order to the chaos of juggling multiple AI assistants. ContextWizard keeps a unified list, lets you filter by platform, and opens any saved thread in-place with a single click.
</p>
<ul class="checklist" style="margin-top: 1rem;">
<li><i class="bx bx-check-circle"></i>Tag and color-code platforms for quick scanning.</li>
<li><i class="bx bx-check-circle"></i>Use summaries to remember why a chat mattered.</li>
<li><i class="bx bx-check-circle"></i>Export/import archives for backups or new machines.</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="card-body">
<img src="contextwizard-files/screen-search-640-400.jpg" alt="ContextWizard search UI" class="img-fluid" loading="lazy" style="border-radius: 1rem; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);" />
</div>
</div>
</div>
</section>
<div class="alert pay-attention reveal" role="alert" data-animate style="margin-top: 24px;">
<i class="bx bx-info-circle bx-sm me-2"></i>
<strong>Pay attention:</strong> Do <em>not</em> delete your conversations on AI platforms if you still need them. ContextWizard stores the main content, not attachments or full raw data.
</div>
<section class="card mb-5 mt-4 reveal" data-animate>
<div class="card-body">
<h3 class="card-title" style="margin-bottom: 1rem;">Ready in minutes</h3>
<p>
Install the extension, pick which platforms to observe, and ContextWizard starts capturing right away—no API keys, no cloud accounts, zero configuration beyond toggling the platforms you care about.
</p>
<div class="checklist" style="margin-top: 1rem;">
<div class="row">
<div class="col-md-6">
<ul class="checklist">
<li><i class="bx bx-check-circle"></i>Enable/disable per platform anytime.</li>
<li><i class="bx bx-check-circle"></i>Toggle recording indicator visibility.</li>
<li><i class="bx bx-check-circle"></i>Switch languages instantly.</li>
</ul>
</div>
<div class="col-md-6">
<ul class="checklist">
<li><i class="bx bx-check-circle"></i>Export JSON snapshots for backups.</li>
<li><i class="bx bx-check-circle"></i>Import archives when moving machines.</li>
<li><i class="bx bx-check-circle"></i>Clear everything with one tap if needed.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- / Content -->
<div class="content-backdrop fade"></div>
</div>
<!-- Content wrapper -->
</div>
<!-- / Layout page -->
</div>
<!-- / Layout container -->
</div>
<!-- / Layout wrapper -->
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
</body>
</html>