~humaid/whatsmorse

ref: 2d60712369c14e99f4cf24f41e447da41bae6be2 whatsmorse/templates/index.html -rw-r--r-- 4.2 KiB
2d607123 — Humaid AlQassimi first 3 years ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>WhatsMorse!</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="description" content="">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha256-m/h/cUDAhf6/iBRixTbuc8+Rg2cIETQtPcH9D3p2Kg0=" crossorigin="anonymous" />
      <style type="text/css">
         @import url('https://fonts.googleapis.com/css?family=Amiri|Work+Sans');
         body {
         padding-top: 20px;
         padding-bottom: 20px;
         font-family: 'Work Sans', sans-serif;
         }
         .navbar {
         margin-bottom: 15px;
         border-radius: 0.3rem;
         }
         p.footer {
         text-align: center;
         }
         .marg{
         margin-bottom: 5px
         }
         .c {
         text-align: center;
         display: block;
         margin-left: auto;
         margin-right: auto;
         }
      </style>

   </head>
   <body>
      <div class="container">
      <nav class="navbar navbar-expand-lg bg-success navbar-dark">
         <a class="navbar-brand" href="/">WhatsMorse</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nb" aria-controls="nb" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
         </button>
      </nav>
      <div class="jumbotron">
      <div class="col-sm-8 mx-auto">
      <h1 class="display-4 c dsize">WhatsMorse</h1>
      <p class="c lead">Telegraph Line ID: <span class="badge badge-primary">{{.Code}}</span></p>
      <div class="c">
        <div class="card border-primary mb-3">
          <div class="card-header">Transmittor</div>
          <div class="card-body text-primary">
            <h5 class="card-title">Sender</h5>

  <div class="form-group">
    <label>To Telegraph Line ID</label>
    <input class="form-control" id="lineid" placeholder="Enter Line ID">
  </div>
  <div class="form-group">
    <label>Message</label>
    <input class="form-control" id="message">
  </div>

  <button id="Send" class="btn btn-info btn-block">Send it</button>
<small>If the Line ID is invalid, the telegraph will not reach the recipient.</small>
          </div>
        </div>




  <div class="card border-warning mb-3">
    <div class="card-header">Incoming Transmittions   <button id="Clear" class="btn btn-danger btn-sm">clear</button></div>
    <div class="card-body text-primary">
      <h5 class="card-title">Receiver</h5>
      <ul class="list-group">
        <div id="incoming">


        </div>
      </ul>
    </div>
  </div>





      </div>

      </div>
      </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous" type="text/javascript"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha256-UpLmd/5xLICGNBTp5z82eNhtQJ91E5K2gDtwqUn8EBc=" crossorigin="anonymous" type="text/javascript"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha256-DiWJXXyq81WlPRnDfGmgYZj2aOVCKyEdJ1l+2TmDuAs=" crossorigin="anonymous" type="text/javascript"></script>
      <script>
      $(document).ready(function(){
  $('#Send').click(function(){
      $.get("/transmit?to=" + $('#lineid').val() + "&message=" + $('#message').val());
      $('#message').val("");
  });
  $('#Clear').click(function(){
      $.get("/clear");
  });
});
      (function(){
           $("#incoming").load("/incoming");
          setTimeout(arguments.callee, 800);
      })();
      $('#message').keydown(function(event){
    var keyCode = (event.keyCode ? event.keyCode : event.which);
    if (keyCode == 13) {
        $('#Send').trigger('click');
    }
});
      </script>
   </body>
</html>