-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
5 changed files
with
2,281 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Haikudos To You</title> | ||
| <link rel="stylesheet" href="styles.css"> | ||
|
|
||
| <!-- Favicon links --> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png"> | ||
| <link rel="icon" type="image/png" sizes="512x512" href="icons/android-chrome-512x512.png"> | ||
| <link rel="icon" type="image/png" sizes="192x192" href="icons/android-chrome-192x192.png"> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png"> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png"> | ||
| <link rel="shortcut icon" href="icons/favicon.ico"> | ||
| <link rel="manifest" href="site.webmanifest"> | ||
| <meta name="theme-color" content="#111111"> | ||
|
|
||
| <!-- Include Noto Serif SC (If Needed for Future Use) --> | ||
| <!-- <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet"> --> | ||
| </head> | ||
| <body> | ||
| <!-- Header Section --> | ||
| <header> | ||
| <div class="header-container"> | ||
| <!-- Left Side: Logo and Title --> | ||
| <div class="logo-title"> | ||
| <img src="images/logo.png" alt="Logo" class="logo"> | ||
| <h1 class="site-title">Haikudos To You</h1> | ||
| </div> | ||
|
|
||
| <!-- Right Side: Marketplace Links and Social Media Button --> | ||
| <div class="header-links"> | ||
| <div class="marketplace-links"> | ||
| <span>Buy collection on:</span> | ||
| <a href="https://gamma.io/ordinals/collections/haikudos_to_you" target="_blank" rel="noopener noreferrer">Gamma.io</a> | ||
| <span>or</span> | ||
| <a href="https://magiceden.io/ordinals/marketplace/haikudos_to_you" target="_blank" rel="noopener noreferrer">Magiceden.io</a> | ||
| </div> | ||
| <div class="social-media"> | ||
| <a href="https://twitter.com/Drinknu" target="_blank" rel="noopener noreferrer"> | ||
| <img src="icons/twitter-icon.png" alt="Twitter" class="social-icon"> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- Navigation buttons --> | ||
| <div class="navigation-buttons"> | ||
| <button id="prev-poem" class="styled-button">Previous</button> | ||
| <button id="next-poem" class="styled-button">Next</button> | ||
| </div> | ||
|
|
||
| <!-- Main Content --> | ||
| <div class="container"> | ||
| <div class="left-panel"> | ||
| <img src="images/default.jpg" alt="Default Image" id="poem-image"> | ||
| </div> | ||
| <div class="right-panel"> | ||
| <div class="poem-container"> | ||
| <div class="poem" id="poem"> | ||
| <!-- Poem lines will be injected here --> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Inscription number --> | ||
| <div class="inscription-number" id="inscription-number"></div> | ||
|
|
||
| <!-- Image Upload Interface and Color Picker --> | ||
| <div class="image-upload-container"> | ||
| <div class="upload-section"> | ||
| <!-- "Choose File" Button --> | ||
| <input type="file" id="image-input" accept="image/*"> | ||
| <!-- Drag and Drop Area --> | ||
| <div id="drop-area" class="drop-area">or Drag & Drop Image Here</div> | ||
| </div> | ||
| <!-- Color Picker Section --> | ||
| <div class="color-picker-section"> | ||
| <label for="color-picker">Haiku text color picker:</label> | ||
| <input type="color" id="color-picker" value="#FFFFFF"> | ||
| <!-- Preset Color Swatches --> | ||
| <div class="preset-colors" id="preset-colors"> | ||
| <!-- Preset colors will be dynamically generated --> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Save/Download Banner Button --> | ||
| <div class="download-button-container"> | ||
| <button id="download-banner" class="styled-button">Download Banner</button> | ||
| </div> | ||
|
|
||
| <!-- Blog Section --> | ||
| <section class="blog-section"> | ||
| <h2 class="blog-header">Haikudos To You</h2> | ||
| <p class="blog-intro">A collection of non-fungible tokens stored on the Bitcoin blockchain.</p> | ||
|
|
||
| <h3 class="blog-subheader">About the Project</h3> | ||
| <div class="blog-content"> | ||
| <img src="images/blog-image1.jpg" alt="Blog Image 1" class="blog-image blog-image1"> | ||
| <p class="blog-text"> | ||
| Haikudos To You is a tribute to Bitcoin builders and Bitcoin communities.<br><br> | ||
| It is a collection of ordinal inscriptions, NFT's on Bitcoin; a 128 piece collection of haikus blending traditional form with modern, technology-focused themes. These concise poems reflect on digital culture, cryptocurrency, and societal shifts, offering moments of contemplation and critique. The straightforward yet evocative language captures themes of love, loss, hope, and disillusionment, distilling the complexity of modern life into just three lines. An accessible and thought-provoking collection that serves as a poetic reflection on the intersection of technology, finance, and humanity in the digital age. | ||
| </p> | ||
| </div> | ||
|
|
||
| <h3 class="blog-subheader">The Journey</h3> | ||
| <div class="blog-content reverse"> | ||
| <img src="images/blog-image2.jpg" alt="Blog Image 2" class="blog-image blog-image2"> | ||
| <p class="blog-text"> | ||
| I (werner.btc) started this series in 2021, not knowing it would eventually become a collection of inscriptions on the Bitcoin blockchain. I see myself as a manic poet; sometimes thoughts just have to flow out, whether onto paper, a text file, or an image crafted in Photoshop. Over the past four years, as I delved deep into Bitcoin and its Layers, I penned lines sporadically. I shared a few on social media, often masking my voice by attributing them to one of my avatars to ease the anxiety of putting my thoughts out there. Most of my work remains unpublished because I write primarily for myself. Yet, creating this series and building this site felt essential—a space where anyone can engage with these poems and provide their own avatar. Who do you imagine voicing these words? Who do you envision speaking these verses? A loved one, someone nearby, a friend, or maybe even someone you find challenging? | ||
| </p> | ||
| </div> | ||
|
|
||
| <h3 class="blog-subheader">Hear This</h3> | ||
| <div class="blog-content"> | ||
| <img src="images/blog-image3.jpg" alt="Blog Image 3" class="blog-image blog-image1"> | ||
| <p class="blog-text"> | ||
| All the (short) inscription numbers start with 7555, followed by four more digits. Think of those as Roman years. Imagine the poem written in that year. Some were written in the past (<a class="inscription-id" href="https://ordinals.com/inscription/58ce75b5476904c1a736c4c6cb6b49907144baa86d61e39e755ac3c204a71cefi0" target="_blank" rel="noopener noreferrer">75551974</a>), some are written centuries from now (<a class="inscription-id" href="https://ordinals.com/inscription/5302c4a9ba1f9e78877fc66d0bf5dfdbff851485abcbce84853e51242bd92b41i0" target="_blank" rel="noopener noreferrer">75552422</a>), some of the numbers are easy to remember (<a class="inscription-id" href="https://ordinals.com/inscription/7d3b0227943714757e9cecb131013b1e2d83354a0faac1448ebd550b70b523b8i0" target="_blank" rel="noopener noreferrer">75552555</a>), even though they are eight digits long. The poems are inscribed on block 9 sats because Tycho said those are cool and I agree; block 9 sats have been around since the first Bitcoin transaction, mined by Satoshi Nakamoto, and they are vintage (just like the haiku style). These 128 inscriptions are also the parents to a single child inscription, perhaps the first child with 128 parents! It's another way to track provenance and related future work (expect some grandchildren). | ||
| <br><br> | ||
| One more thing: I used these poems to make songs, in these songs every verse and chorus consists of one or more of these haiku's. These songs will be released soon and a limited number will be available as NFT's. I will share more about that here when it is ready. | ||
| </p> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Spotify Section --> | ||
| <section class="spotify-section"> | ||
| <h2 class="spotify-header">Listen to My Music</h2> | ||
| <div class="spotify-player"> | ||
| <!-- Spotify embed code will go here --> | ||
| <p class="spotify-placeholder">Check again later</p> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Hidden Canvas Element for Generating the Banner Image --> | ||
| <canvas id="banner-canvas" style="display: none;"></canvas> | ||
|
|
||
| <!-- Include Color Thief Library --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.umd.js"></script> | ||
|
|
||
| <script src="poems.js"></script> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.