").attr({role:"log","aria-live":"assertive","aria-relevant":"additions"}).appendTo(this.document[0].body),this._addClass(this.liveRegion,null,"ui-helper-hidden-accessible"),this.disabledTitles=t([])},_setOption:function(e,i){var s=this;this._super(e,i),"content"===e&&t.each(this.tooltips,function(t,e){s._updateContent(e.element)})},_setOptionDisabled:function(t){this[t?"_disable":"_enable"]()},_disable:function(){var e=this;t.each(this.tooltips,function(i,s){var n=t.Event("blur");n.target=n.currentTarget=s.element[0],e.close(n,!0)}),this.disabledTitles=this.disabledTitles.add(this.element.find(this.options.items).addBack().filter(function(){var e=t(this);return e.is("[title]")?e.data("ui-tooltip-title",e.attr("title")).removeAttr("title"):void 0}))},_enable:function(){this.disabledTitles.each(function(){var e=t(this);e.data("ui-tooltip-title")&&e.attr("title",e.data("ui-tooltip-title"))}),this.disabledTitles=t([])},open:function(e){var i=this,s=t(e?e.target:this.element).closest(this.options.items);s.length&&!s.data("ui-tooltip-id")&&(s.attr("title")&&s.data("ui-tooltip-title",s.attr("title")),s.data("ui-tooltip-open",!0),e&&"mouseover"===e.type&&s.parents().each(function(){var e,s=t(this);s.data("ui-tooltip-open")&&(e=t.Event("blur"),e.target=e.currentTarget=this,i.close(e,!0)),s.attr("title")&&(s.uniqueId(),i.parents[this.id]={element:this,title:s.attr("title")},s.attr("title",""))}),this._registerCloseHandlers(e,s),this._updateContent(s,e))},_updateContent:function(t,e){var i,s=this.options.content,n=this,o=e?e.type:null;return"string"==typeof s||s.nodeType||s.jquery?this._open(e,t,s):(i=s.call(t[0],function(i){n._delay(function(){t.data("ui-tooltip-open")&&(e&&(e.type=o),this._open(e,t,i))})}),i&&this._open(e,t,i),void 0)},_open:function(e,i,s){function n(t){l.of=t,a.is(":hidden")||a.position(l)}var o,a,r,h,l=t.extend({},this.options.position);if(s){if(o=this._find(i))return o.tooltip.find(".ui-tooltip-content").html(s),void 0;i.is("[title]")&&(e&&"mouseover"===e.type?i.attr("title",""):i.removeAttr("title")),o=this._tooltip(i),a=o.tooltip,this._addDescribedBy(i,a.attr("id")),a.find(".ui-tooltip-content").html(s),this.liveRegion.children().hide(),h=t("
").html(a.find(".ui-tooltip-content").html()),h.removeAttr("name").find("[name]").removeAttr("name"),h.removeAttr("id").find("[id]").removeAttr("id"),h.appendTo(this.liveRegion),this.options.track&&e&&/^mouse/.test(e.type)?(this._on(this.document,{mousemove:n}),n(e)):a.position(t.extend({of:i},this.options.position)),a.hide(),this._show(a,this.options.show),this.options.track&&this.options.show&&this.options.show.delay&&(r=this.delayedShow=setInterval(function(){a.is(":visible")&&(n(l.of),clearInterval(r))},t.fx.interval)),this._trigger("open",e,{tooltip:a})}},_registerCloseHandlers:function(e,i){var s={keyup:function(e){if(e.keyCode===t.ui.keyCode.ESCAPE){var s=t.Event(e);s.currentTarget=i[0],this.close(s,!0)}}};i[0]!==this.element[0]&&(s.remove=function(){this._removeTooltip(this._find(i).tooltip)}),e&&"mouseover"!==e.type||(s.mouseleave="close"),e&&"focusin"!==e.type||(s.focusout="close"),this._on(!0,i,s)},close:function(e){var i,s=this,n=t(e?e.currentTarget:this.element),o=this._find(n);return o?(i=o.tooltip,o.closing||(clearInterval(this.delayedShow),n.data("ui-tooltip-title")&&!n.attr("title")&&n.attr("title",n.data("ui-tooltip-title")),this._removeDescribedBy(n),o.hiding=!0,i.stop(!0),this._hide(i,this.options.hide,function(){s._removeTooltip(t(this))}),n.removeData("ui-tooltip-open"),this._off(n,"mouseleave focusout keyup"),n[0]!==this.element[0]&&this._off(n,"remove"),this._off(this.document,"mousemove"),e&&"mouseleave"===e.type&&t.each(this.parents,function(e,i){t(i.element).attr("title",i.title),delete s.parents[e]}),o.closing=!0,this._trigger("close",e,{tooltip:i}),o.hiding||(o.closing=!1)),void 0):(n.removeData("ui-tooltip-open"),void 0)},_tooltip:function(e){var i=t("
").attr("role","tooltip"),s=t("
").appendTo(i),n=i.uniqueId().attr("id");return this._addClass(s,"ui-tooltip-content"),this._addClass(i,"ui-tooltip","ui-widget ui-widget-content"),i.appendTo(this._appendTo(e)),this.tooltips[n]={element:e,tooltip:i}},_find:function(t){var e=t.data("ui-tooltip-id");return e?this.tooltips[e]:null},_removeTooltip:function(t){t.remove(),delete this.tooltips[t.attr("id")]},_appendTo:function(t){var e=t.closest(".ui-front, dialog");return e.length||(e=this.document[0].body),e},_destroy:function(){var e=this;t.each(this.tooltips,function(i,s){var n=t.Event("blur"),o=s.element;n.target=n.currentTarget=o[0],e.close(n,!0),t("#"+i).remove(),o.data("ui-tooltip-title")&&(o.attr("title")||o.attr("title",o.data("ui-tooltip-title")),o.removeData("ui-tooltip-title"))}),this.liveRegion.remove()}}),t.uiBackCompat!==!1&&t.widget("ui.tooltip",t.ui.tooltip,{options:{tooltipClass:null},_tooltip:function(){var t=this._superApply(arguments);return this.options.tooltipClass&&t.tooltip.addClass(this.options.tooltipClass),t}}),t.ui.tooltip});
\ No newline at end of file
diff --git a/sass/donation-popup.scss b/sass/donation-popup.scss
new file mode 100644
index 0000000..872912a
--- /dev/null
+++ b/sass/donation-popup.scss
@@ -0,0 +1,270 @@
+// 4: VISA, 51 -> 55: MasterCard, 36-38-39: DinersClub, 34-37: American Express, 65: Discover, 5019: dankort
+
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
+
+*{
+ margin: 0;
+ box-sizing: border-box;
+}
+
+html{
+ --card-color: #cacaca;
+ --text-color: #e1e1e1;
+}
+
+body{
+ font-family: 'Roboto', sans-serif;
+}
+
+.modal-header{
+ border-bottom: none !important;
+}
+
+
+.tips{
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ height: 30px;
+ background: #f1f1f1;
+ line-height: 30px;
+ font-size: 14px;
+ padding: 2px 15px;
+}
+
+.popup-style{
+ padding-top: 291px;
+ position: absolute;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin: auto;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 720px;
+ height: 373px;
+ //border: 2px solid red;
+
+
+ .col1{
+ perspective: 1000;
+ transform-style: preserve-3d;
+ padding-left: 10px;
+ padding-top: 20px;
+ .card{
+ position: relative;
+ width: 420px;
+ height: 250px;
+ margin-bottom: 85px;
+ margin-right: 10px;
+ border-radius: 17px;
+ box-shadow: 0 5px 20px -5px rgba(0,0,0,0.1);
+ transition: all 1s;
+ transform-style: preserve-3d;
+ .front{
+ position: absolute;
+ background: var(--card-color);
+ border-radius: 17px;
+ padding: 50px;
+ width: 100%;
+ height: 100%;
+ transform: translateZ(1px);
+ -webkit-transform: translateZ(1px);
+ transition: background 0.3s;
+ z-index: 50;
+ background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px), -webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ backface-visibility: hidden;
+ .type{
+ position: absolute;
+ width: 75px;
+ height: 45px;
+ top: 20px;
+ right: 20px;
+ img{
+ width: 100%;
+ float: right;
+ }
+ }
+ .card_number{
+ position: absolute;
+ font-size: 26px;
+ font-weight: 500;
+ letter-spacing: -1px;
+ top: 110px;
+ color: var(--text-color);
+ word-spacing: 3px;
+ transition: color 0.5s;
+ }
+ .date{
+ position: absolute;
+ bottom: 40px;
+ right: 55px;
+ width: 90px;
+ height: 35px;
+ color: var(--text-color);
+ transition: color 0.5s;
+ .date_value{
+ font-size: 12px;
+ position: absolute;
+ margin-left: 22px;
+ margin-top: 12px;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: color 0.5s;
+ }
+ &:after{
+ content: 'MONTH / YEAR';
+ position: absolute;
+ display: block;
+ font-size: 7px;
+ margin-left: 20px;
+ }
+ &:before{
+ content: 'valid \a thru';
+ position: absolute;
+ display: block;
+ font-size: 8px;
+ white-space: pre;
+ margin-top: 8px;
+ }
+ }
+ .fullname{
+ position: absolute;
+ font-size: 20px;
+ bottom: 40px;
+ color: var(--text-color);
+ transition: color 0.5s;
+ }
+ }
+ .back{
+ position: absolute;
+ width: 100%;
+ border-radius: 17px;
+ height: 100%;
+ background: var(--card-color);
+ transform: rotateY(180deg);
+ .magnetic{
+ position: absolute;
+ width: 100%;
+ height: 50px;
+ background: rgba(0,0,0,0.7);
+ margin-top: 25px;
+ }
+
+ .bar{
+ position: absolute;
+ width: 80%;
+ height: 37px;
+ background: rgba(255,255,255,0.7);
+ left: 10px;
+ margin-top: 100px;
+ }
+
+ .seccode{
+ font-size: 13px;
+ color: var(--text-color);
+ font-weight: 500;
+ position: absolute;
+ top: 100px;
+ right: 40px;
+ }
+
+ .chip{
+ bottom: 45px;
+ left: 10px;
+ }
+
+ .disclaimer{
+ position: absolute;
+ width: 65%;
+ left: 80px;
+ color: #f1f1f1;
+ font-size: 8px;
+ bottom: 55px;
+ }
+ }
+ }
+ }
+
+ .col2{
+ input{
+ display: block;
+ width: 260px;
+ height: 30px;
+ padding-left: 10px;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ margin: 7px;
+ font-size: 17px;
+ border-radius: 20px;
+ background: rgba(0,0,0,0.05);
+ border: none;
+ transition: background 0.5s;
+ &:focus{
+ outline-width: 0;
+ background: rgba(31,134,252, 0.15);
+ transition: background 0.5s;
+ }
+ }
+
+ label{
+ padding-left: 8px;
+ font-size: 15px;
+ color: #444;
+ }
+
+ .ccv{
+ width: 40%;
+ }
+
+ .buy{
+ width: 260px;
+ height: 50px;
+ position: relative;
+ display: block;
+ margin: 20px auto;
+ border-radius: 10px;
+ border: none;
+ background: #42C2DF;
+ color: white;
+ font-size: 20px;
+ transition: background 0.4s;
+ cursor: pointer;
+ outline: none;
+ i{
+ font-size: 20px;
+ }
+ &:hover{
+ background: #3594A9;
+ transition: background 0.4s;
+ outline: none;
+ }
+ }
+ }
+
+}
+
+.chip{
+ position: absolute;
+ width: 55px;
+ height: 40px;
+ background: #bbb;
+ border-radius: 7px;
+ &:after{
+ content: '';
+ display: block;
+ width: 35px;
+ height: 25px;
+ border-radius: 4px;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background: #ddd;
+ }
+}
\ No newline at end of file