masterdraco/transmission-rss-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add About Modal with developer information

Browse Source 
- Create a comprehensive About modal showcasing features and version history
- Add information about PowerData.dk and Michael Bay-Laursen as the developer
- Include version history section for tracking changes
- Style modal for optimal display on all device sizes

🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
MasterDraco 2025-03-05 00:08:49 +00:00
parent 57342e0450
commit 7c7697c2cd
2 changed files with 148 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
public/css/styles.css
View File

@ -445,7 +445,7 @@ header {
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-backdrop.show {
.modal-backdrop.show, #about-modal[style*="flex"] {
opacity: 1;
visibility: visible;
}
@ -463,7 +463,19 @@ header {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.modal-backdrop.show .modal {
#about-modal .modal {
max-width: 800px;
opacity: 1;
transform: none;
animation: modalFadeIn 0.3s;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-backdrop.show .modal, #about-modal[style*="flex"] .modal {
opacity: 1;
transform: translateY(0);
}
@ -493,6 +505,10 @@ header {
padding: 1rem;
}
#about-modal .modal-body {
padding: 1.5rem;
}
.modal-footer {
padding: 1rem;
border-top: 1px solid var(--border-color);
@ -500,6 +516,41 @@ header {
justify-content: flex-end;
}
/* About modal specific styles */
#about-modal .version-history {
border-left: 3px solid var(--primary-color);
padding-left: 20px;
margin-bottom: 20px;
}
#about-modal .version {
margin-bottom: 15px;
}
#about-modal .version h5 {
color: var(--primary-color);
margin-bottom: 5px;
}
#about-modal .features-list {
list-style-type: none;
padding-left: 0;
}
#about-modal .features-list li {
padding: 8px 0;
border-bottom: 1px solid var(--border-color);
}
#about-modal .features-list li:last-child {
border-bottom: none;
}
#about-modal .lead {
font-size: 1.1rem;
line-height: 1.6;
}
/* Tabs */
.tabs {
display: flex;

95
public/index.html
View File

@ -551,8 +551,103 @@
</footer>
</div>
<!-- About Modal -->
<div class="modal-backdrop" id="about-modal" style="display: none;">
<div class="modal">
<div class="modal-header">
<h2><i class="fas fa-info-circle"></i> About Transmission RSS Manager</h2>
<button class="modal-close" id="close-about-modal">&times;</button>
</div>
<div class="modal-body">
<div class="about-logo text-center mb-4">
<img src="https://powerdata.dk/wp-content/uploads/2023/08/PowerData-logo-1.png" alt="PowerData Logo" style="max-width: 200px;">
</div>
<h3>Developed by PowerData.dk</h3>
<p class="lead mb-4">Created by Michael Bay-Laursen, a passionate developer with a dedication to creating elegant, powerful automation solutions.</p>
<div class="card mb-4">
<div class="card-header">
<h4>About the Developer</h4>
</div>
<div class="card-body">
<p>Michael Bay-Laursen is the talented founder of PowerData.dk, bringing years of experience in system automation, network management, and web application development to create tools that simplify complex tasks.</p>
<p>With a focus on user experience and robust functionality, Michael has designed this application to make media management accessible to everyone while providing the power and flexibility that advanced users demand.</p>
</div>
</div>
<h4>Key Features</h4>
<ul class="features-list">
<li><strong>Intelligent RSS Integration</strong> - Automatically download content based on customizable filters</li>
<li><strong>Smart Media Organization</strong> - Categorize and organize your downloads automatically</li>
<li><strong>One-Click Updates</strong> - Stay current with the latest features and improvements</li>
<li><strong>Responsive Interface</strong> - Manage your downloads from any device</li>
<li><strong>Advanced Content Detection</strong> - Automatic categorization of various media types</li>
<li><strong>Transmission Integration</strong> - Seamless control of your Transmission client</li>
</ul>
<h4>Version History</h4>
<div class="version-history">
<div class="version">
<h5>v2.0.0 - March 2025</h5>
<ul>
<li>Git-based installation and update system</li>
<li>System status dashboard with version checking</li>
<li>One-click updates through web interface</li>
<li>Automatic Transmission installation</li>
</ul>
</div>
<div class="version">
<h5>v1.2.0 - February 2025</h5>
<ul>
<li>Enhanced media organization</li>
<li>Improved transmission client integration</li>
<li>Better error handling</li>
</ul>
</div>
<div class="version">
<h5>v1.0.0 - January 2025</h5>
<ul>
<li>Initial release</li>
<li>RSS feed integration with torrent downloads</li>
<li>Basic web interface</li>
</ul>
</div>
</div>
<div class="text-center mt-4">
<p><strong>Transmission RSS Manager v2.0.0</strong></p>
<p>© 2025 PowerData.dk - All Rights Reserved</p>
<p><a href="https://powerdata.dk" target="_blank">Visit PowerData.dk</a></p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="close-about-btn">Close</button>
</div>
</div>
</div>
<!-- JavaScript Files -->
<script src="/js/system-status.js"></script>
<script src="/js/app.js"></script>
<!-- About Modal Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Show about modal
document.getElementById('show-about-modal').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('about-modal').style.display = 'flex';
});
// Close modal handlers
document.getElementById('close-about-modal').addEventListener('click', closeAboutModal);
document.getElementById('close-about-btn').addEventListener('click', closeAboutModal);
function closeAboutModal() {
document.getElementById('about-modal').style.display = 'none';
}
});
</script>
</body>
</html>