Loading...
Hotel Yorba by The White Stripes: Guitar Chords and Lyrics - body {
margin: 0;
font-family: sans-serif;
}
.top-button-row,
.bottom-button-container {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
padding: 15px;
}
.styled-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #333;
color: #fff;
border: 2px solid #fff;
border-radius: 4px;
text-align: center;
transition: background-color 0.2s ease, border 0.2s ease;
user-select: none;
}
.styled-button:hover {
background-color: #444;
}
.editable-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #333;
color: #fff;
border: 2px solid #fff;
border-radius: 4px;
padding: 10px 20px;
font-size: 16px;
text-align: center;
min-width: 80px;
user-select: none;
outline: none;
}
.editable-button:focus {
background-color: #444;
}
.lyrics-container {
column-gap: 40px;
max-width: 100%;
padding: 20px;
}
.lyrics {
white-space: pre-wrap;
font-family: monospace;
column-count: 1;
}
.two-columns .lyrics {
column-count: 2;
}
@media (max-width: 768px) {
.two-columns .lyrics {
column-count: 1;
}
}
#printPreviewContainer {
display: none;
}
#printPreview {
white-space: pre-wrap;
font-family: monospace;
column-count: 2;
column-gap: 40px;
line-height: 1.4;
}
@media print {
body * {
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
#printPreviewContainer,
#printPreviewContainer * {
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}
#printPreviewContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: white;
box-sizing: border-box;
page-break-inside: avoid;
}
#printPreview {
text-align: left;
}
}
Loading...
Columns
Loading...
The White Stripes - Hotel Yorba
[Intro]
G
[Verse]
G C
I was watching, with one eye on the other side,
D G
I had fifteen people telling me to move, I got movin’ on my mind.
G C
I found shelter, in some thoughts turning wheels around,
D G
I've said 39 times that I love you to the beauty I have found.
[Chorus]
G
Well it's, one, two, three, four, take the elevator,
C D
at the Hotel Yorba I'll be glad to see you later,
G F G
all they got inside is vacancy
[Instrumental]
G C D G
[Verse]
G C
I've been thinking, of a little place down by the lake
D
They've got a dirty old road leading up to the house
G
I wonder how long it will take
G
till we're alone,
C
sitting on a front porch of that home
D
Stompin our feet, on the wooden boards,
G
Never gotta worry about locking the door
G
Well its, one, two, three, four, take the elevator,
C
at the Hotel Yorba I'll be glad to see you later,
D G F G
all they got inside is vacancy
[Instrumental]
G* C* D* G*
[Bridge]
G* C*
It might sound silly, for me to think childish thoughts like these
D* G*
But I'm so tired of acting tough, and I'm gonna do what I please.
[Verse]
G C
Let's get married in a big cathedral by a priest
D
because if I'm the man that you love the most,
G
You could say I do at least.
[Chorus]
G
Well its, one, two, three, four, take the elevator,
C
at the hotel Yorba I'll be glad to see you later,
D G
all they got inside is vacancy
G
And it's four, five six, seven, grab the umbrella,
C
And grab hold of me cause I’m your favourite fella,
D G C G-D-G*
All they got inside is vacancy
Random
Print
11pt
let player;
let activeTrack = null;
const youtubeButton = document.getElementById('youtubeToggleButton');
const karaokeButton = document.getElementById('karaokeToggleButton');
const tracks = {
audio: 'hXqdnNq-60g',
karaoke: 'qu42lOkiNYY'
};
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-player', {
height: '0',
width: '0',
videoId: tracks.audio,
playerVars: { autoplay: 0, controls: 0, playsinline: 1 },
events: {
'onReady': () => {
youtubeButton.textContent = "Audio";
karaokeButton.textContent = "Karaoke";
}
}
});
}
function togglePlayback(trackType, buttonId) {
const isSameTrack = activeTrack === trackType;
const isPlaying = player.getPlayerState() === YT.PlayerState.PLAYING;
if (!isSameTrack) {
activeTrack = trackType;
player.loadVideoById(tracks[trackType]);
youtubeButton.textContent = "Audio";
karaokeButton.textContent = "Karaoke";
document.getElementById(buttonId).textContent = "Stop";
} else {
if (isPlaying) {
player.pauseVideo();
document.getElementById(buttonId).textContent = trackType === 'audio' ? "Audio" : "Karaoke";
} else {
player.playVideo();
document.getElementById(buttonId).textContent = "Stop";
}
}
}
youtubeButton.onclick = () => togglePlayback('audio', 'youtubeToggleButton');
karaokeButton.onclick = () => togglePlayback('karaoke', 'karaokeToggleButton');
document.getElementById('toggleButton').onclick = () => {
document.getElementById('lyricsContainer').classList.toggle('two-columns');
};
function printLyrics() {
const fontSizeText = document.getElementById('fontSizeEditor').innerText.trim();
const fontSize = fontSizeText.match(/^\d+(pt|px|em|rem)$/i) ? fontSizeText : '11pt';
const lyricsHTML = document.getElementById('lyrics').innerHTML;
const preview = document.getElementById('printPreviewContainer');
const previewContent = document.getElementById('printPreview');
previewContent.innerHTML = `${lyricsHTML}`;
previewContent.style.fontSize = fontSize;
preview.style.display = 'block';
setTimeout(() => {
window.print();
preview.style.display = 'none';
}, 100);
}
Scroll
#adjustableWidget {
position: fixed;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
background-color: #f0f0f0;
padding: 5px 8px;
border: 1px solid #ccc;
border-radius: 4px;
z-index: 99999;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
#adjustInput {
width: 60px;
padding: 2px;
font-size: 12px;
}
#adjustNumber {
width: 40px;
padding: 2px;
font-size: 12px;
}
#startScrollButton {
padding: 4px 8px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
document.addEventListener("DOMContentLoaded", () => {
let isScrolling = false;
let animationFrameId = null;
let scrollRemainder = 0;
const adjustInput = document.getElementById("adjustInput");
const adjustNumber = document.getElementById("adjustNumber");
const startScrollButton = document.getElementById("startScrollButton");
const SPEED_OFFSET = 10;
const SPEED_FACTOR = 0.1;
function getAdjustedSpeed(rawValue) {
return (parseInt(rawValue) + SPEED_OFFSET) * SPEED_FACTOR;
}
// Initialize values
adjustInput.value = 50;
adjustNumber.value = 50;
let scrollSpeed = getAdjustedSpeed(50);
// Sync input changes
function updateSpeedFromInput(value) {
adjustInput.value = value;
adjustNumber.value = value;
scrollSpeed = getAdjustedSpeed(value);
}
adjustInput.addEventListener("input", (e) => updateSpeedFromInput(e.target.value));
adjustNumber.addEventListener("input", (e) => updateSpeedFromInput(e.target.value));
startScrollButton.addEventListener("click", () => {
if (!isScrolling) {
isScrolling = true;
startScrollButton.textContent = "Stop";
scrollStep();
} else {
stopScroll();
startScrollButton.textContent = "Scroll";
}
});
function scrollStep() {
if (!isScrolling) return;
const bottomReached = (window.innerHeight + window.scrollY) >= document.body.offsetHeight;
if (bottomReached) {
stopScroll();
startScrollButton.textContent = "Scroll";
return;
}
scrollRemainder += scrollSpeed;
let pixelsToScroll = Math.floor(scrollRemainder);
scrollRemainder -= pixelsToScroll;
if (pixelsToScroll === 0 && scrollSpeed > 0) {
pixelsToScroll = 1;
}
window.scrollBy(0, pixelsToScroll);
animationFrameId = requestAnimationFrame(scrollStep);
}
function stopScroll() {
isScrolling = false;
cancelAnimationFrame(animationFrameId);
scrollRemainder = 0;
}
window.addEventListener("scroll", () => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
stopScroll();
startScrollButton.textContent = "Scroll";
}
});
});