Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZerroDevs
ZerroDevs committed Jan 23, 2025
1 parent 48b97cd commit d22b2a9
Show file tree
Hide file tree
Showing 5 changed files with 416 additions and 118 deletions.
87 changes: 70 additions & 17 deletions Docs/api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,16 +176,31 @@ <h4>Options:</h4>
<i class="fas fa-share-alt"></i>
</button>

<!-- Back to Top Button -->
<button class="back-to-top" onclick="scrollToTop()" aria-label="Back to top">
<i class="fas fa-arrow-up"></i>
</button>

<footer>
<div class="footer-content">
<div class="footer-links">
<a href="https://github.com/ZerroDevs/discord-bot-utils" target="_blank">GitHub Repository</a>
<a href="https://www.npmjs.com/package/@zerrodevs/discord-bot-utils" target="_blank">NPM Package</a>
<a href="https://github.com/ZerroDevs/discord-bot-utils/discussions" target="_blank">Community Discussions</a>
<a href="https://github.com/ZerroDevs" target="_blank">ZerroDevs</a>
<a href="https://github.com/ZerroDevs/discord-bot-utils" target="_blank">
<i class="fab fa-github"></i> GitHub Repository
</a>
<a href="https://www.npmjs.com/package/@zerrodevs/discord-bot-utils" target="_blank">
<i class="fab fa-npm"></i> NPM Package
</a>
<a href="https://github.com/ZerroDevs/discord-bot-utils/discussions" target="_blank">
<i class="fas fa-comments"></i> Community Discussions
</a>
<a href="https://github.com/ZerroDevs" target="_blank">
<i class="fas fa-code"></i> ZerroDevs
</a>
</div>
<div class="footer-copyright">
© 2023 ZerroDevs. Development by <a href="https://github.com/ZerroDevs" target="_blank">ZerroDevs</a>
<br>
<small>Made with <i class="fas fa-heart" style="color: #ff4d4d;"></i> for the Discord.js community</small>
</div>
</div>
</footer>
Expand All @@ -194,31 +209,69 @@ <h4>Options:</h4>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script>
<script src="js/main.js"></script>
<script>
// Back to top functionality
const backToTopButton = document.querySelector('.back-to-top');

window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.add('visible');
} else {
backToTopButton.classList.remove('visible');
}
});

function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}

// Enhanced share functionality
function shareContent() {
if (navigator.share) {
navigator.share({
title: 'Discord Bot Utils API Documentation',
text: 'Check out the API documentation for this awesome Discord.js utility package!',
url: window.location.href
})
.then(() => showNotification('Successfully shared!', 'check'))
.catch(console.error);
} else {
// Fallback: Copy URL to clipboard
navigator.clipboard.writeText(window.location.href)
.then(() => {
const notification = document.createElement('div');
notification.className = 'notification';
notification.textContent = 'URL copied to clipboard!';
document.body.appendChild(notification);
setTimeout(() => notification.classList.add('show'), 10);
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => notification.remove(), 300);
}, 2000);
})
.catch(console.error);
.then(() => showNotification('URL copied to clipboard!', 'copy'))
.catch(() => showNotification('Failed to copy URL', 'times'));
}
}

function showNotification(message, icon) {
const notification = document.createElement('div');
notification.className = 'notification';
notification.innerHTML = `
<i class="fas fa-${icon}"></i>
${message}
`;
document.body.appendChild(notification);
setTimeout(() => notification.classList.add('show'), 10);
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => notification.remove(), 300);
}, 2000);
}

// Copy code blocks
document.querySelectorAll('.code-block').forEach(block => {
const copyBtn = document.createElement('button');
copyBtn.className = 'code-copy-btn';
copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
copyBtn.onclick = () => {
const code = block.querySelector('code').innerText;
navigator.clipboard.writeText(code)
.then(() => showNotification('Code copied to clipboard!', 'check'))
.catch(() => showNotification('Failed to copy code', 'times'));
};
block.appendChild(copyBtn);
});
</script>
</body>
</html>
185 changes: 135 additions & 50 deletions Docs/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -508,79 +508,164 @@ footer a {
}
}

/* Share button styles */
/* Enhanced Share Button */
.share-button {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 99;
position: fixed;
right: 20px;
bottom: 20px;
transform: none;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 99;
}

.share-button:hover {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
transform: translateY(-5px);
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
background-color: #4752c4;
}

.share-button i {
font-size: 1.5rem;
transition: transform 0.3s ease;
}

/* Improved footer styles */
.share-button:hover i {
transform: scale(1.1);
}

/* Enhanced Footer */
footer {
margin-left: 250px;
padding: 2rem;
text-align: center;
background-color: var(--secondary-color);
border-top: 1px solid var(--border-color);
margin-left: 250px;
padding: 3rem 2rem;
background-color: var(--secondary-color);
border-top: 1px solid var(--border-color);
position: relative;
}

.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 2rem;
}

.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
text-align: center;
}

.footer-links a {
color: var(--text-color);
text-decoration: none;
transition: color 0.3s;
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
padding: 0.5rem 1rem;
border-radius: 4px;
background-color: rgba(88, 101, 242, 0.1);
}

.footer-links a:hover {
color: var(--primary-color);
color: var(--primary-color);
background-color: rgba(88, 101, 242, 0.2);
transform: translateY(-2px);
}

.footer-copyright {
font-size: 0.9rem;
color: var(--text-color);
opacity: 0.8;
text-align: center;
font-size: 0.9rem;
color: var(--text-color);
opacity: 0.8;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}

.footer-copyright a {
color: var(--primary-color);
text-decoration: none;
font-weight: bold;
}

.footer-copyright a:hover {
text-decoration: underline;
}

/* Back to Top Button */
.back-to-top {
position: fixed;
right: 20px;
bottom: 90px;
background-color: var(--primary-color);
color: white;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 99;
}

.back-to-top.visible {
opacity: 1;
visibility: visible;
}

.back-to-top:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Enhanced notification */
.notification {
position: fixed;
bottom: 20px;
right: 20px;
padding: 1rem 2rem;
background-color: var(--primary-color);
color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: translateY(100px);
opacity: 0;
transition: all 0.3s ease;
z-index: 1000;
display: flex;
align-items: center;
gap: 0.5rem;
}

.notification.show {
transform: translateY(0);
opacity: 1;
}

.notification i {
font-size: 1.2rem;
}

@media (max-width: 768px) {
.footer-links {
flex-direction: column;
gap: 1rem;
}

footer {
margin-left: 0;
}
.footer-links {
grid-template-columns: 1fr;
}

footer {
margin-left: 0;
}
}
Loading

0 comments on commit d22b2a9

Please sign in to comment.