turnstile

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

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

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