275 lines
10 KiB
HTML
275 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>Daily Blackout Poetry Challenge</title>
|
|||
|
|
|
|||
|
|
<!--
|
|||
|
|
|
|||
|
|
Daily Blackout Poetry Challenge
|
|||
|
|
|
|||
|
|
html + Javascript
|
|||
|
|
|
|||
|
|
This presents a "page" from a novel and lets you make a blackout poem with it
|
|||
|
|
using html2canvas you can save your poem as an image
|
|||
|
|
you can copy the words below
|
|||
|
|
|
|||
|
|
texts are public domain from Project Gutenberg - https://www.gutenberg.org/
|
|||
|
|
content licensed CC-BY-SA https://creativecommons.org/licenses/by-sa/4.0/
|
|||
|
|
code license GPLv3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|||
|
|
Code repository:
|
|||
|
|
Written by Jacob Haddon https://jacobhaddon.com
|
|||
|
|
|
|||
|
|
this file uses:
|
|||
|
|
|
|||
|
|
* jQuery - https://jquery.com/ (MIT)
|
|||
|
|
* html2canvas - https://html2canvas.hertzen.com/ (MIT)
|
|||
|
|
* FileSaver - https://github.com/eligrey/FileSaver.js (MIT)
|
|||
|
|
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="style.css">
|
|||
|
|
|
|||
|
|
<script src="jquery-3.7.1.min.js"></script>
|
|||
|
|
<script src="html2canvas.min.js"></script>
|
|||
|
|
<script src="FileSaver.min.js"></script>
|
|||
|
|
<script src="test3.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
// console.log(book.title);
|
|||
|
|
// console.log(book.pages[14][6]);
|
|||
|
|
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
// let text = $("#spina").html().split(" ");
|
|||
|
|
// console.log(text);
|
|||
|
|
|
|||
|
|
// Make the header with the book info
|
|||
|
|
$("#poem_header").html("<h2>" + book.title + "</h2>\n\n<h3>" + book.author + "</h3>\n");
|
|||
|
|
|
|||
|
|
// Add in the page, change the underscores to italics
|
|||
|
|
$("#spina").html(book.pages[14][6].replace(/(_([a-z0-9]+)_)/ig, "<i>$2</i>"));
|
|||
|
|
|
|||
|
|
$("#spina p").each(function( index ) {
|
|||
|
|
let text = $( this ).html().split(" ");
|
|||
|
|
let newText = [];
|
|||
|
|
$.each( text , function(index, value ){
|
|||
|
|
newText[index] = "<span>" + value + "</span>";
|
|||
|
|
// console.log("index:" + index + " <span>" + value + "</span>")
|
|||
|
|
}); // each text
|
|||
|
|
$( this ).html(newText.join(" "));
|
|||
|
|
// console.log(newText.join(" "));
|
|||
|
|
}); // each p
|
|||
|
|
|
|||
|
|
|
|||
|
|
$("#spina p span").each(function( index ) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
}); // each p
|
|||
|
|
|
|||
|
|
$("#lock").click(function(){
|
|||
|
|
$("#spina").toggleClass("unlock");
|
|||
|
|
}); // lock button click
|
|||
|
|
|
|||
|
|
$("#screen").click(function(){
|
|||
|
|
html2canvas(document.getElementById('poem'), {
|
|||
|
|
scale: 3
|
|||
|
|
}).then(function(canvas) {
|
|||
|
|
// Export the canvas to its data URI representation
|
|||
|
|
// var base64image = canvas.toDataURL("image/png");
|
|||
|
|
//
|
|||
|
|
// // Open the image in a new window
|
|||
|
|
// window.open(base64image , "_blank");
|
|||
|
|
// Export canvas as a blob
|
|||
|
|
canvas.toBlob(function(blob) {
|
|||
|
|
// Generate file download
|
|||
|
|
window.saveAs(blob, "yourwebsite_screenshot.png");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}); // screen button click
|
|||
|
|
|
|||
|
|
// change for composition view
|
|||
|
|
$("#compose").click(function(){
|
|||
|
|
$("#spina").toggleClass("unlock");
|
|||
|
|
$("#spina").toggleClass("done");
|
|||
|
|
$( "#spina p span.click" ).toggleClass("clickDone");
|
|||
|
|
const today = Date(Date.now());
|
|||
|
|
todayFormatted = today.toString();
|
|||
|
|
|
|||
|
|
$("#byline").html("<p>blackout poem inspired by " + book.title + " by " + book.author + "</p><p>composed on: " + todayFormatted) + "</p>";
|
|||
|
|
}); // compose
|
|||
|
|
|
|||
|
|
// reset everything back
|
|||
|
|
$("#clear").click(function(){
|
|||
|
|
$("#spina").removeClass("done");
|
|||
|
|
$( "#spina p span.click" ).removeClass("click");
|
|||
|
|
$("#byline").html("");
|
|||
|
|
$("#spina").addClass("unlock");
|
|||
|
|
}); // clear
|
|||
|
|
// $("help").hide();
|
|||
|
|
|
|||
|
|
// show help section
|
|||
|
|
$(".helpbtn").click(function(){
|
|||
|
|
$(".help").toggle();
|
|||
|
|
}); // helpbtn toggle
|
|||
|
|
|
|||
|
|
// copy text from word bin
|
|||
|
|
$("#copy_text").click(function(){
|
|||
|
|
navigator.clipboard.writeText($("#poem_list").text());
|
|||
|
|
}); // copy text
|
|||
|
|
|
|||
|
|
// change the color of a clicked word; add/remove clicked word to list
|
|||
|
|
$(document).on('click', "#spina.unlock p span", function(e){
|
|||
|
|
// $("#spina.unlock p span").click(function(){
|
|||
|
|
$( this ).toggleClass("click");
|
|||
|
|
let list = "";
|
|||
|
|
$("#spina p span.click").each(function(index) {
|
|||
|
|
list += " " + $(this).text();
|
|||
|
|
}); //poem
|
|||
|
|
// Add to the list, but strip out punctuation
|
|||
|
|
// console.log(list.replace(/[^a-z0-9 ]+/ig, ""));
|
|||
|
|
$("#poem_list").html(list.replace(/[^a-z0-9 ]+/ig, ""));
|
|||
|
|
}); //spina click
|
|||
|
|
}); // document ready
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<header>
|
|||
|
|
<h1>Daily <span class="purple">Blackout</span> Poetry Challenge</h1>
|
|||
|
|
|
|||
|
|
<p>Your daily blackout poetry challenge! Make a poem, save the poem, share the poem! (Tag the poem: #dailyBlackoutPoetryChallenge)</p>
|
|||
|
|
|
|||
|
|
<p>Click on a word to select it, click on it again to unselect. When you’ve found your poem hit Blackout! Get a screen shot and copy the words below!</p>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<nav>
|
|||
|
|
<button class="helpbtn">Help</button> - <button id="lock">Lock</button> - <button id="compose">Blackout!</button> - <button id="clear">Start Over</button> - <button id="screen">Save as image</button>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<div id="poem_header">
|
|||
|
|
<h2>Invaders from the Dark</h2>
|
|||
|
|
<h3>Greye La Spina</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<main id="poem">
|
|||
|
|
|
|||
|
|
<div id="spina" class="unlock">
|
|||
|
|
|
|||
|
|
<p>I ascertained that Miss Delorme was a responsible person, quite able and willing to defray the costs of printing her book, in case it proved to be out of the line of the regular publishing houses. I arranged to visit her home on June 18th, an easy matter, as I found I could get there by subway. On June 18th, therefor, I walked across the fields to the great wall which she had described in her letters, and rang the bell of the bronze gate. From that moment, I began to realize what Miss Delorme meant when she wrote that she feared for the safety of her manuscript. </p>
|
|||
|
|
|
|||
|
|
<p>Even as I stood there waiting, things started to happen in a most bewildering fashion. I heard somebody throw up a window on a side of the house (to my right), and then there came a woman’s scream, which sounded to me more angry than fearful. The scream was followed by a heavy, metallic clang upon the pavement just around the corner from where I stood. I left the gate and ran in the direction of the noise. </p>
|
|||
|
|
|
|||
|
|
<p>On the sidewalk lay a black tin box as is often used to preserve papers of importance. It was dented badly where it had struck the pavement. I picked it up and then turned my eyes toward the windows above me. </p>
|
|||
|
|
|
|||
|
|
<p>And elderly woman stood at the open window nearest the corner of the house, holding with both hands to the window-frame at either side of her. Although she appeared to be alone, I received a strong impression that she was being pulled from behind, for she was struggling as if with all her power to maintain her position there. As I looked up, the tin box in my hand, she called to me anxiously. </p>
|
|||
|
|
|
|||
|
|
<p>“Who are you?”</p>
|
|||
|
|
|
|||
|
|
<p>I told her. </p>
|
|||
|
|
|
|||
|
|
<p>“Thank God you came in time!” She cried excitedly. “Take the box and get away from her as quickly as you can. Don’t let it out of your sight until it has been printed and the books distributed. You’ll understand why, when you’ve read it. Never mind about me! My work is done!”</p>
|
|||
|
|
|
|||
|
|
<p>As the last words were flung down at me, she disappeared backward into the room, as if pulled there by invisible hands. </p>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="byline"></div>
|
|||
|
|
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h1>Copy Your Words</h1>
|
|||
|
|
<p>Copy the words you found here for alt-text, editing and archive! (Remember we don’t keep anything, so once you close this page, this poem is gone!)</P>
|
|||
|
|
<button id="copy_text">Copy</button>
|
|||
|
|
<div id="poem_list"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
<p>This site made with <a href="https://jquery.com/">jQuery</a>, PHP and <a href="https://www.barebones.com/products/bbedit/">BBEdit</a> with help from <a href="https://espressoapp.com/">Espresso</a>.</p>
|
|||
|
|
<p><a href="https://code.jacobhaddon.com/jake/smhn">Code</a> by Jacob Haddon - license <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPLv3.0</a> - <a href="https://Apokrupha.com/BlackOut">Apokrupha.com/Blackout</a></p>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<div class="helpbox help">
|
|||
|
|
<button class="helpbtn">Close</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="help" class="help">
|
|||
|
|
|
|||
|
|
<div class="helpwords">
|
|||
|
|
|
|||
|
|
<h1>Help</h1>
|
|||
|
|
|
|||
|
|
<p>The challenge is simple—select words from this page of text and find a poem. From there you can save it as an image and share it. </p>
|
|||
|
|
|
|||
|
|
<p>You can copy the text below the page and use it as a starting point to write your own poem. </p>
|
|||
|
|
|
|||
|
|
<p>You can make as many poems as you want each day with the same page. So don’t worry about ‘messing up.’</p>
|
|||
|
|
|
|||
|
|
<p>The page will be new each day. We have a bunch of different titles (see the list!). The pages are chosen at random, which means they will vary in content, which is a part of the challenge for you. </p>
|
|||
|
|
|
|||
|
|
<p>Make your posts with this hashtag so we can see you! </p>
|
|||
|
|
|
|||
|
|
<h1>Buttons</h1>
|
|||
|
|
|
|||
|
|
<h2>Start Over</h2>
|
|||
|
|
|
|||
|
|
<p>This will reset everything back to the start. There is no undo! </p>
|
|||
|
|
|
|||
|
|
<h2>Blackout!</h2>
|
|||
|
|
|
|||
|
|
<p>This inverts your page, blacking out what you didn’t choose, showing only what you did. It is now ready to be saved as an image!</p>
|
|||
|
|
|
|||
|
|
<h2>Save as Image</h2>
|
|||
|
|
|
|||
|
|
<p>This will save just the page portion of the site as a PNG file. </p>
|
|||
|
|
|
|||
|
|
<h1>What can I do with these poems / images / things</h1>
|
|||
|
|
|
|||
|
|
<p>Anything you want. </p>
|
|||
|
|
|
|||
|
|
<p>The text from these books is in the public domain, and you are free to use, remake, remix any way you want. </p>
|
|||
|
|
|
|||
|
|
<p>The images are yours and you make do what you wish. If you love us, let people know. But attribution is not required. </p>
|
|||
|
|
|
|||
|
|
<h1>Privacy</h1>
|
|||
|
|
|
|||
|
|
<p>We do not track you. We do not collect any data. We do not save copies of your poems. The Javascript libraries and fonts are self-hosted to prevent others from using them to track you. </p>
|
|||
|
|
|
|||
|
|
<p>The only way we will know if you use our site is if you tell us!</p>
|
|||
|
|
|
|||
|
|
<h1>Contact</h1>
|
|||
|
|
|
|||
|
|
<p>webmaster@ </p>
|
|||
|
|
|
|||
|
|
<p>We are intolerant of intolerance. If you see something hateful, transphobic, homophobic, racist, or the like, let us know.</p>
|
|||
|
|
|
|||
|
|
<p>We didn’t write any of the pages you see. While we do our best to pick works that don’t have hateful or hurtful contexts, that doesn’t mean that something could slip through. </p>
|
|||
|
|
|
|||
|
|
<p>If you see something, tell us, we will make it go away.</p>
|
|||
|
|
|
|||
|
|
<h1>Notes on Mobile</h1>
|
|||
|
|
|
|||
|
|
<p>The DBPC will work on your phone, but with some caveats. The screen shots are based on the actual size of the screen being used. </p>
|
|||
|
|
|
|||
|
|
<p>For best results, turn your phone landscape before taking the screenshot. </p>
|
|||
|
|
|
|||
|
|
<h1>Note on Poems!</h1>
|
|||
|
|
|
|||
|
|
<p>Since each day presents a limited canvas it is completely possible that two people will have the same, or very similar, words selected. That’s ok! This is a game to start your mind working. Your poem is still your poem even if someone else found it too! </p>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|