corrade-http-templates – Diff between revs 61 and 64

Subversion Repositories:
Rev:
Only display areas with differences – Regard whitespace
Rev 61 Rev 64
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2   2  
3 <html lang="en"> 3 <html lang="en">
-   4  
4 <head> 5 <head>
5 <title>Corrade Group Chat Template</title> 6 <title>Corrade Group Chat Template</title>
6   7  
7 <meta charset="utf-8"> 8 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <meta name="description" content="Group Chat Relay using Corrade"> 11 <meta name="description" content="Group Chat Relay using Corrade">
11 <meta name="author" content="Wizardry and Steamworks"> 12 <meta name="author" content="Wizardry and Steamworks">
12 <link rel="icon" href="favicon.ico"> 13 <link rel="icon" href="favicon.ico">
13   14  
14 <!-- Bootstrap core CSS --> 15 <!-- Bootstrap core CSS -->
15 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 16 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
16 <link rel="stylesheet" href="css/style.css?v=1.3"> 17 <link rel="stylesheet" href="css/style.css?v=1.3">
17 </head> 18 </head>
18   19  
19 <body> 20 <body>
20 <!-- Group chat container. --> 21 <!-- Group chat container. -->
21 <div class="container"> -  
22 <form role="form" data-toggle="validator"> 22 <form role="form" data-toggle="validator">
-   23 <div class="row with-margin">
-   24 <div class="col-lg-12">
23 <div class="form-group"> 25 <div class="form-group">
-   26 <div class="input-group input-group-lg">
24 <textarea class="form-control" id="chat" readonly="readonly" rows="12"></textarea> 27 <textarea class="form-control" id="chat" readonly="readonly" rows="12"
-   28 style="height:100%;"></textarea>
-   29 </div>
25 </div> 30 </div>
26 <div class="form-group row"> -  
27 <!-- Controls --> -  
28 <div id="controls"> 31 <div id="controls">
29 <div class="col-xs-3"> 32 <div class="form-group">
30 <div class="input-group"> 33 <div class="input-group input-group-lg">
31 <span class="input-group-addon"> 34 <div class="input-group-prepend">
32 <label for="name">Name</label> 35 <span class="input-group-text" id="">Name</span>
33 </span> -  
34 <input class="form-control" id="name" maxlength="8" type="text" value="Someone" required> -  
35 </div> 36 </div>
-   37 <input type="text" class="form-control input-lg" id="name" placeholder="Your name...">
-   38 </div><!-- /input-group -->
36 </div> 39 </div>
37 <div class="col-lg-1"> 40 <div class="form-group">
38 <div class="input-group"> 41 <div class="input-group input-group-lg">
39 <span class="input-group-addon"> 42 <div class="input-group-prepend">
40 <label for="message">Message</label> 43 <span class="input-group-text" id="">Message</span>
41 </span> 44 </div>
42 <div class="input-group col-xs-12"> -  
43 <input class="form-control" id="message" type="text" required> 45 <input type="text" class="form-control input-lg" id="message" placeholder="Your message...">
44 <span class="input-group-btn"> 46 <span class="input-group-btn">
45 <button class="btn btn-default" id="send" type="submit">Send</button> 47 <button class="btn btn-default btn-lg" type="submit" id="send">Send</button>
46 </span> 48 </span>
47 </div> 49 </div>
48 </div> 50 </div>
49 </div> 51 </div>
50 </div> 52 </div><!-- /.col-lg-6 -->
51 </div> 53 </div><!-- /.row -->
52 </form> 54 </form>
53 </div> -  
54 55  
55 <!-- Include jQuery --> 56 <!-- Include jQuery -->
56 <script src="node_modules/jquery/dist/jquery.min.js"></script> 57 <script src="node_modules/jquery/dist/jquery.min.js"></script>
57 <!-- Include Bootstrap and Validator --> 58 <!-- Include Bootstrap and Validator -->
58 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 59 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
59 <script src="node_modules/bootstrap-validator/js/validator.js"></script> 60 <script src="node_modules/bootstrap-validator/js/validator.js"></script>
60 <!-- Include Velocity --> 61 <!-- Include Velocity -->
61 <script src="node_modules/velocity-animate/velocity.min.js"></script> 62 <script src="node_modules/velocity-animate/velocity.min.js"></script>
62 <script> 63 <script>
63 $(document).ready(function () { 64 $(document).ready(function () {
64 function sendGroupMessage(token) { 65 function sendGroupMessage(token) {
65 // Hide the controls. 66 // Hide the controls.
66 $("#controls").animate( 67 $("#controls").animate(
67 { 68 {
68 opacity: 0 69 opacity: 0
69 }, 70 },
70 { 71 {
71 duration: 1000, 72 duration: 1000,
72 easing: "linear" 73 easing: "linear"
73 } 74 }
74 ); 75 );
75 // Make the POST request to the PHP script and pass the values of the fields. 76 // Make the POST request to the PHP script and pass the values of the fields.
76 $.ajax({ 77 $.ajax({
77 type: 'post', 78 type: 'post',
78 url: "sendGroupMessage.php", 79 url: "sendGroupMessage.php",
79 data: { 80 data: {
80 name: $("#name").val(), 81 name: $("#name").val(),
81 message: $("#message").val(), 82 message: $("#message").val(),
82 token: token 83 token: token
83 } 84 }
84 }).done(function(data) { 85 }).done(function (data) {
85 // If any error occurred, display it. 86 // If any error occurred, display it.
86 if(data) 87 if (data)
87 alert(data); 88 alert(data);
88 // When the data returns, clear the message box and show the controls. 89 // When the data returns, clear the message box and show the controls.
89 $('#message').val(""); 90 $('#message').val("");
90 $("#controls").animate( 91 $("#controls").animate(
91 { 92 {
92 opacity: 1 93 opacity: 1
93 }, 94 },
94 { 95 {
95 duration: 1000, 96 duration: 1000,
96 easing: "linear" 97 easing: "linear"
97 } 98 }
98 ); 99 );
99 }); 100 });
100 } 101 }
101 102  
102 // Polls the chatlog every second for changes. 103 // Polls the chatlog every second for changes.
103 (function retrieveMessages() { 104 (function retrieveMessages() {
104 $.get("chat.log?t=" + Math.random(), function(data) { 105 $.get("chat.log?t=" + Math.random(), function (data) {
105 $("#chat").html(data); 106 $("#chat").html(data);
106 $("#chat").scrollTop($("#chat")[0].scrollHeight); 107 $("#chat").scrollTop($("#chat")[0].scrollHeight);
107 setTimeout(retrieveMessages, 1000); 108 setTimeout(retrieveMessages, 1000);
108 }); 109 });
109 }()); 110 }());
110 111  
111 $.get('session.php').then((token) => { 112 $.get('session.php').then((token) => {
112 // When the send button is pressed, then call the sendGroupMessage function to 113 // When the send button is pressed, then call the sendGroupMessage function to
113 // send the message to the PHP script, which then send the message to Corrade. 114 // send the message to the PHP script, which then send the message to Corrade.
114 $("#send").click(function(e){ 115 $("#send").click(function (e) {
115 sendGroupMessage(token); 116 sendGroupMessage(token);
116 }); 117 });
117 118  
118 // Subscribe to pressing enter with the message input box selected. 119 // Subscribe to pressing enter with the message input box selected.
119 $("#message").keypress(function(e) { 120 $("#message").keypress(function (e) {
120 if (e.which == 13) { 121 if (e.which == 13) {
121 sendGroupMessage(token); 122 sendGroupMessage(token);
122 return false; 123 return false;
123 } 124 }
124 }); 125 });
125 }); 126 });
126 }); 127 });
127 </script> 128 </script>
128 </body> 129 </body>
-   130  
129 </html> 131 </html>
130   132  
-   133
Generated by GNU Enscript 1.6.5.90.
-   134  
-   135  
-   136