realtimecursor
Version:
Real-time collaboration system with cursor tracking and approval workflow
314 lines (305 loc) • 11.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RealtimeCursor - Real-time Collaboration SDK</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.hero {
background-color: #f8f9fa;
padding: 80px 0;
text-align: center;
}
.features {
padding: 60px 0;
}
.feature-card {
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
height: 100%;
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
}
.pricing {
background-color: #f8f9fa;
padding: 60px 0;
}
.price-card {
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
height: 100%;
}
.price-card.highlight {
border: 2px solid #0d6efd;
}
.cta {
padding: 60px 0;
text-align: center;
}
.footer {
background-color: #212529;
color: white;
padding: 40px 0;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">RealtimeCursor</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#docs">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/demo">Demo</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-primary text-white" href="#signup">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1 class="display-4 mb-4">Real-time Collaboration Made Easy</h1>
<p class="lead mb-5">Add live cursor tracking and collaborative editing to your application in minutes</p>
<div class="d-flex justify-content-center gap-3">
<a href="#signup" class="btn btn-primary btn-lg">Get Started</a>
<a href="/demo" class="btn btn-outline-secondary btn-lg">Try Demo</a>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features" id="features">
<div class="container">
<h2 class="text-center mb-5">Powerful Features</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="feature-card">
<h3>Real-time Cursor Tracking</h3>
<p>See other users' cursors in real-time as they move around the document.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<h3>Collaborative Editing</h3>
<p>Edit documents together with multiple users simultaneously.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<h3>User Presence</h3>
<p>See who's currently viewing and editing the document.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<h3>Typing Indicators</h3>
<p>Know when other users are typing with real-time indicators.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<h3>React Integration</h3>
<p>Easy-to-use React hooks and components for seamless integration.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature-card">
<h3>Vanilla JS Support</h3>
<p>Use with any JavaScript framework or vanilla JS applications.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Free Plan Section -->
<section class="pricing" id="pricing">
<div class="container">
<h2 class="text-center mb-5">100% Free & Open Source</h2>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="price-card highlight text-center">
<h3>Free Forever</h3>
<p class="display-6 my-4">$0<span class="text-muted fs-6">/month</span></p>
<ul class="list-unstyled text-start">
<li>✅ Unlimited concurrent users</li>
<li>✅ Advanced cursor tracking</li>
<li>✅ Collaborative editing</li>
<li>✅ User presence</li>
<li>✅ Typing indicators</li>
<li>✅ Custom branding</li>
<li>✅ Open source code</li>
<li>✅ Self-hosting option</li>
</ul>
<a href="#signup" class="btn btn-primary w-100 mt-4">Get Started</a>
<p class="mt-3 text-muted">No credit card required. No hidden fees.</p>
</div>
</div>
</div>
<div class="text-center mt-5">
<h4>Why Free?</h4>
<p>We believe in open collaboration and making real-time tools accessible to everyone.<br>Our SDK is completely free and open source under the MIT license.</p>
<a href="https://github.com/sourabhpunase/realtimecursor" class="btn btn-outline-dark mt-3">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github me-2" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
View on GitHub
</a>
</div>
</div>
</section>
<!-- Documentation Section -->
<section class="docs py-5" id="docs">
<div class="container">
<h2 class="text-center mb-5">Documentation</h2>
<div class="row">
<div class="col-md-6">
<h4>Installation</h4>
<div class="bg-light p-3 rounded mb-4">
<code>npm install realtimecursor-sdk</code>
</div>
<h4>CDN</h4>
<div class="bg-light p-3 rounded">
<code><script src="https://cdn.jsdelivr.net/npm/realtimecursor-sdk@1.1.0/dist-cdn/realtimecursor.min.js"></script></code><br>
<code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/realtimecursor-sdk@1.1.0/dist-cdn/realtimecursor.min.css"></code>
</div>
</div>
<div class="col-md-6">
<h4>Quick Start</h4>
<div class="bg-light p-3 rounded">
<pre><code>// Initialize the cursor client
const cursorClient = new RealtimeCursor({
apiUrl: 'https://api.realtimecursor.com',
projectId: 'your-project-id',
user: {
id: 'user-123',
name: 'John Doe'
}
});
// Connect to the real-time service
cursorClient.connect();
// Update cursor position on mouse move
editor.addEventListener('mousemove', (e) => {
cursorClient.updateCursor({
x: e.clientX,
y: e.clientY
});
});</code></pre>
</div>
<div class="text-center mt-4">
<a href="/docs" class="btn btn-outline-primary">View Full Documentation</a>
</div>
</div>
</div>
</div>
</section>
<!-- Sign Up Section -->
<section class="cta bg-primary text-white" id="signup">
<div class="container">
<h2 class="mb-4">Get Your API Key Today</h2>
<p class="lead mb-4">Start adding real-time collaboration to your application in minutes</p>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="company" class="form-label">Company</label>
<input type="text" class="form-control" id="company">
</div>
<div class="mb-3">
<label for="plan" class="form-label">Plan</label>
<select class="form-select" id="plan">
<option value="free">Free</option>
<option value="pro">Pro</option>
<option value="enterprise">Enterprise</option>
</select>
</div>
<button type="submit" class="btn btn-primary w-100">Get API Key</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>RealtimeCursor</h5>
<p>A powerful real-time collaboration SDK with live cursor tracking</p>
</div>
<div class="col-md-2">
<h5>Product</h5>
<ul class="list-unstyled">
<li><a href="#features" class="text-white">Features</a></li>
<li><a href="#pricing" class="text-white">Pricing</a></li>
<li><a href="/demo" class="text-white">Demo</a></li>
</ul>
</div>
<div class="col-md-2">
<h5>Resources</h5>
<ul class="list-unstyled">
<li><a href="/docs" class="text-white">Documentation</a></li>
<li><a href="/api" class="text-white">API Reference</a></li>
<li><a href="/examples" class="text-white">Examples</a></li>
</ul>
</div>
<div class="col-md-2">
<h5>Company</h5>
<ul class="list-unstyled">
<li><a href="/about" class="text-white">About</a></li>
<li><a href="/contact" class="text-white">Contact</a></li>
<li><a href="/blog" class="text-white">Blog</a></li>
</ul>
</div>
<div class="col-md-2">
<h5>Legal</h5>
<ul class="list-unstyled">
<li><a href="/terms" class="text-white">Terms</a></li>
<li><a href="/privacy" class="text-white">Privacy</a></li>
</ul>
</div>
</div>
<hr class="mt-4 mb-4 border-top border-secondary">
<div class="text-center">
<p>© 2023 RealtimeCursor. All rights reserved.</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>