307 lines
10 KiB
HTML
307 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: https://code.jacobhaddon.com/jake/dbpc
|
||
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="book_pages.js"></script>
|
||
|
||
<script>
|
||
|
||
// console.log(book.title);
|
||
// console.log(book.pages[14][6]);
|
||
|
||
$(document).ready(function(){
|
||
|
||
// get today and format
|
||
const today = new Date(Date.now());
|
||
let day = today.getDate();
|
||
let formattedday = day.toLocaleString('en-US', {
|
||
minimumIntegerDigits: 2,
|
||
useGrouping: false
|
||
});
|
||
let month = today.getMonth() + 1;
|
||
let formattedmonth = month.toLocaleString('en-US', {
|
||
minimumIntegerDigits: 2,
|
||
useGrouping: false
|
||
});
|
||
let year = today.getFullYear();
|
||
|
||
// console.log(day);
|
||
// console.log(formattedmonth);
|
||
|
||
// make the date string match the book.json file
|
||
let todayString = year + "-" + formattedmonth + "-" + formattedday;
|
||
// console.log(todayString);
|
||
//
|
||
// console.log(book[todayString]);
|
||
|
||
// Make the header with the book info
|
||
$("#poem_header").html("<h2>" + book_pages[todayString].title + "</h2>\n\n<h3>" + book_pages[todayString].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").html(book_pages[todayString].page.replace(/(_([a-z0-9]+)_)/ig, "<i>$2</i>"));
|
||
|
||
// format the text with span tags
|
||
$("#spina p").each(function( index ) {
|
||
let text = $( this ).html().split(" ");
|
||
let newText = [];
|
||
$.each( text , function(index, value ){
|
||
newText[index] = "<span>" + value + "</span>";
|
||
}); // each text
|
||
$( this ).html(newText.join(" "));
|
||
}); // each p
|
||
|
||
// lock the page to prevent edits
|
||
$("#lock").click(function(){
|
||
$("#spina").toggleClass("unlock");
|
||
}); // lock button click
|
||
|
||
// make a screenshot
|
||
$("#screen").click(function() {
|
||
|
||
// get the date and format the filename
|
||
const today = new Date(Date.now());
|
||
let day = today.getDate();
|
||
let month = today.getMonth() + 1;
|
||
let year = today.getFullYear();
|
||
let minutes = today.getMinutes();
|
||
let hours = today.getHours();
|
||
let fileName = "dbpc_" + year + "_" + month + "_" + day + "_" + hours +"-" + minutes + ".png";
|
||
|
||
// make the screenshot
|
||
html2canvas(document.getElementById('poem'), {
|
||
scale: 3
|
||
}).then(function(canvas) {
|
||
canvas.toBlob(function(blob) {
|
||
window.saveAs(blob, fileName);
|
||
});
|
||
});
|
||
}); // screen button click
|
||
|
||
// change for composition view
|
||
$("#blackout").click(function() {
|
||
$("#spina").toggleClass("unlock");
|
||
$("#spina").toggleClass("done");
|
||
$("#spina p span.click").toggleClass("clickDone");
|
||
|
||
// get today and format
|
||
const today = Date(Date.now());
|
||
todayFormatted = today.toString();
|
||
|
||
// add the byline
|
||
$("#byline").html("<p>blackout poem inspired by " + book_pages[todayString].title + " by " + book_pages[todayString].author + "</p><p>composed on: " + todayFormatted) + "</p>";
|
||
|
||
// toggle the text on the button
|
||
$(this).text(function(i, text) {
|
||
return text === "Blackout!" ? "Un-Blackout!": "Blackout!";
|
||
});
|
||
}); // blackout button click
|
||
|
||
// reset everything back
|
||
$("#clear").click(function(){
|
||
$("#spina").removeClass("done");
|
||
$("#spina p span.click").removeClass("click");
|
||
$("#byline").html("");
|
||
$("#poem_list").html("");
|
||
$("#spina").addClass("unlock");
|
||
$("#blackout").text("Blackout!");
|
||
}); // clear button click
|
||
|
||
// 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
|
||
|
||
$("#copy_text_meta").click(function(){
|
||
|
||
// get today and format it
|
||
const today = Date(Date.now());
|
||
todayFormatted = today.toString();
|
||
|
||
// add the meta to the copyed text
|
||
var poem_meta = "#dailyBlackoutPoetryChallenge\n\n" + $("#poem_list").text() + "\n\n" + book_pages[todayString].title + " - " + todayFormatted;
|
||
navigator.clipboard.writeText(poem_meta);
|
||
}); // copy text w/meta
|
||
|
||
// change the color of a clicked word; add/remove clicked word to list
|
||
$(document).on('click', "#spina.unlock p span", function(e){
|
||
|
||
// add the class to the clicked word
|
||
$( this ).toggleClass("click");
|
||
|
||
// make the list of words
|
||
let list = "";
|
||
$("#spina p span.click").each(function(index) {
|
||
list += " " + $(this).text();
|
||
}); //poem
|
||
// Add to the list, but strip out punctuation
|
||
$("#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! There is a new page each day!</p>
|
||
|
||
<p>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>
|
||
|
||
<div id="poem_header"></div>
|
||
|
||
<nav>
|
||
<button class="helpbtn btn btn-mn">Help</button> - <button id="clear" class="btn btn-mn">Start Over</button> - <button id="blackout" class="btn btn-mn">Blackout!</button> - <button id="screen" class="btn btn-mn">Save as image</button>
|
||
</nav>
|
||
|
||
<main id="poem">
|
||
<div id="spina" class="unlock"></div>
|
||
<div id="byline"></div>
|
||
</main>
|
||
|
||
<section>
|
||
<h1>Copy Your <span class="purple">Words</span></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>
|
||
|
||
<div id="copy_buttons">
|
||
<button id="copy_text" class="btn btn-mn">Copy</button>
|
||
<button id="copy_text_meta" class="btn btn-mn">Copy with meta</button>
|
||
</div>
|
||
<div id="poem_list"></div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>More Blackout Poetry Awaits!</h2>
|
||
<p>Check out our site for more blackout poetry, including HIDE AND SEEK a Blackout Poetry workbook by Bram Stoker nominated poet Jessica McHugh!</p>
|
||
<p><a href="http://apokrupha.com/blackout">apokrupha.com/blackout</a></p>
|
||
</section>
|
||
|
||
<footer>
|
||
<h2>About</h2>
|
||
<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/dbpc">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>
|
||
|
||
<!--Help Section-->
|
||
|
||
<div id="help" class="help">
|
||
|
||
<div class="help btn-hlp-bx">
|
||
<button class="btn btn-hlp helpbtn">Close</button>
|
||
</div>
|
||
|
||
<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@dailyblackoutpoetrychallenge.com</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> |