crosspoint-bookmark-sync/index.html at main · warreth/crosspoint-bookmark-sync · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CrossPoint to Grimmory Bookmark Sync</title>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#8b5cf6',
                        success: '#10b981'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen font-sans selection:bg-primary selection:text-white">

    <!-- Navigation Header -->
    <nav class="fixed top-0 left-0 right-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-slate-800">
        <div class="max-w-6xl mx-auto px-6 h-20 flex items-center justify-between">
            <a href="#" class="flex items-center space-x-3 group">
                <div class="w-10 h-10 rounded-xl bg-primary/10 border border-primary/30 flex items-center justify-center text-primary group-hover:scale-105 transition-transform">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path></svg>
                </div>
                <span class="font-bold text-xl tracking-tight text-white">CrossPoint Sync</span>
            </a>

            <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-300">
                <a href="#features" class="hover:text-white transition-colors">Features</a>
                <a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a>
                <a href="#opensource" class="hover:text-white transition-colors">Open Source</a>
                <a href="https://github.com/sponsors/warreth/" target="_blank" rel="noopener" class="hover:text-white transition-colors">Sponsor</a>
            </div>

            <div class="flex items-center space-x-4">
                <a href="app.html" class="bg-primary hover:bg-blue-600 text-white font-semibold py-2.5 px-5 rounded-xl transition-all shadow-lg shadow-primary/25 hover:shadow-primary/40 hover:-translate-y-0.5 text-sm">
                    Open Web App
                </a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="pt-36 pb-20 px-6 max-w-6xl mx-auto text-center relative overflow-hidden">
        <div class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.primary/15%),transparent)]"></div>

        <div class="inline-flex items-center space-x-2 px-4 py-2 rounded-full bg-slate-800/80 border border-slate-700 text-slate-300 text-sm mb-8 animate-fade-in">
            <span class="w-2 h-2 rounded-full bg-success"></span>
            <span>Free & 100% Client-Side Open Source Tool</span>
        </div>

        <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight text-white mb-6 max-w-4xl mx-auto leading-tight">
            Sync Your CrossPoint Bookmarks to <span class="bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 bg-clip-text text-transparent">Grimmory</span>
        </h1>

        <p class="text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
            Easily upload local bookmark JSON files from your CrossPoint e-reader firmware directly into your self-hosted Grimmory digital library.
        </p>

        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="app.html" class="w-full sm:w-auto bg-primary hover:bg-blue-600 text-white font-bold py-4 px-8 rounded-xl transition-all shadow-xl shadow-primary/30 hover:shadow-primary/50 hover:-translate-y-1 text-center">
                Launch Web App
            </a>
            <a href="https://github.com/warreth/crosspoint-bookmark-sync" target="_blank" rel="noopener" class="w-full sm:w-auto bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 font-bold py-4 px-8 rounded-xl transition-all text-center flex items-center justify-center space-x-2">
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
                <span>View on GitHub</span>
            </a>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-24 border-t border-slate-800 bg-slate-900/50">
        <div class="max-w-6xl mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-extrabold text-white sm:text-4xl">Everything You Need</h2>
                <p class="text-slate-400 mt-4 max-w-xl mx-auto">Built specifically for CrossPoint e-readers and self-hosted Grimmory instances.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="bg-slate-800/50 border border-slate-700/60 p-8 rounded-2xl hover:border-primary/50 transition-colors group">
                    <div class="w-12 h-12 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Native Bookmarks or Highlights</h3>
                    <p class="text-slate-400 text-sm leading-relaxed">Choose between official Grimmory bookmarks or visible yellow text highlights inside your EPUBs.</p>
                </div>

                <!-- Feature 2 -->
                <div class="bg-slate-800/50 border border-slate-700/60 p-8 rounded-2xl hover:border-primary/50 transition-colors group">
                    <div class="w-12 h-12 rounded-xl bg-purple-500/10 border border-purple-500/20 text-purple-400 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Smart Deduplication</h3>
                    <p class="text-slate-400 text-sm leading-relaxed">Prevents duplicate imports automatically by matching locations and quotes before writing.</p>
                </div>

                <!-- Feature 3 -->
                <div class="bg-slate-800/50 border border-slate-700/60 p-8 rounded-2xl hover:border-primary/50 transition-colors group">
                    <div class="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Undo & Review Panel</h3>
                    <p class="text-slate-400 text-sm leading-relaxed">Review and edit bookmarks before sync, or click Undo anytime to instantly revert your changes.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section id="how-it-works" class="py-24 border-t border-slate-800">
        <div class="max-w-6xl mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-extrabold text-white sm:text-4xl">How It Works</h2>
                <p class="text-slate-400 mt-4">Three simple steps to sync all your reading highlights.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
                <div class="p-6 bg-slate-800/30 border border-slate-700/40 rounded-2xl text-center">
                    <div class="w-10 h-10 rounded-full bg-primary text-white font-bold flex items-center justify-center mx-auto mb-4">1</div>
                    <h3 class="font-bold text-white text-lg mb-2">Connect</h3>
                    <p class="text-slate-400 text-sm">Enter your Grimmory URL and login with username/password or API Key.</p>
                </div>

                <div class="p-6 bg-slate-800/30 border border-slate-700/40 rounded-2xl text-center">
                    <div class="w-10 h-10 rounded-full bg-primary text-white font-bold flex items-center justify-center mx-auto mb-4">2</div>
                    <h3 class="font-bold text-white text-lg mb-2">Upload</h3>
                    <p class="text-slate-400 text-sm">Drag and drop your CrossPoint JSON bookmark files from your e-reader.</p>
                </div>

                <div class="p-6 bg-slate-800/30 border border-slate-700/40 rounded-2xl text-center">
                    <div class="w-10 h-10 rounded-full bg-primary text-white font-bold flex items-center justify-center mx-auto mb-4">3</div>
                    <h3 class="font-bold text-white text-lg mb-2">Sync</h3>
                    <p class="text-slate-400 text-sm">Watch real-time progress as your bookmarks are matched and transferred.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Open Source Section -->
    <section id="opensource" class="py-24 border-t border-slate-800 bg-slate-900/50">
        <div class="max-w-4xl mx-auto px-6 text-center">
            <h2 class="text-3xl font-extrabold text-white mb-6">100% Open Source & Privacy First</h2>
            <p class="text-slate-400 text-lg mb-8 leading-relaxed">
                All bookmark parsing and API requests happen directly inside your web browser. No third-party servers, no analytics, no background tracking. Your credentials stay strictly on your local machine.
            </p>
            <a href="https://github.com/warreth/crosspoint-bookmark-sync" target="_blank" rel="noopener" class="inline-flex items-center space-x-2 text-primary hover:text-blue-400 font-semibold text-lg transition-colors">
                <span>Explore the GitHub Repository</span>
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
            </a>
        </div>
    </section>

    <!-- Sponsor Section -->
    <section class="py-24 border-t border-slate-800">
        <div class="max-w-4xl mx-auto px-6 text-center bg-gradient-to-b from-slate-800/60 to-slate-900 border border-slate-700/60 p-12 rounded-3xl shadow-2xl">
            <div class="w-16 h-16 rounded-full bg-red-500/10 border border-red-500/20 text-red-500 flex items-center justify-center mx-auto mb-6">
                <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
            </div>
            <h2 class="text-3xl font-extrabold text-white mb-4">Support Free Open Source Development</h2>
            <p class="text-slate-400 max-w-xl mx-auto mb-8">
                I build and maintain this tool completely for free for the CrossPoint and Grimmory communities. If it helps you, consider supporting my work!
            </p>
            <a href="https://github.com/sponsors/warreth/" target="_blank" rel="noopener" class="inline-flex items-center space-x-3 bg-red-600 hover:bg-red-500 text-white font-bold py-4 px-8 rounded-xl transition-all shadow-xl shadow-red-600/30 hover:shadow-red-600/50 hover:-translate-y-1">
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                <span>Sponsor on GitHub</span>
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="py-8 border-t border-slate-800 text-center text-slate-500 text-sm">
        <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
            <p>CrossPoint to Grimmory Bookmark Sync</p>
            <div class="flex space-x-6">
                <a href="app.html" class="hover:text-slate-400">Launch App</a>
                <a href="https://github.com/warreth/crosspoint-bookmark-sync" target="_blank" rel="noopener" class="hover:text-slate-400">GitHub</a>
                <a href="https://github.com/sponsors/warreth/" target="_blank" rel="noopener" class="hover:text-slate-400">Sponsor</a>
            </div>
        </div>
    </footer>

</body>
</html>