mirror of
https://github.com/awatertrevi/xamarin-neo4j.git
synced 2026-09-22 09:05:29 +00:00
388 lines
21 KiB
HTML
388 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="PocketGraph - Your powerful Neo4j graph database client for iOS and iPad">
|
||
<meta name="keywords" content="Neo4j, iOS, iPad, graph database, Cypher, mobile app">
|
||
<meta name="author" content="Re: Software B.V.">
|
||
|
||
<!-- Open Graph / Social Media -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="PocketGraph - Neo4j Mobile Client">
|
||
<meta property="og:description" content="Connect to your Neo4j instance via the lightning fast Bolt protocol. Visualize your nodes and relationships on the go.">
|
||
|
||
<title>PocketGraph - Neo4j Mobile Client for iOS</title>
|
||
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<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=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav class="navbar">
|
||
<div class="container">
|
||
<div class="nav-content">
|
||
<div class="logo">
|
||
<img src="images/logo.png" alt="PocketGraph Logo" class="logo-img">
|
||
<span class="logo-text">PocketGraph</span>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="#features" class="nav-link">Features</a>
|
||
<a href="#about" class="nav-link">About</a>
|
||
<a href="https://apps.apple.com/nl/app/pocketgraph/id1604368926" class="btn-download-small">Download</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="hero-text">
|
||
<h1 class="hero-title">
|
||
Your Neo4j Database,
|
||
<span class="gradient-text">Anywhere</span>
|
||
</h1>
|
||
<p class="hero-description">
|
||
Connect to your Neo4j instance via the lightning-fast Bolt protocol.
|
||
Visualize graphs, execute queries, and manage your data—all from your iPhone or iPad.
|
||
</p>
|
||
<div class="hero-buttons">
|
||
<a href="https://apps.apple.com/nl/app/pocketgraph/id1604368926" class="btn-primary">
|
||
<svg class="apple-icon" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
|
||
</svg>
|
||
Download on the App Store
|
||
</a>
|
||
<a href="https://github.com/kl0070/xamarin-neo4j" class="btn-secondary">
|
||
<svg class="github-icon" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
|
||
</svg>
|
||
View on GitHub
|
||
</a>
|
||
</div>
|
||
<div class="stats">
|
||
<div class="stat-item">
|
||
<div class="stat-number">14.2+</div>
|
||
<div class="stat-label">iOS Version</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">SSL</div>
|
||
<div class="stat-label">Encrypted</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">Bolt</div>
|
||
<div class="stat-label">Protocol</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-mockup">
|
||
<div class="iphone-mockup">
|
||
<div class="iphone-frame">
|
||
<div class="iphone-notch"></div>
|
||
<div class="iphone-screen">
|
||
<div class="mockup-content connections">
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<div class="status-icons"></div>
|
||
</div>
|
||
<div class="screen-header">
|
||
<h2>Connections</h2>
|
||
</div>
|
||
<div class="connection-list">
|
||
<div class="connection-item active">
|
||
<div class="connection-icon">🔗</div>
|
||
<div class="connection-info">
|
||
<div class="connection-name">Production DB</div>
|
||
<div class="connection-url">bolt://prod.neo4j.io:7687</div>
|
||
</div>
|
||
<div class="connection-status connected"></div>
|
||
</div>
|
||
<div class="connection-item">
|
||
<div class="connection-icon">🔗</div>
|
||
<div class="connection-info">
|
||
<div class="connection-name">Development</div>
|
||
<div class="connection-url">bolt://dev.local:7687</div>
|
||
</div>
|
||
</div>
|
||
<div class="connection-item">
|
||
<div class="connection-icon">🔗</div>
|
||
<div class="connection-info">
|
||
<div class="connection-name">Test Instance</div>
|
||
<div class="connection-url">bolt://test.neo4j.io:7687</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="iphone-mockup iphone-offset">
|
||
<div class="iphone-frame">
|
||
<div class="iphone-notch"></div>
|
||
<div class="iphone-screen">
|
||
<div class="mockup-content query">
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<div class="status-icons"></div>
|
||
</div>
|
||
<div class="screen-header">
|
||
<h2>Query Editor</h2>
|
||
</div>
|
||
<div class="query-editor">
|
||
<div class="code-line">
|
||
<span class="keyword">MATCH</span> (n:Person)
|
||
</div>
|
||
<div class="code-line">
|
||
<span class="keyword">WHERE</span> n.age > <span class="number">25</span>
|
||
</div>
|
||
<div class="code-line">
|
||
<span class="keyword">RETURN</span> n
|
||
</div>
|
||
</div>
|
||
<div class="query-results">
|
||
<div class="result-row">
|
||
<div class="node">Person</div>
|
||
<span>Alice, 28</span>
|
||
</div>
|
||
<div class="result-row">
|
||
<div class="node">Person</div>
|
||
<span>Bob, 32</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Section -->
|
||
<section id="features" class="features">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Powerful Features</h2>
|
||
<p class="section-subtitle">Everything you need to manage Neo4j databases on your mobile device</p>
|
||
</div>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔐</div>
|
||
<h3 class="feature-title">Secure Connections</h3>
|
||
<p class="feature-description">
|
||
Connect via the lightning-fast Bolt protocol with SSL/TLS encryption.
|
||
Manage multiple connections and switch between databases effortlessly.
|
||
</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📊</div>
|
||
<h3 class="feature-title">Interactive Visualization</h3>
|
||
<p class="feature-description">
|
||
View your graph data in stunning interactive visualizations.
|
||
Explore nodes and relationships with intuitive touch gestures.
|
||
</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">✍️</div>
|
||
<h3 class="feature-title">Advanced Query Editor</h3>
|
||
<p class="feature-description">
|
||
Write Cypher queries with syntax highlighting. Save and organize your queries
|
||
for quick access. View results in graph or table format.
|
||
</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🎨</div>
|
||
<h3 class="feature-title">Beautiful Interface</h3>
|
||
<p class="feature-description">
|
||
Modern, intuitive design with light and dark themes.
|
||
Optimized for both iPhone and iPad with responsive layouts.
|
||
</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📱</div>
|
||
<h3 class="feature-title">Universal App</h3>
|
||
<p class="feature-description">
|
||
Works seamlessly across iPhone, iPad, Apple Silicon Mac, and Apple Vision Pro.
|
||
One app for all your devices.
|
||
</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3 class="feature-title">Privacy First</h3>
|
||
<p class="feature-description">
|
||
No data collection. All connections and queries are stored locally on your device.
|
||
Your data stays yours.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Screenshots Section -->
|
||
<section class="screenshots">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">See It In Action</h2>
|
||
<p class="section-subtitle">Manage your Neo4j databases with an elegant, powerful interface</p>
|
||
</div>
|
||
<div class="screenshot-showcase">
|
||
<div class="showcase-item">
|
||
<div class="iphone-mini">
|
||
<div class="iphone-frame-mini">
|
||
<div class="iphone-screen-mini graph-view">
|
||
<div class="graph-nodes">
|
||
<div class="graph-node" style="top: 20%; left: 30%;"></div>
|
||
<div class="graph-node" style="top: 50%; left: 20%;"></div>
|
||
<div class="graph-node" style="top: 60%; left: 50%;"></div>
|
||
<div class="graph-node" style="top: 30%; left: 70%;"></div>
|
||
<svg class="graph-edges">
|
||
<line x1="30%" y1="20%" x2="20%" y2="50%" stroke="#667eea" stroke-width="2"/>
|
||
<line x1="30%" y1="20%" x2="70%" y2="30%" stroke="#667eea" stroke-width="2"/>
|
||
<line x1="20%" y1="50%" x2="50%" y2="60%" stroke="#667eea" stroke-width="2"/>
|
||
<line x1="50%" y1="60%" x2="70%" y2="30%" stroke="#667eea" stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h4>Graph Visualization</h4>
|
||
</div>
|
||
<div class="showcase-item">
|
||
<div class="iphone-mini">
|
||
<div class="iphone-frame-mini">
|
||
<div class="iphone-screen-mini table-view">
|
||
<div class="table-header">
|
||
<div class="table-cell">Name</div>
|
||
<div class="table-cell">Type</div>
|
||
</div>
|
||
<div class="table-row">
|
||
<div class="table-cell">Alice</div>
|
||
<div class="table-cell">Person</div>
|
||
</div>
|
||
<div class="table-row">
|
||
<div class="table-cell">Bob</div>
|
||
<div class="table-cell">Person</div>
|
||
</div>
|
||
<div class="table-row">
|
||
<div class="table-cell">Carol</div>
|
||
<div class="table-cell">Person</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h4>Table View</h4>
|
||
</div>
|
||
<div class="showcase-item">
|
||
<div class="iphone-mini">
|
||
<div class="iphone-frame-mini">
|
||
<div class="iphone-screen-mini settings-view">
|
||
<div class="settings-group">
|
||
<div class="settings-item">
|
||
<span>🌙</span>
|
||
<span>Dark Mode</span>
|
||
<div class="toggle on"></div>
|
||
</div>
|
||
<div class="settings-item">
|
||
<span>🔔</span>
|
||
<span>Notifications</span>
|
||
<div class="toggle"></div>
|
||
</div>
|
||
<div class="settings-item">
|
||
<span>⚙️</span>
|
||
<span>Advanced</span>
|
||
<span class="arrow">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<h4>Settings</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="cta">
|
||
<div class="container">
|
||
<div class="cta-content">
|
||
<h2 class="cta-title">Ready to Get Started?</h2>
|
||
<p class="cta-description">
|
||
Download PocketGraph today and take your Neo4j databases with you wherever you go.
|
||
</p>
|
||
<a href="https://apps.apple.com/nl/app/pocketgraph/id1604368926" class="btn-primary btn-large">
|
||
<svg class="apple-icon" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
|
||
</svg>
|
||
Download on the App Store
|
||
</a>
|
||
<p class="cta-note">Requires iOS 14.2 or later • Universal App</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About Section -->
|
||
<section id="about" class="about">
|
||
<div class="container">
|
||
<div class="about-content">
|
||
<div class="about-text">
|
||
<h2 class="section-title">About PocketGraph</h2>
|
||
<p>
|
||
PocketGraph is developed by <strong>Re: Software B.V.</strong>, a software company
|
||
dedicated to creating professional mobile applications for developers and data professionals.
|
||
</p>
|
||
<p>
|
||
Built with Xamarin.Forms and optimized for iOS, PocketGraph brings the power of
|
||
Neo4j graph databases to your mobile device with an intuitive, native interface.
|
||
</p>
|
||
<div class="about-logo">
|
||
<img src="images/resoftware.png" alt="Re: Software" class="resoftware-logo">
|
||
</div>
|
||
</div>
|
||
<div class="tech-stack">
|
||
<h3>Built With</h3>
|
||
<div class="tech-tags">
|
||
<span class="tech-tag">Xamarin.Forms</span>
|
||
<span class="tech-tag">C#</span>
|
||
<span class="tech-tag">Neo4j Bolt Protocol</span>
|
||
<span class="tech-tag">XAML</span>
|
||
<span class="tech-tag">Neovis.js</span>
|
||
<span class="tech-tag">iOS SDK</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-logo">
|
||
<img src="images/logo.png" alt="PocketGraph Logo" class="footer-logo-img">
|
||
<span class="footer-logo-text">PocketGraph</span>
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="https://apps.apple.com/nl/app/pocketgraph/id1604368926" class="footer-link">App Store</a>
|
||
<a href="https://github.com/kl0070/xamarin-neo4j" class="footer-link">GitHub</a>
|
||
<a href="mailto:info@resoftware.nl" class="footer-link">Support</a>
|
||
</div>
|
||
<div class="footer-note">
|
||
<p>
|
||
Neo4j® and Cypher® are registered trademarks of Neo4j, Inc.
|
||
</p>
|
||
<p>
|
||
© 2024 Re: Software B.V. All rights reserved.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|
||
|