342 lines
8.5 KiB
HTML
342 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- GitHub Pages rebuild marker: 2026-05-22 -->
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Alta Proxy Tool</title>
|
|
<style>
|
|
:root {
|
|
--bg-primary: #1E1E1E;
|
|
--bg-secondary: #2D2D30;
|
|
--border: #3C3C3C;
|
|
--text-primary: #E0E0E0;
|
|
--text-secondary: #999999;
|
|
--accent-primary: #0E7AFE;
|
|
--accent-primary-hover: #0A5FD9;
|
|
--card-bg: #2D2D30;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 16px 0;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.container {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.header .container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.header-brand img {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.header-brand span {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.header-link {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.header-link:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Hero */
|
|
main {
|
|
flex: 1;
|
|
}
|
|
|
|
.hero {
|
|
text-align: center;
|
|
padding: 100px 0 48px;
|
|
}
|
|
|
|
.hero-icon {
|
|
width: 96px;
|
|
height: 96px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.hero .tagline {
|
|
font-size: 18px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 40px;
|
|
max-width: 500px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.btn-download {
|
|
display: inline-block;
|
|
background: var(--accent-primary);
|
|
color: #fff;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
padding: 16px 40px;
|
|
border-radius: 6px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.btn-download:hover {
|
|
background: var(--accent-primary-hover);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.hero-note {
|
|
margin-top: 14px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Kit contents */
|
|
.kit-info {
|
|
padding: 48px 0;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.kit-info h2 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.kit-contents {
|
|
display: flex;
|
|
gap: 16px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.kit-item {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 20px 28px;
|
|
text-align: center;
|
|
}
|
|
|
|
.kit-item strong {
|
|
display: block;
|
|
font-size: 14px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.kit-item span {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Setup */
|
|
.setup {
|
|
padding: 48px 0;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.setup h2 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.setup-steps {
|
|
list-style: none;
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
counter-reset: step;
|
|
}
|
|
|
|
.setup-steps li {
|
|
counter-increment: step;
|
|
padding: 12px 0 12px 44px;
|
|
position: relative;
|
|
font-size: 15px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.setup-steps li + li {
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.setup-steps li::before {
|
|
content: counter(step);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 12px;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: var(--accent-primary);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.setup-steps code {
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border);
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
font-size: 13px;
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.setup-note {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
border-top: 1px solid var(--border);
|
|
padding: 24px 0;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 600px) {
|
|
.hero {
|
|
padding: 60px 0 36px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.hero .tagline {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.btn-download {
|
|
font-size: 16px;
|
|
padding: 12px 28px;
|
|
}
|
|
|
|
.kit-contents {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.kit-item {
|
|
width: 100%;
|
|
max-width: 280px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="header">
|
|
<div class="container">
|
|
<div class="header-brand">
|
|
<img src="icon.png" alt="Alta Proxy Tool">
|
|
<span>Alta Proxy Tool</span>
|
|
</div>
|
|
<a href="https://github.com/PageZ948/Alta-Proxy-Tool" class="header-link">GitHub</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="container">
|
|
|
|
<div class="hero">
|
|
<img src="icon.png" alt="" class="hero-icon">
|
|
<h1>Alta Proxy Tool</h1>
|
|
<a href="https://github.com/PageZ948/Alta-Proxy-Tool/releases/latest/download/AltaProxyToolKit.zip" class="btn-download">Download Kit for Windows</a>
|
|
</div>
|
|
|
|
<section class="setup">
|
|
<h2>Setup</h2>
|
|
<ol class="setup-steps">
|
|
<li>Extract the zip to any folder</li>
|
|
<li>Load <code>chrome-extension/</code> in Chrome via <code>chrome://extensions</code> (Developer mode)</li>
|
|
<li>Log into your Alta deployment in Chrome</li>
|
|
<li>Click the extension icon and send cookies to the app</li>
|
|
<li>Run <strong>AltaCameraProxy.exe</strong> and start proxying</li>
|
|
</ol>
|
|
<p class="setup-note">Requires Windows 10+, Google Chrome, and an Avigilon Alta account.</p>
|
|
</section>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<a href="https://github.com/PageZ948/Alta-Proxy-Tool">Alta Proxy Tool on GitHub</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|