Sponsor page (#560)
* Refactor sponsors page layout. Remove add to t-shirts. * Remove tshirt promo. * Refactor sponsors page layout. Remove add to t-shirts. * Remove bootstrap classes and inline styles. Add new classes to thanks page. Co-authored-by: softsimon <softsimon@protonmail.com>
This commit is contained in:
Miguel Medeiros
GitHub
parent
237f265aab
commit
a1f0417997
@ -1,151 +1,153 @@
|
||||
<div class="container-xl">
|
||||
<div class="text-center">
|
||||
<div class="container-xl sponsor-page">
|
||||
|
||||
<h1 i18n="sponsor.title">Sponsor</h1>
|
||||
|
||||
<h1 i18n="sponsor.title">Sponsor</h1>
|
||||
<p *ngIf="!sponsorsEnabled; else sponsorForm">
|
||||
<ng-container i18n="about.navigate-to-sponsor">Navigate to <a href="https://mempool.space/sponsor" target="_blank">https://mempool.space/sponsor</a> to sponsor</ng-container>
|
||||
</p>
|
||||
|
||||
<br>
|
||||
<ng-template #sponsorForm>
|
||||
<div [hidden]="donationStatus !== 1">
|
||||
|
||||
<p *ngIf="!sponsorsEnabled; else sponsorForm">
|
||||
<ng-container i18n="about.navigate-to-sponsor">Navigate to <a href="https://mempool.space/sponsor" target="_blank">https://mempool.space/sponsor</a> to sponsor</ng-container>
|
||||
</p>
|
||||
|
||||
<ng-template #sponsorForm>
|
||||
|
||||
<div [hidden]="donationStatus !== 1">
|
||||
|
||||
<form [formGroup]="donationForm" (submit)="submitDonation()" class="form">
|
||||
<form [formGroup]="donationForm" (submit)="submitDonation()" class="form">
|
||||
|
||||
<div class="flex-container">
|
||||
<div class="card" (click)="setSelection(0.001)" [class.shiny-border]="donationForm.get('selection').value === 0.001">
|
||||
<div class="card-header">Support the Project</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">100K sats</h5>
|
||||
<p class="card-text">Make a donation and support the project</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bigger" (click)="setSelection(0.01)" [class.shiny-border]="donationForm.get('selection').value === 0.01">
|
||||
<div class="card-header">Community Sponsor</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">1M sats</h5>
|
||||
<p class="card-text">Display your Twitter profile photo on our About page</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" (click)="setSelection(0.001)" [class.shiny-border]="donationForm.get('selection').value === 0.001">
|
||||
<div class="card-header">Support the Project</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">100K <span class="symbol">sats</span></h5>
|
||||
<p class="card-text">Make a donation and support the project</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" (click)="setSelection(1)" [class.shiny-border]="donationForm.get('selection').value === 1">
|
||||
<div class="card-header">Enterprise Sponsor</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">1 BTC</h5>
|
||||
<div class="card" (click)="setSelection(0.01)" [class.shiny-border]="donationForm.get('selection').value === 0.01">
|
||||
<div class="card-header">Community Sponsor</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">1M <span class="symbol">sats</span></h5>
|
||||
<p class="card-text">Display your Twitter profile photo on our About page</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" (click)="setSelection(1)" [class.shiny-border]="donationForm.get('selection').value === 1">
|
||||
<div class="card-header">Enterprise Sponsor</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">1 <span class="symbol">BTC</span></h5>
|
||||
<p class="card-text">Backlink to your organization's website</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div style="max-width: 300px;" class="mx-auto">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend" style="width: 42px;">
|
||||
<span class="input-group-text">@</span>
|
||||
</div>
|
||||
<input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)">
|
||||
</div>
|
||||
<div class="input-group mt-4">
|
||||
<button class="btn btn-primary mx-auto" type="submit" [disabled]="donationForm.invalid" i18n="about.sponsor.request-invoice">Request invoice</button>
|
||||
</div>
|
||||
<div class="donation-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">@</span>
|
||||
</div>
|
||||
<input formControlName="handle" class="form-control" type="text" placeholder="Twitter handle (Optional)">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<button class="btn btn-primary" type="submit" [disabled]="donationForm.invalid" i18n="about.sponsor.request-invoice">Request invoice</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
</ng-template>
|
||||
</form>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<div *ngIf="donationStatus === 2" class="text-center">
|
||||
<div *ngIf="donationStatus === 2">
|
||||
|
||||
<form [formGroup]="paymentForm">
|
||||
<div class="btn-group btn-group-toggle" ngbRadioGroup formControlName="method">
|
||||
|
||||
<form [formGroup]="paymentForm">
|
||||
<div class="btn-group btn-group-toggle mb-2" ngbRadioGroup formControlName="method">
|
||||
<label ngbButtonLabel class="btn-primary">
|
||||
<input ngbButton type="radio" value="chain"> <fa-icon [icon]="['fas', 'link']" [fixedWidth]="true" title="Onchain"></fa-icon>
|
||||
</label>
|
||||
|
||||
<label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.BTC_LightningLike">
|
||||
<input ngbButton type="radio" value="lightning"> <fa-icon [icon]="['fas', 'bolt']" [fixedWidth]="true" title="Lightning"></fa-icon>
|
||||
</label>
|
||||
|
||||
<label ngbButtonLabel class="btn-primary" *ngIf="donationObj.addresses.LBTC">
|
||||
<input ngbButton type="radio" value="lbtc"> <fa-icon [icon]="['fas', 'tint']" [fixedWidth]="true" title="Liquid Bitcoin"></fa-icon>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ng-template [ngIf]="paymentForm.get('method').value === 'chain'">
|
||||
<div class="qr-wrapper mt-2 mb-2">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ng-template [ngIf]="paymentForm.get('method').value === 'chain'">
|
||||
|
||||
<div class="qr-wrapper">
|
||||
<a [href]="bypassSecurityTrustUrl('bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount)" target="_blank">
|
||||
<app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="'bitcoin:' + donationObj.addresses.BTC + '?amount=' + donationObj.amount"></app-qrcode>
|
||||
</a>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-sm info-group">
|
||||
<input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.BTC"></app-clipboard></button>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
|
||||
</ng-template>
|
||||
</div>
|
||||
<p>{{ donationObj.amount }} <span class="symbol">BTC</span></p>
|
||||
|
||||
<ng-template [ngIf]="paymentForm.get('method').value === 'lightning'">
|
||||
<div class="qr-wrapper mt-2 mb-2">
|
||||
</ng-template>
|
||||
|
||||
<ng-template [ngIf]="paymentForm.get('method').value === 'lightning'">
|
||||
|
||||
<div class="qr-wrapper">
|
||||
<a [href]="bypassSecurityTrustUrl('lightning:' + donationObj.addresses.BTC_LightningLike)" target="_blank">
|
||||
<app-qrcode imageUrl="./resources/bitcoin-logo.png" [size]="200" [data]="donationObj.addresses.BTC_LightningLike.toUpperCase()"></app-qrcode>
|
||||
</a>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
|
||||
<div class="input-group input-group-sm info-group">
|
||||
<input type="text" class="form-control" readonly [value]="donationObj.addresses.BTC_LightningLike">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="donationObj.addresses.BTC_LightningLike"></app-clipboard></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
|
||||
<div class="input-group input-group-sm info-group">
|
||||
<input type="text" class="form-control" readonly value="036f7fad4938521ddc6fc87ab7d6c6a091cef23cad87564a1f55adb806c017575e@103.99.170.198:9735">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button"><app-clipboard [text]="'036f7fad4938521ddc6fc87ab7d6c6a091cef23cad87564a1f55adb806c017575e@103.99.170.198:9735'"></app-clipboard></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ donationObj.amount }} <span class="symbol">BTC</span></p>
|
||||
|
||||
<p style="font-size: 10px;"></p>
|
||||
<p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
||||
<ng-template [ngIf]="paymentForm.get('method').value === 'lbtc'">
|
||||
<div class="qr-wrapper mt-2 mb-2">
|
||||
<ng-template [ngIf]="paymentForm.get('method').value === 'lbtc'">
|
||||
|
||||
<div class="qr-wrapper">
|
||||
<a [href]="bypassSecurityTrustUrl('liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d')" target="_blank">
|
||||
<app-qrcode imageUrl="./resources/liquid-bitcoin.png" [size]="200" [data]="'liquidnetwork:' + donationObj.addresses.LBTC + '?amount=' + donationObj.amount + '&assetid=6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d'"></app-qrcode>
|
||||
</a>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group input-group-sm mb-3 mt-3 info-group mx-auto">
|
||||
<input type="text" class="form-control" readonly [value]="donationObj.addresses.LBTC">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group input-group-sm info-group">
|
||||
<input type="text" class="form-control" readonly [value]="donationObj.addresses.LBTC" />
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" ><app-clipboard [text]="donationObj.addresses.LBTC"></app-clipboard></button>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 12px;">{{ donationObj.amount }} BTC</p>
|
||||
</ng-template>
|
||||
</div>
|
||||
<p>{{ donationObj.amount }} <span class="symbol">BTC</span></p>
|
||||
|
||||
<p i18n="about.sponsor.waiting-for-transaction">Waiting for transaction... </p>
|
||||
<div class="spinner-border text-light"></div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="donationStatus === 3" class="text-center">
|
||||
<h2><span i18n="about.sponsor.donation-confirmed">Donation confirmed!</span><br><span i18n="about.sponsor.thank-you">Thank you!</span></h2>
|
||||
<br>
|
||||
|
||||
Order ID:
|
||||
<br>
|
||||
{{ donationObj.id }}
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<p i18n="about.sponsor.waiting-for-transaction">Waiting for transaction... </p>
|
||||
<div class="spinner-border text-light"></div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="donationStatus === 3" class="donation-confirmed">
|
||||
<h2>
|
||||
<span i18n="about.sponsor.donation-confirmed">Donation confirmed!</span>
|
||||
<span i18n="about.sponsor.thank-you">Thank you!</span>
|
||||
</h2>
|
||||
|
||||
<div class="order-details">
|
||||
Order ID <span>{{ donationObj.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
.sponsor-page {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-wrapper {
|
||||
background-color: #FFF;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
padding-bottom: 5px;
|
||||
margin: 20px auto 0px;
|
||||
}
|
||||
|
||||
.info-group {
|
||||
@ -13,14 +18,46 @@
|
||||
width: 220px;
|
||||
height: 200px;
|
||||
background-color: #1d1f31;
|
||||
margin: 10px 20px 20px 20px;
|
||||
border: 2px solid #1d1f31;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: 100ms all;
|
||||
margin: 30px 30px 20px 30px;
|
||||
@media(min-width: 476px) {
|
||||
margin: 30px 100px 20px 100px;
|
||||
}
|
||||
@media(min-width: 851px) {
|
||||
margin: 60px 20px 40px 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
span {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
&.bigger {
|
||||
height: 220px;
|
||||
width: 240px;
|
||||
margin-top: 0px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #5058926b;
|
||||
border: 2px solid #505892;
|
||||
transform: scale(1.11) translateY(-10px);
|
||||
.card-header {
|
||||
background-color: #505892;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.donation-form {
|
||||
max-width: 240px;
|
||||
margin: auto;
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,5 +73,37 @@
|
||||
}
|
||||
|
||||
.shiny-border {
|
||||
background-color: #5058926b;
|
||||
border: 2px solid #505892;
|
||||
transform: scale(1.11) translateY(-10px);
|
||||
box-shadow: 0px 0px 100px #9858ff52;
|
||||
.card-header {
|
||||
background-color: #505892;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.donation-confirmed {
|
||||
h2 {
|
||||
margin-top: 50px;
|
||||
span {
|
||||
display: block;
|
||||
&:last-child {
|
||||
color: #9858ff;
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-details {
|
||||
margin-top: 50px;
|
||||
span {
|
||||
color: #d81b60;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user