FreeWise/debug_rendered.html at main · wardeiling/FreeWise · 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
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Import Highlights - FreeWise</title>

    <!-- Local CSS -->
    <link rel="stylesheet" href="/static/css/fonts.css">
    <link rel="stylesheet" href="/static/css/tailwind.css">

    <!-- Local JS -->
    <script src="/static/vendor/htmx/htmx.min.js"></script>
    <script src="/static/vendor/lucide/lucide.min.js"></script>

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
    <link rel="manifest" href="/static/favicons/site.webmanifest">

    <!-- PWA -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="FreeWise">
    <script>if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>

    <style>
        /* Apply dark class when theme is dark */
        [data-theme="dark"] {
            color-scheme: dark;
        }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Navigation Header -->
        <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-6">
            <nav class="flex items-center justify-between text-base">
                <!-- Nav links: icon-only on mobile, icon + label on sm+ -->
                <div class="flex items-center gap-5 sm:gap-6">
                    <a href="/dashboard/ui" class="flex items-center gap-1.5 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
                        <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
                        <span class="hidden sm:inline">Dashboard</span>
                    </a>
                    <a href="/library/ui" class="flex items-center gap-1.5 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
                        <i data-lucide="library" class="w-5 h-5"></i>
                        <span class="hidden sm:inline">Library</span>
                    </a>
                    <a href="/import/ui" class="flex items-center gap-1.5 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
                        <i data-lucide="upload" class="w-5 h-5"></i>
                        <span class="hidden sm:inline">Import</span>
                    </a>
                    <a href="/settings/ui" class="flex items-center gap-1.5 text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
                        <i data-lucide="settings" class="w-5 h-5"></i>
                        <span class="hidden sm:inline">Settings</span>
                    </a>
                </div>
                <!-- Streak indicator: always pinned to the far right -->
                <div class="flex items-center gap-1.5 flex-shrink-0">

                    <i data-lucide="zap"
                       class="w-6 h-6 zap-filled text-gray-400 dark:text-gray-600"></i>

                </div>
            </nav>
        </div>

        <!-- Page Title -->
        <div class="mb-8">
            <h2 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white title-font">
                Import Highlights
            </h2>
        </div>

        <!-- Content -->

<div class="max-w-4xl mx-auto">
    <p class="text-gray-600 dark:text-gray-400 mb-8">
        Choose your import source to get started
    </p>

    <!-- Source Selection Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- Readwise Card -->
        <a href="/import/ui/readwise"
           class="group bg-white dark:bg-gray-800 rounded-xl p-8 border-2 border-gray-200 dark:border-gray-700 hover:border-primary-500 dark:hover:border-primary-400 hover:shadow-xl transition-all cursor-pointer">
            <div class="text-center">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-primary-100 dark:bg-primary-900/30 rounded-full mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="book-open" class="w-10 h-10 text-primary-600 dark:text-primary-400"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Readwise</h3>
                <p class="text-gray-600 dark:text-gray-400 mb-4">Import from Readwise CSV export</p>
                <div class="flex items-center justify-center gap-2">
                    <span class="inline-flex items-center px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-xs font-medium rounded-full">
                        <i data-lucide="zap" class="w-3 h-3 mr-1"></i>
                        Quick Import
                    </span>
                </div>
            </div>
        </a>

        <!-- Meebook Card -->
        <a href="/import/ui/meebook"
           class="group bg-white dark:bg-gray-800 rounded-xl p-8 border-2 border-gray-200 dark:border-gray-700 hover:border-teal-500 dark:hover:border-teal-400 hover:shadow-xl transition-all cursor-pointer">
            <div class="text-center">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-teal-100 dark:bg-teal-900/30 rounded-full mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="tablet-smartphone" class="w-10 h-10 text-teal-600 dark:text-teal-400"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Meebook</h3>
                <p class="text-gray-600 dark:text-gray-400 mb-4">Import from Haoqing HTML export</p>
                <div class="flex items-center justify-center gap-2">
                    <span class="inline-flex items-center px-3 py-1 bg-teal-100 dark:bg-teal-900/30 text-teal-700 dark:text-teal-300 text-xs font-medium rounded-full">
                        <i data-lucide="file-code" class="w-3 h-3 mr-1"></i>
                        HTML
                    </span>
                </div>
            </div>
        </a>

        <!-- Custom CSV Card -->
        <a href="/import/ui/custom"
           class="group bg-white dark:bg-gray-800 rounded-xl p-8 border-2 border-gray-200 dark:border-gray-700 hover:border-amber-500 dark:hover:border-amber-400 hover:shadow-xl transition-all cursor-pointer">
            <div class="text-center">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-amber-100 dark:bg-amber-900/30 rounded-full mb-4 group-hover:scale-110 transition-transform">
                    <i data-lucide="file-spreadsheet" class="w-10 h-10 text-amber-600 dark:text-amber-400"></i>
                </div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Custom CSV</h3>
                <p class="text-gray-600 dark:text-gray-400 mb-4">Map your own CSV columns</p>
                <div class="flex items-center justify-center gap-2">
                    <span class="inline-flex items-center px-3 py-1 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-xs font-medium rounded-full">
                        <i data-lucide="settings" class="w-3 h-3 mr-1"></i>
                        Flexible
                    </span>
                </div>
            </div>
        </a>
    </div>
</div>

<script>
    // Initialize Lucide icons
    document.addEventListener('DOMContentLoaded', lucide.createIcons);
</script>

    </div>

    <!-- Scripts at bottom for proper loading order -->
    <script>
        // Initialize Lucide icons - must come after library is loaded
        function initLucideIcons() {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }

        // Initialize on page load
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initLucideIcons);
        } else {
            initLucideIcons();
        }

        // Re-initialize after HTMX swaps content
        document.addEventListener('htmx:afterSwap', initLucideIcons);
        document.addEventListener('htmx:afterSettle', initLucideIcons);
    </script>
</body>
</html>