index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/gif" href="img/favicon.ico" />

        <title>ctxSip - Javascript SIP client</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <style>
            body {
                margin-top       : 20px;
                background-image : url('img/bg.jpg');
            }
            .navbar {
                margin-bottom : 40px;
            }
            .content {
                margin-top       : 40px;
                padding-top      : 40px;
                background-color : #fff;
                box-shadow       : 0px -10px 20px rgba(0,0,0,0.03);
            }
            .content img {
                padding : 0 30px 10px 0;
            }
            .page-header {
                border-bottom : 1px solid #aaa;
                margin-bottom : 40px;
            }
            .content > .container > .row {
                margin-bottom: 40px;
            }
        </style>
    </head>

    <body>

    <div class="container">

        <div class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><i class="fa fa-fw fa-phone-square text-muted"></i> ctxPhone</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="https://github.com/Collecttix/ctxSip"><i class="fa fa-github"></i> GitHub Project</a></li>
                        <li><a href="https://collecttix.com"><i class="fa fa-asterisk text-success"></i> Collecttix</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <h1 class="page-header text-center"><i class="fa fa-fw fa-phone-square text-success fa-2x"></i><br> ctxPhone <small><br>A simple, open source, javascript SIP phone for web applications.</small></h1>

        <div class="text-center">
            <p class="text-center lead">Already have a sip account? Try our demo.</p>
            <a href="#mdlDemo" class="btn btn-lg btn-primary" id="btnDemo" data-toggle="modal"><i class="fa fa-fw fa-phone-square"></i> Try the Demo</a>
        </div>
    </div>

    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-md-4 clearfix">
                    <h2>Simple UI</h2>
                    <img src="img/screenshots/1.png" class="pull-left img-responsive" width="160" height="240" alt="Simple UI">
                    <p class="text-left">ctxSip is a Javascript based SIP client that uses WebRTC and WebSockets to connect to your SIP server.</p>
                    <p class="text-left">The UI is designed to be launched as a popup from within your application.</p>
                    <p class="text-left"></p>
                </div>
                <div class="col-md-4 clearfix">
                    <h2>Features</h2>
                    <img src="img/screenshots/2.png" class="pull-left img-responsive" width="160" height="240" alt="Strong Featureset">
                    <ul class="text-left">
                        <li><p>Hold / Resume, Mute, multiple call support.</p></li>
                        <li><p>No plugins required.</p></li>
                        <li><p>Intuitive interface makes it easy for users.</p></li>
                        <li><p>Designed for a business environment, features are limited to what is needed.</p></li>
                    </ul>
                </div>
                <div class="col-md-4 clearfix">
                    <h2>Easy to Implement</h2>
                    <img src="img/screenshots/3.png" class="pull-left img-responsive" width="160" height="240" alt="Easy to Implement">
                    <ul class="text-left">
                        <li><p>Call logs are saved to localStorage</p></li>
                        <li><p>Easy to configure and integrate into your project.</p></li>
                        <li><p>Uses SIP.js, Bootstrap, jQuery, and other common tools of the trade.</p></li>
                    </ul>
                </div>
            </div>

            <div class="well">
                <div class="row">
                    <div class="col-md-3">
                        <h3>Browser Support</h3>
                        <p>Standards based browsers will just work. No plugins-necessary.  Support requires: WebSockets &amp; WebRTC.</p>
                        <p>Supported Browsers</p>
                        <ul>
                            <li><p>Google Chrome</p></li>
                            <li><p>Mozilla Firefox</li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <h3>Use It</h3>
                        <p>Get started with ctxSip.</p>
                        <ul>
                            <li><p>Download or clone the repo: <a href="https://collecttix.github.com/ctxPhone">https://collecttix.github.com/ctxPhone</a></p></li>
                            <li><p>Copy <code>scripts/config-sample.js</code> to <code>scripts/config.js</code> and edit with your SIP account details.</p></li>
                            <li><p>Launch the phone.</p></li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <h3>Code</h3>
                        <ul>
                            <li><p><a href="http://sipjs.com/">SIP.js</a> Does all the heavy lifting.</p></li>
                            <li><p><code>/scripts/app.js</code> is where the client code resides.</p></li>
                            <li><p>When the client is launched, the user's configuration can be in a JS variable called <code>user</code> or it will look in localStorage for a JSON encoded object <code>SIPCreds</code></p></li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <h3>Contribute</h3>
                        <ul>
                            <li><p>Have an idea or find a bug? <a href="https://github.com/collecttix/ctxSip/issues">Submit an Issue.</a></p></li>
                            <li><p>Have a new feature? <a href="https://github.com/collecttix/ctxSip/pulls">Submit a Pull Request.</a></p></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-center text-muted clearfix">
            <p> &copy; 2018 Collecttix</p>
        </div>

    </div>

    <form class="modal fade" id="mdlDemo" tabindex="-1" role="dialog" aria-labelledby="btnDemo" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Enter SIP Credenitals</h4>
                </div>
                <div class="modal-body">
                    <p>To use our demo you will need your SIP credentials from your account. All fields are required.</p>
                    <div class="form-group">
                        <label>Display Name:</label>
                        <input type="text" name="Display" class="form-control" placeholder="i.e. Ben Franklin" required>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Sip User:</label>
                                <input type="text" name="User" class="form-control" placeholder="i.e. sipuser" required>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>WS URL:</label>
                                <input type="text" name="WSServer" class="form-control" placeholder="i.e. wss://sip.example.com:5060/" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Sip Pass:</label>
                                <input type="password" name="Pass" class="form-control" placeholder="i.e. supaSekret!" required>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>Sip Realm:</label>
                                <input type="text" name="Realm" class="form-control" placeholder="i.e. sip.example.com" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="btnConfig">Launch Phone</button>
                </div>
            </div>
        </div>
    </form>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script>

        $(document).ready(function() {

            // When the demo modal is launched, load the values from localStorage
            $('#mdlDemo').on('show.bs.modal', function() {

                var user = JSON.parse(localStorage.getItem('SIPCreds'));

                if (user) {
                    $.each(user, function(k, v) {
                        $('input[name="'+k+'"]').val(v);
                    });
                }
            });

            // Save form to localStorage and validate
            $('#btnConfig').click(function(event) {

                var user  = {},
                    valid = true;

                event.preventDefault();

                // validate the form
                $('#mdlDemo input').each(function(i) {
                    if ($(this).val() === '') {
                        $(this).closest('.form-group').addClass('has-error');
                        valid = false;
                    } else {
                        $(this).closest('.form-group').removeClass('has-error');
                    }
                    user[$(this).attr('name')] = $(this).val();
                });

                // launch the phone window.
                if (valid) {
                    localStorage.setItem('SIPCreds', JSON.stringify(user));

                    var url      = 'https://' + window.location.host + window.location.pathname + 'phone/',
                        features = 'menubar=no,location=no,resizable=no,scrollbars=no,status=no,addressbar=no,width=320,height=480';

                    if (!localStorage.getItem('ctxPhone')) {
                        window.open(url, 'ctxPhone', features);
                        $('#mdlDemo').modal('hide');
                        return false;
                    } else {
                        window.alert('Phone already open.');
                    }
                }

            });
        });

    </script>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-47777318-2', 'auto');
      ga('send', 'pageview');
    </script>
   </body>
</html>