Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- body {
- margin: 0 auto;
- max-width: 800px;
- padding: 0 20px;
- }
- .container {
- border: 2px solid #dedede;
- background-color: #f1f1f1;
- border-radius: 5px;
- padding: 10px;
- margin: 10px 0;
- margin-left: auto;
- margin-right: 0;
- }
- .darker {
- border-color: #ccc;
- background-color: #ddd;
- margin-left: 0;
- margin-right: auto;
- }
- .container::after {
- content: "";
- clear: both;
- display: table;
- }
- .container img {
- float: left;
- max-width: 60px;
- width: 100%;
- margin-right: 20px;
- border-radius: 50%;
- }
- .container .right {
- text-align: right;
- float: right;
- }
- .time-right {
- float: right;
- color: #aaa;
- }
- .time-left {
- float: left;
- color: #999;
- }
- </style>
- </head>
- <body>
- <h2>Messages</h2>
- <h5 id="counter"></h5>
- <div id="form" style="display: none;">
- <form action="#" method="GET">
- <label for="number">Number:</label><br>
- <input type="tel" id="number" name="number"><br>
- <label for="user_1">Name 1:</label><br>
- <input type="text" id="user_1" name="user_1" value="Sent"><br>
- <label for="user_2">Name 2:</label><br>
- <input type="text" id="user_2" name="user_2" value="Recieved"><br><br>
- <input type="submit" value="Submit">
- </form>
- </div>
- <div id="msg-box">Phone Number Needed</div>
- </body>
- <script>
- var messages = [];
- const msg_box = document.querySelector("#msg-box");
- const counter = document.querySelector("#counter");
- var count = 0;
- const queryString = window.location.search;
- const urlParams = new URLSearchParams(queryString);
- const number = "1"+urlParams.get('number');
- var user_1 = urlParams.get('user_1');
- var user_2 = urlParams.get('user_2');
- if(user_1 == ""){user_1 = null};
- if(user_2 == ""){user_1 = "recieved"};
- if(number != "1null" ){
- get_messages()
- }else{
- document.querySelector("#form").style.display = "block";
- };
- function get_messages(){
- msg_box.innerHTML="Loading...";
- get('sms.json', function(data){
- messages=JSON.parse(data).messages;
- msg_box.innerHTML="";
- get_bynumber(`+${number}`);
- });
- }
- function get_bynumber(number){
- let numfmt = formatPhoneNumber(number);
- for( msg of messages ){
- if ( msg.address == number ){
- if(msg.body != ""){
- count++;
- counter.innerText=`count ${count}`
- let cl="container";
- let alg="right";
- let user=user_1;
- if (msg.type == 2 ){
- cl="container darker";
- alg="left";
- user=`${user_2} - ${numfmt}`;
- }
- var d = new Date(msg.date);
- msg_box.innerHTML += `<div class="${cl}" style="width:80%">
- <div class="${alg}" style="width:100%;">${user}</div>
- <p>${msg.body}</p>
- <span class="time-left">${d}</span>
- </div>`;
- }
- }
- }
- }
- function formatPhoneNumber(phoneNumberString) {
- var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
- var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
- if (match) {
- var intlCode = (match[1] ? '+1 ' : '');
- return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('');
- }
- return null;
- }
- function get(url, success) {
- var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
- xhr.open('GET', url);
- xhr.onreadystatechange = function() {
- if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
- };
- xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
- xhr.send();
- return xhr;
- }
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement