Skip to content

Add image conversion and resizing scripts; update HTML for responsive images #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JYC0413 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Add image conversion and resizing scripts; update HTML for responsive images #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
90d3efc
Add image conversion and resizing scripts; update HTML for responsive…
JYCOfficial Oct 13, 2025
f534e89
Merge branch 'main' into jyc0413-patch-2
JYCOfficial Oct 13, 2025
411bd86
for seo
JYCOfficial Oct 13, 2025
cf39640
Update media/resizeImg.py
JYC0413 Oct 13, 2025
6fe6b19
Merge remote-tracking branch 'origin/main' into jyc0413-patch-2
JYCOfficial Oct 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 36 additions & 26 deletions echokit_cube.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,15 @@
<meta name="keywords" content="AI education, voice AI learning, Rust programming education, open source AI toolkit, STEM learning, AI for students, build AI agent, educational AI hardware">
<meta property="og:title" content="EchoKit - Educational Voice AI Toolkit for Students">
<meta property="og:description" content="Learn AI by building. Complete open-source voice AI system with hardware, firmware, and server code. Perfect for students and educators.">
<meta property="og:type" content="product">
<meta property="og:type" content="website">
<meta name="author" content="EchoKit"/>
<meta name="robots" content="index,follow"/>
<link rel="canonical" href="https://echokit.dev/echokit_cube.html"/>
<meta property="og:image" content="https://echokit.dev/media/echokit_cube-01.webp"/>
<meta property="og:url" content="https://echokit.dev/echokit_cube.html"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@echokit"/>
<meta name="theme-color" content="#0a0a1f"/>

<style>
* {
Expand Down Expand Up @@ -66,7 +74,7 @@
}

.nav-links a:hover {
color: #667eea;
color: #6550af;
}

.container {
Expand All @@ -82,11 +90,13 @@
}

.breadcrumb a {
color: #667eea;
color: #6550af;
font-weight: 600;
text-decoration: none;
}

.breadcrumb a:hover {
color: #8968c1;
text-decoration: underline;
}

Expand Down Expand Up @@ -173,7 +183,7 @@
}

.thumbnail:hover, .thumbnail.active {
border-color: #667eea;
border-color: #6550af;
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}
Expand Down Expand Up @@ -207,13 +217,13 @@
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
color: #667eea;
color: #6550af;
}

.education-badge {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.3);
color: #10b981;
color: #0a6e4d;
}

.price-section {
Expand All @@ -228,7 +238,7 @@
.price {
font-size: 3rem;
font-weight: 800;
color: #667eea;
color: #6550af;
margin-bottom: 10px;
}

Expand Down Expand Up @@ -268,6 +278,7 @@
}

.cta-secondary {
color: #745fbc;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
border: 2px solid rgba(102, 126, 234, 0.5);
}
Expand All @@ -285,7 +296,7 @@
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 20px;
color: #667eea;
color: #6550af;
}

.section p {
Expand All @@ -311,7 +322,7 @@
content: "✓";
position: absolute;
left: 0;
color: #10b981;
color: #0a6e4d;
font-weight: bold;
font-size: 1.3rem;
}
Expand All @@ -327,7 +338,7 @@
}

.edu-focus h2 {
color: #10b981;
color: #0a6e4d;
font-size: 2rem;
margin-bottom: 20px;
}
Expand All @@ -350,13 +361,13 @@

.learning-card:hover {
transform: translateY(-5px);
border-color: #667eea;
border-color: #6550af;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}

.learning-card h3 {
font-size: 1.3rem;
color: #667eea;
color: #6550af;
margin-bottom: 12px;
}

Expand Down Expand Up @@ -390,7 +401,7 @@

.spec-label {
font-weight: 700;
color: #667eea;
color: #6550af;
font-size: 0.95rem;
}

Expand Down Expand Up @@ -420,7 +431,7 @@
.included-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.15);
border-color: #667eea;
border-color: #6550af;
}

.included-icon {
Expand All @@ -431,7 +442,7 @@
.included-item h3 {
font-size: 1.2rem;
margin-bottom: 10px;
color: #667eea;
color: #6550af;
}

/* Responsive */
Expand Down Expand Up @@ -625,14 +636,14 @@
<!--
<div class="thumbnail active" style="position: relative;" onclick="changeMedia(0)">
<div class="video-icon" style="font-size: 20px;">▶️</div>
<img src="media/XroT7a0DLkw.jpg" alt="EchoKit Video">
<img src="media/XroT7a0DLkw.webp" alt="EchoKit Video">
</div>
-->
<div class="thumbnail" onclick="changeMedia(0)">
<img src="media/echokit-cube-01.jpg" alt="EchoKit">
<img src="media/echokit-cube-01-305.webp" alt="EchoKit">
</div>
<div class="thumbnail" onclick="changeMedia(1)">
<img src="media/echokit-cube-02.png" alt="EchoKit">
<img src="media/echokit-cube-02-305.webp" alt="EchoKit">
</div>
</div>
</div>
Expand Down Expand Up @@ -712,7 +723,7 @@ <h3>Educators</h3>

<!-- Technical Specifications -->
<div class="specs-section" id="specs">
<h2 style="font-size: 2rem; color: #667eea; margin-bottom: 30px;">Technical Specifications</h2>
<h2 style="font-size: 2rem; color: #6550af; margin-bottom: 30px;">Technical Specifications</h2>
<div class="specs-grid">
<div class="spec-item">
<div class="spec-label">Processor</div>
Expand Down Expand Up @@ -831,7 +842,7 @@ <h2 style="font-size: 2rem;">Software Capabilities</h2>

<!-- CTA Section -->
<div class="price-section" style="text-align: center;">
<h2 style="font-size: 2rem; color: #667eea; margin-bottom: 20px;">Start Your AI Learning Journey</h2>
<h2 style="font-size: 2rem; color: #6550af; margin-bottom: 20px;">Start Your AI Learning Journey</h2>
<p style="font-size: 1.1rem; margin-bottom: 30px; color: #555;">
Ships within 3 weeks. Each device is hand-assembled, tested, and comes with lifetime access to documentation and updates.
</p>
Expand All @@ -846,12 +857,11 @@ <h2 style="font-size: 2rem; color: #667eea; margin-bottom: 20px;">Start Your AI
<p style="color: #666;">© 2025 EchoKit. Open source under GPL-3.0 License.</p>
</footer>

<script>
const media = [
// {type: 'video', src: 'media/XroT7a0DLkw.mp4', poster: 'media/XroT7a0DLkw.jpg'},
{type: 'image', src: 'media/echokit-cube-01.jpg'},
{type: 'image', src: 'media/echokit-cube-02.png'}
];
<script>
const media = [
{type: 'image', src: 'media/echokit-cube-01.webp'},
{type: 'image', src: 'media/echokit-cube-02.webp'}
];

let endedListener = null;
let currentVideo = null;
Expand Down
Loading
Loading