View source for Template:Optin/Default

<html>
<fieldset class="optin-options">
    <span id="error-optin" class="lp-error" style="display: none;">
        </html>{{int:donate_interface-error-msg-opt_in}}<html>
    </span>
    <ul>
        <li>
            <input class="lp-radio" type="radio" name="opt_in" id="optin-yes" value="1">
            <label class="lp-radio-label" for="optin-yes"></html>{{int:donate_interface-donor-opt_in_yes}}<html></label>
        </li>
        <li>
            <input class="lp-radio" type="radio" name="opt_in" id="optin-no" value="0">
            <label class="lp-radio-label" for="optin-no"></html>{{int:donate_interface-donor-opt_in_no}}<html></label>
        </li>
    </ul>
    <div class="optin-no-prompt">
        <div class="optin-no-prompt__no"></div>
        <div class="optin-no-prompt__yes"></div>
    </div>
    <div class="optin-smallprint links-in-new-tab">
        </html>{{#tag:html|{{int:donate_interface-donor-opt_in_explain|https://foundation.wikimedia.org/wiki/Special:LandingCheck?basic=true&language={{int:lang}}&landing_page=Donor_privacy_policy}}}}<html>
    </div>
</fieldset>
<style>
/* --- Opt-in --- */
.optin-options ul {
    list-style: none;
    margin: 0;
}

.optin-options li {
    display: table;
}

.lp-radio {
    display: table-cell;
    vertical-align: top;
    height: 18px;
    margin: 8px;
    cursor: pointer;
}

.lp-radio-label {
    display: table-cell;
    vertical-align: top;
    padding: 4px 0;
    white-space: normal;
    font-size: 14px;
    line-height: 19px;
    font-weight: normal;
    cursor: pointer;
}

.lp-radio-label:hover,
.lp-radio:focus + .lp-radio-label,
.lp-radio:hover + .lp-radio-label {
    color: #36c;
    text-decoration: none;
}

.optin-smallprint {
    clear: both;
    font-size: 12px;
    line-height: 14px;
    padding: 4px;
}

.optin-no-prompt {
    display: none;
    margin: 8px;
    padding: 6px 6px 7px;
    border: 2px solid #900;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.2857142857; /*18px @14px*/
    font-weight: normal;
}

.optin-no-prompt.is-positive {
    border-color: #14866d;
    font-weight: bold;
}

.optin-no-prompt__yes {
    display: none;
}

.optin-no-prompt__no {
    display: block;
}

.optin-no-prompt.is-positive .optin-no-prompt__yes {
    display: block;
}

.optin-no-prompt.is-positive .optin-no-prompt__no {
    display: none;
}
</style>
<script>
/* Called by Common.js */
function initOptin() {
    var language = mw.config.get('wgUserLanguage');
    var optinNoPrompts = {
        'en' : {
            'no'  : "😔 Are you sure? We don't email often. You can change your mind anytime.",
            'yes' : "😍 Thanks for changing your mind! We'll respect your inbox."
        }
    };
    optinNoPrompts['en-gb'] = optinNoPrompts['en'];

    // Only do all this if we have translated prompts
    if ( optinNoPrompts[language] ) {
        $('.optin-no-prompt__no').text( optinNoPrompts[language].no );
        $('.optin-no-prompt__yes').text( optinNoPrompts[language].yes );

        $('.optin-options').on('click', function(){
            if ( $('#optin-no').is(':checked') ) {
                $('.optin-no-prompt').removeClass('is-positive');
                if ( !$('.optin-no-prompt').is(':visible') ) {
                    $('.optin-no-prompt').slideDown();
                }
            } else {
                $('.optin-no-prompt').addClass('is-positive');
            }
        });
    }
}
</script>
</html>