<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ page_title }}</title>
<link rel="icon" type="image/jpeg" href="/templates/static/images/omi_icon.png">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
min-height: 100vh;
color: #ffffff;
overflow-x: hidden;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 4rem 2rem;
}
.header {
text-align: center;
margin-bottom: 6rem;
position: relative;
}
.omi-device {
width: 240px;
height: 240px;
margin: -4rem auto -0rem auto;
}
.omi-device img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.social-proof {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
border: 1px solid rgba(99, 102, 241, 0.4);
border-radius: 50px;
padding: 0.6rem 1.8rem;
display: inline-block;
margin-bottom: 2rem;
font-size: 0.9rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}
h1 {
font-size: 4rem;
font-weight: 800;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 50%, #cbd5e1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
letter-spacing: -0.02em;
}
.subtitle {
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
font-weight: 400;
}
.value-prop {
font-size: 1.1rem;
color: #4ade80;
font-weight: 600;
margin-bottom: 2rem;
}
.promo-code-banner {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-radius: 50px;
padding: 1rem 2rem;
margin-bottom: 3rem;
display: inline-block;
box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3); }
to { box-shadow: 0 8px 25px rgba(251, 191, 36, 0.5); }
}
.promo-code-content {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.promo-text {
color: #000000;
font-weight: 600;
font-size: 1rem;
}
.promo-code {
background: #000000;
color: #fbbf24;
padding: 0.3rem 0.8rem;
border-radius: 8px;
font-weight: 800;
font-size: 1.1rem;
letter-spacing: 1px;
font-family: 'Courier New', monospace;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 6rem;
}
.feature-card {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.6) 100%);
border-radius: 20px;
padding: 2.5rem;
text-align: center;
border: 1px solid rgba(99, 102, 241, 0.2);
transition: all 0.4s ease;
position: relative;
backdrop-filter: blur(20px);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
border-color: rgba(99, 102, 241, 0.5);
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.8) 100%);
}
.feature-icon {
font-size: 2.8rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
}
.feature-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #ffffff;
}
.feature-description {
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
font-size: 1rem;
}
.pricing-section {
margin-top: 6rem;
position: relative;
}
.pricing-header {
text-align: center;
margin-bottom: 4rem;
}
.pricing-header h2 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.02em;
}
.pricing-subheader {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 2rem;
}
.pricing-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
max-width: 900px;
margin: 0 auto;
}
.pricing-card {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.7) 100%);
border-radius: 24px;
padding: 3rem 2.5rem;
text-align: center;
border: 2px solid rgba(99, 102, 241, 0.2);
position: relative;
transition: all 0.4s ease;
backdrop-filter: blur(20px);
}
.pricing-card:hover {
transform: translateY(-12px);
box-shadow: 0 25px 50px rgba(99, 102, 241, 0.3);
}
.pricing-card.popular {
border-color: #6366f1;
box-shadow: 0 15px 35px rgba(99, 102, 241, 0.4);
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
}
.pricing-card.popular:hover {
transform: translateY(-12px);
box-shadow: 0 30px 60px rgba(99, 102, 241, 0.5);
}
.popular-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
padding: 0.6rem 1.8rem;
border-radius: 25px;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.8px;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
.savings-badge {
position: absolute;
top: 20px;
right: 20px;
background: #4ade80;
color: #000000;
padding: 0.3rem 0.8rem;
border-radius: 12px;
font-weight: 600;
font-size: 0.75rem;
}
.plan-name {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #ffffff;
}
.plan-subtitle {
font-size: 1rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 2rem;
}
.price-container {
margin-bottom: 2rem;
}
.plan-price {
font-size: 3.2rem;
font-weight: 800;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.plan-period {
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
margin-bottom: 0.5rem;
}
.original-price {
text-decoration: line-through;
color: rgba(255, 255, 255, 0.4);
font-size: 1.1rem;
margin-right: 0.5rem;
}
.plan-savings {
background: #4ade80;
color: #000000;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
margin-bottom: 2rem;
display: inline-block;
font-size: 0.85rem;
}
.value-highlight {
background: rgba(255, 215, 0, 0.1);
border: 1px solid rgba(255, 215, 0, 0.3);
color: #ffd700;
padding: 0.5rem 1rem;
border-radius: 12px;
font-weight: 600;
margin-bottom: 1.5rem;
display: inline-block;
font-size: 0.9rem;
}
.plan-features {
list-style: none;
margin-bottom: 2.5rem;
text-align: left;
}
.plan-features li {
padding: 0.75rem 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.plan-features li i {
color: #4ade80;
margin-right: 0.75rem;
font-size: 1rem;
}
.cta-button {
width: 100%;
padding: 1.2rem 2rem;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
border: none;
border-radius: 20px;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}
.cta-button:hover {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);
}
.cta-button.secondary {
background: transparent;
border: 2px solid #6366f1;
color: #6366f1;
box-shadow: none;
}
.cta-button.secondary:hover {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}
.guarantee {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.error-message {
background: #1F1F25;
border: 1px solid #ef4444;
color: #fca5a5;
padding: 1rem;
border-radius: 16px;
margin-bottom: 2rem;
text-align: center;
}
.footer {
text-align: center;
margin-top: 6rem;
padding: 2rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
}
.testimonials {
margin: 6rem 0;
text-align: center;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.testimonial {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.6) 100%);
padding: 2.5rem;
border-radius: 20px;
border: 1px solid rgba(99, 102, 241, 0.2);
transition: all 0.4s ease;
backdrop-filter: blur(20px);
}
.testimonial:hover {
transform: translateY(-6px);
box-shadow: 0 15px 35px rgba(99, 102, 241, 0.3);
border-color: rgba(99, 102, 241, 0.4);
}
.testimonial-text {
font-style: italic;
margin-bottom: 1.5rem;
font-size: 1.1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.testimonial-author {
font-weight: 600;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 0.9rem;
}
.wall-of-love-section {
margin-top: 4rem;
}
.testimonial-embed {
max-width: 1000px;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.faq-section {
margin: 6rem 0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.faq-item {
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.6) 100%);
border-radius: 20px;
margin-bottom: 1rem;
border: 1px solid rgba(99, 102, 241, 0.2);
backdrop-filter: blur(20px);
}
.faq-question {
padding: 1.5rem;
cursor: pointer;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
color: #ffffff;
}
.faq-answer {
padding: 0 1.5rem 1.5rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
@media (max-width: 768px) {
.container {
padding: 2rem 1rem;
}
.omi-device {
width: 100px;
height: 100px;
margin: -2rem auto -0rem auto;
}
h1 {
font-size: 2.5rem;
}
.promo-code-banner {
padding: 0.8rem 1.5rem;
}
.promo-code-content {
flex-direction: column;
gap: 0.3rem;
}
.promo-text {
font-size: 0.9rem;
}
.pricing-cards {
grid-template-columns: 1fr;
}
.plan-price {
font-size: 2.5rem;
}
.testimonial-grid {
grid-template-columns: 1fr;
}
.testimonial-embed iframe {
height: 500px;
}
.testimonials h2 + div {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.wall-of-love-section h3 + div {
flex-direction: column;
align-items: stretch;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container" id="subscription-container" data-uid="{{ uid }}">
<div class="header">
<div class="omi-device">
<img src="/templates/static/images/omi.png" alt="Omi Device" />
</div>
<div class="social-proof">
Join thousands of users who've upgraded
</div>
<h1>Upgrade to Unlimited</h1>
<p class="subtitle">Your Omi, unleashed. Go unlimited for endless possibilities.</p>
<p class="value-prop">💰 Save $38 + Get 2 months FREE with annual billing!</p>
<div class="promo-code-banner">
<div class="promo-code-content">
<span class="promo-text">🎉 Limited Time: Use code</span>
<span class="promo-code">OMI99</span>
<span class="promo-text">for 99 cents off!</span>
</div>
</div>
</div>
{% if request.query_params.get('error') == 'missing_uid' %}
<div class="error-message">
<i class="fas fa-exclamation-triangle"></i>
Error: User ID is required to proceed with subscription.
</div>
{% elif request.query_params.get('error') == 'redirect_failed' %}
<div class="error-message">
<i class="fas fa-exclamation-triangle"></i>
Error: Failed to redirect to payment. Please try again.
</div>
{% endif %}
<div class="features-grid">
<div class="feature-card">
<i class="fas fa-clock feature-icon"></i>
<h3 class="feature-title">Unlimited transcription hours</h3>
<p class="feature-description">Record and transcribe as many hours as you need. No monthly limits or restrictions.</p>
</div>
<div class="feature-card">
<i class="fas fa-comments feature-icon"></i>
<h3 class="feature-title">Ask Omi anything</h3>
<p class="feature-description">Get insights about your life, memories, and conversations. Omi remembers everything.</p>
</div>
<div class="feature-card">
<i class="fas fa-brain feature-icon"></i>
<h3 class="feature-title">Infinite memory</h3>
<p class="feature-description">Never forget an important moment again with Omi's complete memory capabilities.</p>
</div>
</div>
<div class="pricing-section">
<div class="pricing-header">
<h2>Choose Your Plan</h2>
<p class="pricing-subheader">Select the perfect plan for your needs</p>
</div>
<div class="pricing-cards">
<div class="pricing-card popular">
<div class="popular-badge">Most Popular</div>
<div class="savings-badge">Save $38</div>
<h3 class="plan-name">Annual Unlimited</h3>
<p class="plan-subtitle">Best value for power users</p>
<div class="price-container">
<div class="plan-price">$16</div>
<div class="plan-period">per month, billed annually</div>
<div><span class="original-price">$228</span> $199/year</div>
</div>
<div class="plan-savings">Save 2 months free!</div>
<div class="value-highlight">
<i class="fas fa-star"></i> 17% savings vs monthly
</div>
<ul class="plan-features">
<li><i class="fas fa-check"></i> Unlimited transcription hours</li>
<li><i class="fas fa-check"></i> Ask Omi anything about your life</li>
<li><i class="fas fa-check"></i> Unlock Omi's infinite memory</li>
<li><i class="fas fa-check"></i> Priority support</li>
<li><i class="fas fa-check"></i> Early access to new features</li>
<li><i class="fas fa-check"></i> Advanced analytics</li>
</ul>
<a href="https://buy.stripe.com/aFaaEP4dC9h4cAm0H86wE1F?client_reference_id={{ uid }}&prefilled_promo_code=OMI99" class="cta-button">
Start Annual Plan
<i class="fas fa-arrow-right" style="margin-left: 0.5rem;"></i>
</a>
<div class="guarantee">
<i class="fas fa-shield-alt"></i> 30-day money-back guarantee
</div>
</div>
<div class="pricing-card">
<h3 class="plan-name">Monthly Unlimited</h3>
<p class="plan-subtitle">Perfect for trying out</p>
<div class="price-container">
<div class="plan-price">$19</div>
<div class="plan-period">per month</div>
</div>
<ul class="plan-features">
<li><i class="fas fa-check"></i> Unlimited transcription hours</li>
<li><i class="fas fa-check"></i> Ask Omi anything about your life</li>
<li><i class="fas fa-check"></i> Unlock Omi's infinite memory</li>
<li><i class="fas fa-check"></i> Priority support</li>
<li><i class="fas fa-check"></i> Cancel anytime</li>
</ul>
<a href="https://buy.stripe.com/bJedR1bG4bpcbwiahI6wE1G?client_reference_id={{ uid }}&prefilled_promo_code=OMI99" class="cta-button secondary">
Start Monthly Plan
<i class="fas fa-arrow-right" style="margin-left: 0.5rem;"></i>
</a>
<div class="guarantee">
<i class="fas fa-shield-alt"></i> Cancel anytime, no questions asked
</div>
</div>
</div>
</div>
<div class="testimonials">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem;">
<h2 style="margin: 0; font-size: 2.5rem; font-weight: 700; color: #ffffff;">What Our Users Say</h2>
<a href="https://testimonial.to/omi" target="_blank" rel="noopener noreferrer"
style="background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; padding: 0.8rem 1.5rem; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);">
Share Your Review
</a>
</div>
<div class="testimonial-grid">
<div class="testimonial">
<div class="testimonial-text">
"This thing is incredible. I was so weary it would not be good because it's open source... but this is software so much more valuable and better than almost all the similar saas products or hardware solutions. This is going to change everything. I am absolutely blown away."
</div>
<div class="testimonial-author">- IamBrittneyWilson</div>
</div>
<div class="testimonial">
<div class="testimonial-text">
"It's small, simple, and fits into my day without getting in the way! What's really cool is how it blends into everyday life, giving you support that feels natural and really gets how real life works. Your privacy is well taken care of... you control your data, decide where to store it, and can delete it whenever you want."
</div>
<div class="testimonial-author">- Sashank Pappu, LinkedIn</div>
</div>
<div class="testimonial">
<div class="testimonial-text">
"I've been wearing mine daily for a few months and have come to rely on it for feedback/retrospective as well as helping with ADHD. Lots of useful practical and fun apps, more every day."
</div>
<div class="testimonial-author">- colcamp</div>
</div>
<div class="testimonial">
<div class="testimonial-text">
"Hard to stress this well enough: OMI is such a frecken powerful device to have on you. It is SO functional and seamless. I can't wait for the consumer version that I ordered to arrive."
</div>
<div class="testimonial-author">- Lyondhür 🇳🇿</div>
</div>
<div class="testimonial">
<div class="testimonial-text">
"Been trying this @omidotme it's freaking incredible! It can listen to u all day and record convo plus to do list for you! Can analyze your convo to make u better at what u do."
</div>
<div class="testimonial-author">- skygodkingdom</div>
</div>
<div class="testimonial">
<div class="testimonial-text">
"Not going to lie, I'm pretty impressed with @omidotme. I've had the bee.computer for months now, but just received my Omi and I'm in LOVE. Everyone should look into this thing."
</div>
<div class="testimonial-author">- Retraced Echoes</div>
</div>
</div>
<div class="wall-of-love-section">
<div style="display: flex; justify-content: space-between; align-items: center; margin: 4rem 0 2rem 0; flex-wrap: wrap; gap: 1rem;">
<h3 style="margin: 0; font-size: 2rem; font-weight: 700; color: #ffffff;">See More Reviews</h3>
<a href="https://testimonial.to/omi/all" target="_blank" rel="noopener noreferrer"
style="background: transparent; border: 2px solid #6366f1; color: #6366f1; padding: 0.6rem 1.2rem; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem;">
View All Reviews
</a>
</div>
<div class="testimonial-embed">
<iframe
src="https://testimonial.to/omi/all?theme=dark&hideDate=on&randomize=on&showSource=on"
width="100%"
height="600"
frameborder="0"
scrolling="yes"
style="border-radius: 16px; background: #1F1F25;">
</iframe>
</div>
</div>
</div>
<div class="faq-section">
<h2 style="text-align: center; margin-bottom: 3rem; font-size: 2.5rem; font-weight: 700; color: #ffffff;">Frequently Asked Questions</h2>
<div class="faq-item">
<div class="faq-question">
Can I cancel anytime?
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
Yes! You can cancel your subscription at any time. For annual plans, you'll continue to have access until the end of your billing period.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
What's included in unlimited?
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
Unlimited conversations, infinite memory storage, priority support, and access to all premium features including advanced AI insights.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
Is there a money-back guarantee?
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
Yes! We offer a 30-day money-back guarantee on all plans. If you're not satisfied, we'll refund your payment in full.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
Which Omi devices are compatible?
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
This unlimited plan works with all Omi devices including DevKit 1, DevKit 2, and the consumer Omi device. No matter which Omi device you have, you'll get full access to all unlimited features.
</div>
</div>
</div>
<div class="footer">
<p>© 2024 Omi. All rights reserved. | Secure payments powered by Stripe</p>
</div>
</div>
<script>
const containerElement = document.getElementById('subscription-container');
const templateUid = (containerElement && containerElement.getAttribute('data-uid')) || '';
const urlParams = new URLSearchParams(window.location.search);
const rawParamUid = urlParams.get('uid') || '';
const safeUidPattern = /^[a-zA-Z0-9_-]{1,128}$/;
const paramUid = safeUidPattern.test(rawParamUid) ? rawParamUid : '';
const uid = paramUid || templateUid;
if (uid && uid !== templateUid) {
const buttons = document.querySelectorAll('.cta-button');
buttons.forEach(button => {
const href = button.getAttribute('href');
if (href && !href.includes('client_reference_id=')) {
button.setAttribute('href', href + (href.includes('?') ? '&' : '?') + 'client_reference_id=' + encodeURIComponent(uid));
}
});
}
document.querySelectorAll('.cta-button').forEach(button => {
button.addEventListener('click', function(e) {
const plan = this.href.includes('annual') ? 'annual' : 'monthly';
console.log(`User clicked ${plan} plan with UID: ${uid}`);
this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Redirecting...';
this.style.pointerEvents = 'none';
});
});
document.querySelectorAll('.pricing-card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-10px) scale(1.02)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0) scale(1)';
});
});
</script>
</body>
</html>