-
$name
+
$domain_display
$desc_html
$emoji $cat
@@ -533,54 +674,147 @@ document.addEventListener('DOMContentLoaded',function(){
const isLoggedIn=sessionStorage.getItem('secubox_token')!==null;
if(isLoggedIn){
- // Unlock protected cards
protectedCards.forEach(c=>c.classList.add('unlocked'));
loginBanner.classList.add('hidden');
}else if(protectedCards.length===0){
- // No protected content, hide banner
loginBanner.classList.add('hidden');
}
+ // Current filters state
+ let currentCat='all';
+ let currentCap='';
+ let currentAudience='all';
+
+ function applyFilters(){
+ cards.forEach(c=>{
+ let show=true;
+ // Category/type filter
+ if(currentCat!=='all'){
+ show=c.dataset.category===currentCat||c.dataset.type===currentCat;
+ }
+ // Capability filter
+ if(show&¤tCap){
+ const caps=c.dataset.caps||'';
+ show=caps.toLowerCase().includes(currentCap.toLowerCase());
+ }
+ // Audience filter
+ if(show&¤tAudience!=='all'){
+ const aud=c.dataset.audience||'';
+ show=aud.toLowerCase()===currentAudience.toLowerCase();
+ }
+ // Protected filter
+ if(show&&c.dataset.protected&&!isLoggedIn)show=false;
+ c.style.display=show?'':'none';
+ });
+ }
+
+ // View toggle
document.querySelectorAll('.view-btn[data-view]').forEach(b=>b.onclick=function(){
document.querySelectorAll('.view-btn[data-view]').forEach(x=>x.classList.remove('active'));
this.classList.add('active');
container.className='view-'+this.dataset.view;
});
+ // Tag cloud toggle
document.getElementById('toggleCloud').onclick=function(){
cloud.classList.toggle('visible');
this.classList.toggle('active');
};
- function filter(cat){
- cards.forEach(c=>{
- let show = cat==='all' || c.dataset.category===cat || c.dataset.type===cat;
- if(c.dataset.protected && !isLoggedIn) show=false;
- c.style.display = show ? '' : 'none';
- });
- }
-
+ // Category tabs
document.querySelectorAll('.cat-tab,.tag').forEach(t=>t.onclick=function(){
document.querySelectorAll('.cat-tab,.tag').forEach(x=>x.classList.remove('active'));
this.classList.add('active');
- filter(this.dataset.cat);
+ currentCat=this.dataset.cat;
+ applyFilters();
});
+ // Capability filter
+ document.querySelectorAll('.cap-filter').forEach(c=>c.onclick=function(){
+ document.querySelectorAll('.cap-filter').forEach(x=>x.classList.remove('active'));
+ if(currentCap===this.dataset.cap){
+ currentCap='';
+ }else{
+ this.classList.add('active');
+ currentCap=this.dataset.cap;
+ }
+ applyFilters();
+ });
+
+ // Audience filter
+ document.querySelectorAll('.audience-btn').forEach(a=>a.onclick=function(){
+ document.querySelectorAll('.audience-btn').forEach(x=>x.classList.remove('active'));
+ this.classList.add('active');
+ currentAudience=this.dataset.audience;
+ applyFilters();
+ });
+
+ // Search
search.oninput=function(){
const q=this.value.toLowerCase();
+ if(q===''){
+ applyFilters();
+ return;
+ }
cards.forEach(c=>{
let show=c.dataset.search.toLowerCase().includes(q);
- if(c.dataset.protected && !isLoggedIn) show=false;
+ if(c.dataset.protected&&!isLoggedIn)show=false;
c.style.display=show?'':'none';
});
};
+
+ // Dynamic preview modal
+ const previewModal=document.createElement('div');
+ previewModal.id='previewModal';
+ previewModal.className='preview-modal';
+ previewModal.innerHTML='
';
+ document.body.appendChild(previewModal);
+
+ previewModal.querySelector('.preview-close').onclick=function(){
+ previewModal.classList.remove('active');
+ document.getElementById('previewFrame').src='about:blank';
+ };
+ previewModal.onclick=function(e){
+ if(e.target===previewModal){
+ previewModal.classList.remove('active');
+ document.getElementById('previewFrame').src='about:blank';
+ }
+ };
+
+ // Add preview button to each card
+ cards.forEach(card=>{
+ if(card.classList.contains('video'))return; // Skip videos
+ const previewBtn=document.createElement('button');
+ previewBtn.className='preview-btn';
+ previewBtn.innerHTML='👁';
+ previewBtn.title='Preview';
+ previewBtn.onclick=function(e){
+ e.preventDefault();
+ e.stopPropagation();
+ const url=card.href;
+ const name=card.querySelector('.card-title').textContent;
+ document.getElementById('previewFrame').src=url;
+ document.getElementById('previewTitle').textContent=name;
+ document.getElementById('previewLink').href=url;
+ previewModal.classList.add('active');
+ };
+ card.querySelector('.card-preview').appendChild(previewBtn);
+ });
+
+ // Keyboard shortcut
+ document.onkeydown=function(e){
+ if(e.key==='Escape'){
+ previewModal.classList.remove('active');
+ document.getElementById('previewFrame').src='about:blank';
+ }
+ };
});