<style> .members-container { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); display: flex; background-size: cover; background-position: center center; background-attachment: fixed;); align-items:flex-start; flex-direction: row; width: 105%; line-height: 1.2rem; font-size: 14px; font-weight: 500; color: white; min-width: 320px; padding: 0; margin-left: -5px; margin-right: -10px; position: relative; margin-bottom: 5px; text-decoration: none !important; color: white !important; } .left-child-container { display: flex; flex-direction: column; } .members-container>img { height: 50px; width: 50px; object-fit: cover; padding: 3px; border: 1px solid white; margin: 5px; } .left-child-container>span { display: block; width: max-content; max-width: 150px; overflow: hidden; } .right-child-container { display: flex; flex-direction: column; position: absolute; right: 0; justify-content: flex-end; padding: 5px; } .right-child-container>span { opacity: 0.7; display: block; text-align: right; } .rank { padding: 1px 5px 1px 5px; border-radius: 10px; } </style> <div members-list></div> <template members-template> <a class="members-container" members-cont=""> <img profile-img="" src="https://i.ibb.co/Gv8K3f4/47fc1a285daf65a850994055d479318e243242ca.jpg"/> <div class='left-child-container'> <span nickname>ptcrebornofficial</span> <span rank="" class="rank" style="background: rgb(102, 153, 0);">🥇Novice</span> <span country="" id="user-country"><img src="https://flagsapi.com/PH/shiny/64.png" style="vertical-align: middle; width: 24px !important;height: 24px !important;object-fit: cover;"><span style="font-weight: 600;">Philippines (PH)</span></span> </div> <div class='right-child-container'> <span date>a month ago</span> <span statistics>❤️382 💬12 🧵3</span> <span totalpoints>Total: 1,000 points</span> </div> </a> </template> <script> window.addEventListener('load', async function() { await initFunctions(['FirebaseModule']); loadMembers(); }, false); function query(id) { return document.getElementById(id); } function qpro(id) { return document.querySelector('[' + id + ']'); } async function loadMembers() { // get the lists of members randomly (1st come first served) let data = await FirebaseModule.get('https://storehaccounts-website-default-rtdb.firebaseio.com/ptc_users.json'); data = JSON.parse(data); data = Object.entries(data); for(i=0; i<data.length; i++) { // create the template and append to the list let id = data[i][0]; let content = data[i][1]; JBLOBFunctions.getBlobRecord('https://jsonblob.com/api/jsonBlob/' + content.i, function(new_data) { new_data = JSON.parse(new_data); let myDoc = qpro('members-template').content.cloneNode(true).children[0]; myDoc.id = id; myDoc.href = 'https://storehaccounts.blogspot.com/p/your-account-page.html?' + content.i; myDoc.target = '_blank'; qpro('members-list').appendChild(myDoc); /*<div class='members-container'> <img profile-img src='https://i.ibb.co/Gv8K3f4/47fc1a285daf65a850994055d479318e243242ca.jpg'/> <div class='left-child-container'> <span nickname>ptcrebornofficial</span> <span rank="" class="rank" style="background: rgb(102, 153, 0);">🥇Novice</span> <span country="" id="user-country"><img style="vertical-align: middle; width: 24px !important;height: 24px !important;object-fit: cover;" src="https://flagsapi.com/PH/shiny/64.png"><span style="font-weight: 600;">Philippines (PH)</span></span> </div> <div class='right-child-container'> <span date>a month ago</span> <span statistics>❤️382 💬12 🧵3</span> <span totalpoints>Total: 1,000 points</span> </div> </div>*/ let rank = Ranks.getRank(new_data); let comments = (new_data.hasOwnProperty('comments') ? '💬' + new_data.comments + ' ' : ''); let threads = (new_data.hasOwnProperty('threads') ? '🧵' + new_data.threads: ''); query(id).style.backgroundImage = 'linear-gradient(rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0.9) 90%), url(' + new_data.background_image + ')'; query(id).querySelector('[profile-img]').src = new_data.prof_image; query(id).querySelector('[nickname]').innerText = new_data.nickname; query(id).querySelector('[rank]').innerText = rank.name; query(id).querySelector('[country]').innerHTML = ((new_data.hasOwnProperty('country') && new_data.country.length) > 0 ? new_data.country : '<span country="" id="user-country"><img src="https://static.wixstatic.com/media/e6f56d_a2b47380e8504300bfb2844e4a8a5159~mv2.gif" style="vertical-align: middle; padding: 2px; width: 24px !important;height: 24px !important;object-fit: cover;"><span style="font-weight: 600;">ALIEN</span></span>'); query(id).querySelector('[date]').innerText = moment(parseInt(new_data.joined)).fromNow(); query(id).querySelector('[statistics]').innerHTML = comments + '' + threads; query(id).querySelector('[totalpoints]').innerText = 'Total: <' + rank.points + ' points'; }); } } </script>