PageSourceSearch

https://eepymep.netlify.app/

html eepymep.netlify.app collected 2026-10-03 10:41:02 UTC 21,564 bytes, 434 lines download raw bytes

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.