// initial render renderApps();
/* main container */ .container max-width: 1300px; margin: 2rem auto; padding: 0 1.5rem;
<div id="appsContainer" class="apps-grid"> <!-- dynamic cards injected --> </div> <div class="footer-note"> AppSafe Club — independent safety ratings based on open-source intelligence, permission analysis & real user feedback. </div> </div>
.app-card background: white; border-radius: 24px; overflow: hidden; transition: all 0.25s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid #e2edf2; appsafe club
.badge font-size: 0.7rem; background: #f0f4f7; padding: 0.2rem 0.6rem; border-radius: 30px;
.app-card:hover transform: translateY(-5px); box-shadow: 0 20px 25px -12px rgba(0,0,0,0.15);
.desc font-size: 0.85rem; color: #3e5a6b; margin: 0.5rem 0; // initial render renderApps(); /* main container */
.search-box flex: 2; min-width: 200px;
.badge-safe background: #dff0e8; color: #1e6f5c; padding: 0.2rem 0.8rem; border-radius: 30px; font-size: 0.8rem; font-weight: 600; display: inline-block;
/* header & nav */ .top-bar background: linear-gradient(135deg, #0b2b3b 0%, #1a4a5f 100%); color: white; padding: 1rem 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); // initial render renderApps()
let currentFilterCategory = "all"; let currentSearchTerm = ""; let currentSafetyThreshold = 0;
.category-filter display: flex; gap: 0.6rem; flex-wrap: wrap;