ranbot.web/index.html at master · ranbot-ai/ranbot.web · 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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="author" content="Encore Shao" />
    <title>
        RanBOT Labs | AI Web Data Extraction, and Crawling, Viewer Page Data.
    </title>
    <meta name="description" content="RanBOT Labs automates web data extraction from any website using AI/ML to ransform the web into data.">
    <meta name="keywords" content="RanBOT Labs, Company, Data, AI/ML, Company, Web, Sales People">
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Font Awesome icons (free version)-->
    <!-- Google fonts -->
    <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=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="css/styles.css" rel="stylesheet" />
    <link href="css/fontawesome-all.css" rel="stylesheet" />
    <link href="css/apple-style.css" rel="stylesheet" />
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-225038487-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-225038487-1');
    </script>

    <!-- Google Tag Manager -->
    <script>
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})
        (window,document,'script','dataLayer','GTM-NPPTFGK');
    </script>
    <!-- End Google Tag Manager -->
</head>

<body id="page-top">
    <!-- Navigation-->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
        <div class="container px-4 px-lg-5">
            <a class="navbar-brand" href="#page-top">
                <img src="assets/img/icon48.png" />
            </a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#signup">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section-->
    <header class="masthead hero" id="about">
        <div class="container">
            <h1 class="hero-title">
                RanBOT Labs
            </h1>

            <h2 class="hero-subtitle">
                RanBOT Labs uses AI/ML to transform web content into structured data.
            </h2>

            <a class="btn btn-info hero-btn" href="https://chromewebstore.google.com/detail/ranboter/nmdmfikkicpdphdnjgnhogdmeclobfjg">
                <i class="mx-6 fab fa-chrome"></i> Install RanBOTer Online
            </a>

            <img class="hero-img" src="assets/img/sales-people.png" alt="RanBOT Labs Hero" />
        </div>
    </header>

    <!-- Products -->
    <div class="container px-4 px-lg-5" style="max-width: 1100px; margin: 3rem auto 1rem;">
        <p class="products-label">Products</p>
    </div>
    <section class="section" id="projects">
        <div class="section-image">
            <img src="assets/img/sales-company.png" alt="Sales Nav Company Page" />
        </div>
        <div class="section-content">
            <h2><a href="https://viewer.ranbot.online/" target="_blank">RanBOTer: Your AI browsing companion</a></h2>
            <p class="text-black-50">Faster search & extract data on the web. Easily view normalized data and quickly copy or export data.</p>
            <p><a href="https://chromewebstore.google.com/detail/ranboter/nmdmfikkicpdphdnjgnhogdmeclobfjg">Install RanBOTer</a> | <a href="https://github.com/encoreshao/github-marketplace">Github Marketplace</a> | <a href="https://github.com/encoreshao/webdata-scraper">Facebook Public Page</a></p>
        </div>
    </section>

    <!-- Section 5: RanBOT Labs Platform -->
    <section class="section" id="ranbot-platform">
        <div class="section-image">
            <img src="assets/img/ranbot-platform.png" alt="RanBOT Labs Platform" />
        </div>
        <div class="section-content">
            <h2><a href="https://www.ranbot.online/" target="_blank">RanBOT Labs: AI Web Data Extraction</a></h2>
            <p class="text-black-50">RanBOT Labs is an AI-powered platform for web data extraction, crawling, and transforming
                web content into structured data. Automate data collection from any website and make web data accessible and
                actionable.</p>
            <p><a href="https://www.ranbot.online/" target="_blank">Visit RanBOT Labs Platform</a></p>
        </div>
    </section>

    <!-- Section 3: Nexus Tab -->
    <section class="section" id="nexus-tab">
        <div class="section-image">
            <img src="./projects/nexus-tab/assets/settings.png" alt="Nexus Tab Dashboard" />
        </div>
        <div class="section-content">
            <h2><a href="./projects/nexus-tab/index.html" target="_blank">Nexus Tab: Your Daily Command Center</a></h2>
            <p class="text-black-50">A Chrome extension that replaces your new tab with a modular productivity dashboard. Glassmorphism cards in a bento grid, customizable widgets (Clock, Search, Tasks, Quick Links, Bookmarks, Notes, Pomodoro, Weather, RSS), and three preset layouts (Focus, Dashboard, Workflow).</p>
            <p><a href="https://chromewebstore.google.com/detail/quote-master-customized-e/nhlibemmkidelmnnojcadloiapoboolg" target="_blank">Install From Chrome Web Store</a> | <a href="https://github.com/encoreshao/nexus-tab" target="_blank">View on GitHub</a></p>
        </div>
    </section>

    <!-- Bookmark Dashboard -->
    <section class="section" id="bookmark-dashboard">
        <div class="section-image">
            <img src="./projects/bookmark-dashboard/assets/bookmarks.jpg" alt="Bookmark Dashboard" />
        </div>
        <div class="section-content">
            <h2><a href="./projects/bookmark-dashboard/index.html" target="_blank">Bookmark Dashboard: Searchable Bookmark Hub</a></h2>
            <p class="text-black-50">A clean, modern Chrome extension that replaces your new tab with an organized, searchable bookmark dashboard. Browse bookmarks by folder, search by title or URL, switch between grid and list view, and choose dark or light theme. Optional clock with greeting and customizable display name.</p>
            <p><a href="https://github.com/encoreshao/bookmark-dashboard" target="_blank" rel="noopener">View on GitHub</a> | <a href="./projects/bookmark-dashboard/index.html" target="_blank">Learn more</a></p>
        </div>
    </section>

    <!-- Section 4: Hot News -->
    <section class="section" id="hot-news">
        <div class="section-image">
            <img src="assets/img/hot-news.png" alt="Hot News Aggregator" />
        </div>
        <div class="section-content">
            <h2><a href="https://hot-news.ranbot.online/" target="_blank">Hot News: Trending Aggregator</a></h2>
            <p class="text-black-50">Aggregates trending news from Douyin, Bilibili, NetEase News, Baidu Hot Search, and more. Get the latest hot topics quickly, beautifully, and securely.</p>
            <p><a href="https://hot-news.ranbot.online/" target="_blank">Visit Hot News Online</a></p>
        </div>
    </section>

    <!-- Section 6: GitHub Trending Toolkit -->
    <section class="section" id="github-trending-toolkit">
        <div class="section-image">
            <img src="assets/img/github-trending.png" alt="GitHub Trending Toolkit" />
        </div>
        <div class="section-content">
            <h2><a href="https://github.ranbot.online/" target="_blank">GitHub Trending Toolkit</a></h2>
            <p class="text-black-50">A toolkit for fetching and displaying GitHub Weekly Trending Repositories. Features a Node.js CLI script and a modern React web tool for viewing, exporting (Markdown, JSON, CSV), and copying trending repositories. Open source and customizable.</p>
            <p>
                <a href="https://github.ranbot.online/" target="_blank">Visit Live Tool</a> |
                <a href="https://github.com/ranbot-ai/github-trending" target="_blank">View on GitHub</a>
            </p>
        </div>
    </section>

    <!-- Signup Section -->
    <section class="section signup-section" id="signup">
        <div class="section-content">
            <i class="far fa-paper-plane fa-2x mb-2 text-info"></i>
            <h2 class="section-title">Subscribe to receive updates!</h2>
            <form>
                <input id="inputEmail" type="email" placeholder="Enter your email" aria-label="Email address" />
                <button class="btn btn-info" type="submit">Subscribe</button>
            </form>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="section contact-section" id="contact">
        <div class="section-content">
            <div class="row gx-4 gx-lg-5">
                <div class="col-md-4">
                    <div class="card py-4 h-100">
                        <div class="card-body text-center">
                            <i class="fas fa-map-marked-alt text-info mb-2"></i>
                            <h4 class="text-uppercase m-0">Location</h4>
                            <hr class="my-4 mx-auto" />
                            <div class="small text-black-50">Shanghai, China</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card py-4 h-100">
                        <div class="card-body text-center">
                            <i class="fas fa-envelope text-info mb-2"></i>
                            <h4 class="text-uppercase m-0">Email</h4>
                            <hr class="my-4 mx-auto" />
                            <div class="small text-black-50">encore.shao[at]gmail.com</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card py-4 h-100">
                        <div class="card-body text-center">
                            <i class="fas fa-bus text-info mb-2"></i>
                            <h4 class="text-uppercase m-0">Work</h4>
                            <hr class="my-4 mx-auto" />
                            <div class="small text-black-50">Data & AI</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="social">
                <a href="https://www.linkedin.com/company/ranbot-ai" target="_blank" rel="noopener" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
                <a href="https://x.com/ranbotai" target="_blank" rel="noopener" aria-label="X"><i class="fab fa-twitter"></i></a>
                <a href="https://github.com/ranbot-ai/" target="_blank" rel="noopener" aria-label="GitHub"><i class="fab fa-github"></i></a>
            </div>
        </div>
    </section>
    <!-- Footer-->
    <footer class="footer small text-center">
        <div class="container px-4 px-lg-5">Copyright &copy; RanBOT Labs 2025</div>
    </footer>
    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core theme JS-->
    <script src="js/scripts.js"></script>
    <script src="js/fontawesome-all.js"></script>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NPPTFGK" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js"></script>
    <script>
        VANTA.CLOUDS({
          el: "#about",
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 200,
          minWidth: 200,
          skyColor: 0x0f172a,
          cloudColor: 0x334155,
          cloudScale: 0.8,
          speed: 0.6
        })
    </script>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-J34EKX0755"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-J34EKX0755');
    </script>
</body>

</html>