turnstile

Drupal paywall plugin
Log | Files | Refs | README | LICENSE

taler-turnstile-payment-button.html.twig (3745B)

      1 <div class="taler-turnstile-payment-container"
      2      data-merchant-backend="{{ merchant_backend }}"
      3      data-template-id="{{ template_id }}"
      4      data-fulfillment-url="{{ fulfillment_url }}"
      5      data-confirm-url="{{ confirm_url }}"
      6      data-paivana-uri="{{ paivana_uri }}"
      7      data-max-pickup-delay="{{ max_pickup_delay }}">
      8   <div class="taler-turnstile-payment-info">
      9     <h3>{{ 'Payment required'|t }}</h3>
     10     <p>{{ 'Please pay to access'|t }} <strong>{{ node_title }}</strong>.</p>
     11   </div>
     12 
     13   <div class="taler-turnstile-payment-actions">
     14     <div class="taler-turnstile-payment-qr">
     15       <div class="taler-turnstile-qr-code-container"></div>
     16       <p class="taler-turnstile-qr-help">{{ 'Scan with your GNU Taler wallet'|t }}</p>
     17     </div>
     18 
     19     <div class="taler-turnstile-payment-or show-if-taler-supported hidden">
     20       <span>{{ 'or'|t }}</span>
     21     </div>
     22 
     23     <a href="#"
     24        class="button button--primary taler-turnstile-pay-button show-if-taler-supported hidden">
     25       {{ 'Open GNU Taler payment Web page'|t }}
     26     </a>
     27   </div>
     28   <div class="taler-turnstile-payment-pricing">
     29     <h4>{{ 'Price per article'|t}}</h4>
     30     <p class="taler-turnstile-hint-price">{{ price_hint }}</p><br>
     31     <h4>{{ 'Acceptable subscriptions'|t}}</h4>
     32     <p class="taler-turnstile-hint-subscriptions">{{ subscription_hint }}</p>
     33   </div>
     34 
     35   <div class="taler-turnstile-payment-status">
     36     <p class="taler-turnstile-status-message">{{ 'Waiting for payment...'|t }}</p>
     37   </div>
     38 
     39 </div>
     40 
     41 <style>
     42 .taler-turnstile-payment-container {
     43   border: 2px solid #e0e0e0;
     44   border-radius: 8px;
     45   padding: 2rem;
     46   margin: 2rem 0;
     47   background: #f9f9f9;
     48 }
     49 
     50 .taler-turnstile-payment-info h3 {
     51   margin-top: 0;
     52   color: #333;
     53 }
     54 
     55 .taler-turnstile-price {
     56   font-size: 1.2rem;
     57   font-weight: bold;
     58   color: #0066cc;
     59   margin: 1rem 0;
     60 }
     61 
     62 .taler-turnstile-payment-actions {
     63   margin-top: 1.5rem;
     64   display: flex;
     65   flex-direction: column;
     66   align-items: center;
     67   gap: 1rem;
     68 }
     69 
     70 .taler-turnstile-payment-qr {
     71   text-align: center;
     72   padding: 1rem;
     73   background: white;
     74   border-radius: 4px;
     75   border: 1px solid #ddd;
     76 }
     77 
     78 .taler-turnstile-qr-code {
     79   display: block;
     80   margin: 0 auto;
     81   max-width: 200px;
     82   height: auto;
     83 }
     84 
     85 .taler-turnstile-qr-help {
     86   margin: 0.5rem 0 0 0;
     87   font-size: 0.9rem;
     88   color: #666;
     89 }
     90 
     91 .taler-turnstile-payment-or {
     92   margin: 0.5rem 0;
     93   color: #666;
     94   font-weight: bold;
     95 }
     96 
     97 .taler-turnstile-pay-button {
     98   display: inline-block;
     99   padding: 0.75rem 2rem;
    100   background: #0066cc;
    101   color: white;
    102   text-decoration: none;
    103   border-radius: 4px;
    104   font-weight: bold;
    105   transition: background 0.3s;
    106 }
    107 
    108 .taler-turnstile-pay-button:hover {
    109   background: #0052a3;
    110   color: white;
    111 }
    112 
    113 .taler-turnstile-payment-status {
    114   margin-top: 1.5rem;
    115   padding: 1rem;
    116   background: #e3f2fd;
    117   border: 1px solid #90caf9;
    118   border-radius: 4px;
    119   text-align: center;
    120 }
    121 
    122 .taler-turnstile-status-message {
    123   margin: 0;
    124   color: #1565c0;
    125   font-style: italic;
    126 }
    127 
    128 .taler-turnstile-access-message {
    129   padding: 1rem;
    130   margin: 1rem 0;
    131   background: #fff3cd;
    132   border: 1px solid #ffc107;
    133   border-radius: 4px;
    134 }
    135 
    136 .taler-turnstile-teaser-wrapper {
    137   position: relative;
    138   max-height: 400px;
    139   overflow: hidden;
    140 }
    141 
    142 .taler-turnstile-teaser-wrapper::after {
    143   content: '';
    144   position: absolute;
    145   bottom: 0;
    146   left: 0;
    147   right: 0;
    148   height: 100px;
    149   background: linear-gradient(to bottom, transparent, white);
    150 }
    151 
    152 /* Make sure we have a rule with high specificity. */
    153 .show-if-taler-supported.hidden {
    154   display: none !important;
    155 }
    156 
    157 /* Responsive design */
    158 @media (min-width: 768px) {
    159   .taler-turnstile-payment-actions {
    160     flex-direction: row;
    161     justify-content: center;
    162     align-items: center;
    163   }
    164 
    165   .taler-turnstile-payment-or {
    166     margin: 0 1rem;
    167   }
    168 }
    169 </style>