Skip to content

Commit aa2cfa5

Browse files
codebudecodebude
committed
Style about button as proper button with theme support
- Change about button from text link to styled button - Add background colors that match light/dark themes - Use proper padding and rounded corners for button appearance - Ensure button adapts to current theme colors
1 parent 9353898 commit aa2cfa5

4 files changed

Lines changed: 159 additions & 7 deletions

File tree

‎docker-compose-dev.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
services:
2-
masscode-web:
2+
takecode:
33
build:
44
context: .
55
ports:

‎public/index.html‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,17 @@ <h1 class="text-2xl font-bold truncate">takeCode</h1>
4646
</div>
4747
<footer class="p-4 border-t border-gray-200 dark:border-gray-600">
4848
<div class="flex items-center justify-between">
49-
<a href="https://github.com/codebude/takecode" target="_blank" class="text-gray-600 hover:text-gray-800 transition-colors dark:text-gray-400 dark:hover:text-white">
50-
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
51-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
52-
</svg>
53-
</a>
54-
<span class="text-gray-500 text-sm dark:text-gray-400">__VERSION__</span>
49+
<div class="flex items-center space-x-4">
50+
<a href="https://github.com/codebude/takecode" target="_blank" class="text-gray-600 hover:text-gray-800 transition-colors dark:text-gray-400 dark:hover:text-white">
51+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
52+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
53+
</svg>
54+
</a>
55+
<button id="about-btn" class="bg-gray-200 text-gray-900 px-3 py-1.5 rounded-md hover:bg-gray-300 transition-colors dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 text-sm font-medium" title="About & Credits">
56+
About & Credits
57+
</button>
58+
</div>
59+
<span class="text-gray-500 text-sm dark:text-gray-400">__VERSION__</span>
5560
</div>
5661
</footer>
5762
</aside>
@@ -74,5 +79,22 @@ <h1 class="text-2xl font-bold truncate">takeCode</h1>
7479
};
7580
</script>
7681
<script type="module" src="js/app.js?v=__VERSION__"></script>
82+
83+
<!-- About Modal -->
84+
<div id="about-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
85+
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl max-h-[80vh] overflow-hidden">
86+
<div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-600">
87+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">About & Credits</h3>
88+
<button id="close-about-modal" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
89+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
90+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
91+
</svg>
92+
</button>
93+
</div>
94+
<div id="about-content" class="p-6 overflow-y-auto max-h-[calc(80vh-120px)]">
95+
<!-- About content will be loaded here -->
96+
</div>
97+
</div>
98+
</div>
7799
</body>
78100
</html>

‎public/js/app.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -686,4 +686,49 @@ document.addEventListener('DOMContentLoaded', () => {
686686
const tree = buildTree(rootFolders);
687687
document.getElementById('sidebar-content').appendChild(tree);
688688
}
689+
690+
// About modal functionality
691+
const aboutBtn = document.getElementById('about-btn');
692+
const aboutModal = document.getElementById('about-modal');
693+
const closeAboutModal = document.getElementById('close-about-modal');
694+
const aboutContent = document.getElementById('about-content');
695+
696+
function showAboutModal() {
697+
// Load about content
698+
fetch('pages/about.html')
699+
.then(response => response.text())
700+
.then(html => {
701+
aboutContent.innerHTML = html;
702+
aboutModal.classList.remove('hidden');
703+
document.body.style.overflow = 'hidden'; // Prevent background scrolling
704+
})
705+
.catch(error => {
706+
console.error('Error loading about content:', error);
707+
aboutContent.innerHTML = '<p class="text-red-500">Error loading about content.</p>';
708+
aboutModal.classList.remove('hidden');
709+
document.body.style.overflow = 'hidden';
710+
});
711+
}
712+
713+
function hideAboutModal() {
714+
aboutModal.classList.add('hidden');
715+
document.body.style.overflow = ''; // Restore scrolling
716+
}
717+
718+
aboutBtn.addEventListener('click', showAboutModal);
719+
closeAboutModal.addEventListener('click', hideAboutModal);
720+
721+
// Close modal when clicking outside
722+
aboutModal.addEventListener('click', (e) => {
723+
if (e.target === aboutModal) {
724+
hideAboutModal();
725+
}
726+
});
727+
728+
// Close modal with Escape key
729+
document.addEventListener('keydown', (e) => {
730+
if (e.key === 'Escape' && !aboutModal.classList.contains('hidden')) {
731+
hideAboutModal();
732+
}
733+
});
689734
});

‎public/pages/about.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<div class="text-center mb-6">
2+
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">About takeCode</h2>
3+
<p class="text-lg text-gray-600 dark:text-gray-300">A modern web interface for your code snippets</p>
4+
</div>
5+
6+
<div class="space-y-6">
7+
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg">
8+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">What is takeCode?</h3>
9+
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
10+
takeCode is a modern, responsive web interface that allows you to browse and search through your massCode snippet collections.
11+
Built with performance and usability in mind, it provides syntax highlighting, theme support, and powerful search capabilities.
12+
</p>
13+
</div>
14+
15+
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg">
16+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Features</h3>
17+
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
18+
<li class="flex items-center">
19+
<span class="text-green-500 mr-2">✓</span>
20+
Real-time regex search with highlighting
21+
</li>
22+
<li class="flex items-center">
23+
<span class="text-green-500 mr-2">✓</span>
24+
Syntax highlighting for 200+ languages
25+
</li>
26+
<li class="flex items-center">
27+
<span class="text-green-500 mr-2">✓</span>
28+
Light, dark, and auto themes
29+
</li>
30+
<li class="flex items-center">
31+
<span class="text-green-500 mr-2">✓</span>
32+
Responsive design for all devices
33+
</li>
34+
<li class="flex items-center">
35+
<span class="text-green-500 mr-2">✓</span>
36+
One-click copy to clipboard
37+
</li>
38+
<li class="flex items-center">
39+
<span class="text-green-500 mr-2">✓</span>
40+
Docker ready deployment
41+
</li>
42+
</ul>
43+
</div>
44+
45+
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg">
46+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Credits</h3>
47+
<div class="space-y-4">
48+
<div>
49+
<h4 class="font-medium text-gray-900 dark:text-white">Built with</h4>
50+
<ul class="text-gray-700 dark:text-gray-300 mt-2 space-y-1">
51+
<li>• <a href="https://tailwindcss.com" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" target="_blank">Tailwind CSS</a> - Utility-first CSS framework</li>
52+
<li>• <a href="https://prismjs.com" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" target="_blank">Prism.js</a> - Syntax highlighting</li>
53+
<li>• <a href="https://masscode.io" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" target="_blank">massCode</a> - Code snippet manager</li>
54+
</ul>
55+
</div>
56+
57+
<div>
58+
<h4 class="font-medium text-gray-900 dark:text-white">Inspired by</h4>
59+
<p class="text-gray-700 dark:text-gray-300 mt-2">
60+
The clean interface and functionality of massCode, with a focus on web accessibility and modern UX patterns.
61+
</p>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg">
67+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Connect</h3>
68+
<div class="flex flex-wrap gap-4">
69+
<a href="https://github.com/codebude/takecode" target="_blank"
70+
class="inline-flex items-center px-4 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors">
71+
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
72+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
73+
</svg>
74+
View on GitHub
75+
</a>
76+
<a href="https://hub.docker.com/r/codebude/takecode" target="_blank"
77+
class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
78+
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
79+
<path d="M13.983 9.152h-.359c-.369 0-.666.297-.666.666v2.666c0 .369.297.666.666.666h.359c.369 0 .666-.297.666-.666V9.818c0-.369-.297-.666-.666-.666zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1.5 15h-3c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h3c.276 0 .5.224.5.5s-.224.5-.5.5z"/>
80+
</svg>
81+
Docker Hub
82+
</a>
83+
</div>
84+
</div>
85+
</div>

0 commit comments

Comments
 (0)