Skip to content

Commit 8751b2c

Browse files
committed
button fixes and animated bg
1 parent 23ebc18 commit 8751b2c

4 files changed

Lines changed: 80 additions & 37 deletions

File tree

assets/css/lnbits.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,5 @@ a:hover, a:focus {
120120
top: 50%;
121121
left: 50%;
122122
transform: translate(-50%, -50%);
123-
}
124-
125-
123+
width: 250px;
124+
}

assets/css/ud-styles.css

Lines changed: 13 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

assets/js/saas.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ const app = Vue.createApp({
1212
slideimg: "assets/images/hero/bitcoin-accounts.png",
1313
ytpopup: false,
1414
embedLink: "b7Ou7XtqtRI",
15+
vidtitle: "User/Wallet System",
16+
vidtime: "(43 secs)",
1517
url: "https://api.lnbits.com",
1618
prompt: false,
1719
instanceDialog: false,

index.html

Lines changed: 63 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -316,30 +316,57 @@ <h1 class="ud-hero-title" style="margin-bottom: 0px">
316316

317317
<div class="row ud-hero-buttons text-center">
318318
<div class="col-12 mt-3">
319-
320-
<a href="https://my.lnbits.com" title="Launch your own LNbits instance"
321-
class="ud-main-btn ud-white-btn" data-toggle="tooltip" data-placement="bottom" title="Launch LNbits"
322-
style="background-color: #FF1EE6; color: #1F2234">
323-
Launch
324-
</a>
325-
326-
<a href="https://demo.lnbits.com" rel="nofollow noopener" class="ud-main-btn ud-white-btn q-ml-xs"
327-
data-toggle="tooltip" data-placement="bottom" title="Try the LNbits Demo server (For testing only)">
328-
Demo
329-
</a>
330-
331-
332-
<a href="https://extensions.lnbits.com" title="Checkout the extensions in LNbits"
333-
class="ud-main-btn ud-white-btn q-ml-xs" data-toggle="tooltip" data-placement="bottom"
334-
title="Extensions">
335-
Extensions
336-
</a>
337-
338-
<a href="https://shop.lnbits.com" title="Visit the LNbits web store"
339-
class="ud-main-btn ud-white-btn q-ml-xs" data-toggle="tooltip" data-placement="bottom" title="Shop">
340-
Store
341-
<i class="material-icons">storefront</i>
342-
</a>
319+
<q-btn
320+
no-caps
321+
style="background-color: #FF1EE6"
322+
text-color="black"
323+
type="a"
324+
href="https://my.lnbits.com"
325+
label="Launch"
326+
size="lg"
327+
:dense="$q.screen.lt.md"
328+
>
329+
<q-tooltip>Launch your own LNbits instance</q-tooltip>
330+
</q-btn>
331+
<q-btn
332+
no-caps
333+
color="white"
334+
text-color="black"
335+
type="a"
336+
href="https://demo.lnbits.com"
337+
label="Demo"
338+
class="q-ml-md"
339+
size="lg"
340+
:dense="$q.screen.lt.md"
341+
>
342+
<q-tooltip>Try the LNbits Demo server (For testing only)</q-tooltip>
343+
</q-btn>
344+
<q-btn
345+
no-caps
346+
color="white"
347+
text-color="black"
348+
type="a"
349+
href="https://extensions.lnbits.com"
350+
label="Extensions"
351+
class="q-ml-md"
352+
size="lg"
353+
:dense="$q.screen.lt.md"
354+
>
355+
<q-tooltip>Checkout the extensions in LNbits</q-tooltip>
356+
</q-btn>
357+
<q-btn
358+
no-caps
359+
color="white"
360+
text-color="black"
361+
type="a"
362+
href="https://shop.lnbits.com"
363+
label="Store"
364+
class="q-ml-md"
365+
size="lg"
366+
:dense="$q.screen.lt.md"
367+
>
368+
<q-tooltip>Visit the LNbits web store</q-tooltip>
369+
</q-btn>
343370
</div>
344371
</div>
345372
</div>
@@ -350,17 +377,20 @@ <h1 class="ud-hero-title" style="margin-bottom: 0px">
350377
</img>
351378
</div>
352379
<div class="centered-pic">
353-
<q-btn round flat size="4.4em" style="color:rgb(255, 30, 230)" icon="play_arrow"
354-
@click="ytpopup = true"></q-btn>
380+
<q-btn no-caps @click="ytpopup = true" rounded style="background: #0D1017;border: 1px solid #FF1EE6;color:#FF1EE6;" >
381+
<div>
382+
<q-icon style="margin-bottom: -10px;" class="q-pr-sm" size="lg" name="play_arrow"></q-icon>
383+
<span v-text="vidtitle"></span>
384+
<br><small style="display: block; margin-top: -12px; text-align: left; padding-left: 45px;" v-text="vidtime"></small>
385+
</div>
386+
</q-btn>
355387
</div>
356388
</div>
357389
</div>
358390
<q-dialog v-model="ytpopup">
359391
<q-card style="width: 90%; max-width: 80vw;" flat class="q-pa-none">
360392
<q-card-section class="q-pa-none">
361393
<div class="video-container">
362-
363-
364394
<iframe
365395
:src="'https://www.youtube.com/embed/' + embedLink + '?autoplay=1&showinfo=0&rel=0&modestbranding=1'"
366396
title="YouTube video player" frameborder="0"
@@ -375,7 +405,7 @@ <h1 class="ud-hero-title" style="margin-bottom: 0px">
375405
<div class="row q-mt-xl gt-sm" style="width:80%">
376406
<div class="col">
377407
<q-btn
378-
@mouseover="slideimg = 'assets/images/hero/bitcoin-accounts.png'; embedLink = 'b7Ou7XtqtRI?si=1JIjRveHfBBCvLZp'"
408+
@mouseover="slideimg = 'assets/images/hero/bitcoin-accounts.png'; embedLink = 'b7Ou7XtqtRI?si=1JIjRveHfBBCvLZp'; vidtitle = 'User/Wallet System'; vidtime = '(43 secs)'"
379409
outline color="primary" style="height:110px;width:100%; background-color: #FF1EE6">
380410
<div class="row items-center no-wrap">
381411
<div class="text-center">
@@ -389,11 +419,11 @@ <h1 class="ud-hero-title" style="margin-bottom: 0px">
389419
</div>
390420
<div class="col">
391421
<q-btn
392-
@mouseover="slideimg = 'assets/images/hero/bitcoin-extensions.png'; embedLink = 'ymq_BXN4lu0?si=4TThmpITE6SUhpMy'"
422+
@mouseover="slideimg = 'assets/images/hero/bitcoin-extensions.png'; embedLink = 'ymq_BXN4lu0?si=4TThmpITE6SUhpMy'; vidtitle = '50+ Extensions'; vidtime = '(38 secs)'"
393423
outline color="primary" style="height:110px;width:100%; background-color: #FF1EE6">
394424
<div class="row items-center no-wrap">
395425
<div class="text-center">
396-
40+ extensions
426+
50+ extensions
397427
<br />
398428
<small>extension framework<br /></small>
399429
</div>
@@ -403,7 +433,7 @@ <h1 class="ud-hero-title" style="margin-bottom: 0px">
403433
</div>
404434
<div class="col">
405435
<q-btn
406-
@mouseover="slideimg = 'assets/images/hero/lnbits-node-management.png'; embedLink = 'LMs4bFrvy_Y?si=Zo-Wzz9X24W-bc4V'"
436+
@mouseover="slideimg = 'assets/images/hero/lnbits-node-management.png'; embedLink = 'LMs4bFrvy_Y?si=Zo-Wzz9X24W-bc4V'; vidtitle = 'Admin Toolting'; vidtime = '(48 secs)'"
407437
outline color="primary" style="height:110px;width:100%; background-color: #FF1EE6">
408438
<div class="row items-center no-wrap">
409439
<div class="text-center">
@@ -417,7 +447,7 @@ <h1 class="ud-hero-title" style="margin-bottom: 0px">
417447
</div>
418448
<div class="col">
419449
<q-btn
420-
@mouseover="slideimg = 'assets/images/hero/lnbits-api-sdk.png'; embedLink = 'b1a5XshX5dA?si=0OWVn2gyyU1uj25T'"
450+
@mouseover="slideimg = 'assets/images/hero/lnbits-api-sdk.png'; embedLink = 'b1a5XshX5dA?si=0OWVn2gyyU1uj25T'; vidtitle = 'Supercharged API/SDK'; vidtime = '(38 secs)'"
421451
outline color="primary" style="height:110px;width:100%; background-color: #FF1EE6">
422452
<div class="row items-center no-wrap">
423453
<div class="text-center">

0 commit comments

Comments
 (0)