<?php 
 
require_once('class.php_sqlite3_contact_form.php'); 
 
/* 
    Just an example of using the class.php_sqlite3_contact_form.php class. Not for production use. 
     
    file: example.php_sqlite3_contact_form.php 
    title: PHP SQLite3 Contact Form Manager Example 
    description: An example of using the php_sqlite3_contact_form class 
    license: BSD 3-Clause License <https://opensource.org/licenses/BSD-3-Clause> 
    requires: PHP SQLite3 
    uses: jQuery for example 
 
*/ 
 
// create new cform object 
$cform = new php_sqlite3_contact_form('contact_form.db'); 
// create tables if they don't exist 
$cform->create_tables(); 
 
function show_banned() 
{ 
  global $cform; 
 
  $result = $cform->get_banned_ips(); 
  $the_str = "<div class='banned-header'>Banned IPs</div><div class='banned-ips'>"; 
 
  while ($row = $result->fetchArray()) { 
    $the_str .= show_banned_row($row); 
  } 
  $the_str .= "</div>"; 
  return $the_str; 
} 
 
function show_banned_row($row) 
{ 
  $the_str = "<div class='ip-row'>"; 
  $the_str .= "<div class='fld'><div class='ip'>".$row['ip']."</div></div>"; 
  $the_str .= "<div class='fld'><div class='btn btn-unban-ip' data-ip='".$row['ip']."'>Unban IP</div></div>"; 
  $the_str .= "</div>"; 
  return $the_str; 
} 
 
function show_message_row_inner($row) 
{ 
  $the_str = ""; 
  $the_str .= "<div class='fld '><input class='def-hide' type=text name='id' value='".$row['id']."' readonly></div>"; 
  $the_str .= "<div class='fld'><input type=text name='email' value='".$row['email']."'></div>"; 
  $the_str .= "<div class='fld'><input type=text name='subject' value='".$row['subject']."'></div>"; 
  $the_str .= "<div class='fld'><textarea name='message'>".$row['message']."</textarea></div>"; 
  $the_str .= "<div class='fld'><input class='def-hide' type=text name='ip' value='".$row['ip']."' readonly></div>"; 
  $the_str .= "<div class='fld'><input class='def-hide' type=text name='tstamp' value='".$row['tstamp']."' readonly></div>"; 
  $the_str .= "<div class='fld fldbtn'><div class='def-hide btn btn-update-message' data-id='".$row['id']."'>Update</div></div>"; 
  $the_str .= "<div class='fld fldbtn '><div class='def-hide btn btn-reset-message' data-id='".$row['id']."'>Reset</div></div>"; 
  $the_str .= "<div class='fld fldbtn '><div class='def-hide btn btn-delete-message' data-id='".$row['id']."'>Delete</div></div>"; 
  $the_str .= "<div class='fld fldbtn '><div class='def-hide btn btn-ban-ip' data-ip='".$row['ip']."'>Ban IP</div></div>"; 
   
  return $the_str; 
} // end show_message_row_inner 
 
function show_message_row($row) 
{ 
  $the_str = ""; 
  $the_str .= "<div class='message' msg-id='".$row['id']."'>"; 
  $the_str .= show_message_row_inner($row); 
  $the_str .= "</div>"; 
 
  return $the_str; 
} // end show_message_row 
 
function show_messages_list($messages) 
{ 
  $the_str = ""; 
  // as divs 
  while($row = $messages->fetchArray(SQLITE3_ASSOC)) 
    $the_str .= show_message_row($row);   
  return $the_str; 
} // end show_messages_list 
 
# gets ajax request and then returns json data and quits. 
if(!empty($_GET['ajax'])) 
{ 
  switch($_GET['ajax']) 
  { 
 
     
      case 'load_banned': 
        $return_arr[] = array( 
          "command" => 'html', 
          "selector" => ".banned-list", 
          "msg" => show_banned() 
        ); 
        break; // load_banned 
       
      case 'ip_unban': 
      $ip = $_POST['flds']['ip']; 
      $cform->unban_ip($ip); 
 
      $return_arr[] = array( 
        "command" => 'alert', 
        "msg" => "IP $ip has been unbanned." 
      ); 
 
      $return_arr[] = array( 
        "command" => 'html', 
        "selector" => ".banned-list", 
        "msg" => show_banned() 
      ); 
 
      break; // ip_unban 
 
    case 'ip_ban': 
      $ip = $_POST['flds']['ip']; 
 
      // if ip alreadu banned, alert already banned. 
      if($cform->check_banned($ip)) 
      { 
        $return_arr[] = array( 
          "command" => 'alert', 
          "msg" => "IP $ip is already banned." 
        ); 
        break; 
      }  
 
      $cform->ban_ip($ip); 
 
      $return_arr[] = array( 
        "command" => 'alert', 
        "msg" => "IP $ip has been banned." 
        #"data" => show_banned_list($cform->get_banned_ips()) 
      ); 
 
      $return_arr[] = array( 
        "command" => 'html', 
        "selector" => ".banned-list", 
        "msg" => show_banned() 
      ); 
 
      break; // ban_ip 
 
    case 'messages_get': 
      // $messages = $cform->get_messages(); 
      // $ret = array(); 
      // while($row = $messages->fetchArray(SQLITE3_ASSOC)) 
      // { 
      //   $ret[] = array( 
      //     "id"             => $row['id'], 
      //     "email"         => $row['email'], 
      //     "subject"     => $row['subject'], 
      //     "message"     => $row['message'], 
      //     "ip"             => $row['ip'], 
      //     "tstamp"         => $row['tstamp'] 
      //   ); 
      // } 
 
      $messages_html = show_messages_list($cform->get_messages()); 
 
      $return_arr[] = array( 
        "command"     => 'update_messages_list', 
        "data"           => $messages_html 
      ); 
 
    break; // messages_get 
 
    case 'message_get': 
      // just handle a row fetch for a single message 
      // show_message_row($row) 
      $id = $_POST['flds']['id']; 
      $message = $cform->get_message($id); 
      $row = $message->fetchArray(SQLITE3_ASSOC); 
 
      $the_str = show_message_row_inner($row); 
 
      $return_arr[] = array( 
        "command"     => 'update_message_row', 
        "id"        => $id, 
        "data"           => $the_str 
      ); 
 
      break; // message_get 
 
    case 'message_add': 
      // print array $_POST 
      // print_r($_POST); 
      $email    = $_POST['flds']['email']; 
      $subject  = $_POST['flds']['subject']; 
      $message  = $_POST['flds']['message']; 
      $ip       = $_POST['flds']['ip']; 
 
      $cform->add_message($email, $subject, $message, $ip); 
 
      $return_arr[] = array( 
        "command"     => 'reset_message_add_form' 
      ); 
 
      $return_arr[] = array( 
        "command"     => 'refresh_messages_list' 
      ); 
 
      $return_arr[] = array( 
        "command" => 'enable_input', 
        'selector' => '.message-add-form .btn-submit' 
      ); 
 
      break; // message_add 
 
    case 'message_delete': 
      $id = $_POST['flds']['id']; 
      $cform->delete_message($id); 
 
      $return_arr[] = array( 
        "command"     => 'remove_message_row', 
        "id" => $id 
      ); 
 
      break; // message_delete 
 
    case 'message_update': 
        // print_r($_POST); 
        // print_r($_POST['flds']); 
 
        $id = $_POST['flds']['id']; 
        $email    = $_POST['flds']['email']; 
        $subject  = $_POST['flds']['subject']; 
        $message  = $_POST['flds']['message']; 
        $ip       = $_POST['flds']['ip']; 
 
        $cform->update_message($id, $email, $subject, $message, $ip); 
 
        $return_arr[] = array( 
          "command"     => 'success', 
          "id"           => $id 
        ); 
 
        $return_arr[] = array( 
          "command"     => 'update_message_row', 
          "id"           => $id 
        ); 
 
        break; // message_update 
  } // end switch 
   
  // if we have a return array, send it back as json for javascript processing 
  if(!empty($return_arr) && is_array($return_arr)) 
    die(json_encode($return_arr)); 
   
  die(); // end ajax, end program. 
} // end ajax 
 
?> 
<!-- jQuery example manager --> 
<html> 
<head> 
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
  <script> 
    /* 
    // send_data structure 
    new_arr[key] = {}; 
    new_arr[key].col = the_col; 
    new_arr[key].val = the_val; 
 
    var url = "ajax.command_process.php?&ajax=customer_save&id="+db_id; 
    do_cmd_post(url, new_arr); 
    */ 
 
    function do_cmd_post(url, send_data) 
    { 
 
      $.post( url, { flds: send_data /* in php will appear as $_POST['flds']  */ },  
        function( return_data ) {  
          do_cmd_process(return_data);  
        }, "json" ); // punt any returned data to processor 
 
    } 
  </script> 
 
  <style> 
    html, body { 
    font-family: Arial, Helvetica, sans-serif; 
    padding:0;margin:0; 
    } 
 
  </style> 
 
<script> 
 
  function do_cmd_process(data) // handle data coming back from ajax 
  { 
 
    if (data instanceof Array) { 
      data.forEach(function(entry) { 
        console.log(entry.command); 
         
        //console.log(entry.message); 
        // handle returned commands // 
        switch(entry.command) 
        { 
          case 'alert': 
              alert(entry.msg); 
            break; 
         
          case 'reload': 
              window.location.replace('./'); 
            break; 
 
           
          case 'update_messages_list': 
              $('#messages-list').html(entry.data); 
            break; 
 
          case 'update_message_row': 
            // $the_str .= "<div class='message' msg-id='".$row['id']."'>"; 
            // the target div is a div with class: .message 
            // update html 
            $('.message[msg-id="'+entry.id+'"]').html(entry.data); 
            // remove any editing class 
            $('.message[msg-id="'+entry.id+'"]').removeClass('editing'); 
            break; 
           
          case 'remove_message_row': 
            // $the_str .= "<div class='message' msg-id='".$row['id']."'>"; 
            // the target div is a div with class: .message 
            // update html 
            $('.message[msg-id="'+entry.id+'"]').remove(); 
            break; 
 
 
 
          case 'refresh_messages_list': 
              var id = entry.id; 
              var url = "example.php_sqlite3_contact_form.php?&ajax=messages_get"; 
              do_cmd_post(url, {}); 
            break; 
           
          case 'refresh_message_row': 
              var id = entry.id; 
              var url = "example.php_sqlite3_contact_form.php?&ajax=message_get"; 
              do_cmd_post(url, {id: id}); 
            break; 
 
          case 'scrolltop': 
              $('html, body').animate({    scrollTop: $('body').offset().top - 190     }, 200); 
            break; 
 
          case 'reload_messages_list': 
              $('#messages-list').load('example.php_sqlite3_contact_form.php #messages-list'); 
            break; 
 
          case 'reset_message_add_form': 
              $('#message-add-form').each(function(){ 
                this.reset(); 
              }); 
            break; 
           
          case 'reset_message_add_form': 
              $('#message-add-form').each(function(){ 
                this.reset(); 
              }); 
            break; 
             
                            // generic commands // 
                            case 'alert': 
                                alert(entry.msg); 
                                break; 
                            case 'log': 
                                console.log(entry.msg); 
                                break; 
                            case 'append': 
                                $(entry.selector).append(entry.msg); 
                                break; 
                            case 'prepend': 
                                $(entry.selector).prepend(entry.msg); 
                                break; 
                            case 'html': 
                                $(entry.selector).html(entry.msg); 
                                break; 
                            case 'val': 
                                $(entry.selector).val(entry.msg); 
                                break; 
                            case 'focus': 
                                $(entry.selector).focus(); 
                                break; 
                            case 'blur': 
                                $(entry.selector).blur(); 
                                break; 
                            case 'clear': 
                                $(entry.selector).val(''); 
                                break; 
                            case 'js': 
                                eval(entry.msg); 
                                break; 
                            case 'disable_input': 
                                $(entry.selector).prop('disabled', true); 
                                break; 
                            case 'enable_input': 
                                $(entry.selector).prop('disabled', false); 
                                break; 
 
        } 
      }); 
    } 
  } 
 
</script> 
 
 
 
</head> 
<body> 
 
 
 
<script> 
 
    $(document).on('click', '.message', function() { 
      // switch all .def-hide on the message to .def-hide-show 
      var $this = $(this); 
      var $message = $this.closest('.message'); 
      $message.find('.def-hide').removeClass('def-hide').addClass('def-hide-show'); 
    }); 
 
    // on double click, hide if .def-hide-show is showing 
    $(document).on('dblclick', '.message', function() { 
      // switch all .def-hide-show on the message to .def-hide 
      var $this = $(this); 
      var $message = $this.closest('.message'); 
      $message.find('.def-hide-show').removeClass('def-hide-show').addClass('def-hide'); 
    }); 
 
    // on editing an input or textarea in .message, apply an editing class to the .message div 
    $(document).on('change', '.message input, .message textarea', function() { 
      var $this = $(this); 
      var $message = $this.closest('.message'); 
      $message.addClass('editing'); 
    }); 
 
 
     
 
  </script> 
 
<style> 
 
 
.section-button-wrapper { 
    width:100%; 
    margin:0px; padding:0px; 
    display: block; 
    background-color: #38c172;   
    border-bottom: 1px solid #28a162; 
  } 
 
 
 
  .section-button { 
    margin:0px; padding:0px; 
  display: inline-block; 
   
  padding: 10px 20px; 
  background-color: #38c172; 
  color: #fff; 
  border-radius: 5px; 
 
  text-align: center; 
  text-decoration: none; 
  font-size: 2vmax; 
 
  cursor: pointer; 
  transition: all 0.3s ease; 
  /* center */ 
  position: relative; 
  left: 10vw; 
  margin:2vw; 
   
   
 
 
  } 
 
  .section-button:hover { 
    background: #555; 
  } 
   
 
  </style> 
 
  <script> 
 
 
    $(document).ready(function(){ 
      $('#message-add').hide(); 
 
      $('.message-add-showhide').click(function(){ 
        /* if it has class 'showing' then remove class 'showing' */ 
        /* slide down if not showing */ 
        if($('#message-add').hasClass('showing')) 
        { 
          $('#message-add').removeClass('showing'); 
          $('#message-add').slideUp(); 
        } 
        else 
        { 
          $('#message-add').addClass('showing'); 
          $('#message-add').slideDown(); 
        } 
 
 
      }); 
    }); 
  </script> 
<div class='section-button-wrapper showhide-wrapper'> 
  <div class='section-button message-add-showhide'>show/hide add message</div> 
</div> 
 
<div id="message-add"> 
  <form id="message-add-form" action="javascript:void(0);" method="post"> 
  <div class='message-add-form'> 
 
              <div class='message-add-form-row'> 
                <div class='message-add-form-label'>Email</div> 
                <div class='message-add-form-input'><input type="text" name="email" placeholder="email" /></div> 
              </div> 
 
              <div class='message-add-form-row'> 
                <div class='message-add-form-label'>IP</div> 
                <div class='message-add-form-input'><input  type="text" name="ip" placeholder="ip" /></div> 
              </div> 
 
              <div class='message-add-form-row'> 
                <div class='message-add-form-label'>Subject</div> 
                <div class='message-add-form-input'><input type="text" name="subject" placeholder="subject" /></div> 
              </div> 
 
              <div class='message-add-form-row'> 
                <div class='message-add-form-label'>Message</div> 
                <div class='message-add-form-input'><textarea name="message" placeholder="message"></textarea></div> 
              </div> 
 
              <div class='message-add-form-row'> 
                <div class='message-add-form-label'></div> 
                <div class='message-add-form-input'><input class='btn btn-submit' type="submit" value="Add Message" /></div> 
              </div> 
 
  </div>   
 
  </form> 
</div> 
 
 
<style> 
 
   
/* CSS for the message-add form */ 
 
#message-add { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 70vh; 
  background-color: #d8f3dc; 
   
} 
 
.message-add-form { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  padding: 2rem; 
  border-radius: 1rem; 
  background-color: #fff; 
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); 
  max-width: 90%; 
  width: 30rem; 
} 
 
.message-add-form-row { 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: center; 
  margin: 0.5rem 0; 
  width: 100%; 
} 
 
.message-add-form-label { 
  font-size: 1.2rem; 
  font-weight: bold; 
  color: #226a51; 
  flex: 0.3; 
} 
 
.message-add-form-input { 
  flex: 0.7; 
} 
 
.message-add-form input[type="text"], 
.message-add-form textarea { 
  font-size: 1.2rem; 
  padding: 0.5rem; 
  border: none; 
  border-radius: 0.5rem; 
  background-color: #e2f0d9; 
  width: 100%; 
  transition: background-color 0.2s ease-in-out; 
  color: #226a51; 
} 
 
.message-add-form input[type="text"]:focus, 
.message-add-form textarea:focus { 
  outline: none; 
  background-color: #cfe5ce; 
} 
 
.message-add-form input[type="submit"] { 
  font-size: 1.2rem; 
  font-weight: bold; 
  color: #fff; 
  background-color: #4b8e74; 
  border: none; 
  border-radius: 0.5rem; 
  padding: 0.5rem 1rem; 
  margin-top: 1rem; 
  cursor: pointer; 
  transition: background-color 0.2s ease-in-out; 
} 
 
.message-add-form input[type="submit"]:hover { 
  background-color: #3a6e5a; 
} 
 
/* Responsive CSS for the message-add form */ 
 
@media screen and (max-width: 1024px) { 
  .message-add-form { 
    max-width: 100%; 
    width: 90%; 
  } 
   
  .message-add-form-label { 
    font-size: 1rem; 
    flex: 0.4; 
  } 
   
  .message-add-form-input { 
    flex: 0.6; 
  } 
} 
 
</style> 
 
<div class='section-button-wrapper btn-update-list-wrapper'> 
  <div class='section-button btn-update-list'>Refresh List</div> 
</div> 
 
 
 
 
<div id="messages-list" class='messages-list'> 
  <?php  
 
    // echo show_messages_list($cform->get_messages()); 
  ?> 
 
</div> 
<script> 
  $(function() { 
    var send_data = {}; 
    var url = "example.php_sqlite3_contact_form.php?&ajax=messages_get"; 
    do_cmd_post(url, send_data); 
  }); // end document ready 
  </script> 
 
<script> 
 
        $(document).ready(function() { 
 
          // hide update section 
 
          // add message 
          $('#message-add-form').submit(function() { 
            // disable .message-add-form .btn-submit 
            $('.message-add-form .btn-submit').attr('disabled', 'disabled');  
 
            var email = $('input[name=email]').val(); 
            var subject = $('input[name=subject]').val(); 
            var message = $('textarea[name=message]').val(); 
            var ip = $('input[name=ip]').val(); 
 
            var send_data = {}; 
            send_data['email'] = email; 
            send_data['subject'] = subject; 
            send_data['message'] = message; 
            send_data['ip'] = ip; 
 
            var url = "example.php_sqlite3_contact_form.php?&ajax=message_add"; 
            do_cmd_post(url, send_data); 
 
          }); 
 
          $(document).on('click', '.btn-update-message', function() { 
 
            // get the data 
            var id = $(this).parent().parent().find('input[name=id]').val(); 
            var email = $(this).parent().parent().find('input[name=email]').val(); 
            var subject = $(this).parent().parent().find('input[name=subject]').val(); 
            var message = $(this).parent().parent().find('textarea[name=message]').val(); 
            var ip = $(this).parent().parent().find('input[name=ip]').val(); 
             
 
            var send_data = {}; 
            send_data['id'] = id; 
            send_data['email'] = email; 
            send_data['subject'] = subject; 
            send_data['message'] = message; 
            send_data['ip'] = ip; 
 
            var url = "example.php_sqlite3_contact_form.php?&ajax=message_update"; 
            do_cmd_post(url, send_data); 
          }); 
 
 
          // update list 
          $('.btn-update-list').click(function() {   
 
            var url = "example.php_sqlite3_contact_form.php?&ajax=messages_get"; 
            do_cmd_post(url, {}); 
 
          }); 
 
          // reset message (reload) 
          $(document).on('click', '.btn-reset-message', function() { 
            id = $(this).parent().parent().find('input[name=id]').val(); 
            var url = "example.php_sqlite3_contact_form.php?&ajax=message_get"; 
            do_cmd_post(url, {id: id}); 
             
 
          }); 
 
          // delete message 
          // handle even on dynamic loaded elements 
          $(document).on('click', '.btn-delete-message', function() { 
 
            var id = $(this).parent().parent().find('input[name=id]').val(); 
 
            var send_data = {}; 
            send_data['id'] = id; 
 
            var url = "example.php_sqlite3_contact_form.php?&ajax=message_delete"; 
            do_cmd_post(url, send_data); 
 
          }); // end btn-delete-message click 
 
          // ban ip 
          $(document).on('click', '.btn-ban-ip', function() { 
            // button has a  data-ip= attribute 
            var ip = $(this).attr('data-ip'); 
 
            var send_data = {}; 
            send_data['ip'] = ip; 
 
            var url = "example.php_sqlite3_contact_form.php?&ajax=ip_ban"; 
            do_cmd_post(url, send_data); 
          }); // end btn-ban-ip click 
           
          // unban ip 
          $(document).on('click', '.btn-unban-ip', function() { 
            // button has a  data-ip= attribute 
            var ip = $(this).attr('data-ip'); 
 
            var send_data = {}; 
            send_data['ip'] = ip; 
 
            var url = "example.php_sqlite3_contact_form.php?&ajax=ip_unban"; 
            do_cmd_post(url, send_data); 
          }); // end btn-unban-ip click 
           
        }); // end document ready 
 
</script> 
 
 
 
<style> 
  .btn { 
    display: inline-block; 
    padding: 10px; 
    background: #ccc; 
    cursor: pointer; 
 
  } 
 
  .btn:hover { 
    background: #ddd; 
  } 
 
 
  #messages-list { 
    margin-bottom: 20px; 
 
  } 
  
 
 
  </style> 
 
 
 
 
<style> 
/* Messages List */ 
#messages-list { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
 
} 
 
.message { 
  position:relative; 
  background-color: #fff; 
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 
  border-radius: 5px; 
  padding: 20px; 
  margin: 20px; 
  width:30vw; 
  min-width:400px; 
  box-sizing: border-box; 
  color: #333; 
  font-size: 16px; 
} 
 
.message.editing { 
  background-color: red; 
} 
 
 
/* if the screen is smaller than 768px, make the message 100% width */ 
@media screen and (max-width: 1400px) { 
  .message { 
    width: 100%; 
  } 
} 
 
 
 
.message:hover { 
  transform: translateY(-5px); 
  transition: all 0.3s ease; 
  cursor: pointer; 
} 
 
.message .fld { 
  margin-bottom: 10px; 
} 
 
.message input[type="text"], 
.message textarea { 
  padding: 10px; 
  border: none; 
  border-radius: 5px; 
  background-color: #f5f5f5; 
  width: 100%; 
  font-size: 16px; 
  color: #333; 
} 
 
.message input[type="text"]:focus, 
.message textarea:focus { 
  outline: none; 
  background-color: #fff; 
} 
 
.message input[type="text"][readonly] { 
  background-color: #d9d9d9; 
} 
 
.message div.fldbtn { 
  position:relative; 
  padding:0px;margin:0px; 
 
  display:inline-block; 
 
  color: #fff; 
  text-align: center; 
  text-decoration: none; 
  font-size: 16px; 
  cursor: pointer; 
  transition: all 0.3s ease; 
 
 
 
 
 
} 
.message .btn { 
  display:block; 
  margin:0px; 
  position:relative; 
 
  background-color: #38c172; 
  color: #fff; 
 
   
  border-radius: 5px; 
  
  text-align: center; 
  text-decoration: none;   
  font-size: 16px; 
 
  cursor: pointer; 
  transition: all 0.3s ease; 
  /* set flex size to about 30% */ 
   
  font-size:2vmax; 
  width:7.4vw; 
  min-width:100px; 
 
  margin:0.2vw; 
  padding:0.3vw; 
   
} 
 
.message .btn:hover { 
  background-color: #2f855a; 
} 
 
.message .btn-delete-message { 
  background-color: #e53e3e; 
} 
 
.message .btn-delete-message:hover { 
  background-color: #c53030; 
} 
 
.message .btn-update-message { 
  background-color: #4299e1; 
} 
 
.message .btn-update-message:hover { 
  background-color: #3182ce; 
} 
 
 
.message .btn-reset-message { 
  background-color: #ed8936; 
} 
 
.message .btn-reset-message:hover { 
  background-color: #dd6b20; 
} 
 
 
  </style> 
 
     
<style> 
  /* hide .def-hide by default for jQuery to show with a show() function */ 
  .message .def-hide { 
    display:none; 
  } 
 
 
   
</style> 
 
 
 
<!-- show and handle banned list --> 
<div class='banned-list'>banned list</div> 
<script> 
  // document ready 
  $(function() { 
 
    var send_data = {}; 
 
    var url = "example.php_sqlite3_contact_form.php?&ajax=load_banned"; 
    do_cmd_post(url, send_data); 
 
  }); // end document ready 
  </script> 
 
<style> 
  .banned-list { 
    /* flex */ 
    display:flex; 
    flex-direction:column; 
    justify-content:flex-start; 
    align-items:flex-start; 
    padding:2vw; 
 
  } 
  .banned-list .banned-header { 
    font-size:2vmax; 
    font-weight:bold; 
    margin-bottom:10px; 
  } 
 
  .banned-list .ip-row { 
    display:block; 
    padding:2vw; 
  } 
 
  .banned-list .ip-row .fld { 
    display:inline-block; 
    width:25vw; 
  } 
 
  </style> 
</body> 
</html>
 
 |