<style> .notification-parent { background: #2D3844; border: 1px gray black; line-height: 1.2rem; width: 100%; max-height: 200px; height: 200px; overflow: auto; } .notification-container { color: #87A3BF; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 10px; font-size: 14px; min-height: 50px; } .notification-container img { width: 32px; height: 32px; margin-right: 10px; float: left; } .notification-container span { font-size: 14px; font-weight: 700; } .notification-date { font-size: 12px !important; opacity: 0.7; font-weight: 300; margin-left: 5px; margin-right: 5px; float: right; } .notification-date-members { font-size: 12px !important; float: right; opacity: 0.7; font-weight: 600; margin-left: 5px; margin-right: 5px; } .notification-title-heading { display: inline-block; font-style: italic; font-weight: 400; color: white; opacity: 0.7; } .notifications button { all: unset; background: #50789D; color: white; padding: 10px; cursor: pointer; background: #1E1F22; } </style> <div class="notifications"> <button onclick="clickNotif(0)">Threads</button> <button onclick="clickNotif(1)">Comments</button> <button onclick="clickNotif(2)">Members</button> <div class="notifications-child-container"> </div> </div> <div id='threads-toggle' style='display: none;'> <div id="notif-threads" class="notification-parent"> <template threads-template> <a div-link-members="" href="" style="text-decoration: none;" target="_blank"> <div class="notification-container"> <img src="https://images.gamebanana.com/img/ico/games/5f8765f11411e.png" thread-user-img=""/> <span thread-time-ago='' class="notification-date">(16 min ago)</span> <span thread-title=''>Giant clash out of the picture as NAVI Javelins miss ESL Impact playoffs</span> </div> </a> </template> </div> </div> <div id='comments-toggle' style="display: none;"> <div id="notif-comments" class="notification-parent"> <template comment-template> <a div-link-members="" href="" style="text-decoration: none;" target="_blank"> <div class="notification-container"> <img profile-img="" src="https://images.gamebanana.com/img/ico/games/5f8765f11411e.png"/> <span date-time class="notification-date">(16 min ago)</span> <span title-comment>Giant clash out of the picture as NAVI Javelins miss ESL Impact playoffs </span></div> </a> </template> </div> </div> <div id='members-toggle' style="display: none;"> <div id="notif-members" class="notification-parent"> <template member-template> <a div-link-members="" href="" style="text-decoration: none;" target="_blank"> <div class="notification-container"> <img profile-img="" src="https://images.gamebanana.com/img/ico/games/5f8765f11411e.png"/> <span profile-nickname class="notification-title-heading">ptcrebornofficial</span> <span time-date class="notification-date-members">(16 min ago)</span> <br/> <span>New Member</span> </div> </a> </template> </div> </div> <script> window.addEventListener('load', function() { loadThreads(); loadMembers(); loadComments(); clickNotif(0); }, false); function clickNotif(num) { document.querySelector('#threads-toggle').style.display = 'none'; document.querySelector('#comments-toggle').style.display = 'none'; document.querySelector('#members-toggle').style.display = 'none'; if(num == 0) document.querySelector('#threads-toggle').style.display = 'block'; if(num == 1) document.querySelector('#comments-toggle').style.display = 'block'; if(num == 2) document.querySelector('#members-toggle').style.display = 'block'; for(i=0; i<document.querySelectorAll('.notifications button').length; i++) { if(i == num) document.querySelectorAll('.notifications button')[i].style.background = '#2D3844'; else document.querySelectorAll('.notifications button')[i].style.background = '#50789D'; } } async function loadMembers() { // load members max of 10 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=data.length-1, j=0; j < 20; i--, j++) { let content = data[i][1]; let myDoc = document.querySelector('[member-template]').content.cloneNode(true).children[0]; let members_data = await JBLOBFunctions.getBlobRecordSync('https://jsonblob.com/api/jsonBlob/' + content.i, null); members_data = JSON.parse(members_data); /* <div class="notification-container"> <img profile-img src="https://images.gamebanana.com/img/ico/games/5f8765f11411e.png"/> <span profile-nickname class="notification-title-heading">ptcrebornofficial</span> <span time-date class="notification-date-members">(16 min ago)</span> <br/> <span>New Member</span> </div> */ myDoc.href = 'https://storehaccounts.blogspot.com/p/your-account-page.html?' + content.i; myDoc.querySelector('[profile-img]').src = members_data.prof_image; myDoc.querySelector('[profile-nickname]').innerText = members_data.nickname; myDoc.querySelector('[time-date]').innerText = moment(parseInt(members_data.joined)).fromNow(); document.querySelector('#notif-members').appendChild(myDoc); } } async function loadComments() { let data = await FirebaseModule.get('https://storehaccounts-comments-default-rtdb.firebaseio.com/comments.json'); data = JSON.parse(data); data = Object.entries(data); for(i=data.length-1; i>-1; i--) { /* <template comment-template> <div class="notification-container"> <img profile-img src="https://images.gamebanana.com/img/ico/games/5f8765f11411e.png"/> <span date-time class="notification-date">(16 min ago)</span> <span title-comment>Giant clash out of the picture as NAVI Javelins miss ESL Impact playoffs</ span> </div> </template> */ let id = data[i][0]; let content = data[i][1]; let myDoc = document.querySelector('[comment-template]').content.cloneNode(true).children[0]; myDoc.href = content.link + '#form-ptc-comment'; myDoc.querySelector('[profile-img]').src = content.userimg; myDoc.querySelector('[date-time]').innerText = moment(parseInt(id)).fromNow(); myDoc.querySelector('[title-comment]').innerText = content.content; document.querySelector('#notif-comments').appendChild(myDoc); } } async function loadThreads() { let data = await FirebaseModule.get('https://storehaccounts-threads-default-rtdb.firebaseio.com/threads.json'); data = JSON.parse(data); data = Object.entries(data); for(i=data.length-1; i>-1; i--) { let id = data[i][0] // id let content = data[i][1] // content let myDoc = document.querySelector('[threads-template]').content.cloneNode(true).children[0]; myDoc.href = 'https://storehaccounts.blogspot.com/p/ptc-post-official.html?' + id; myDoc.querySelector('[thread-user-img]').src = content.author.prof_img; myDoc.querySelector('[thread-time-ago]').innerText = moment(parseInt(content.details.date)).fromNow(); myDoc.querySelector('[thread-title]').innerText = content.content.title; document.querySelector('#notif-threads').appendChild(myDoc); } } </script>