www.gittip.com/www/%username/widgets/index.html

from aspen import Response
from gittip.utils import get_participant
from gittip import AMOUNTS
# ========================================================================== ^L

participant = get_participant(request, restrict=True)
hero = "Widgets"
title = "%s - %s" % (participant.username, hero)
locked = False

# ========================================================================== ^L
{% extends "templates/profile.html" %}
{% block page %}
<style>
    /* Copied and pasted from %username/widget.html */
    .button-examples BUTTON.old-widget-style {
        font: normal 12pt/12pt "Lato", sans-serif;
        text-decoration: none;

        /* reset/override */
        color: white ! important;
        letter-spacing: 0;
        text-transform: none;

        width: auto;
        overflow: visible;
        display: inline-block;
        cursor: pointer;

        border: 1pt solid #999;
        -moz-border-radius: 7pt;
        -webkit-border-radius: 7pt;
        -o-border-radius: 7pt;
        -ms-border-radius: 7pt;
        -khtml-border-radius: 7pt;
        border-radius: 7pt;

        background: #F7F7F6 url("/assets/button-bg.png") repeat-x bottom left;
        background-image: -webkit-gradient( linear, 0% 0%, 0% 100%
                                          , from(#F7F7F6)
                                          , to(#999)
                                           );
        background-image: -moz-linear-gradient(top, #F7F7F6, #CCC);
        background-image: linear-gradient(top, #F7F7F6, #999);

        padding: 4pt 12pt 6pt 11pt;
        margin: 0;
        vertical-align: middle;

        -moz-background-clip: padding;
        -webkit-background-clip: padding;
        -o-background-clip: padding-box;
        -ms-background-clip: padding-box;
        -khtml-background-clip: padding-box;
        background-clip: padding-box;
    }

    .button-examples BUTTON.old-widget-style { /* .selected */
        border: 1px solid #0A382E;
        background: #2A8F79 url("/assets/button-bg.png") repeat-x bottom left;
        background-image: -webkit-gradient( linear, 0% 0%, 0% 100%
                                          , from(#2A8F79)
                                          , to(#0D4035)
                                           );
        background-image: -moz-linear-gradient(top, #2A8F79, #0D4035);
        background-image: linear-gradient(top, #2A8F79, #0D4035);
    }

    .button-examples BUTTON.old-widget-style { /* .small */
        font: normal 9pt/9pt "Lato", sans-serif;
        padding: 2pt 5pt 2.5pt;
        -moz-border-radius: 3pt;
        -webkit-border-radius: 3pt;
        -o-border-radius: 3pt;
        -ms-border-radius: 3pt;
        -khtml-border-radius: 3pt;
        border-radius: 3pt;
    }

    .button-examples BUTTON.old-widget-style::-moz-focus-inner {
        border: none;
        padding: 0;
    }

    .button-examples BUTTON.old-widget-style:focus {
        outline: none;
    }

    .button-examples BUTTON.old-widget-style, .button-examples BUTTON.old-widget-style:visited {
        color: #888;
    }

    .button-examples BUTTON.old-widget-style.selected, .button-examples BUTTON.old-widget-style.selected:visited,
    .button-examples BUTTON.old-widget-style:hover, .button-examples BUTTON.old-widget-style:hover:visited,
    .button-examples BUTTON.old-widget-style:focus, .button-examples BUTTON.old-widget-style:focus:visited,
    .button-examples BUTTON.old-widget-style:active, .button-examples BUTTON.old-widget-style:active:visited {
        color: white;
    }

    .button-examples BUTTON.old-widget-style:hover, .button-examples BUTTON.old-widget-style:focus {
        border: 1px solid #0A382E;
        background-image: url("/assets/.button-examples BUTTON.old-widget-style-bg.over.png");
        background-image: -webkit-gradient( linear, 0% 0%, 0% 100%
                                          , from(#2A8F79)
                                          , to(#04221B)
                                           );
        background-image: -moz-linear-gradient(top, #2A8F79, #04221B);
        background-image: linear-gradient(top, #2A8F79, #04221B));
    }
    .button-examples BUTTON.old-widget-style:active {
        /* http://somadesign.ca/demos/.button-examples BUTTON.old-widget-styles-redux.html */
        -moz-box-shadow
            :0 .33em 1em rgba(0,0,0,.67) inset,
            1px 1px 0 rgba(255,255,255,.25) inset,
            -1px -1px 0 rgba(255,255,255,.25) inset;
        -webkit-box-shadow:
            0 .33em 2em rgba(0,0,0,.67) inset,
            1px 1px 0 rgba(255,255,255,.25) inset,
            -1px -1px 0 rgba(255,255,255,.25) inset;
        box-shadow:
            0 .33em 2em rgba(0,0,0,.67) inset,
            1px 1px 0 rgba(255,255,255,.25) inset,
            -1px -1px 0 rgba(255,255,255,.25) inset;
    }
</style>
<div class="col1">
    <h2>Widget #1</h2>

    <p>Use this code to embed a Gittip button on your website:</p>

    <pre>&lt;iframe style="border: 0; margin: 0; padding: 0;"
        src="https://www.gittip.com/{{ participant.username }}/widget.html"
        width="48pt" height="22pt"&gt;&lt;/iframe&gt;</pre>

    <p>The button opens your profile on Gittip in a new tab or window.
    Here's what the text reads:</p>

    <ul class="button-examples no-bullets">

        <li><button class="old-widget-style">Gittip</button>&mdash;person is not
        logged into Gittip or doesn't tip you</li>

        <li><button class="old-widget-style">3.00</button>&mdash;person tips you;
        shows current gift amount</li>

        <li><button class="old-widget-style">You!</button>&mdash;your own
        button</li>

    </ul>

    <p>Here's an example using
        <a href="/whit537/">whit537</a>:
        <iframe style="border: 0; margin: 0 0 -3pt 3pt; padding: 0;"
            src="https://www.gittip.com/whit537/widget.html"
            width="48pt" height="22pt"></iframe>
    </p>
</div>
<div class="col2">

    <h2>Widget #2</h2>

    <p>Use this code to add a Gittip &ldquo;receiving&rdquo; widget on your website:</p>

<pre>&lt;script data-gittip-username="{{ participant.username }}"
src="https://www.gittip.com/assets/widgets/0002.js"&gt;
&lt;/script&gt;</pre>

    <p>Here's what it looks like:</p>

    <script data-gittip-username="{{ participant.username }}" src="/assets/widgets/0002.js"></script>

</div>
{% end %}