Enter Your Information, Select All Text of The Red Field below, Copy It and Then Paste It into a Text Editing Application and Choose to "Save as HTML".
(Alternatively, You may download the ".zip" file within this folder containing a Customizable HTML Template of this index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="Cache-Control" content="no-cache" />
<title></title>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: yellow;
}
body {
--text-color: #222;
--bkg-color: #fff;
}
body.dark-theme {
--text-color: #eee;
--bkg-color: #121212;
}
@media (prefers-color-scheme: dark) {
/* defaults to dark theme */
body {
--text-color: #eee;
--bkg-color: #121212;
}
body.light-theme {
--text-color: #222;
--bkg-color: #fff;
}
}
* {
font-family: Arial, Helvetica, sans-serif;
}
body {
background: var(--bkg-color);
}
h1,
p {
color: var(--text-color);
}
img {
max-width: 100%;
width: 600px; // assume this is the default size
}
* {
font-family: sans-serif;
}
.tweet {
border: 1px solid grey;
border-radius: 4px;
display: block;
padding: 8px;
margin: 4px;
font-size: 13pt;
font-weight: normal;
max-width: 600px;
}
.date {
font-size: 0.8em;
color: red;
}
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
}
</style>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<base target="_blank">
<div>
<BR><p></p><BR>
<button class="btn-nightmode">Night Mode</button><BR><BR><BR>
<nav>
<a href="#Bottoms_Up" target="_self">Bottoms Up!</a></nav><BR><BR>
<a target="_blank" href="https://twitter.com/ChrisDownsBooks/status/1373125469931929605?s=20">Megiddo</a>
<BR><BR>
<a target="_blank" href="https://twitter.com/ChrisDownsBooks/status/1376733766605885443?s=20">A Gift</a>
<BR>
<BR><H2><p>Collapsibles:</p></H2>
<button type="button" class="collapsible">My Links Go Here</button>
<div class="content">
<p><a target="_blank" href="https://www.twitter.com/">twitter.com/</a></p>
</div>
<button type="button" class="collapsible">Useful Links/URLs</button>
<div class="content">
<p><p>
<a target="_blank" href="https://tweetdeck.twitter.com/">tweetdeck.twitter.com</a>
<BR><BR>
<a target="_blank" href="https://analytics.twitter.com/">analytics.twitter.com</a>
<BR><BR>
<a target="_blank" href="https://ads.twitter.com/">ads.twitter.com</a>
<BR><BR>
<a target="_blank" href="https://infranodus.com/">InfraNodus</a> OR <a target="_blank" href="https://github.com/noduslabs/infranodus">InfraNodus on GitHub</a>
<BR><BR>
<a target="_blank" href="http://www.prweb.com/">PRWeb.com</a>
<BR><BR>
<a target="_blank" href="https://ricks-apps.com/osx/sitesucker/index.html">SiteSucker</a>
<BR><BR>
<a target="_blank" href="https://www.vicinitas.io/free-tools/download-user-tweets">Vicinitas.io - Download User Tweets</a>
<BR><BR>
<a target="_blank" href="https://www.sejda.com/">Sejda.com - Free PDF Tools</a>
<BR><BR>
<a target="_blank" href="https://www.sentinelone.com/blog/hackers-on-macs-what-are-the-must-have-apps-tools/">Sentinel One - Useful Mac Apps List</a>
<BR><BR>
<a target="_blank" href="https://github.com/">GitHub</a>
<BR><BR>
<a target="_blank" href="https://drive.google.com/drive/folders/1Vde0PaixlNYxXE1LV0LBVx8eoYKGmGEs?usp=sharing">How to Host Your Own Twitter Scroll Archive as a Website</a>
</p></p>
</div>
<button type="button" class="collapsible">Start</button>
<div class="content">
<H2><p>Welcome!</p></H2>
<p></p>
</div>
<BR>
</div><BR>
<BR>
<p class="main-content">
<Div id="Bottoms_Up">
<H1 id="Bottoms_UP">The Scroll Starts Here:</H1>
<p>(On <B></B>)</p><BR>
<nav>
<a href="#Limbo" target="_self">Limbo!</a></nav><BR>
</Div>
</p>
<div id="root"></div>
<script type="text/javascript">
window.YTD = {
tweet: {},
account: {},
}
</script>
<script type="text/javascript" src="./tweet.js"></script>
<script type="text/javascript" src="./account.js"></script>
<script type="text/babel">
const accountName = window.YTD.account.part0[0].account.username;
const createdStr = window.YTD.account.part0[0].account.createdAt;
const createdDate = new Date(/^[0-9]+$/.test(createdStr) ? parseInt(createdStr) : createdStr);
function Media(props) {
const data = props.data;
if (data.type == 'photo') {
return <img src={data.media_url_https} />;
}
else {
return <p>Unknown media attachment.</p>;
}
}
function Tweet(props) {
const data = props.data.tweet ? props.data.tweet : props.data;
const url = "https://twitter.com/" + accountName + "/status/" + data.id_str;
var media = [];
if (data.extended_entities) {
media = data.extended_entities.media.map((media, index) => {
return <Media data={media} key={index} />;
});
}
return (
<div className="tweet">
<p>{data.full_text}</p>
<div>{media}</div>
<a target="_blank" href={url} className="date">{data.created_at}</a>
</div>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
year: createdDate.getFullYear(),
month: 'Jan',
searchTerm: "",
};
}
render() {
const years = [];
const now = new Date();
for (var i = createdDate.getFullYear(); i <= now.getFullYear(); i++) {
const year = i;
const onClick = () => {
this.setState((prevState) => {
return {
...prevState,
year,
};
});
};
years.push(<button key={i} onClick={onClick}>{i}</button>);
}
const months = [
'All',
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
].map((name) => {
const onClick = () => {
this.setState((prevState) => {
return {
...prevState,
month: name,
}
})
}
return <button key={name} onClick={onClick}>{name}</button>;
});
const month = this.state.month;
const year = this.state.year;
const searchTerm = this.state.searchTerm;
const tweets = window.YTD.tweet.part0;
const filteredTweets = tweets.filter((tweet) => {
if (tweet.tweet) {
tweet = tweet.tweet
}
if (searchTerm != "") {
const haystack = tweet.full_text.toLowerCase();
const needle = searchTerm.toLowerCase();
return haystack.indexOf(needle) != -1;
}
else {
return tweet.created_at.endsWith(year.toString()) &&
(month == 'All' || tweet.created_at.indexOf(month) != -1)
}
});
const maxTweets = 100000;
var elements = [];
for (var i = 0; i < Math.min(maxTweets, filteredTweets.length); i++) {
const data = filteredTweets[i];
elements.push(<Tweet key={data.id_str} data={data} />);
}
if (maxTweets < filteredTweets.length) {
elements.push(<div key="toomany">
<p>Too many results, only showing {maxTweets}</p>
</div>)
}
if (filteredTweets.length == 0) {
elements.push(<div key="none">
<p>No tweets found!</p>
</div>)
}
var title;
if (searchTerm != "") {
title = "Search: " + searchTerm;
}
else {
title = month + " " + year;
}
title += " (" + filteredTweets.length + " results)";
const handleChange = (event) => {
const newText = event.target.value;
this.setState((prevState) => {
return {
...prevState,
searchTerm: newText,
}
});
};
return (
<div>
<nav>
{years}
</nav>
<nav>
{months}
</nav>
<br/>
<br/>
<input type="text" onChange={handleChange} value={searchTerm} />
<br/>
<br/>
<h2><p>{title}</p></h2>
<div>
{elements}
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>
<script>
const btn = document.querySelector(".btn-nightmode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
document.body.classList.toggle("light-theme");
}
btn.addEventListener("click", function () {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
var theme = document.body.classList.contains("light-theme")
? "light"
: "dark";
} else {
document.body.classList.toggle("dark-theme");
var theme = document.body.classList.contains("dark-theme")
? "dark"
: "light";
}
localStorage.setItem("theme", theme);
});
</script>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- Code for this Twitter Archive Browser courtesy GitHub User Tiffany352 and The Authors of All Linked Code. The Author of ChrisDownsBooks simply modified Tiffany's Original Twitter Archive Browser to include some necessary features for his purposes. The Barebones (non-personalized) Version of this index.html File may be found at ChrisDownsBooks.com-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
<BR><BR><BR><BR>
<Div id="Limbo"></Div>
</body>
</html>
