M index.html → index.html

@@ -19,6 +19,73 @@ } */
         </style>
         <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script>
+            !(function (t, e) {
+                var o, n, p, r;
+                e.__SV ||
+                    ((window.posthog = e),
+                    (e._i = []),
+                    (e.init = function (i, s, a) {
+                        function g(t, e) {
+                            var o = e.split(".");
+                            2 == o.length && ((t = t[o[0]]), (e = o[1])),
+                                (t[e] = function () {
+                                    t.push(
+                                        [e].concat(
+                                            Array.prototype.slice.call(
+                                                arguments,
+                                                0,
+                                            ),
+                                        ),
+                                    );
+                                });
+                        }
+                        ((p = t.createElement("script")).type =
+                            "text/javascript"),
+                            (p.crossOrigin = "anonymous"),
+                            (p.async = !0),
+                            (p.src =
+                                s.api_host.replace(
+                                    ".i.posthog.com",
+                                    "-assets.i.posthog.com",
+                                ) + "/static/array.js"),
+                            (r =
+                                t.getElementsByTagName(
+                                    "script",
+                                )[0]).parentNode.insertBefore(p, r);
+                        var u = e;
+                        for (
+                            void 0 !== a ? (u = e[a] = []) : (a = "posthog"),
+                                u.people = u.people || [],
+                                u.toString = function (t) {
+                                    var e = "posthog";
+                                    return (
+                                        "posthog" !== a && (e += "." + a),
+                                        t || (e += " (stub)"),
+                                        e
+                                    );
+                                },
+                                u.people.toString = function () {
+                                    return u.toString(1) + ".people (stub)";
+                                },
+                                o =
+                                    "init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug getPageViewId".split(
+                                        " ",
+                                    ),
+                                n = 0;
+                            n < o.length;
+                            n++
+                        )
+                            g(u, o[n]);
+                        e._i.push([i, s, a]);
+                    }),
+                    (e.__SV = 1));
+            })(document, window.posthog || []);
+            posthog.init("phc_skzuUmfEUAEUCrGD7SnQ9niIb1pAFdiqHSNq5aZrsS6", {
+                api_host: "https://eu.i.posthog.com",
+                person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+            });
+        </script>
     </head>
     <body class="m-5 space-y-2 lg:my-20 lg:max-w-2xl lg:mx-auto">
         <img src="./logo.svg" class="w-20 lg:w-32 mx-auto" />
@@ -33,10 +100,18 @@ and more
         </p>
         <br />
         <p>Currently building alpha version, see early demos below</p>
-        <video controls class="mb-4 lg:mt-4 lg:mb-8 bg-black lg:mx-auto">
+        <video
+            controls
+            class="mb-4 lg:mt-4 lg:mb-8 bg-black lg:mx-auto"
+            onplay="posthog.capture('demo_video_played', { video: 'demo-1' })"
+        >
             <source src="./demo-1.mp4" type="video/mp4" />
         </video>
-        <video controls class="mb-4 lg:mt-4 lg:mb-8 bg-black lg:mx-auto">
+        <video
+            controls
+            class="mb-4 lg:mt-4 lg:mb-8 bg-black lg:mx-auto"
+            onplay="posthog.capture('demo_video_played', { video: 'demo-2' })"
+        >
             <source src="./demo-2.mp4" type="video/mp4" />
         </video>
     </body>

A roadmap.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <style>
+            @import url("https://fonts.googleapis.com/css2?family=Geist&family=Geist+Mono:wght@300..400&display=swap");
+            body {
+                font-family: "Geist", serif;
+            }
+            .monospace {
+                font-family: "Geist Mono", monospace;
+            }
+        </style>
+        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+        <script>
+            const changelogData = {
+                entries: [
+                    {
+                        date: "Jan, 2025",
+                        content: `<h2 class="text-xl font-medium text-black mb-6">January 2025</h2>
+                            <p>Created a microservice for managing browser sessions running on a server, virtual desktop and remote viewing and control.</p>
+                            <p class="mt-4">Get control of local browser, this is preferred approach because using a local browser would be better from security and cost perspective.</p>`,
+                    },
+                    {
+                        date: "Q1 2025",
+                        content: `<h2 class="text-xl font-medium text-black mb-6">Future Roadmap</h2>
+                              <ul class="list-disc pl-5">
+                              <li>Fill forms on webpages</li>
+                              <li>Click on buttons and links on webpages</li>
+                              <li>Recognise need for user taking control for authentication, payments, captcha etc.</li>
+                              <li>Cache common actions to speed up the process</li>
+                              <li>Desktop application for mac os and linux</li>
+                              <li>Show steps taken by AI to complete a task</li>
+                              <li>Show cost of task in input and output tokens</li>
+                              <li>Allow user to modify behaviour at specific steps</li>
+                              </ul>
+                              <p class="mt-4">This roadmap outlines our key development priorities for the coming months as we work to enhance platform capabilities and user experience.</p>`,
+                    },
+                ],
+            };
+        </script>
+    </head>
+    <body class="m-5 space-y-2 lg:my-20 lg:max-w-2xl lg:mx-auto">
+        <div class="relative">
+            <!-- Vertical timeline line -->
+            <div
+                class="absolute left-[120px] top-0 bottom-0 w-[1px] bg-gray-200"
+            ></div>
+
+            <!-- Entries -->
+            <div id="entries"></div>
+        </div>
+
+        <script>
+            const entriesContainer = document.getElementById("entries");
+
+            changelogData.entries.forEach((entry) => {
+                const entryHTML = `
+                  <div class="relative">
+                    <!-- Date -->
+                    <div class="sticky top-6 left-0 translate-y-6 mt-5 text-sm text-gray-500 monospace">
+                      ${entry.date}
+                    </div>
+
+                    <!-- Content -->
+                    <div class="ml-[160px] pb-16 text-gray-600">
+                      ${entry.content}
+                    </div>
+                  </div>
+                `;
+
+                entriesContainer.insertAdjacentHTML("beforeend", entryHTML);
+            });
+        </script>
+    </body>
+</html>