1<!DOCTYPE html> 2<html lang="en" class="lenis"></html> 3<head> 4 <meta charset="UTF-8" /> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=61c548e4-314a-47ed-90ce-4d823156eebe 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 9 <meta name="google-site-verification" content="kyxAKD259LUszBsL236xAnVSZJF0CtGKcFPSu1Y478I" /> 10 <!-- ââ Primary SEO ââââââââââââââââââââââââââââââââââââââââââ 11 The title and description are what Google shows in search results. 12 Keep title under 60 chars, description under 155 chars. --> 13 <title>Mep â Media Tracking Bot for Discord | Pixiv, Bluesky, Feeds</title> 14 <meta name="description" content="Media tracking Discord bot. Auto-post from Pixiv, Bluesky, design feeds. Includes embed fixes, music recognition, quote cards, and server utilities." /> 15 <meta name="robots" content="index, follow" /> 16 17 <!-- ââ Open Graph âââââââââââââââââââââââââââââââââââââââââââ 18 Controls the preview card when someone shares the link on 19 Discord, Facebook, Slack, etc. --> 20 <meta property="og:type" content="website" /> 21 <meta property="og:site_name" content="Mep" /> 22 <meta property="og:url" content="https://eepymep.netlify.app/" /> 23 <meta property="og:title" content="Mep â Media Tracking Bot for Discord" /> 24 <meta property="og:description" content="Auto-post from Pixiv, Bluesky, design feeds. Built-in embed fixes and creative tools." /> 25 <meta property="og:image" content="https://eepymep.netlify.app/assets/images/preview-card.png" /> 26 27 <!-- ââ Twitter / X card âââââââââââââââââââââââââââââââââââââ 28 summary_large_image shows a big banner preview on Twitter/X. --> 29 <meta name="twitter:card" content="summary_large_image" /> 30 <meta name="twitter:title" content="Mep â Media Tracking Bot for Discord" /> 31 <meta name="twitter:description" content="Auto-post from Pixiv, Bluesky, design feeds. Built-in embed fixes and creative tools." /> 32 <meta name="twitter:image" content="https://eepymep.netlify.app/assets/images/preview-card.png" /> 33 34 <!-- ââ Favicon ââââââââââââââââââââââââââââââââââââââââââââââ 35 Replace with your actual icon file once you have one. --> 36 <link rel="icon" href="assets/images/mep-pfp.webp" /> 37 38 <link rel="stylesheet" href="style.css" /> 39 <link rel="stylesheet" href="css/command-terminal.css" /> 40 41 <!-- Lenis Smooth Scroll Library --> 42
42<script src="https://unpkg.com/@studio-freight/[email protected]/dist/lenis.min.js"></script>
42 43 44</head> 45<body> 46 47 <!-- ââ ENTRY OVERLAY ââââââââââââââââââââââââââââââââââââââââ --> 48 <div class="entry-overlay" id="entryOverlay"> 49 <div class="entry-content"> 50 <img src="assets/images/mep-pfp.webp" alt="Mep" class="entry-logo" /> 51 <h1 class="entry-title">Mep</h1> 52 <p class="entry-tagline">Click to enter</p> 53 <button class="entry-btn" id="enterBtn">Enter</button> 54 </div> 55 </div> 56 57 <!-- ââ TOP NAV ââââââââââââââââââââââââââââââââââââââââââââââ --> 58 <nav class="topnav"> 59 60 <!-- Music player --> 61 <div class="player"> 62 <img class="player-art" id="player-art" src="" alt="" /> 63 <div class="player-mid"> 64 <span class="player-title" id="player-title">â</span> 65 <div class="player-timeline"> 66 <span class="player-time" id="player-current">0:00</span> 67 <input class="player-seek" id="player-seek" type="range" min="0" max="100" value="0" /> 68 <span class="player-time" id="player-duration">0:00</span> 69 </div> 70 </div> 71 <div class="player-controls"> 72 <button class="player-btn" id="player-prev" aria-label="Previous">â®</button> 73 <button class="player-btn player-btn-play" id="player-play" aria-label="Play">â¶</button> 74 <button class="player-btn" id="player-next" aria-label="Next">â</button> 75 </div> 76 </div> 77 78 <a href="https://discord.com/oauth2/authorize?client_id=1488360211520688198" class="btn btn-primary">+ Add to Discord</a> 79 </nav> 80 81 <!-- ââ HERO âââââââââââââââââââââââââââââââââââââââââââââââââ --> 82 <header> 83 <!-- Banner area â background image shows through, just provides height --> 84 <div class="hero-banner"></div> 85 86 <!-- Bio card â pfp overlaps the banner from above --> 87 <div class="hero-bio"> 88 <div class="hero-pfp"> 89 <img src="assets/images/mep-pfp.webp" alt="Mep avatar" /> 90 </div> 91 <div class="hero-bio-text"> 92 <h1>Mep</h1> 93 <p class="tagline">Your Discord's media sidekick.</p> 94 <p class="tagline-sub">Track artists. Fix embeds. Share moments. Automate everything.</p> 95 </div> 96 </div> 97 </header> 98 99 <main> 100 101 <!-- ââ FEATURED â Slideshow âââââââââââââââââââââââââââââââââ --> 102 <section class="slideshow-section"> 103 <h2>Featured</h2> 104 <div class="slideshow" id="coreSlideshow"> 105 106 <div class="slide active" data-index="0"> 107 <div class="slide-text"> 108 <h3>Media Embedding</h3> 109 <p>Auto-fixes TikTok, Instagram, Twitter/X, Facebook embeds. Deletes & reposts with working preview.</p> 110 </div> 111 <img src="assets/images/media.webp" alt="Embedding feature" /> 112 </div> 113 114 <div class="slide" data-index="1"> 115 <div class="slide-text"> 116 <h3>Color Roles</h3> 117 <p>Up to 36 color roles with a single command.</p> 118 </div> 119 <img src="assets/images/colorroles.webp" alt="Color Roles feature" /> 120 </div> 121 122 <div class="slide" data-index="2"> 123 <div class="slide-text"> 124 <h3>Card</h3> 125 <p>Make your own about-me card that can be brought across servers.</p> 126 </div> 127 <img src="assets/images/card.webp" alt="Card feature" /> 128 </div> 129 130 <div class="slide" data-index="3"> 131 <div class="slide-text"> 132 <h3>Delviant Playlist</h3> 133 <p>Angelcore, witch house, deep house and chill phonk music list shuffle. Auto-posts new tracks with /delviant subscribe.</p> 134 </div> 135 <img src="assets/images/delviant.webp" alt="Delviant Playlist" /> 136 </div> 137 138 <div class="slide-progress" id="slideProgress"></div> 139 </div> 140 141 <div class="slide-dots" id="slideDots"></div> 142 </section> 143 144 <!-- ââ TELL MEP WHAT TO DO â Command Terminal âââââââââââââââ --> 145 <section class="command-demos-section"> 146 <h2>Tell Mep what to do</h2> 147 <div class="terminals-grid"> 148 149 <div class="command-terminal" data-scenario="pixiv" data-delay="0"> 150 <div class="terminal-header"> 151 <div class="terminal-dots">
152 <span class="terminal-dot"></span> 153 <span class="terminal-dot"></span> 154 <span class="terminal-dot"></span> 155 </div> 156 </div> 157 <div class="terminal-body"> 158 <div class="terminal-command"></div> 159 <div class="terminal-input"></div> 160 <div class="terminal-result"></div> 161 <div class="terminal-description"></div> 162 </div> 163 </div> 164 165 <div class="command-terminal" data-scenario="bluesky" data-delay="200"> 166 <div class="terminal-header"> 167 <div class="terminal-dots"> 168 <span class="terminal-dot"></span> 169 <span class="terminal-dot"></span> 170 <span class="terminal-dot"></span> 171 </div> 172 </div> 173 <div class="terminal-body"> 174 <div class="terminal-command"></div> 175 <div class="terminal-input"></div> 176 <div class="terminal-result"></div> 177 <div class="terminal-description"></div> 178 </div> 179 </div> 180 181 <div class="command-terminal" data-scenario="delviant" data-delay="400"> 182 <div class="terminal-header"> 183 <div class="terminal-dots"> 184 <span class="terminal-dot"></span> 185 <span class="terminal-dot"></span> 186 <span class="terminal-dot"></span> 187 </div> 188 </div> 189 <div class="terminal-body"> 190 <div class="terminal-command"></div> 191 <div class="terminal-result"></div> 192 <div class="terminal-description"></div> 193 </div> 194 </div> 195 196 <div class="command-terminal" data-scenario="colorroles" data-delay="600"> 197 <div class="terminal-header"> 198 <div class="terminal-dots"> 199 <span class="terminal-dot"></span> 200 <span class="terminal-dot"></span> 201 <span class="terminal-dot"></span> 202 </div> 203 </div> 204 <div class="terminal-body"> 205 <div class="terminal-command"></div> 206 <div class="terminal-result"></div> 207 <div class="terminal-description"></div> 208 </div> 209 </div> 210 211 </div> 212 </section> 213 214 <!-- ââ MEDIA TRACKING â Visual Feature Showcase âââââââââââââ --> 215 <section> 216 <h2>Media Tracking</h2> 217 <p class="section-intro">Subscribe to artists, feeds, and accounts. Mep delivers new posts directly into Discord.</p> 218 219 <div class="media-showcase"> 220 <!-- Pixiv --> 221 <div class="media-feature" data-image="assets/images/pixiv.webp"> 222 <div class="media-feature-content"> 223 <div class="media-feature-text"> 224 <h3>Pixiv <span class="preview-icon">ð</span></h3> 225 <p>Subscribe to artists and get their latest artwork delivered to your Discord channels. Automatic NSFW filtering and post scheduling. Never miss new drops from your favorite artists.</p> 226 </div> 227 <div class="media-feature-image"> 228 <img src="assets/images/pixiv.webp" alt="Pixiv tracking" /> 229 </div> 230 </div> 231 </div> 232 233 <!-- Bluesky --> 234 <div class="media-feature" data-image="assets/images/bluesky.webp"> 235 <div class="media-feature-content"> 236 <div class="media-feature-text"> 237 <h3>Bluesky <span class="preview-icon">ð</span></h3> 238 <p>Follow Bluesky accounts and auto-post their updates to Discord. Checks every 5 minutes for new posts. Perfect for tracking artists, writers, and communities on the decentralized social network.</p> 239 </div> 240 <div class="media-feature-image"> 241 <img src="assets/images/bluesky.webp" alt="Bluesky tracking" /> 242 </div> 243 </div> 244 </div> 245 246 <!-- Roomlet --> 247 <div class="media-feature" data-image="assets/images/roomlet.webp"> 248 <div class="media-feature-content"> 249 <div class="media-feature-text"> 250 <h3>Roomlet <span class="preview-icon">ð</span></h3> 251 <p>RSS feeds for art, design, comics, fashion, and lifestyle galleries. Curated content from Roomlet's creative communities delivered straight to your server. Discover new aesthetics daily.</p> 252 </div> 253 <div class="media-feature-image"> 254 <img src="assets/images/roomlet.webp" alt="Roomlet feeds" /> 255 </div> 256 </div> 257 </div> 258 259 <!-- Delviant --> 260 <div class="media-feature" data-image="assets/images/delviant-1.webp"> 261 <div class="media-feature-content"> 262 <div class="media-feature-text"> 263 <h3>Delviant Playlist <span class="preview-icon">ð</span></h3> 264 <p>Angelcore, witch house, deep house, and chill phonk music curated by @delivant. Subscribe to get new track notifications.</p> 265 </div> 266 <div class="media-feature-image"> 267 <img src="assets/images/delviant-1.webp" alt="Delviant playlist" /> 268 </div> 269 </div> 270 </div> 271 272 <!-- Locket --> 273 <div class="media-feature" data-image="assets/images/locket.webp"> 274 <div class="media-feature-content"> 275 <div class="media-feature-text"> 276 <h3>Locket <span class="legacy-badge">Legacy</span> <span class="preview-icon">ð</span></h3> 277 <p>Subscribe to Locket widget photo updates (read-only). Historical feature maintained for existing users. Displays real-time photo sharing from the Locket widget app.</p> 278 </div> 279 <div class="media-feature-image"> 280 <img src="assets/images/locket.webp" alt="Locket widget" /> 281 </div> 282 </div> 283 </div> 284 </div> 285 </section> 286 287 <!-- ââ ALL FEATURES â Complete Utility List ââââââââââââââââââ --> 288 <section> 289 <h2>Utilities & Tools</h2> 290 <p class="section-intro">Everything else Mep can do: embed fixes, creative tools, and server automation.</p> 291 292 <div class="all-features-container"> 293 <!-- Utilities & Tools --> 294 <div class="feature-category"> 295 <h3 class="category-title">All Utilities</h3> 296 <div class="feature-list"> 297 <div class="feature-item" data-image="assets/images/embedding.webp">
298 <span class="feature-name">Media Embedding <span class="preview-icon">ð</span></span> 299 <span class="feature-desc">Auto-fix TikTok, Instagram, Twitter/X, Facebook embeds</span> 300 </div> 301 <div class="feature-item" data-image="assets/images/quote.webp"> 302 <span class="feature-name">Quote <span class="preview-icon">ð</span></span> 303 <span class="feature-desc">Right-click â Quote Message with options to customize</span> 304 </div> 305 <div class="feature-item" data-image="assets/images/card.webp"> 306 <span class="feature-name">Card <span class="preview-icon">ð</span></span> 307 <span class="feature-desc">Portable about-me cards with interests and favorites</span> 308 </div> 309 <div class="feature-item" data-image="assets/images/colorroles.webp"> 310 <span class="feature-name">Color Roles <span class="preview-icon">ð</span></span> 311 <span class="feature-desc">36 color roles, members pick their own colors</span> 312 </div> 313 <div class="feature-item" data-image="assets/images/autoreact.webp"> 314 <span class="feature-name">Autoreact <span class="preview-icon">ð</span></span> 315 <span class="feature-desc">Auto-react to every message with random cute heart emotes</span> 316 </div> 317 <div class="feature-item" data-image="assets/images/welcomer.webp"> 318 <span class="feature-name">Welcomer <span class="preview-icon">ð</span></span> 319 <span class="feature-desc">Greet new members with custom messages</span> 320 </div> 321 <div class="feature-item" data-image="assets/images/reminder.webp"> 322 <span class="feature-name">Reminder <span class="preview-icon">ð</span></span> 323 <span class="feature-desc">Set reminders for yourself or others with custom messages</span> 324 </div> 325 <div class="feature-item" data-image="assets/images/sticky.webp"> 326 <span class="feature-name">Sticky <span class="preview-icon">ð</span></span> 327 <span class="feature-desc">Pin messages to top of channel, auto-repost when pushed down</span> 328 </div> 329 <div class="feature-item" data-image="assets/images/userpic.webp"> 330 <span class="feature-name">Userpic <span class="preview-icon">ð</span></span> 331 <span class="feature-desc">Get user avatar/banner in full resolution</span> 332 </div> 333 <div class="feature-item" data-image="assets/images/sauce.webp"> 334 <span class="feature-name">Trace Art <span class="preview-icon">ð</span></span> 335 <span class="feature-desc">Reverse image search using SauceNAO</span> 336 </div> 337 338 <div class="feature-item" data-image="assets/images/emoji.webp"> 339 <span class="feature-name">Get Emojis <span class="preview-icon">ð</span></span> 340 <span class="feature-desc">Right-click â Apps â Steal Emoji/Sticker</span> 341 </div> 342 <div class="feature-item" data-image="assets/images/eraser.webp"> 343 <span class="feature-name">Eraser <span class="preview-icon">ð</span></span> 344 <span class="feature-desc">Setup autoclean that deletes oldest messages</span> 345 </div> 346 <div class="feature-item" data-image="assets/images/responder.webp"> 347 <span class="feature-name">Responder <span class="preview-icon">ð</span></span> 348 <span class="feature-desc">Custom auto-responses to keywords</span> 349 </div> 350 </div> 351 </div> 352 </div> 353 </section> 354 355 <!-- ââ BOTTOM CTA ââââââââââââââââââââââââââââââââââââââââââââ --> 356 <section class="cta-section"> 357 <div class="cta-card"> 358 <h2 class="cta-title">join our home lab</h2> 359 <p class="cta-sub">learn more about Mep's features or get in touch.</p> 360 <div class="hero-buttons"> 361 <a href="https://discord.gg/9fse7Nqmem" class="btn btn-primary">accept</a> 362 </div> 363 </div> 364 </section> 365 366 </main> 367 368 <!-- ââ MUSIC VISUALIZER BARS ââââââââââââââââââââââââââââââââ --> 369 <div class="visualizer visualizer-left" id="visualizerLeft"> 370 <div class="visualizer-bar"></div> 371 <div class="visualizer-bar"></div> 372 <div class="visualizer-bar"></div> 373 <div class="visualizer-bar"></div> 374 <div class="visualizer-bar"></div> 375 <div class="visualizer-bar"></div> 376 <div class="visualizer-bar"></div> 377 <div class="visualizer-bar"></div> 378 </div> 379 380 <div class="visualizer visualizer-right" id="visualizerRight"> 381 <div class="visualizer-bar"></div> 382 <div class="visualizer-bar"></div> 383 <div class="visualizer-bar"></div> 384 <div class="visualizer-bar"></div> 385 <div class="visualizer-bar"></div> 386 <div class="visualizer-bar"></div> 387 <div class="visualizer-bar"></div> 388 <div class="visualizer-bar"></div> 389 </div> 390 391 <!-- ââ IMAGE LIGHTBOX MODAL âââââââââââââââââââââââââââââââââ --> 392 <div class="lightbox" id="lightbox"> 393 <div class="lightbox-backdrop" id="lightboxBackdrop"></div> 394 <div class="lightbox-content"> 395 <button class="lightbox-close" id="lightboxClose" aria-label="Close">Ã</button> 396 <img class="lightbox-image" id="lightboxImage" src="" alt="Feature preview" /> 397 </div> 398 </div> 399 400 <!-- defer: scripts load after the HTML is parsed, so they can find the elements --> 401
401<script src="js/performance.js"></script>
401 402
402<script src="js/smooth-scroll.js" defer></script>
402 403
403<script src="js/entry.js" defer></script>
403 404
404<script src="js/scroll-effects.js" defer></script>
404 405
405<script src="js/slideshow.js" defer></script>
405 406
406<script src="js/nav-block.js" defer></script>
406 407
407<script src="js/player.js" defer></script>
407 408
408<script src="js/mobile-btn.js" defer></script>
408 409
409<script src="js/command-copy.js" defer></script>
409 410
410<script src="js/command-terminal.js" defer></script>
410 411
411<script src="js/lightbox.js" defer></script>
411 412 413 <!-- WidgetBot Crate - Only load on desktop to avoid mobile overlap --> 414
414<script> 415 // Only load WidgetBot on desktop (screen width > 768px) 416 if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 417 const script = document.createElement('script'); 418 script.src = 'https://cdn.jsdelivr.net/npm/@widgetbot/crate@3'; 419 script.async = true; 420 script.defer = true; 421 script.onload = function() { 422 new Crate({ 423 server: '1324399507458228225', 424 channel: '1497616363181576222', 425 color: '#d4879f' 426 // Using default Discord logo - glyph emojis don't render reliably 427 }); 428 }; 429 document.body.appendChild(script); 430 } 431 </script>
431 432 433</body> 434</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.