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

ContextWizard landing page done

Browse Source
This commit is contained in:
qingjie.du
2025-11-23 16:08:21 +09:00
parent 531021ff6d
commit e0fe7b8c09
6 changed files with 425 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

415
contextwizard_install.html Normal file
View File

@@ -0,0 +1,415 @@
<!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>Install ContextWizard - amiPro, LLC</title>
<meta
name="description"
content="Step-by-step instructions to install the ContextWizard browser extension in Chrome, Edge, and other Chromium-based browsers."
/>
<link rel="icon" type="image/x-icon" href="files/favicon.ico" />
<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"
/>
<link rel="stylesheet" href="files/boxicons.css?v=20230405" />
<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" />
<link rel="stylesheet" href="files/perfect-scrollbar.css" />
<script src="files/helpers.js"></script>
<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>
<style>
body {
color: #0f172a;
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 40%, #f5f7fb 100%);
}
.hero__title {
font-size: clamp(2rem, 3.25vw, 3rem);
}
.hero__lead {
max-width: 620px;
color: #475569;
}
.nav-brand-logo {
height: 48px;
width: auto;
}
.step-card {
border: none;
border-radius: 1.25rem;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}
.step-number {
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #eff6ff;
color: #1d4ed8;
font-weight: 600;
margin-right: 0.5rem;
}
.browser-pill {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 999px;
background: #eff6ff;
color: #1e293b;
font-size: 0.875rem;
margin-right: 0.5rem;
margin-bottom: 0.25rem;
}
.browser-pill i {
font-size: 1rem;
margin-right: 0.25rem;
}
.hero-chip {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.9rem;
border-radius: 999px;
background: #eff6ff;
color: #1e293b;
font-size: 0.9rem;
margin-right: 0.5rem;
margin-bottom: 0.25rem;
}
@media (max-width: 767px) {
.hero__actions {
flex-direction: column;
align-items: stretch;
}
}
</style>
<script>
window.onload = function () {
if (typeof initRevealAnimations === 'function') {
initRevealAnimations();
} else {
// Fallback: ensure content is visible even if animations aren't loaded
document.querySelectorAll('.reveal [data-animate]').forEach(function (el) {
el.style.opacity = '1';
el.style.transform = 'none';
});
}
};
</script>
</head>
<body>
<div class="layout-wrapper layout-content-navbar">
<div class="layout-container">
<div class="layout-page">
<nav
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
id="layout-navbar"
>
<div class="navbar-nav-right d-flex align-items-center w-100" id="navbar-collapse">
<div class="navbar-nav align-items-center">
<div class="nav-item d-flex align-items-center">
<img
src="files/favicon.ico"
alt="amiPro"
width="64"
height="64"
class="nav-brand-logo"
style="margin-right: 16px;"
/>
<div>
<div style="font-weight: 700; font-size: 1.25rem; color: #0f172a;">amiPro, LLC</div>
<small style="color: #64748b;">Privacy-first identity &amp; AI products</small>
</div>
</div>
</div>
<a href="contextwizard_top.html" class="btn btn-link ms-auto me-3">Back to ContextWizard</a>
<a
href="mailto:sales@amipro.me?subject=ContextWizard%20support"
class="btn btn-outline-primary"
>Contact support</a>
</div>
</nav>
<div class="content-wrapper">
<div class="container-xxl" style="padding: 32px 24px 72px;">
<section class="hero reveal">
<div class="hero__text" data-animate>
<span class="hero__eyebrow">ContextWizard</span>
<h1 class="hero__title">Install ContextWizard in your browser</h1>
<p class="hero__lead">
Follow this guide to install the unpackaged ContextWizard extension in Chrome, Microsoft Edge,
Brave, or any Chromium-based browser that supports developer mode extensions.
</p>
<div style="margin-top: 1.5rem;" class="hero__chips">
<span class="hero-chip">Works offline on your machine</span>
<span class="hero-chip">No account required</span>
</div>
<div
class="hero__actions"
style="margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem;"
>
<a
href="https://amipro.me/contextwizard-files/ContextWizard-crx-latest.zip"
class="btn btn-primary"
style="flex: 1 0 220px;"
>Download ContextWizard ZIP</a>
<a
href="contextwizard_privacy_policy.html"
class="btn btn-outline-secondary"
style="flex: 1 0 220px;"
>Read privacy policy</a>
</div>
</div>
</section>
<section class="reveal" data-animate style="margin-top: 48px;">
<div class="row g-4 align-items-start">
<div class="col-lg-7">
<article class="card step-card">
<div class="card-body">
<h2 style="font-weight: 600; color: #0f172a; margin-bottom: 1rem;">
Step-by-step installation
</h2>
<ol class="list-unstyled" style="margin: 0; padding: 0;">
<li style="margin-bottom: 1.5rem;">
<div style="display: flex; align-items: flex-start;">
<div class="step-number">1</div>
<div>
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Download the ZIP file</h3>
<p style="margin-bottom: 0.5rem; color: #475569;">
Click <strong>Download ContextWizard ZIP</strong> above and save the file to a
location you can find, such as your <em>Downloads</em> folder.
</p>
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
The ZIP contains the full extension source so your browser can run it in
developer mode.
</p>
</div>
</div>
</li>
<li style="margin-bottom: 1.5rem;">
<div style="display: flex; align-items: flex-start;">
<div class="step-number">2</div>
<div>
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Unzip the archive</h3>
<p style="margin-bottom: 0.5rem; color: #475569;">
Locate the downloaded ZIP file, then unzip it:
</p>
<ul style="padding-left: 1.1rem; margin-bottom: 0.5rem; color: #475569;">
<li>On macOS: double-click the ZIP file in Finder.</li>
<li>On Windows: right-click the ZIP and choose <em>Extract All…</em>.</li>
</ul>
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
You should end up with a folder named something like
<code>contextwizard-extension</code>. Keep this folder in a permanent location
(not inside your browser cache or trash).
</p>
</div>
</div>
</li>
<li style="margin-bottom: 1.5rem;">
<div style="display: flex; align-items: flex-start;">
<div class="step-number">3</div>
<div style="width: 100%;">
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Open the extensions page</h3>
<p style="margin-bottom: 0.5rem; color: #475569;">
In Chrome, open <code>chrome://extensions</code> in the address bar. In Edge, use
<code>edge://extensions</code>. You will see the extensions management screen.
</p>
<div style="margin: 0.5rem 0 0.75rem;">
<img
src="files/01-ChromeExtension-nonDev.png"
alt="Chrome extensions page highlighting chrome://extensions in the address bar"
style="max-width: 100%; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);"
/>
</div>
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
This is where you manage, enable, and remove extensions in your browser.
</p>
</div>
</div>
</li>
<li style="margin-bottom: 1.5rem;">
<div style="display: flex; align-items: flex-start;">
<div class="step-number">4</div>
<div style="width: 100%;">
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Enable developer mode</h3>
<p style="margin-bottom: 0.5rem; color: #475569;">
Turn on <strong>Developer mode</strong> using the toggle in the top-right corner of
the extensions page.
</p>
<div style="margin: 0.5rem 0 0.75rem;">
<img
src="files/02-ChromeExtension-enabledDev.png"
alt="Chrome extensions page with Developer mode toggle turned on and Load unpacked button visible"
style="max-width: 100%; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);"
/>
</div>
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
When Developer mode is on, you should see a <strong>Load unpacked</strong> button
near the top of the page.
</p>
</div>
</div>
</li>
<li style="margin-bottom: 1.5rem;">
<div style="display: flex; align-items: flex-start;">
<div class="step-number">5</div>
<div style="width: 100%;">
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Load the unpacked extension</h3>
<p style="margin-bottom: 0.5rem; color: #475569;">
Click <strong>Load unpacked</strong> and choose the folder you unzipped in Step 2.
</p>
<div style="margin: 0.5rem 0 0.75rem;">
<img
src="files/03-ChromeExtension-select-unpackaged-folder.png"
alt="Chrome extensions page with Load unpacked button highlighted and ContextWizard folder selected in Finder"
style="max-width: 100%; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);"
/>
</div>
<p style="margin-bottom: 0.25rem; color: #475569; font-size: 0.9rem;">
In the file picker, select the <strong>folder</strong> (for example,
<code>ContextWizard-crx-latest</code>), not the ZIP file.
</p>
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
After loading, your browser will add ContextWizard to the list of installed
extensions.
</p>
</div>
</div>
</li>
<li>
<div style="display: flex; align-items: flex-start;">
<div class="step-number">6</div>
<div>
<h3 style="font-size: 1.05rem; margin-bottom: 0.35rem;">Pin and open ContextWizard</h3>
<p style="margin-bottom: 0.5rem; color: #475569;">
Pin the extension so it is easy to reach, then open it in a new tab.
</p>
<div style="margin: 0.5rem 0 0.75rem;">
<img
src="files/04-ChromeExtension-installed.png"
alt="Chrome extensions page showing ContextWizard installed in the All Extensions list"
style="max-width: 100%; border-radius: 0.75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);"
/>
</div>
<ul style="padding-left: 1.1rem; margin-bottom: 0.5rem; color: #475569;">
<li>Click the puzzle icon (Chrome/Edge), then pin <strong>ContextWizard</strong>.</li>
<li>Click the ContextWizard icon or open the extension's page to start using it.</li>
</ul>
<p style="margin-bottom: 0; color: #64748b; font-size: 0.9rem;">
Your conversations stay local on your machine. You can remove the unpacked
extension at any time from the extensions page.
</p>
</div>
</div>
</li>
</ol>
</div>
</article>
</div>
<div class="col-lg-5">
<article
class="card h-100"
style="border-radius: 1.25rem; box-shadow: 0 16px 50px rgba(15, 23, 42, 0.08);"
>
<div class="card-body">
<h3 style="font-size: 1.15rem; margin-bottom: 0.75rem;">Supported browsers</h3>
<p style="color: #475569;">
ContextWizard works in most Chromium-based desktop browsers that support loading
unpacked extensions:
</p>
<div style="margin-bottom: 0.75rem;">
<span class="browser-pill"><i class="bx bxl-chrome"></i>Chrome (latest)</span>
<span class="browser-pill"><i class="bx bxl-microsoft"></i>Microsoft Edge</span>
<span class="browser-pill"><i class="bx bxs-ship"></i>Brave / Vivaldi / Opera</span>
</div>
<p style="color: #64748b; font-size: 0.9rem;">
Mobile browsers and Safari do not support this unpacked extension flow.
</p>
<hr />
<h3 style="font-size: 1.05rem; margin-bottom: 0.5rem;">If something doesnt work</h3>
<ul style="padding-left: 1.1rem; color: #475569;">
<li>Make sure <strong>Developer mode</strong> is enabled on the extensions page.</li>
<li>Confirm you selected the <strong>uncompressed folder</strong>, not the ZIP file.</li>
<li>Try restarting the browser after loading the extension.</li>
</ul>
<p style="color: #64748b; font-size: 0.9rem; margin-bottom: 0.75rem;">
If you are still stuck, reach out and well help you get set up.
</p>
<a href="mailto:support@amipro.me?subject=ContextWizard%20installation%20help" class="btn btn-sm btn-outline-primary">
Email support
</a>
</div>
</article>
</div>
</div>
</section>
</div>
<footer class="content-footer footer bg-footer-theme">
<div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
<div class="mb-2 mb-md-0">
&copy;
<script>
document.write(new Date().getFullYear());
</script>
<a href="https://www.amipro.me" target="_blank" class="footer-link fw-bolder">amiPro, LLC</a>
</div>
<div>
<a href="contextwizard_top.html" class="footer-link me-4">ContextWizard overview</a>
<a href="contextwizard_privacy_policy.html" class="footer-link">Privacy policy</a>
</div>
</div>
</footer>
<div class="content-backdrop fade"></div>
</div>
</div>
</div>
<div class="layout-overlay layout-menu-toggle"></div>
</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>