Add new particle system

This commit is contained in:
2025-07-10 01:20:27 -04:00
parent 6bfb933305
commit f6185059fa
12 changed files with 1601 additions and 940 deletions

View File

@@ -16,6 +16,7 @@
position: relative;
margin-bottom: 1rem;
}
.copy-button {
position: absolute;
top: 0.5rem;
@@ -29,18 +30,22 @@
font-size: 0.875rem;
transition: background 0.2s;
}
.copy-button:hover {
background: #4a5568;
}
.copy-button.copied {
background: #2f855a;
}
pre[class*="language-"] {
margin: 0;
padding: 1rem;
border-radius: 0.5rem;
position: relative;
}
/* Table of Contents Styles */
.toc {
background: rgba(17, 24, 39, 0.8);
@@ -51,6 +56,7 @@
max-width: 800px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.toc h2 {
font-family: 'minecraft-font', sans-serif;
font-size: 1.75rem;
@@ -61,13 +67,16 @@
color: transparent;
margin-bottom: 1.5rem;
}
.toc ul {
list-style: none;
padding: 0;
}
.toc li {
margin: 0.75rem 0;
}
.toc a {
color: #d1d5db;
text-decoration: none;
@@ -78,11 +87,13 @@
padding: 0.5rem 1rem;
border-radius: 8px;
}
.toc a:hover {
color: #14b8a6;
transform: translateX(10px);
background: rgba(255, 255, 255, 0.05);
}
/* Ensure code example cards are visible */
.feature-card {
display: block !important;
@@ -96,20 +107,24 @@
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.tilt-card {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
@media (max-width: 640px) {
.toc {
padding: 1rem;
margin: 1rem;
}
.toc h2 {
font-size: 1.5rem;
}
.toc a {
font-size: 1rem;
}
@@ -119,19 +134,26 @@
<body>
<!-- Hamburger Menu Icon (visible on mobile) -->
<button class="hamburger md:hidden flex flex-col justify-center items-center w-10 h-10 focus:outline-none" style="z-index: 99999; position: fixed; top: 1rem; right: 1rem; pointer-events: auto; background: transparent;">
<button class="hamburger md:hidden flex flex-col justify-center items-center w-10 h-10 focus:outline-none"
style="z-index: 99999; position: fixed; top: 1rem; right: 1rem; pointer-events: auto; background: transparent;">
<span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
<span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
<span class="bar w-6 h-0.5 bg-teal-400 transition-all duration-300"></span>
</button>
<!-- Mobile Navigation Menu -->
<nav class="mobile-nav mobile-nav-container hidden fixed inset-0 flex-col items-center justify-center md:hidden" data-mobile-nav style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto; background: rgba(17, 24, 39, 0.98); backdrop-filter: blur(10px);">
<nav class="mobile-nav mobile-nav-container hidden fixed inset-0 flex-col items-center justify-center md:hidden"
data-mobile-nav
style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto; background: rgba(17, 24, 39, 0.98); backdrop-filter: blur(10px);">
<ul class="text-center">
<li class="mb-6">
<a href="https://my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400" target="_blank">Go Home</a>
<a href="https://my-mc.link"
class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400"
target="_blank">Go Home</a>
</li>
<li class="mb-6">
<a href="https://stats.my-mc.link" class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">Wiki Home</a>
<a href="https://stats.my-mc.link"
class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">Wiki
Home</a>
</li>
</ul>
</nav>
@@ -145,7 +167,8 @@
<header class="header-bg py-16 text-center relative z-1">
<div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div>
<h1 class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h1
class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
My-MC.Link</h1>
<p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Futuristic Free Minecraft Hosting</p>
</div>
@@ -197,30 +220,41 @@
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-10">
<section id="overview" class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h2
class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Overview</h2>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
The <code class="bg-gray-800 text-teal-400 px-1 rounded">MyMCLib</code> library provides a convenient way to interact with the My-MC.Link API for managing Minecraft servers. It includes methods for performing various actions such as retrieving server information, managing server settings, controlling gameplay, and interacting with players.
The <code class="bg-gray-800 text-teal-400 px-1 rounded">MyMCLib</code> library provides a convenient
way to interact with the My-MC.Link API for managing Minecraft servers. It includes methods for
performing various actions such as retrieving server information, managing server settings, controlling
gameplay, and interacting with players.
</p>
</section>
<section id="installation" class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h2
class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Installation</h2>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
To use the <code class="bg-gray-800 text-teal-400 px-1 rounded">MyMCLib</code> library in your project, install it via npm:
To use the <code class="bg-gray-800 text-teal-400 px-1 rounded">MyMCLib</code> library in your project,
install it via npm:
</p>
<div class="code-block-wrapper">
<pre class="language-bash"><code>npm install mymc-lib</code></pre>
<button class="copy-button" onclick="copyCode(this)">Copy</button>
</div>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
<strong>Proper Importing:</strong> To make use of this module, you'll need to either utilize the <code class="bg-gray-800 text-teal-400 px-1 rounded">.mjs</code> extension or incorporate <code class="bg-gray-800 text-teal-400 px-1 rounded">"type": "module"</code> in your <code class="bg-gray-800 text-teal-400 px-1 rounded">package.json</code> file. This ensures compatibility with ECMAScript modules.
<strong>Proper Importing:</strong> To make use of this module, you'll need to either utilize the <code
class="bg-gray-800 text-teal-400 px-1 rounded">.mjs</code> extension or incorporate <code
class="bg-gray-800 text-teal-400 px-1 rounded">"type": "module"</code> in your <code
class="bg-gray-800 text-teal-400 px-1 rounded">package.json</code> file. This ensures compatibility
with ECMAScript modules.
</p>
</section>
<section id="usage" class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h2
class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Usage</h2>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
First, import the library and create an instance with your API token:
@@ -263,7 +297,8 @@ console.log(keyData);
</section>
<section id="code-examples" class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h2
class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Code Examples</h2>
<div class="grid grid-cols-1 gap-6">
<!-- 1. Getting Server Time -->
@@ -511,7 +546,8 @@ console.log(installedMods);</code></pre>
</section>
<section id="api-reference" class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h2
class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
API Reference</h2>
<h3 class="text-2xl minecraft-font mb-4 text-teal-400">MyMCLib Class</h3>
<h4 class="text-xl mb-3 text-teal-400">Constructor</h4>
@@ -519,61 +555,102 @@ console.log(installedMods);</code></pre>
<pre class="language-typescript"><code>constructor(token: string)</code></pre>
<button class="copy-button" onclick="copyCode(this)">Copy</button>
</div>
<p class="text-sm opacity-90 leading-relaxed mb-4">Creates an instance of the <code class="bg-gray-800 text-teal-400 px-1 rounded">MyMCLib</code> class with the provided API token.</p>
<p class="text-sm opacity-90 leading-relaxed mb-4">Creates an instance of the <code
class="bg-gray-800 text-teal-400 px-1 rounded">MyMCLib</code> class with the provided API token.</p>
<h4 class="text-xl mb-3 text-teal-400">Methods</h4>
<ul class="text-sm opacity-90 leading-relaxed mb-4 list-disc list-inside">
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getTime(): Promise<any></code> - Retrieves the current server time.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getStats(): Promise<any></code> - Retrieves server statistics.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getLog(): Promise<any></code> - Retrieves server logs.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">startServer(): Promise<any></code> - Starts the Minecraft server.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">stopServer(): Promise<any></code> - Stops the Minecraft server.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">restartServer(): Promise<any></code> - Restarts the Minecraft server.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">createMyLink(): Promise<any></code> - Creates a custom link.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">deleteMyLink(): Promise<any></code> - Deletes a custom link.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">createLinkSFTP(): Promise<any></code> - Creates an SFTP link.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">deleteLinkSFTP(): Promise<any></code> - Deletes an SFTP link.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getConnectionHash(): Promise<any></code> - Retrieves a connection hash.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getConnectionHashSFTP(): Promise<any></code> - Retrieves an SFTP connection hash.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getOnlinePlayers(): Promise<any></code> - Retrieves a list of online players.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getWebsiteURL(): Promise<any></code> - Retrieves the server's website URL.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getMapURL(): Promise<any></code> - Retrieves the server's map URL.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">postBan(username: string): Promise<any></code> - Bans a player by username.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">postUnban(username: string): Promise<any></code> - Unbans a player by username.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">postSay(message: string): Promise<any></code> - Sends a message to all players.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">postTell(username: string, message: string): Promise<any></code> - Sends a private message to a player.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">postConsole(command: string): Promise<any></code> - Executes a command in the server console.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">postGive(username: string, item: string, amount: number): Promise<any></code> - Gives an item to a player.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">installMod(modID: string): Promise<any></code> - Installs a mod by ID.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">uninstallMod(modID: string): Promise<any></code> - Uninstalls a mod by ID.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getInstalledMods(): Promise<any></code> - Retrieves a list of installed mods.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getTime(): Promise<any></code> - Retrieves the
current server time.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getStats(): Promise<any></code> - Retrieves
server statistics.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getLog(): Promise<any></code> - Retrieves
server logs.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">startServer(): Promise<any></code> - Starts the
Minecraft server.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">stopServer(): Promise<any></code> - Stops the
Minecraft server.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">restartServer(): Promise<any></code> - Restarts
the Minecraft server.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">createMyLink(): Promise<any></code> - Creates a
custom link.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">deleteMyLink(): Promise<any></code> - Deletes a
custom link.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">createLinkSFTP(): Promise<any></code> - Creates
an SFTP link.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">deleteLinkSFTP(): Promise<any></code> - Deletes
an SFTP link.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getConnectionHash(): Promise<any></code> -
Retrieves a connection hash.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getConnectionHashSFTP(): Promise<any></code> -
Retrieves an SFTP connection hash.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getOnlinePlayers(): Promise<any></code> -
Retrieves a list of online players.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getWebsiteURL(): Promise<any></code> -
Retrieves the server's website URL.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getMapURL(): Promise<any></code> - Retrieves
the server's map URL.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">postBan(username: string): Promise<any></code>
- Bans a player by username.</li>
<li><code
class="bg-gray-800 text-teal-400 px-1 rounded">postUnban(username: string): Promise<any></code>
- Unbans a player by username.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">postSay(message: string): Promise<any></code> -
Sends a message to all players.</li>
<li><code
class="bg-gray-800 text-teal-400 px-1 rounded">postTell(username: string, message: string): Promise<any></code>
- Sends a private message to a player.</li>
<li><code
class="bg-gray-800 text-teal-400 px-1 rounded">postConsole(command: string): Promise<any></code>
- Executes a command in the server console.</li>
<li><code
class="bg-gray-800 text-teal-400 px-1 rounded">postGive(username: string, item: string, amount: number): Promise<any></code>
- Gives an item to a player.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">installMod(modID: string): Promise<any></code>
- Installs a mod by ID.</li>
<li><code
class="bg-gray-800 text-teal-400 px-1 rounded">uninstallMod(modID: string): Promise<any></code>
- Uninstalls a mod by ID.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getInstalledMods(): Promise<any></code> -
Retrieves a list of installed mods.</li>
</ul>
<h3 class="text-2xl minecraft-font mb-4 text-teal-400">ApiUtils Class</h3>
<h4 class="text-xl mb-3 text-teal-400">Methods</h4>
<ul class="text-sm opacity-90 leading-relaxed mb-4 list-disc list-inside">
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">getRequest(endpoint: ApiEndpoint, token: string): Promise<any></code> - Makes a GET request to the specified API endpoint.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">deleteRequest(endpoint: ApiEndpoint, token: string): Promise<any></code> - Makes a DELETE request to the specified API endpoint.</li>
<li><code class="bg-gray-800 text-teal-400 px-1 rounded">postRequest(endpoint: ApiEndpoint, token: string, data: {}): Promise<any></code> - Makes a POST request to the specified API endpoint with the provided data.</li>
<li><code
class="bg-gray-800 text-teal-400 px-1 rounded">getRequest(endpoint: ApiEndpoint, token: string): Promise<any></code>
- Makes a GET request to the specified API endpoint.</li>
<li><code
class="bg-gray-800 text-teal-400 px-1 rounded">deleteRequest(endpoint: ApiEndpoint, token: string): Promise<any></code>
- Makes a DELETE request to the specified API endpoint.</li>
<li><code
class="bg-gray-800 text-teal-400 px-1 rounded">postRequest(endpoint: ApiEndpoint, token: string, data: {}): Promise<any></code>
- Makes a POST request to the specified API endpoint with the provided data.</li>
</ul>
</section>
<section id="java-client" class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h2
class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Java Client</h2>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
We also have a Java client that provides the same functionality. View the documentation at:
</p>
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed">
<a href="https://info.my-mc.link/mymc-java/" class="underline text-teal-400 hover:text-blue-400" target="_blank">Java Client Documentation</a>
<a href="https://info.my-mc.link/mymc-java/" class="underline text-teal-400 hover:text-blue-400"
target="_blank">Java Client Documentation</a>
</p>
</section>
<section id="explore-more" class="section-bg p-8 sm:p-10 text-center mb-12">
<h2 class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
<h2
class="text-3xl minecraft-font mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Explore More</h2>
<p class="text-lg mb-8 max-w-2xl mx-auto opacity-90 leading-relaxed">
Ready to automate your server with <code class="bg-gray-800 text-teal-400 px-1 rounded">MyMCLib</code><BR>Join our community, dive into our resources, and start building with the My-MC.Link API.
Ready to automate your server with <code
class="bg-gray-800 text-teal-400 px-1 rounded">MyMCLib</code><BR>Join our community, dive into our
resources, and start building with the My-MC.Link API.
</p>
<div class="flex justify-center gap-4 flex-wrap">
<a href="https://join.my-mc.link" class="btn-minecraft text-base" target="_blank">Join Our Discord</a>
@@ -582,6 +659,8 @@ console.log(installedMods);</code></pre>
</section>
</main>
<!-- Particles.js Container -->
<div id="particles-js" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></div>
<footer class="bg-gray-900/20 backdrop-filter backdrop-blur-xl py-8 text-center relative z-10">
<p class="text-sm opacity-90">© 2025 My-MC.Link. All rights reserved.</p>
<p class="text-sm opacity-90 mt-3">
@@ -589,6 +668,8 @@ console.log(installedMods);</code></pre>
donated by <a href="https://raven-scott.fyi" class="underline">SNXRaven</a>
</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
@@ -611,6 +692,7 @@ console.log(installedMods);</code></pre>
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="https://my-mc.link/js/main.js"></script>
</body>