Advertisement
metalx1000

SMS JSON reader

Jan 14th, 2024 (edited)
1,574
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1">
  5.     <style>
  6. body {
  7.   margin: 0 auto;
  8.   max-width: 800px;
  9.   padding: 0 20px;
  10. }
  11.  
  12. .container {
  13.   border: 2px solid #dedede;
  14.   background-color: #f1f1f1;
  15.   border-radius: 5px;
  16.   padding: 10px;
  17.   margin: 10px 0;
  18.   margin-left: auto;
  19.   margin-right: 0;
  20. }
  21.  
  22. .darker {
  23.   border-color: #ccc;
  24.   background-color: #ddd;
  25.   margin-left: 0;
  26.   margin-right: auto;
  27. }
  28.  
  29. .container::after {
  30.   content: "";
  31.   clear: both;
  32.   display: table;
  33. }
  34.  
  35. .container img {
  36.   float: left;
  37.   max-width: 60px;
  38.   width: 100%;
  39.   margin-right: 20px;
  40.   border-radius: 50%;
  41. }
  42.  
  43. .container .right {
  44.   text-align: right;
  45.   float: right;
  46. }
  47.  
  48. .time-right {
  49.   float: right;
  50.   color: #aaa;
  51. }
  52.  
  53. .time-left {
  54.   float: left;
  55.   color: #999;
  56. }
  57.     </style>
  58.   </head>
  59.   <body>
  60.  
  61.     <h2>Messages</h2>
  62.     <h5 id="counter"></h5>
  63.     <div id="form" style="display: none;">
  64.       <form action="#" method="GET">
  65.         <label for="number">Number:</label><br>
  66.         <input type="tel" id="number" name="number"><br>
  67.         <label for="user_1">Name 1:</label><br>
  68.         <input type="text" id="user_1" name="user_1" value="Sent"><br>
  69.         <label for="user_2">Name 2:</label><br>
  70.         <input type="text" id="user_2" name="user_2" value="Recieved"><br><br>
  71.         <input type="submit" value="Submit">
  72.       </form>
  73.     </div>
  74.     <div id="msg-box">Phone Number Needed</div>
  75.  
  76.   </body>
  77.   <script>
  78.     var messages = [];
  79.     const msg_box = document.querySelector("#msg-box");
  80.     const counter = document.querySelector("#counter");
  81.     var count = 0;
  82.     const queryString = window.location.search;
  83.     const urlParams = new URLSearchParams(queryString);
  84.     const number = "1"+urlParams.get('number');
  85.     var user_1 = urlParams.get('user_1');
  86.     var user_2 = urlParams.get('user_2');
  87.  
  88.     if(user_1 == ""){user_1 = null};
  89.     if(user_2 == ""){user_1 = "recieved"};
  90.  
  91.     if(number != "1null" ){
  92.       get_messages()
  93.     }else{
  94.       document.querySelector("#form").style.display = "block";
  95.     };
  96.  
  97.     function get_messages(){
  98.       msg_box.innerHTML="Loading...";
  99.  
  100.       get('sms.json', function(data){
  101.         messages=JSON.parse(data).messages;
  102.         msg_box.innerHTML="";
  103.         get_bynumber(`+${number}`);
  104.       });
  105.     }
  106.  
  107.     function get_bynumber(number){
  108.       let numfmt = formatPhoneNumber(number);
  109.       for( msg of messages ){
  110.         if ( msg.address == number ){
  111.           if(msg.body != ""){
  112.             count++;
  113.             counter.innerText=`count ${count}`
  114.             let cl="container";
  115.             let alg="right";
  116.             let user=user_1;
  117.             if (msg.type == 2 ){
  118.               cl="container darker";
  119.               alg="left";
  120.               user=`${user_2} - ${numfmt}`;
  121.             }
  122.  
  123.             var d = new Date(msg.date);
  124.  
  125.             msg_box.innerHTML += `<div class="${cl}" style="width:80%">
  126.  
  127.               <div class="${alg}" style="width:100%;">${user}</div>
  128.               <p>${msg.body}</p>
  129.               <span class="time-left">${d}</span>
  130.               </div>`;
  131.           }
  132.         }
  133.       }
  134.     }
  135.  
  136.     function formatPhoneNumber(phoneNumberString) {
  137.       var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
  138.       var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
  139.       if (match) {
  140.         var intlCode = (match[1] ? '+1 ' : '');
  141.         return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('');
  142.       }
  143.       return null;
  144.     }
  145.  
  146.     function get(url, success) {
  147.       var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  148.       xhr.open('GET', url);
  149.       xhr.onreadystatechange = function() {
  150.         if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
  151.       };
  152.       xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  153.       xhr.send();
  154.       return xhr;
  155.     }
  156.  
  157.   </script>
  158. </html>
  159.  
  160.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement