• Post Author:
  • Post Category:Mind

Digital art exhibiton

Due to the COVID-19 circumstances I can't display my art in a physical gallery without restrictions for the time being.
I decided to create an online experience relative to the collection "Liquidity". I use bitcoin SV applications to interact with in this digital experience Such as Money button and baemail.

"Liquidity" is an art exhibition about individuality, the strength of collective believes and bitcoin in its essence. I tell my story where I came across bitcoin in Tokyo 2009, how my interest faded and came back to where I am today. Bitcoin has never been so exciting since it's upgrade 4/2/2020. A new world of possibilities has opened up, bitcoin SV is a tool to freedom, individual empowerment & transparency. I want to create that universe within the world of art which bitcoin is a part of.

Exhibition fee: $1

Slide the button to pay and unlock the paywall

No moneybutton? Create one HERE

Digital Exhibition body { width: 100%; margin: 10vh auto; /* System default fonts */ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; } code { color: deeppink; /* Baseline shift */ position: relative; top: -0.05em; } pre { color: lightseagreen; } blockquote { background-color: #eee; padding: 1em; border-radius: 1em; margin: 1em 0; } /* The CSS you'll need in your website */ #unlockable { visibility: hidden; opacity: 0; transition: opacity 5s; } #unlockable.unlocked { visibility: visible; opacity: 1; } img { width: 100%; } /* The Javascript you'll need in your website */ function handleSuccessfulPayment (payment) { unlockContent(); } function handleFailedPayment (error) { alert("Sorry, the payment did not process correctly.") } function unlockContent () { document.getElementById("unlockable").classList.toggle("unlocked"); }

Welcome to the digital exhibition!

BTC 2020 BTC2020

You're free to use the source code in this page.

Here's how to get started:

  1. Load the source code from this page into your favorite text editor.
  2. Open your web browser and navigate to the Config page. You can make your own button there to ensure that you have the correct Bitcoin address and Button ID.
  3. Copy the button code and switch back to your text editor app and replace the <div class="money-button">. Make sure you don't include the <script> since it is already in the page at the end of the <body>.
  4. Add back in the attributes, data-on-payment and data-on-error:

Here's how this works:

  1. When the Money Button receives a successful payment, it calls handleSuccessfulPayment(payment).
  2. That function in turn calls unlockContent().
  3. unlockContent() adds a CSS class called, unlocked, to the unlockable DIV.
  4. The unlocked class is defined in CSS to use an animation to transition its opacity.
Note: The CSS uses both opacity and visibility properties becasue the opacity is necessary for the animation and the visibility is necessary for screen readers to skip the locked content.

Drop me a message on Twitter if you use the code so I can applaud your work.