From 4e260421f0a2a5cbc0a3d38fe66a8ed385c51c90 Mon Sep 17 00:00:00 2001
From: Chitharanjan Das <das.chitharanjan@gmail.com>
Date: Sat, 1 Oct 2016 10:27:48 +0530
Subject: [PATCH 1/2] Adds 'copy to clipboard' function to example code
 snippets

---
 hc/front/management/commands/pygmentize.py    |  9 ++-
 static/css/docs.css                           |  6 +-
 static/css/my_checks.css                      |  9 +++
 static/css/snippet-copy.css                   | 44 +++++++++++++
 static/css/welcome.css                        | 13 +++-
 static/js/snippet-copy.js                     | 26 ++++++++
 templates/base.html                           |  1 +
 templates/front/docs.html                     | 63 +++++++++++++++----
 templates/front/docs_api.html                 | 33 ++++++++--
 templates/front/my_checks.html                | 44 ++++++++++---
 .../snippets/{bash.html => bash_curl.html}    |  3 -
 .../snippets/{bash.txt => bash_curl.txt}      |  3 -
 templates/front/snippets/bash_wget.html       |  3 +
 templates/front/snippets/bash_wget.txt        |  2 +
 .../front/snippets/create_check_request.txt   |  7 ---
 ...quest.html => create_check_request_a.html} |  4 --
 .../front/snippets/create_check_request_a.txt |  3 +
 .../snippets/create_check_request_b.html      |  3 +
 .../front/snippets/create_check_request_b.txt |  2 +
 templates/front/snippets/python.html          |  8 ---
 templates/front/snippets/python.txt           |  7 ---
 templates/front/snippets/python_requests.html |  4 ++
 templates/front/snippets/python_requests.txt  |  3 +
 templates/front/snippets/python_urllib2.html  |  4 ++
 templates/front/snippets/python_urllib2.txt   |  3 +
 templates/front/welcome.html                  | 50 ++++++++++++---
 26 files changed, 288 insertions(+), 69 deletions(-)
 create mode 100644 static/css/snippet-copy.css
 create mode 100644 static/js/snippet-copy.js
 rename templates/front/snippets/{bash.html => bash_curl.html} (74%)
 rename templates/front/snippets/{bash.txt => bash_curl.txt} (67%)
 create mode 100644 templates/front/snippets/bash_wget.html
 create mode 100644 templates/front/snippets/bash_wget.txt
 delete mode 100644 templates/front/snippets/create_check_request.txt
 rename templates/front/snippets/{create_check_request.html => create_check_request_a.html} (54%)
 create mode 100644 templates/front/snippets/create_check_request_a.txt
 create mode 100644 templates/front/snippets/create_check_request_b.html
 create mode 100644 templates/front/snippets/create_check_request_b.txt
 delete mode 100644 templates/front/snippets/python.html
 delete mode 100644 templates/front/snippets/python.txt
 create mode 100644 templates/front/snippets/python_requests.html
 create mode 100644 templates/front/snippets/python_requests.txt
 create mode 100644 templates/front/snippets/python_urllib2.html
 create mode 100644 templates/front/snippets/python_urllib2.txt

diff --git a/hc/front/management/commands/pygmentize.py b/hc/front/management/commands/pygmentize.py
index 29835a45..0972692e 100644
--- a/hc/front/management/commands/pygmentize.py
+++ b/hc/front/management/commands/pygmentize.py
@@ -27,10 +27,12 @@ class Command(BaseCommand):
             return
 
         # Invocation examples
-        _process("bash", lexers.BashLexer())
+        _process("bash_curl", lexers.BashLexer())
+        _process("bash_wget", lexers.BashLexer())
         _process("browser", lexers.JavascriptLexer())
         _process("crontab", lexers.BashLexer())
-        _process("python", lexers.PythonLexer())
+        _process("python_urllib2", lexers.PythonLexer())
+        _process("python_requests", lexers.PythonLexer())
         _process("php", lexers.PhpLexer())
         _process("powershell", lexers.shell.PowerShellLexer())
         _process("node", lexers.JavascriptLexer())
@@ -38,7 +40,8 @@ class Command(BaseCommand):
         # API examples
         _process("list_checks_request", lexers.BashLexer())
         _process("list_checks_response", lexers.JsonLexer())
-        _process("create_check_request", lexers.BashLexer())
+        _process("create_check_request_a", lexers.BashLexer())
+        _process("create_check_request_b", lexers.BashLexer())
         _process("create_check_response", lexers.JsonLexer())
         _process("pause_check_request", lexers.BashLexer())
         _process("pause_check_response", lexers.JsonLexer())
diff --git a/static/css/docs.css b/static/css/docs.css
index 4455b211..c50fc5dd 100644
--- a/static/css/docs.css
+++ b/static/css/docs.css
@@ -58,4 +58,8 @@ a.section:hover  {
     color: #427d5e;
     background-color: #f2f9f6;
     border-radius: 4px;
-}
\ No newline at end of file
+}
+
+.snippet pre {
+  border: 1px solid #cccccc;
+}
diff --git a/static/css/my_checks.css b/static/css/my_checks.css
index 6a1a9254..c9f5924d 100644
--- a/static/css/my_checks.css
+++ b/static/css/my_checks.css
@@ -71,3 +71,12 @@
  #show-usage-modal .tab-content {
      margin-top: 15px;
  }
+
+ .tab-pane {
+    border: none;
+    padding: 0;
+ }
+
+ .snippet {
+   margin-bottom: 15px;
+ }
diff --git a/static/css/snippet-copy.css b/static/css/snippet-copy.css
new file mode 100644
index 00000000..2e53acfc
--- /dev/null
+++ b/static/css/snippet-copy.css
@@ -0,0 +1,44 @@
+.snippet {
+  position: relative;
+  margin-bottom: 3px;
+}
+
+.snippet:last-child {
+  margin-bottom: 0;
+}
+
+.snippet pre {
+  border: none;
+  background: #F6F6F6 !important;
+  margin: 0;
+}
+
+.snippet:hover .copy-snippet-link {
+    opacity: 1
+}
+
+button.copy-snippet-link {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-top: -1px;
+    margin-right: -1px;
+    z-index: 10;
+    display: block;
+    padding: 5px 8px !important;
+    font-size: 12px;
+    cursor: pointer;
+    border-radius: 0 0 0 4px;
+    opacity: 0;
+    background: none!important;
+    border: none;
+    outline: none;
+    font-family: "Open Sans", Arial, sans-serif;
+    color: #0091ea;
+    cursor :pointer;
+    transition: opacity 0.1s linear;
+}
+
+button.copy-snippet-link:hover {
+    text-decoration: underline;
+}
diff --git a/static/css/welcome.css b/static/css/welcome.css
index 9aca0590..7834726d 100644
--- a/static/css/welcome.css
+++ b/static/css/welcome.css
@@ -86,4 +86,15 @@
 .welcome-integrations img {
     width: 22px;
     height: 22px;
-}
\ No newline at end of file
+}
+
+.tab-pane {
+  border-left: 1px solid #DDD;
+  border-right: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+  padding: 3px;
+}
+
+.tab-pane.tab-pane-email {
+  border: none;
+}
diff --git a/static/js/snippet-copy.js b/static/js/snippet-copy.js
new file mode 100644
index 00000000..cc8225c2
--- /dev/null
+++ b/static/js/snippet-copy.js
@@ -0,0 +1,26 @@
+$(function() {
+
+    var reBlankLines = new RegExp("^\\s*[\\r\\n]", "gm");
+    var reTrailingWhitespace = new RegExp("\\s+$");
+
+    var clipboard = new Clipboard("button.copy-snippet-link", {
+        text: function (trigger) {
+            var snippetElement = $(trigger).next(".highlight").children().clone();
+            /* remove pygmentize comment elements */
+            snippetElement.find(".c, .cm, .cp, .c1, .cs").remove();
+            /* remove blank lines and trailing whitespace */
+            return snippetElement.text().replace(reBlankLines, '').replace(reTrailingWhitespace, '');
+        }
+    });
+
+    clipboard.on("success", function(e) {
+        e.trigger.textContent = "copied!";
+        e.clearSelection();
+    });
+
+    $("button.copy-snippet-link").mouseout(function(e) {
+        setTimeout(function() {
+            e.target.textContent = "copy";
+        }, 300);
+    })
+});
diff --git a/templates/base.html b/templates/base.html
index 1d53c866..5f150e34 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,6 +17,7 @@
     <link rel="stylesheet" href="{% static 'css/icomoon.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/nouislider.min.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/nouislider.pips.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'css/snippet-copy.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/base.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/docs.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'css/welcome.css' %}" type="text/css">
diff --git a/templates/front/docs.html b/templates/front/docs.html
index 676864ed..7380450a 100644
--- a/templates/front/docs.html
+++ b/templates/front/docs.html
@@ -1,5 +1,5 @@
 {% extends "front/base_docs.html" %}
-{% load staticfiles hc_extras %}
+{% load compress staticfiles hc_extras %}
 
 {% block title %}Documentation - {% site_name %}{% endblock %}
 
@@ -44,7 +44,10 @@ and your command runs. If it completes successfully (exit code 0),
 curl or wget runs a HTTP GET call to the ping URL.
 </p>
 
-{% include "front/snippets/crontab.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/crontab.html" %}
+</div>
 
 <p>With this simple modification, you monitor several failure
 scenarios:</p>
@@ -110,20 +113,41 @@ thing: they fire off a HTTP GET method.</p>
     Ubuntu, for example, does not have curl installed out of the box.
 </p>
 
-{% include "front/snippets/bash.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/bash_curl.html" %}
+</div>
+
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/bash_wget.html" %}
+</div>
 
 <a name="python"></a>
 <h3>Python</h3>
-{% include "front/snippets/python.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/python_urllib2.html" %}
+</div>
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/python_requests.html" %}
+</div>
 
 <a name="node"></a>
 <h3>Node</h3>
-{% include "front/snippets/node.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/node.html" %}
+</div>
 
 
 <a name="php"></a>
 <h3>PHP</h3>
-{% include "front/snippets/php.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/php.html" %}
+</div>
 
 <a name="browser"></a>
 <h3>Browser</h3>
@@ -132,7 +156,10 @@ thing: they fire off a HTTP GET method.</p>
     CORS header in its ping responses, so cross-domain AJAX requests
     should work.
 </p>
-{% include "front/snippets/browser.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/browser.html" %}
+</div>
 
 <a name="powershell"></a>
 <h3>PowerShell</h3>
@@ -146,15 +173,21 @@ When scheduled to run with Task Scheduler, it will essentially
 just send regular "I'm alive" messages. You can of course extend it to
 do more things.</p>
 
-{% include "front/snippets/powershell.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/powershell.html" %}
+</div>
 
 <p>Save the above to e.g. <code>C:\Scripts\healthchecks.ps1</code>. Then use
 the following command in a Scheduled Task to run the script:
 </p>
 
-<pre>
-powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1
-</pre>
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    <div class="highlight">
+        <pre>powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1</pre>
+    </div>
+</div>
 
 <a name="email"></a>
 <h3>Email</h3>
@@ -247,3 +280,11 @@ powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1
 </table>
 
 {% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/clipboard.min.js' %}"></script>
+<script src="{% static 'js/snippet-copy.js' %}"></script>
+{% endcompress %}
+{% endblock %}
diff --git a/templates/front/docs_api.html b/templates/front/docs_api.html
index 21998e56..9c61f2e1 100644
--- a/templates/front/docs_api.html
+++ b/templates/front/docs_api.html
@@ -1,5 +1,5 @@
 {% extends "front/base_docs.html" %}
-{% load staticfiles hc_extras %}
+{% load compress staticfiles hc_extras %}
 
 {% block title %}REST API - {% site_name %}{% endblock %}
 
@@ -64,7 +64,10 @@ The response may contain a JSON document with additional data.
     a JSON document with all checks in user's account.
 </p>
 <h3 class="api-section">Example Request</h3>
-{% include "front/snippets/list_checks_request.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/list_checks_request.html" %}
+</div>
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/list_checks_response.html" %}
@@ -167,7 +170,17 @@ The response may contain a JSON document with additional data.
 </table>
 
 <h3 class="api-section">Example Request</h3>
-{% include "front/snippets/create_check_request.html" %}
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/create_check_request_a.html" %}
+</div>
+<br>
+<p>Or, alternatively:</p>
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/create_check_request_b.html" %}
+</div>
+
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/create_check_response.html" %}
@@ -194,10 +207,22 @@ The response may contain a JSON document with additional data.
 </p>
 
 <h3 class="api-section">Example Request</h3>
-{% include "front/snippets/pause_check_request.html" %}
+
+<div class="snippet">
+    <button class="copy-snippet-link hidden-sm">copy</button>
+    {% include "front/snippets/pause_check_request.html" %}
+</div>
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/pause_check_response.html" %}
 
 
 {% endblock %}
+
+{% block scripts %}
+{% compress js %}
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/clipboard.min.js' %}"></script>
+<script src="{% static 'js/snippet-copy.js' %}"></script>
+{% endcompress %}
+{% endblock %}
diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html
index 75a86ad8..8da40727 100644
--- a/templates/front/my_checks.html
+++ b/templates/front/my_checks.html
@@ -235,25 +235,54 @@
                 <div class="tab-content">
                     {% with ping_url="<span class='ex'></span>" %}
                     <div role="tabpanel" class="tab-pane active" id="crontab">
-                        {% include "front/snippets/crontab.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/crontab.html" %}
+                        </div>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="bash">
-                        {% include "front/snippets/bash.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/bash_curl.html" %}
+                        </div>
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/bash_wget.html" %}
+                        </div>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="python">
-                        {% include "front/snippets/python.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/python_urllib2.html" %}
+                        </div>
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/python_requests.html" %}
+                        </div>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="node">
-                        {% include "front/snippets/node.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/node.html" %}
+                        </div>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="php">
-                        {% include "front/snippets/php.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/php.html" %}
+                        </div>
                     </div>
                     <div class="tab-pane" id="browser">
-                        {% include "front/snippets/browser.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/browser.html" %}
+                        </div>
                     </div>
                     <div class="tab-pane" id="powershell">
-                        {% include "front/snippets/powershell.html" %}
+                        <div class="snippet">
+                            <button class="copy-snippet-link hidden-sm">copy</button>
+                            {% include "front/snippets/powershell.html" %}
+                        </div>
                     </div>
                     <div class="tab-pane" id="email">
                             As an alternative to HTTP/HTTPS requests,
@@ -286,6 +315,7 @@
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/nouislider.min.js' %}"></script>
 <script src="{% static 'js/clipboard.min.js' %}"></script>
+<script src="{% static 'js/snippet-copy.js' %}"></script>
 <script src="{% static 'js/checks.js' %}"></script>
 {% endcompress %}
 {% endblock %}
diff --git a/templates/front/snippets/bash.html b/templates/front/snippets/bash_curl.html
similarity index 74%
rename from templates/front/snippets/bash.html
rename to templates/front/snippets/bash_curl.html
index 53022156..1df710c1 100644
--- a/templates/front/snippets/bash.html
+++ b/templates/front/snippets/bash_curl.html
@@ -1,7 +1,4 @@
 <div class="highlight"><pre><span></span><span class="c1"># using curl:</span>
 <span class="c1"># (make sure it is installed on your system!)</span>
 curl --retry <span class="m">3</span> {{ ping_url }}
-
-<span class="c1"># using wget:</span>
-wget {{ ping_url }} -O /dev/null
 </pre></div>
diff --git a/templates/front/snippets/bash.txt b/templates/front/snippets/bash_curl.txt
similarity index 67%
rename from templates/front/snippets/bash.txt
rename to templates/front/snippets/bash_curl.txt
index 934d7f91..2279949f 100644
--- a/templates/front/snippets/bash.txt
+++ b/templates/front/snippets/bash_curl.txt
@@ -1,6 +1,3 @@
 # using curl:
 # (make sure it is installed on your system!)
 curl --retry 3 PING_URL
-
-# using wget:
-wget PING_URL -O /dev/null
\ No newline at end of file
diff --git a/templates/front/snippets/bash_wget.html b/templates/front/snippets/bash_wget.html
new file mode 100644
index 00000000..060a5c65
--- /dev/null
+++ b/templates/front/snippets/bash_wget.html
@@ -0,0 +1,3 @@
+<div class="highlight"><pre><span></span><span class="c1"># using wget:</span>
+wget {{ ping_url }} -O /dev/null
+</pre></div>
diff --git a/templates/front/snippets/bash_wget.txt b/templates/front/snippets/bash_wget.txt
new file mode 100644
index 00000000..e309edb3
--- /dev/null
+++ b/templates/front/snippets/bash_wget.txt
@@ -0,0 +1,2 @@
+# using wget:
+wget PING_URL -O /dev/null
diff --git a/templates/front/snippets/create_check_request.txt b/templates/front/snippets/create_check_request.txt
deleted file mode 100644
index 86d59fd3..00000000
--- a/templates/front/snippets/create_check_request.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-curl SITE_ROOT/api/v1/checks/ \
-    --header "X-Api-Key: your-api-key" \
-    --data '{"name": "Backups", "tags": "prod www", "timeout": 3600, "grace": 60}'
-
-# Or, alternatively:
-curl SITE_ROOT/api/v1/checks/ \
-    --data '{"api_key": "your-api-key", "name": "Backups", "tags": "prod www", "timeout": 3600, "grace": 60}'
diff --git a/templates/front/snippets/create_check_request.html b/templates/front/snippets/create_check_request_a.html
similarity index 54%
rename from templates/front/snippets/create_check_request.html
rename to templates/front/snippets/create_check_request_a.html
index 8e497dfa..e6cc06ff 100644
--- a/templates/front/snippets/create_check_request.html
+++ b/templates/front/snippets/create_check_request_a.html
@@ -1,8 +1,4 @@
 <div class="highlight"><pre><span></span>curl {{ SITE_ROOT }}/api/v1/checks/ <span class="se">\</span>
     --header <span class="s2">&quot;X-Api-Key: your-api-key&quot;</span> <span class="se">\</span>
     --data <span class="s1">&#39;{&quot;name&quot;: &quot;Backups&quot;, &quot;tags&quot;: &quot;prod www&quot;, &quot;timeout&quot;: 3600, &quot;grace&quot;: 60}&#39;</span>
-
-<span class="c1"># Or, alternatively:</span>
-curl {{ SITE_ROOT }}/api/v1/checks/ <span class="se">\</span>
-    --data <span class="s1">&#39;{&quot;api_key&quot;: &quot;your-api-key&quot;, &quot;name&quot;: &quot;Backups&quot;, &quot;tags&quot;: &quot;prod www&quot;, &quot;timeout&quot;: 3600, &quot;grace&quot;: 60}&#39;</span>
 </pre></div>
diff --git a/templates/front/snippets/create_check_request_a.txt b/templates/front/snippets/create_check_request_a.txt
new file mode 100644
index 00000000..e7e4d5db
--- /dev/null
+++ b/templates/front/snippets/create_check_request_a.txt
@@ -0,0 +1,3 @@
+curl SITE_ROOT/api/v1/checks/ \
+    --header "X-Api-Key: your-api-key" \
+    --data '{"name": "Backups", "tags": "prod www", "timeout": 3600, "grace": 60}'
diff --git a/templates/front/snippets/create_check_request_b.html b/templates/front/snippets/create_check_request_b.html
new file mode 100644
index 00000000..a824f47f
--- /dev/null
+++ b/templates/front/snippets/create_check_request_b.html
@@ -0,0 +1,3 @@
+<div class="highlight"><pre><span></span>curl {{ SITE_ROOT }}/api/v1/checks/ <span class="se">\</span>
+    --data <span class="s1">&#39;{&quot;api_key&quot;: &quot;your-api-key&quot;, &quot;name&quot;: &quot;Backups&quot;, &quot;tags&quot;: &quot;prod www&quot;, &quot;timeout&quot;: 3600, &quot;grace&quot;: 60}&#39;</span>
+</pre></div>
diff --git a/templates/front/snippets/create_check_request_b.txt b/templates/front/snippets/create_check_request_b.txt
new file mode 100644
index 00000000..40838f18
--- /dev/null
+++ b/templates/front/snippets/create_check_request_b.txt
@@ -0,0 +1,2 @@
+curl SITE_ROOT/api/v1/checks/ \
+    --data '{"api_key": "your-api-key", "name": "Backups", "tags": "prod www", "timeout": 3600, "grace": 60}'
diff --git a/templates/front/snippets/python.html b/templates/front/snippets/python.html
deleted file mode 100644
index f75fd980..00000000
--- a/templates/front/snippets/python.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="highlight"><pre><span></span><span class="o">&gt;&gt;&gt;</span> <span class="c1"># using urllib2:</span>
-<span class="o">&gt;&gt;&gt;</span> <span class="kn">import</span> <span class="nn">urllib2</span>
-<span class="o">&gt;&gt;&gt;</span> <span class="n">urllib2</span><span class="o">.</span><span class="n">urlopen</span><span class="p">(</span><span class="s2">&quot;{{ ping_url }}&quot;</span><span class="p">)</span>
-
-<span class="o">&gt;&gt;&gt;</span> <span class="c1"># using requests:</span>
-<span class="o">&gt;&gt;&gt;</span> <span class="kn">import</span> <span class="nn">requests</span>
-<span class="o">&gt;&gt;&gt;</span> <span class="n">requests</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s2">&quot;{{ ping_url }}&quot;</span><span class="p">)</span>
-</pre></div>
diff --git a/templates/front/snippets/python.txt b/templates/front/snippets/python.txt
deleted file mode 100644
index b37e2a01..00000000
--- a/templates/front/snippets/python.txt
+++ /dev/null
@@ -1,7 +0,0 @@
->>> # using urllib2:
->>> import urllib2
->>> urllib2.urlopen("PING_URL")
-
->>> # using requests:
->>> import requests
->>> requests.get("PING_URL")
\ No newline at end of file
diff --git a/templates/front/snippets/python_requests.html b/templates/front/snippets/python_requests.html
new file mode 100644
index 00000000..a97a4ff2
--- /dev/null
+++ b/templates/front/snippets/python_requests.html
@@ -0,0 +1,4 @@
+<div class="highlight"><pre><span></span><span class="c1"># using requests:</span>
+<span class="kn">import</span> <span class="nn">requests</span>
+<span class="n">requests</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s2">&quot;{{ ping_url }}&quot;</span><span class="p">)</span>
+</pre></div>
diff --git a/templates/front/snippets/python_requests.txt b/templates/front/snippets/python_requests.txt
new file mode 100644
index 00000000..72a8fb89
--- /dev/null
+++ b/templates/front/snippets/python_requests.txt
@@ -0,0 +1,3 @@
+# using requests:
+import requests
+requests.get("PING_URL")
diff --git a/templates/front/snippets/python_urllib2.html b/templates/front/snippets/python_urllib2.html
new file mode 100644
index 00000000..7fd2b041
--- /dev/null
+++ b/templates/front/snippets/python_urllib2.html
@@ -0,0 +1,4 @@
+<div class="highlight"><pre><span></span><span class="c1"># using urllib2:</span>
+<span class="kn">import</span> <span class="nn">urllib2</span>
+<span class="n">urllib2</span><span class="o">.</span><span class="n">urlopen</span><span class="p">(</span><span class="s2">&quot;{{ ping_url }}&quot;</span><span class="p">)</span>
+</pre></div>
diff --git a/templates/front/snippets/python_urllib2.txt b/templates/front/snippets/python_urllib2.txt
new file mode 100644
index 00000000..44c514c8
--- /dev/null
+++ b/templates/front/snippets/python_urllib2.txt
@@ -0,0 +1,3 @@
+# using urllib2:
+import urllib2
+urllib2.urlopen("PING_URL")
diff --git a/templates/front/welcome.html b/templates/front/welcome.html
index f1cf0dea..b9d4da42 100644
--- a/templates/front/welcome.html
+++ b/templates/front/welcome.html
@@ -59,27 +59,56 @@
             </ul>
             <div class="tab-content">
                 <div role="tabpanel" class="tab-pane active" id="crontab">
-                    {% include "front/snippets/crontab.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/crontab.html" %}
+                    </div>
                 </div>
                 <div role="tabpanel" class="tab-pane" id="bash">
-                    {% include "front/snippets/bash.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/bash_curl.html" %}
+                    </div>
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/bash_wget.html" %}
+                    </div>
                 </div>
                 <div role="tabpanel" class="tab-pane" id="python">
-                    {% include "front/snippets/python.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/python_urllib2.html" %}
+                    </div>
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/python_requests.html" %}
+                    </div>
                 </div>
                 <div role="tabpanel" class="tab-pane" id="node">
-                    {% include "front/snippets/node.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/node.html" %}
+                    </div>
                 </div>
                 <div role="tabpanel" class="tab-pane" id="php">
-                    {% include "front/snippets/php.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/php.html" %}
+                    </div>
                 </div>
                 <div class="tab-pane" id="browser">
-                    {% include "front/snippets/browser.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/browser.html" %}
+                    </div>
                 </div>
                 <div class="tab-pane" id="powershell">
-                    {% include "front/snippets/powershell.html" %}
+                    <div class="snippet">
+                        <button class="copy-snippet-link hidden-sm">copy</button>
+                        {% include "front/snippets/powershell.html" %}
+                    </div>
                 </div>
-                <div class="tab-pane" id="email">
+                <div class="tab-pane tab-pane-email" id="email">
                     <div class="instructions">
                         As an alternative to HTTP/HTTPS requests,
                         you can "ping" this check by sending an
@@ -333,7 +362,8 @@
 {% compress js %}
 <script src="{% static 'js/collapse-native.js' %}"></script>
 <script src="{% static 'js/tab-native.js' %}"></script>
+<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/clipboard.min.js' %}"></script>
+<script src="{% static 'js/snippet-copy.js' %}"></script>
 {% endcompress %}
 {% endblock %}
-
-

From 913b82eb23452b3859b9cdb4357fc76f0eaff9e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Sat, 1 Oct 2016 17:48:17 +0300
Subject: [PATCH 2/2] Use icon in the "copy" button. Add "copy" buttons
 dynamically, in JS. CSS tweaks.

---
 static/css/base.css                   |   4 ++
 static/css/docs.css                   |   7 +---
 static/css/icomoon.css                |  13 +++---
 static/css/my_checks.css              |  24 +++++------
 static/css/snippet-copy.css           |  43 ++++---------------
 static/css/welcome.css                |  43 ++++++++-----------
 static/fonts/icomoon.eot              | Bin 2728 -> 2968 bytes
 static/fonts/icomoon.svg              |   1 +
 static/fonts/icomoon.ttf              | Bin 2564 -> 2804 bytes
 static/fonts/icomoon.woff             | Bin 2640 -> 2880 bytes
 static/js/snippet-copy.js             |  33 +++++++++++----
 templates/front/docs.html             |  55 ++++++------------------
 templates/front/docs_api.html         |  21 +++-------
 templates/front/my_checks.html        |  58 +++++++-------------------
 templates/front/snippets/browser.html |   3 +-
 templates/front/snippets/browser.txt  |   1 +
 templates/front/welcome.html          |  56 ++++++-------------------
 17 files changed, 123 insertions(+), 239 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index 825e77f5..2fa9f07e 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -74,4 +74,8 @@ body {
 
 .dialog-body {
     margin: 24px 0;
+}
+
+pre {
+  border: 0;
 }
\ No newline at end of file
diff --git a/static/css/docs.css b/static/css/docs.css
index c50fc5dd..ff2188e0 100644
--- a/static/css/docs.css
+++ b/static/css/docs.css
@@ -55,11 +55,8 @@ a.section:hover  {
 .page-docs code {
     padding: 2px 4px;
     font-size: 90%;
-    color: #427d5e;
-    background-color: #f2f9f6;
+    color: #333;
+    background-color: #f5f5f5;
     border-radius: 4px;
 }
 
-.snippet pre {
-  border: 1px solid #cccccc;
-}
diff --git a/static/css/icomoon.css b/static/css/icomoon.css
index a62470b5..287b9c92 100644
--- a/static/css/icomoon.css
+++ b/static/css/icomoon.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?j2asdo');
-  src:  url('../fonts/icomoon.eot?j2asdo#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?j2asdo') format('truetype'),
-    url('../fonts/icomoon.woff?j2asdo') format('woff'),
-    url('../fonts/icomoon.svg?j2asdo#icomoon') format('svg');
+  src:  url('../fonts/icomoon.eot?cxijqz');
+  src:  url('../fonts/icomoon.eot?cxijqz#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?cxijqz') format('truetype'),
+    url('../fonts/icomoon.woff?cxijqz') format('woff'),
+    url('../fonts/icomoon.svg?cxijqz#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +24,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-clippy:before {
+  content: "\e900";
+}
 .icon-cancel:before {
   content: "\e5c9";
 }
diff --git a/static/css/my_checks.css b/static/css/my_checks.css
index c9f5924d..89344664 100644
--- a/static/css/my_checks.css
+++ b/static/css/my_checks.css
@@ -63,20 +63,20 @@
     font-style: normal;
 }
 
-
 #show-usage-modal  .modal-dialog {
      width: 1100px;
- }
-
- #show-usage-modal .tab-content {
-     margin-top: 15px;
- }
+}
 
- .tab-pane {
-    border: none;
+#show-usage-modal .modal-body {
     padding: 0;
- }
+}
+
+#show-usage-modal pre {
+    margin: 0;
+    padding: 15px;
+}
+
+#show-usage-modal .highlight:nth-child(n+2) {
+    border-top: 1px solid #ddd;
+}
 
- .snippet {
-   margin-bottom: 15px;
- }
diff --git a/static/css/snippet-copy.css b/static/css/snippet-copy.css
index 2e53acfc..315aa3fb 100644
--- a/static/css/snippet-copy.css
+++ b/static/css/snippet-copy.css
@@ -1,44 +1,15 @@
-.snippet {
-  position: relative;
-  margin-bottom: 3px;
+.highlight {
+    position: relative;
 }
 
-.snippet:last-child {
-  margin-bottom: 0;
-}
-
-.snippet pre {
-  border: none;
-  background: #F6F6F6 !important;
-  margin: 0;
-}
-
-.snippet:hover .copy-snippet-link {
-    opacity: 1
-}
-
-button.copy-snippet-link {
+.highlight button {
     position: absolute;
-    top: 0;
-    right: 0;
-    margin-top: -1px;
-    margin-right: -1px;
-    z-index: 10;
-    display: block;
-    padding: 5px 8px !important;
-    font-size: 12px;
-    cursor: pointer;
-    border-radius: 0 0 0 4px;
+    top: 4px;
+    right: 4px;
     opacity: 0;
-    background: none!important;
-    border: none;
-    outline: none;
-    font-family: "Open Sans", Arial, sans-serif;
-    color: #0091ea;
-    cursor :pointer;
     transition: opacity 0.1s linear;
 }
 
-button.copy-snippet-link:hover {
-    text-decoration: underline;
+.highlight:hover button {
+    opacity: 1
 }
diff --git a/static/css/welcome.css b/static/css/welcome.css
index 7834726d..625483e3 100644
--- a/static/css/welcome.css
+++ b/static/css/welcome.css
@@ -50,26 +50,6 @@
     margin-bottom: 0;
 }
 
-.page-welcome .highlight pre {
-    background: #FFF;
-    border-top: 0;
-    border-radius: 0;
-    border-color: #dddddd;
-}
-
-#email .instructions {
-    background: #FFF;
-    border: 1px solid #dddddd;
-    border-top: 0;
-    padding: 10px;
-}
-
-#email .email-address {
-    font-size: 18px;
-    padding-top: 10px;
-}
-
-
 #get-started {
     margin-top: 4em;
 }
@@ -88,11 +68,24 @@
     height: 22px;
 }
 
-.tab-pane {
-  border-left: 1px solid #DDD;
-  border-right: 1px solid #DDD;
-  border-bottom: 1px solid #DDD;
-  padding: 3px;
+.page-welcome .tab-content {
+    border: 1px solid #ddd;
+    border-top: 0;
+}
+
+.tab-pane p {
+    padding: 15px;
+    margin: 0;
+}
+
+.page-welcome .highlight:nth-child(n+2) {
+    border-top: 1px solid #ddd;
+}
+
+.page-welcome .tab-pane pre {
+    margin-bottom: 0;
+    background: transparent;
+    padding: 15px;
 }
 
 .tab-pane.tab-pane-email {
diff --git a/static/fonts/icomoon.eot b/static/fonts/icomoon.eot
index 2d318da4a533e953f541f58e4e435764be81aaaa..870829768b694e8d3b23cbff6b4d08e02b2d621c 100644
GIT binary patch
delta 598
zcmXAmO=uHA6vyAp<YSX4?P@oPW0Y>!EQ(){&8BEo#v&e?;;9~51YOgQ2#E=%hYCu@
zi}$#f3Lbh;C|-N%p~xJ(2zseKdN7AzdMQ*?1WoGOIPiGy_y0fMe61U+sqkt7;72Pw
z9%}E^8vedE(wZqX{{p}k#=TP2t3Mlh`U`+$kY6o%jXLIG<W0=lQswdDqB(gSSph`W
z%M0Fo{CoO5T4nSLWfY<nwvD`oe5zbsUb!U0?~vak->B3|UhGTaK0r(h{HnK7hhrDu
z4hrW`7=7qf7hX=q{vc1|CeQ1&#xgK;Aifj$z}U7wPp;8j@L!V&OQM*;^D#IC1V+D-
z_H5@v=TqnNx8L1r_fdCq7hcdz(4C<?k_sA$--@UFwRmLXHvJfGMsWf#$rPM~ahQNf
zxCv8m3m|Lirs3#$`z*=Z)>y;{LLW&wX0C9RSmZKsas@YEaB@il)c})*nJ+NMwX*JE
z;+ihOl9+}WwG4-<o}^OPToqlnsJLx&D!JVheMk=T0J(iSoz_#SGkwTrr6lSAuS7%-
zlp>;!p`;X4V8Ly-SafaP!^-B8;?(~GY<|M(gAh_-?*RxRg%Ef@f`O}1+iTw)y7Che
zp#kq05A@()0gFLqZ<+F^wTndepJ*b)B!IuAjU8b#gAqE+!Qj1s`q$~v4HkPt{sE2h
BjKTl_

delta 377
zcmbOszCx6B1s4MY%S2XlmSFjJN|PUQicAbiuHVhTz_1616OwZi3pV{o`pCe*C<EkA
zNlz>;0MY_L{sth;k)BhTmJs5;6v*Gfz`%MWBQ-IFYqrb@1_t&TpuAZIP=Gy$`67_N
z1;|&)$StWbV_@9}<lg}D9dh!M6FKj2@BxjI0P>Y`6DtZBMD-YAfC4r^0foH8+|-#~
zoWFs5pcrFYL4I)w12a&Df%6GSo`IS9=HwJcJEj*qCNE*MwygjPN&(%+%)rIK$e{3m
z@nPiClTXh+z5M*gi`*AQFLwO@`~N>kJ5Y`RF8BRK4oGgY0+SRAP%GnPM<(gbu}o)J
zwHd)`8I<112gmc<d}ZKf0SjDy`NkT=fYHpWm_sL9aOyJ(OwQnRn7oElNeCzl(k#Fb
R#Q@R61T<B6^JmVbi~vruXzc(1

diff --git a/static/fonts/icomoon.svg b/static/fonts/icomoon.svg
index 2aa4f133..7b548958 100644
--- a/static/fonts/icomoon.svg
+++ b/static/fonts/icomoon.svg
@@ -19,4 +19,5 @@
 <glyph unicode="&#xe86d;" glyph-name="ok" d="M426 212.667l384 384-60 62-324-324-152 152-60-60zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 <glyph unicode="&#xe872;" glyph-name="delete" d="M810 768.667v-86h-596v86h148l44 42h212l44-42h148zM256 128.667v512h512v-512c0-46-40-86-86-86h-340c-46 0-86 40-86 86z" />
 <glyph unicode="&#xe8b8;" glyph-name="settings" d="M512 276.667c82 0 150 68 150 150s-68 150-150 150-150-68-150-150 68-150 150-150zM830 384.667l90-70c8-6 10-18 4-28l-86-148c-6-10-16-12-26-8l-106 42c-22-16-46-32-72-42l-16-112c-2-10-10-18-20-18h-172c-10 0-18 8-20 18l-16 112c-26 10-50 24-72 42l-106-42c-10-4-20-2-26 8l-86 148c-6 10-4 22 4 28l90 70c-2 14-2 28-2 42s0 28 2 42l-90 70c-8 6-10 18-4 28l86 148c6 10 16 12 26 8l106-42c22 16 46 32 72 42l16 112c2 10 10 18 20 18h172c10 0 18-8 20-18l16-112c26-10 50-24 72-42l106 42c10 4 20 2 26-8l86-148c6-10 4-22-4-28l-90-70c2-14 2-28 2-42s0-28-2-42z" />
+<glyph unicode="&#xe900;" glyph-name="clippy" horiz-adv-x="896" d="M704 64h-640v576h640v-192h64v320c0 35-29 64-64 64h-192c0 71-57 128-128 128s-128-57-128-128h-192c-35 0-64-29-64-64v-704c0-35 29-64 64-64h640c35 0 64 29 64 64v128h-64v-128zM192 768c29 0 29 0 64 0s64 29 64 64 29 64 64 64 64-29 64-64 32-64 64-64 33 0 64 0 64-29 64-64h-512c0 39 28 64 64 64zM128 256h128v64h-128v-64zM576 384v128l-256-192 256-192v128h320v128h-320zM128 128h192v64h-192v-64zM448 576h-320v-64h320v64zM256 448h-128v-64h128v64z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/static/fonts/icomoon.ttf b/static/fonts/icomoon.ttf
index 21cc60cc7539fbe122c26602b1b13df3800ee737..cea03cff95d47ce7aa6facb6ef67d3b1a43e3436 100644
GIT binary patch
delta 618
zcmXAnO=uHA6oB9CB+Z|aZrjbqF_vuBEQ(4cn_bap8H;#mL=P53Db%&LjgXjNdZ-7<
z2;$x5B=pdWPz3SNOAjJ*@Zv!awFeI#ED}sEf}$eSB)*NqJl^}>d-G=A%sd+VsWpHA
zKnw&>IC<sjL@quO{EMDfC^zRTUhQH0!EXSPLS9?)>NV8E$XlqxOXd5Ei^kMJWC<{|
zQCjeBM}H(wV5o#~w}g&RnQkMmBOfkRmRC-T;A`YJ$QR1h`SV`nQ|uN%B<v?typ<Xp
zfLY|@$mzRYW#Q>`WDofgZt}QRtuNz2aYT3gI8eI%L{2IlSS1Bhpeu!^qp%OVN`EH1
z*IRE}?^++e{%Kd*_u5+>XwH&UrUU(MzYnDUB^?-l!6sROxyey|U0>6$>Hc!k{2m!y
zjRtUTz9jF1jSyA_DyW2UI0Xfmf{QQ>mjSYdYG}5aw~mp#WoCvnU(~ULZRFf@#3W~k
zopYVMYv&RgdVNf2M&6~iV`iQG#4#L#CNVT4WNNk|yFwA%VzTHsMae9SDS}xI-h;$2
z^O0Fcl1Ww9kM<y&6@p0Y0|@Vel!W(Cq!3);XfVqu79ERq(XyCOu<HK;7CU72fO8=+
zw-1~M&N=qye*_%$>bKpw_}O0&3k-NiyQBKA4QLEBeNJU_BQ!zO=Eo2ZPyx_PhBG5{
VW>7+f8!)&pQ2cA$oC`lA{{W>zk?sHh

delta 349
zcmew&+9FcVz{tSBz|GLWz|3IaAFOZ0FT}bVD6$8L6OwZi3pV{o`pCe*C<EkANlz>;
z0MY_L{sth;k)BhTmJs5;6v*Gfz`%MWBQ-IFYqrb@1_t&TpuAZIP=Gy$`67_N1;|&)
z$StWbV_@9}<lg}D9dh!M9TPe4aPR@mk^l-Q<tA1XFo-h50QojRzCvDNZt6@g&fh>j
zP>ivyAiuZ-=ujZwd;*eZU}nBK@qiuEiye~~traVPLQ+82F*9%heWmb#@nPiClTXh+
zz5M*gi`*AQFLq3hW0aX(!zjf9RKhrUA*00RZH(txwLu{O1WNDZgX8&azA|vLfcckS
xzOe=|U^Me8=FrJgIP@6>CLiH&n9RYcBm|TNX%=9JVu0vj0-7qk*`ISMBLIGrRYL#(

diff --git a/static/fonts/icomoon.woff b/static/fonts/icomoon.woff
index 642be6a5abbf1b8dc552592f32a413926fe8af04..8c57375ea73c29a3ece30862357969c224135cf3 100644
GIT binary patch
delta 637
zcmXw%PiPZC6vp4%O`D{NG>h469Ba&Wn?)%iWV0(8EkltU8mX6pD1yZPi;$RN3f6;U
zym;5WDD>d52%hSpr?OWMid2sx7AdA69;Av;llUgB13%_{-+a882lGA|q>}fqmP&v?
zE5;!v_o2Nf$??|T*?MIO0ITGzN*)bA{JmIdlBa}7M-E9W)*dX77Y7(zlPs8%$E)*|
zIf}fdj3*iTnLbk`lf3Vw$0XsJx>c<&uK+|7q%TX(i-FBrW0rE$(V73j=%?82dS!(!
zj#3!1eU8D+yOsJpdC%yPk0sBiqWepY<}yukkdaxH(yF@U$8kd01^)^bEkV`@B<Ltk
zgJ-|s_Vt}NJ8ySBeEZX`x9_z#D7S_qnO*30dOg72*K8>BicPR0^U_C+7sje_%}Ds4
z@#OkGz8h$TsUN694Il&Opa_#tf+?5=$eEg{J6gdW$AWE*4(bvunR3j$cL^=LfKJ|X
z3!alt>Eue8(#?XWI<A#-kDzP1NF|!O8Mbss2|7X%+-5=9b;|*>ZKeojw|Ey)2__}8
zPo>kEVVv$lE++&A^m;(vfgnKMB?2M1!l_`kTQ0jc>riDgp-|U@1~xlkb%ApcP__pg
z1?QaRLxNVb@niee@Wo#clYao<qkc!*I4t_R`ce)2z3^Go{ILiRsRF>Ci;TwAnSKim
MZa{ebX=D@s0nP7`*Z=?k

delta 420
zcmX>gc0oj>+~3WOfsp|SxB?is!8FU{kBlOdm{=z22-ojU&P^;}U|`Gu%1i;_O+S)8
zrY9DI#Qp&J98fHfo>Q5|z`(@9z`%M0gcCyCmu93UrZ6zDp8%>c17WV&GAA;Cf)H&C
zDnKz6_8jJm8M!4DKrs;C0ffyMSoh`RCj-^_aR3cqPy%7jI~;tui4{PLIXZxR1uzz6
zh{;RLO$Car06M4*glBqj{w~NbE&+PT0IrT1$YN%`Ihlvij_JjY$v%wMia;9~q!<Jk
zm>IZ${#SUw_%QP6$){(ZUVi@LMed6tpsH1jGIIa_{{PRw`2Vp2i`-f%J1J`^GYMhw
z1>$qW!+{zZApym@nVIPvt2Q_gfew8q9~{qb^Ob>{1!w~U!{wK6tdVKvRm`E2A8_b1
i3QQK@beJ5%sU!rH25A;xh+=@~VFDT~ym>a~Qbqt`yJC9)

diff --git a/static/js/snippet-copy.js b/static/js/snippet-copy.js
index cc8225c2..7f5efb9c 100644
--- a/static/js/snippet-copy.js
+++ b/static/js/snippet-copy.js
@@ -1,11 +1,24 @@
 $(function() {
+    if (/Mac/i.test(navigator.userAgent)) {
+        // No support for Safari :(
+        return;
+    }
+
+    var markup = '<button class="btn btn-default hidden-sm">' +
+                 '<span class="icon-clippy"></span>' +
+                 '</button>';
+
+
+
+    $(".highlight").append(markup);
+
 
     var reBlankLines = new RegExp("^\\s*[\\r\\n]", "gm");
     var reTrailingWhitespace = new RegExp("\\s+$");
 
-    var clipboard = new Clipboard("button.copy-snippet-link", {
+    var clipboard = new Clipboard(".highlight button", {
         text: function (trigger) {
-            var snippetElement = $(trigger).next(".highlight").children().clone();
+            var snippetElement = $(trigger).parent().children().clone();
             /* remove pygmentize comment elements */
             snippetElement.find(".c, .cm, .cp, .c1, .cs").remove();
             /* remove blank lines and trailing whitespace */
@@ -14,13 +27,15 @@ $(function() {
     });
 
     clipboard.on("success", function(e) {
-        e.trigger.textContent = "copied!";
-        e.clearSelection();
+        $(e.trigger)
+            .tooltip({title: "Copied!", trigger: "hover"})
+            .tooltip("show")
+            .on("hidden.bs.tooltip", function(){
+                $(this).tooltip("destroy");
+            })
     });
 
-    $("button.copy-snippet-link").mouseout(function(e) {
-        setTimeout(function() {
-            e.target.textContent = "copy";
-        }, 300);
-    })
+    clipboard.on("error", function(e) {
+        prompt("Press Ctrl+C to select:", e.text)
+    });
 });
diff --git a/templates/front/docs.html b/templates/front/docs.html
index 7380450a..02e17114 100644
--- a/templates/front/docs.html
+++ b/templates/front/docs.html
@@ -44,10 +44,7 @@ and your command runs. If it completes successfully (exit code 0),
 curl or wget runs a HTTP GET call to the ping URL.
 </p>
 
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/crontab.html" %}
-</div>
+{% include "front/snippets/crontab.html" %}
 
 <p>With this simple modification, you monitor several failure
 scenarios:</p>
@@ -113,41 +110,21 @@ thing: they fire off a HTTP GET method.</p>
     Ubuntu, for example, does not have curl installed out of the box.
 </p>
 
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/bash_curl.html" %}
-</div>
-
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/bash_wget.html" %}
-</div>
+{% include "front/snippets/bash_curl.html" %}
+{% include "front/snippets/bash_wget.html" %}
 
 <a name="python"></a>
 <h3>Python</h3>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/python_urllib2.html" %}
-</div>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/python_requests.html" %}
-</div>
+{% include "front/snippets/python_urllib2.html" %}
+{% include "front/snippets/python_requests.html" %}
 
 <a name="node"></a>
 <h3>Node</h3>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/node.html" %}
-</div>
-
+{% include "front/snippets/node.html" %}
 
 <a name="php"></a>
 <h3>PHP</h3>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/php.html" %}
-</div>
+{% include "front/snippets/php.html" %}
 
 <a name="browser"></a>
 <h3>Browser</h3>
@@ -156,10 +133,7 @@ thing: they fire off a HTTP GET method.</p>
     CORS header in its ping responses, so cross-domain AJAX requests
     should work.
 </p>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/browser.html" %}
-</div>
+{% include "front/snippets/browser.html" %}
 
 <a name="powershell"></a>
 <h3>PowerShell</h3>
@@ -173,20 +147,14 @@ When scheduled to run with Task Scheduler, it will essentially
 just send regular "I'm alive" messages. You can of course extend it to
 do more things.</p>
 
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/powershell.html" %}
-</div>
+{% include "front/snippets/powershell.html" %}
 
 <p>Save the above to e.g. <code>C:\Scripts\healthchecks.ps1</code>. Then use
 the following command in a Scheduled Task to run the script:
 </p>
 
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    <div class="highlight">
-        <pre>powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1</pre>
-    </div>
+<div class="highlight">
+    <pre>powershell.exe -ExecutionPolicy bypass -File C:\Scripts\healthchecks.ps1</pre>
 </div>
 
 <a name="email"></a>
@@ -284,6 +252,7 @@ the following command in a Scheduled Task to run the script:
 {% block scripts %}
 {% compress js %}
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/clipboard.min.js' %}"></script>
 <script src="{% static 'js/snippet-copy.js' %}"></script>
 {% endcompress %}
diff --git a/templates/front/docs_api.html b/templates/front/docs_api.html
index 9c61f2e1..4c823814 100644
--- a/templates/front/docs_api.html
+++ b/templates/front/docs_api.html
@@ -64,10 +64,7 @@ The response may contain a JSON document with additional data.
     a JSON document with all checks in user's account.
 </p>
 <h3 class="api-section">Example Request</h3>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/list_checks_request.html" %}
-</div>
+{% include "front/snippets/list_checks_request.html" %}
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/list_checks_response.html" %}
@@ -170,16 +167,10 @@ The response may contain a JSON document with additional data.
 </table>
 
 <h3 class="api-section">Example Request</h3>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/create_check_request_a.html" %}
-</div>
+{% include "front/snippets/create_check_request_a.html" %}
 <br>
 <p>Or, alternatively:</p>
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/create_check_request_b.html" %}
-</div>
+{% include "front/snippets/create_check_request_b.html" %}
 
 
 <h3 class="api-section">Example Response</h3>
@@ -208,10 +199,7 @@ The response may contain a JSON document with additional data.
 
 <h3 class="api-section">Example Request</h3>
 
-<div class="snippet">
-    <button class="copy-snippet-link hidden-sm">copy</button>
-    {% include "front/snippets/pause_check_request.html" %}
-</div>
+{% include "front/snippets/pause_check_request.html" %}
 
 <h3 class="api-section">Example Response</h3>
 {% include "front/snippets/pause_check_response.html" %}
@@ -222,6 +210,7 @@ The response may contain a JSON document with additional data.
 {% block scripts %}
 {% compress js %}
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/clipboard.min.js' %}"></script>
 <script src="{% static 'js/snippet-copy.js' %}"></script>
 {% endcompress %}
diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html
index 8da40727..072f6c2e 100644
--- a/templates/front/my_checks.html
+++ b/templates/front/my_checks.html
@@ -230,67 +230,37 @@
 
             </div>
             <div class="modal-body">
-
-
                 <div class="tab-content">
                     {% with ping_url="<span class='ex'></span>" %}
                     <div role="tabpanel" class="tab-pane active" id="crontab">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/crontab.html" %}
-                        </div>
+                        {% include "front/snippets/crontab.html" %}
                     </div>
                     <div role="tabpanel" class="tab-pane" id="bash">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/bash_curl.html" %}
-                        </div>
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/bash_wget.html" %}
-                        </div>
+                        {% include "front/snippets/bash_curl.html" %}
+                        {% include "front/snippets/bash_wget.html" %}
                     </div>
                     <div role="tabpanel" class="tab-pane" id="python">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/python_urllib2.html" %}
-                        </div>
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/python_requests.html" %}
-                        </div>
+                        {% include "front/snippets/python_urllib2.html" %}
+                        {% include "front/snippets/python_requests.html" %}
                     </div>
                     <div role="tabpanel" class="tab-pane" id="node">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/node.html" %}
-                        </div>
+                        {% include "front/snippets/node.html" %}
                     </div>
                     <div role="tabpanel" class="tab-pane" id="php">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/php.html" %}
-                        </div>
+                        {% include "front/snippets/php.html" %}
                     </div>
                     <div class="tab-pane" id="browser">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/browser.html" %}
-                        </div>
+                        {% include "front/snippets/browser.html" %}
                     </div>
                     <div class="tab-pane" id="powershell">
-                        <div class="snippet">
-                            <button class="copy-snippet-link hidden-sm">copy</button>
-                            {% include "front/snippets/powershell.html" %}
-                        </div>
+                        {% include "front/snippets/powershell.html" %}
                     </div>
                     <div class="tab-pane" id="email">
-                            As an alternative to HTTP/HTTPS requests,
-                            you can "ping" this check by sending an
-                            email message to
-                            <div class="email-address">
-                                <code class="em"></code>
-                            </div>
+                        <p>
+                        As an alternative to HTTP/HTTPS requests,
+                        you can "ping" this check by sending an
+                        email message to <code class="em"></code>
+                        </p>
                     </div>
                     {% endwith %}
                 </div>
diff --git a/templates/front/snippets/browser.html b/templates/front/snippets/browser.html
index 1f030cbd..131fc734 100644
--- a/templates/front/snippets/browser.html
+++ b/templates/front/snippets/browser.html
@@ -1,4 +1,5 @@
-<div class="highlight"><pre><span></span><span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
+<div class="highlight"><pre><span></span><span class="c1">// the server returns appropriate CORS headers so cross-domain AJAX requests should work:</span>
+<span class="kd">var</span> <span class="nx">xhr</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
 <span class="nx">xhr</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s1">&#39;GET&#39;</span><span class="p">,</span> <span class="s1">&#39;{{ ping_url }}&#39;</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
 <span class="nx">xhr</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
 </pre></div>
diff --git a/templates/front/snippets/browser.txt b/templates/front/snippets/browser.txt
index 93e083c0..1805a685 100644
--- a/templates/front/snippets/browser.txt
+++ b/templates/front/snippets/browser.txt
@@ -1,3 +1,4 @@
+// the server returns appropriate CORS headers so cross-domain AJAX requests should work:
 var xhr = new XMLHttpRequest();
 xhr.open('GET', 'PING_URL', true);
 xhr.send(null);
\ No newline at end of file
diff --git a/templates/front/welcome.html b/templates/front/welcome.html
index b9d4da42..00f46c98 100644
--- a/templates/front/welcome.html
+++ b/templates/front/welcome.html
@@ -59,64 +59,35 @@
             </ul>
             <div class="tab-content">
                 <div role="tabpanel" class="tab-pane active" id="crontab">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/crontab.html" %}
-                    </div>
+                    {% include "front/snippets/crontab.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="bash">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/bash_curl.html" %}
-                    </div>
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/bash_wget.html" %}
-                    </div>
+                    {% include "front/snippets/bash_curl.html" %}
+                    {% include "front/snippets/bash_wget.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="python">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/python_urllib2.html" %}
-                    </div>
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/python_requests.html" %}
-                    </div>
+                    {% include "front/snippets/python_urllib2.html" %}
+                    {% include "front/snippets/python_requests.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="node">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/node.html" %}
-                    </div>
+                    {% include "front/snippets/node.html" %}
                 </div>
                 <div role="tabpanel" class="tab-pane" id="php">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/php.html" %}
-                    </div>
+                    {% include "front/snippets/php.html" %}
                 </div>
                 <div class="tab-pane" id="browser">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/browser.html" %}
-                    </div>
+                    {% include "front/snippets/browser.html" %}
                 </div>
                 <div class="tab-pane" id="powershell">
-                    <div class="snippet">
-                        <button class="copy-snippet-link hidden-sm">copy</button>
-                        {% include "front/snippets/powershell.html" %}
-                    </div>
+                    {% include "front/snippets/powershell.html" %}
                 </div>
                 <div class="tab-pane tab-pane-email" id="email">
-                    <div class="instructions">
+                    <p>
                         As an alternative to HTTP/HTTPS requests,
                         you can "ping" this check by sending an
                         email message to
-                        <div class="email-address">
-                            <code>{{ check.email }}</code>
-                        </div>
-                    </div>
+                        <a href="mailto:{{ check.email }}">{{ check.email }}</a>
+                    </p>
                 </div>
             </div>
         </div>
@@ -360,9 +331,8 @@
 
 {% block scripts %}
 {% compress js %}
-<script src="{% static 'js/collapse-native.js' %}"></script>
-<script src="{% static 'js/tab-native.js' %}"></script>
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
+<script src="{% static 'js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/clipboard.min.js' %}"></script>
 <script src="{% static 'js/snippet-copy.js' %}"></script>
 {% endcompress %}