Source

inbounding / inbounding / dispatch / templates / mailchimp.html

{% extends "site-template.html" %}

{% block title %}
Configure a MailChimp Action
{% endblock %}

{% block main %}
<h2 class="">MailChimp</h2>
<br>
<style>
.error {color: red;}
</style>
<script>
$(document).ready( function () {
  $("#mcconfigform").validate({
  rules: {
    label: {
      required: true
    },
     mailchimpkey: {
      required: true,
      minlength: 36
    },
    mailchimplistid: {
      required: true,
      minlength: 5
    },
    url: {
      required: true,
      url: true
    }
  }
});
  $("#referlistform").validate({
  rules: {
     referuri0: {
      required: true,
      message: "At least 1 refer domain is required."
    }
  }
});


});
</script>

<div class="container">

  <div class="row">

    <div class="span12">
      <div class="span12">
	<ul class="tabs" data-tabs="tabs">
	  <li class="active"><a href="#mc-config">MailChimp Configuration</a></li>
	  <li><a href="#refer-list">Referrer List</a></li>
	  <li><a href="#preview">Preview</a></li>
	</ul>
      </div>

      <div class="tab-content">
	<div class="active" id="mc-config">
	  <form action="#" class="form-stacked" name="mc-config-form" id="mcconfigform">
	    <fieldset>
	      {% csrf_token %}
	      <div class="alert-message block-message error hide" data-alert>
		<a class="close" href="#">×</a>
		<p><strong>Oh snap! You got an error!</strong> Change this and that and <a href="#">try again</a>.</p>
		<ul>
		  <li>Duis mollis est non commodo luctus</li>
		  <li>Nisi erat porttitor ligula</li>
		  <li>Eget lacinia odio sem nec elit</li>
		</ul>
		<div class="alert-actions">
		  <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
		</div>
	      </div>

	  <div class="clearfix row">
	    <div class="span6">
	      <label for='label'>Label</label>
	      <div class="input">
		<input name='label' class="span6" type='text' placeholder="Your Action Label" autofocus="autofocus">
	      </div>
	    </div>
	    
	    <div class="span5">

	    </div>

	  </div><!-- END ROW -->


	  <div class="clearfix row">
	    <div class="span6">
	      <label for='mailchimp-key'>MailChimp API Key</label>
	      <div class="input">
		<input name='mailchimpkey' class="span6" type='text' placeholder="Your MailChimp API Key">
	      </div>
	    </div>
	    <div class="span5">
	      <a class="" data-controls-modal="mc-apikey-modal" data-backdrop="static">Get your API Key.</a>

	      <div id="mc-apikey-modal" class="modal hide">

		<div class="modal-header" data-show="false">
		  <a href="#" class="close">×</a>
		  <h3>MailChimp API Instructions</h3>
		</div>
		<div class="modal-body">
		  <p>
		    <ol>
		      <li>Go to MailChimp.com.</li>
		      <li>Select the Account menu.</li>
		      <li>Then Click on "API Keys & Authorized Apps."</li>
		      <li>Copy your API Key. If necessary 'add a key'.</li>
		    </ol>
		  </p>
		</div>
		<div class="modal-footer">
		  <a href="#" class="btn large secondary">Cancel</a>
		  <a href="https://us2.admin.mailchimp.com/account/api/" target="_new_window" class="btn large primary">Go to MailChimp</a>
		</div>

	      </div>

	    </div>
	  </div>


	  <div class='clearfix'>
	    <label for='mailchimp-listid'>MailChimp Unique List ID</label>
	      <div class="input">
		<input name='mailchimplistid' class="span6" type='text' placeholder="Your MailChimp Unique List ID">
	      </div>
	  </div>

	  <div class='clearfix'>
	    <label for='url'>Target URL</label>
	    <div class="input">
	      <input name='url' type='text' class="span6" placeholder="What is the URL for this Action Box?">
	      </div>
	  </div>

	  <div class='clearfix'>
	    <label for='action-box'>What type of Action Box?</label>
	    <div class="input">
	      <select name="action-box" class="span6">
		<option value="">Floated Action Box</option>
		<option value="">Embedded Action Box</option>
	      </select>
	    </div>
	  </div>

	</fieldset>
	<div class="actions">
	  <input name='submit' value="Save" type="Submit" class="btn large primary">
	</div>
      </form>
      </div>
      <div id="refer-list">
      <form action="#" class="form-stacked" name="referlistform" id="referlistform">
	{% csrf_token %}
	<fieldset>
	  <div class="row">
	    <div class="span6">
	      <label for='referuri0'>Refer URI</label>
	      <div class="input">
		<input name='referuri0' type='text' placeholder="google.com" autofocus="autofocus">
	      </div>
	    </div>
	    <div span="span5">
		<a href="#" rel="popover" data-content="Refer's are domain names. Such as google.com or stumbleupon.com without any trailing information. Do not use google.com/path/." data-original-title="What sites are sending you Visitors?" data-placement="right">What is the Refer?</a>
		<script>
		  $(function () {
		  $("a[rel=popover]")
                  .popover({
                  offset: 10,
		  delayOut: 500
                  })
                  .click(function(e) {
                  e.preventDefault()
                  })
		  })
		</script>
	    </div>
	  </div><!-- end row -->
	</fieldset>
	<div class="actions">
	  <input name='submit' value="Save" type="Submit" class="btn large primary">
	</div>
      </form>
      </div>

      <div id="preview" class="preview">
	This is the preview.
      </div>
      </div>


    </div>

<style>
.onoff {
  display: block;
  width: 94px;
  height: 27px;
  overflow: hidden;
  border-radius: 3px;
}	

onoff input[type=checkbox] {
  display: none;
}

.onoff input[type=checkbox] + label {
  text-indent: -9999px;
  display: block;
  width: 160px;
  height: 27px;
  line-height: 27px;
  background: transparent url(/static/img/onoff.png) no-repeat -56px 0;
  -webkit-transition: background-position 0.3s ease-in-out;
  -moz-transition: background-position 0.3s ease-in-out;
  position: relative;
  top: -26px;
}

.onoff input[type=checkbox]:checked + label {
  -webkit-transition: background-position 0.3s ease-in-out;
  -moz-transition: background-position 0.3s ease-in-out;
  background-position: -3px 0;
}
</style>

    <div class="span4">
      <h2>Action Status</h2>

      <div class="onoff">
	<input id="check" name="1" type="checkbox" value="0" />
	<label for="check">Check-me</label>
      </div>

    </div>
    
  </div>

</div>

{% endblock %}