dangerouse/unresponsive-desktop.html

## unresponsive-desktop.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
  <title>Unresponsive Desktop Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

  <script src="//api.cloudsponge.com/widget/localhost-only.js"></script>
  <script>
    cloudsponge.init({
      // choose the unresponsive-desktop theme so it always displays as a modal with an overlay
      theme: 'unresponsive-desktop'
    })
  </script>
</head>
<body>
  <div class="container">
    <h1>CloudSponge Theme Example</h1>
    <p>
      This example forces the <code>unresponsive-desktop</code> theme which suppresses the responsive behaviour of the widget.
      It actually loads an alternative CSS that omits the <code>@media</code> queries.
    </p>
    <p>
      To see it working, launch the widget and then resize your browser window to a narrow display.
      Instead of switching to the mobile UI, the widget UI will start to overflow of the right hand side of the screen as the window becomes too narrow.
      This is not optimal in all situations however it's great if you know your window size is fixed like in an iframe with a constant width.
    </p>

    <form>
      <div class="form-group">
        <!-- This textarea will be populated with the contacts returned by CloudSponge -->
        <label for="exampleInputEmails">Recipient email addresses</label>
        <!-- Any link with a class="cloudsponge-launch" will start the import process -->
        <a class="cloudsponge-launch btn btn-primary" href="javascript:false">Add from Address Book</a>

        <textarea class="cloudsponge-contacts form-control" id="exampleInputEmails" placeholder="Type email addresses separated by commas or select them from your address book by clicking the button above."></textarea>
      </div>
    </form>

  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
	<title>Unresponsive Desktop Example</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

	<script src="//api.cloudsponge.com/widget/localhost-only.js"></script>
	<script>
	cloudsponge.init({
	// choose the unresponsive-desktop theme so it always displays as a modal with an overlay
	theme: 'unresponsive-desktop'
	})
	</script>
	</head>
	<body>
	<div class="container">
	<h1>CloudSponge Theme Example</h1>
	<p>
	This example forces the <code>unresponsive-desktop</code> theme which suppresses the responsive behaviour of the widget.
	It actually loads an alternative CSS that omits the <code>@media</code> queries.
	</p>
	<p>
	To see it working, launch the widget and then resize your browser window to a narrow display.
	Instead of switching to the mobile UI, the widget UI will start to overflow of the right hand side of the screen as the window becomes too narrow.
	This is not optimal in all situations however it's great if you know your window size is fixed like in an iframe with a constant width.
	</p>

	<form>
	<div class="form-group">
	<!-- This textarea will be populated with the contacts returned by CloudSponge -->
	<label for="exampleInputEmails">Recipient email addresses</label>
	<!-- Any link with a class="cloudsponge-launch" will start the import process -->
	<a class="cloudsponge-launch btn btn-primary" href="javascript:false">Add from Address Book</a>

	<textarea class="cloudsponge-contacts form-control" id="exampleInputEmails" placeholder="Type email addresses separated by commas or select them from your address book by clicking the button above."></textarea>
	</div>
	</form>

	</div>
	</body>
	</html>