monorail
/
local_wordle
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
local_wordle/index.html

302 lines
13 KiB
Raw Permalink Blame History

<!-- Saved from http://127.0.0.1:8080/src/wordle.html at 2022-02-01T09:09:09Z using monolith v2.6.1 -->
<!DOCTYPE html><html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Wordle Classic - A daily word game</title>
<meta name="description" content="A mirror of the pre-NYT wordle">
<!-- FB Meta Tags -->
<meta property="og:url" content="https://www.powerlanguage.co.uk/wordle/">
<meta property="og:type" content="website">
<meta property="og:title" content="Wordle Classic - A daily word game">
<meta property="og:description" content="A mirror of the pre-NYT wordle">
<meta property="og:image" content="wordle_og_1200x630.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<!-- <meta property="twitter:domain" content="powerlanguage.co.uk"> -->
<meta name="theme-color" content="#6aaa64">
<!-- <link rel="manifest" href="https://www.powerlanguage.co.uk/wordle/manifest.json"> -->
<link href="src/wordle_logo_32x32.png" rel="icon shortcut" sizes="3232">
<!-- <link href="https://www.powerlanguage.co.uk/wordle/images/wordle_logo_192x192.png" rel="apple-touch-icon"> -->
<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8;base64,LmhpZGRlbiB7CglkaXNwbGF5OiBub25lOwoJb3BhY2l0eTogMDsKCXRyYW5zaXRpb246IG9wYWNpdHkgMC4yczsKfQoKLm92ZXJsYXkgewoJcG9zaXRpb246IGFic29sdXRlOwoJd2lkdGg6IDEwMCU7CgloZWlnaHQ6IDEwMCU7Cgl0b3A6IDA7CglsZWZ0OiAwOwoJanVzdGlmeS1jb250ZW50OiBjZW50ZXI7CgliYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvci1iYWNrZ3JvdW5kKTsKCWFuaW1hdGlvbjogU2xpZGVJbiAxMDBtcyBsaW5lYXI7Cgl6LWluZGV4OiAyMDAwOwp9Cgo6aG9zdChbb3Blbl0pIC5vdmVybGF5IHsKCWRpc3BsYXk6IGZsZXg7Cn0KCi5jb250ZW50IHsKCXBvc2l0aW9uOiByZWxhdGl2ZTsKCWNvbG9yOiB2YXIoLS1jb2xvci10b25lLTEpOwoJcGFkZGluZzogMCAzMnB4OwoJbWF4LXdpZHRoOiA1MDBweDsKCW1hcmdpbjogYXV0bzsKCW92ZXJmbG93LXk6IGF1dG87CgloZWlnaHQ6IDEwMCU7CglkaXNwbGF5OiBmbGV4OwoJZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKfQoKLmNvbnRlbnQtY29udGFpbmVyIHsKCWhlaWdodDogMTAwJTsKfQoKLm92ZXJsYXkuY2xvc2luZyB7CglhbmltYXRpb246IFNsaWRlT3V0IDE1MG1zIGxpbmVhcjsKfQoKaGVhZGVyIHsKCWRpc3BsYXk6IGZsZXg7CglqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKCWFsaWduLWl0ZW1zOiBjZW50ZXI7Cglwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCmgxIHsKCWZvbnQtd2VpZ2h0OiA3MDA7Cglmb250LXNpemU6IDE2cHg7CglsZXR0ZXItc3BhY2luZzogMC41cHg7Cgl0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlOwoJdGV4dC1hbGlnbjogY2VudGVyOwoJbWFyZ2luLWJvdHRvbTogMTBweDsKfQoKZ2FtZS1pY29uIHsKCXBvc2l0aW9uOiBhYnNvbHV0ZTsKCXJpZ2h0OiAwOwoJdXNlci1zZWxlY3Q6IG5vbmU7CgljdXJzb3I6IHBvaW50ZXI7Cn0KCkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi1kZXZpY2Utd2lkdGg6MzIwcHgpIGFuZCAobWF4LWRldmljZS13aWR0aDo0ODBweCkgewoJLmNvbnRlbnQgewoJCW1heC13aWR0aDogMTAwJTsKCQlwYWRkaW5nOiAwOwoJfQoKCWdhbWUtaWNvbiB7CgkJcGFkZGluZzogMCAxNnB4OwoJfQoKfQoKQGtleWZyYW1lcyBTbGlkZUluIHsKCTAlIHsKCQl0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMzBweCk7CgkJb3BhY2l0eTogMDsKCX0KCgkxMDAlIHsKCQl0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMHB4KTsKCQlvcGFjaXR5OiAxOwoJfQoKfQoKQGtleWZyYW1lcyBTbGlkZU91dCB7CgkwJSB7CgkJdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7CgkJb3BhY2l0eTogMTsKCX0KCgk5MCUgewoJCW9wYWNpdHk6IDA7Cgl9CgoJMTAwJSB7CgkJb3BhY2l0eTogMDsKCQl0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoNjBweCk7Cgl9Cgp9CgoKICAuc2V0dGluZyB7CgogICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjI1czsKICAgIGRpc3BsYXk6IGZsZXg7CiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgICBhbGlnbi1pdGVtczogY2VudGVyOwogICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHZhcigtLWNvbG9yLXRvbmUtNCk7CiAgICBwYWRkaW5nOiAxNnB4IDA7CiAgfQoKICBhLCBhOnZpc2l0ZWQgewogICAgY29sb3I6IHZhcigtLWNvbG9yLXRvbmUtMik7CiAgfQoKICAudGl0bGUgewogICAgZm9udC1zaXplOiAxOHB4OwogIH0KICAudGV4dCB7CiAgICBwYWRkaW5nLXJpZ2h0OiA4cHg7CiAgfQogIC5kZXNjcmlwdGlvbiB7CiAgICBmb250LXNpemU6IDEycHg7CiAgICBjb2xvcjogdmFyKC0tY29sb3ItdG9uZS0yKTsKICB9CgogICNmb290bm90ZSB7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICBib3R0b206IDA7CiAgICBsZWZ0OiAwOwogICAgcmlnaHQ6IDA7CiAgICBwYWRkaW5nOiAxNnB4OwogICAgY29sb3I6IHZhcigtLWNvbG9yLXRvbmUtMik7CiAgICBmb250LXNpemU6IDEycHg7CiAgICB0ZXh0LWFsaWduOiByaWdodDsKICAgIGRpc3BsYXk6IGZsZXg7CiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgICBhbGlnbi1pdGVtczogZmxleC1lbmQ7CiAgfQoKICAjcHJpdmFjeS1wb2xpY3ksCiAgI2NvcHlyaWdodCB7CiAgICB0ZXh0LWFsaWduOiBsZWZ0OwogIH0KCiAgQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWluLWRldmljZS13aWR0aCA6IDMyMHB4KSBhbmQgKG1heC1kZXZpY2Utd2lkdGggOiA0ODBweCkgewogICAgLnNldHRpbmcgewogICAgICBwYWRkaW5nOiAxNnB4OwogICAgfQogIH0KCgoKLmZsYXNoIHsKCWJhY2tncm91bmQtY29sb3I6ICB2YXIoLS1jb2xvci10b25lLTIpOwoJdHJhbnNpdGlvbjogIGJhY2tncm91bmQtY29sb3IgMC4xcyBlYXNlLW91dDsKfQoKI2lucHV0bG9hZCB7CglwYWRkaW5nOiAgMC41ZW0gMDsKfQ==">
<style>
/* Global Styles & Colors */
:root {
--green: #6aaa64;
--darkendGreen: #538d4e;
--yellow: #c9b458;
--darkendYellow: #b59f3b;
--lightGray: #d8d8d8;
--gray: #86888a;
--darkGray: #939598;
--white: #fff;
--black: #212121;
/* Colorblind colors */
--orange: #f5793a;
--blue: #85c0f9;
font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
--header-height: 50px;
--keyboard-height: 200px;
--game-max-width: 500px;
}
/* Light theme colors */
:root {
--color-tone-1: #1a1a1b;
--color-tone-2: #787c7e;
--color-tone-3: #878a8c;
--color-tone-4: #d3d6da;
--color-tone-5: #edeff1;
--color-tone-6: #f6f7f8;
--color-tone-7: #ffffff;
--opacity-50: rgba(255, 255, 255, 0.5);
}
/* Dark Theme Colors */
.nightmode {
--color-tone-1: #d7dadc;
--color-tone-2: #818384;
--color-tone-3: #565758;
--color-tone-4: #3a3a3c;
--color-tone-5: #272729;
--color-tone-6: #1a1a1b;
--color-tone-7: #121213;
--opacity-50: rgba(0, 0, 0, 0.5);
}
/* Constant colors and colors derived from theme */
:root,
.nightmode {
--color-background: var(--color-tone-7);
}
:root {
--color-present: var(--yellow);
--color-correct: var(--green);
--color-absent: var(--color-tone-2);
--tile-text-color: var(--color-tone-7);
--key-text-color: var(--color-tone-1);
--key-evaluated-text-color: var(--color-tone-7);
--key-bg: var(--color-tone-4);
--key-bg-present: var(--color-present);
--key-bg-correct: var(--color-correct);
--key-bg-absent: var(--color-absent);
--modal-content-bg: var(--color-tone-7);
}
.nightmode {
--color-present: var(--darkendYellow);
--color-correct: var(--darkendGreen);
--color-absent: var(--color-tone-4);
--tile-text-color: var(--color-tone-1);
--key-text-color: var(--color-tone-1);
--key-evaluated-text-color: var(--color-tone-1);
--key-bg: var(--color-tone-2);
--key-bg-present: var(--color-present);
--key-bg-correct: var(--color-correct);
--key-bg-absent: var(--color-absent);
--modal-content-bg: var(--color-tone-7);
}
.colorblind {
--color-correct: var(--orange);
--color-present: var(--blue);
--tile-text-color: var(--white);
--key-bg-present: var(--color-present);
--key-bg-correct: var(--color-correct);
--key-bg-absent: var(--color-absent);
}
html {
height: 100%;
}
body {
height: 100%;
background-color: var(--color-background);
margin: 0;
padding: 0;
/* Prevent scrollbar appearing on page transition */
overflow-y: hidden;
}
</style>
</head>
<body class="nightmode">
<game-app></game-app>
<div id="header-container" style="display: none;">
<style>
.toaster {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, 0);
pointer-events: none;
width: fit-content;
}
#game-toaster {
z-index: ".concat(1e3, ";
}
#system-toaster {
z-index: ").concat(4e3, ";
}
#game {
width: 100%;
max-width: var(--game-max-width);
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: column;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--header-height);
color: var(--color-tone-1);
border-bottom: 1px solid var(--color-tone-4);
}
header .title {
font-weight: 700;
font-size: 36px;
letter-spacing: 0.2rem;
text-transform: uppercase;
text-align: center;
position: absolute;
left: 0;
right: 0;
pointer-events: none;
}
@media (max-width: 360px) {
header .title {
font-size: 22px;
letter-spacing: 0.1rem;
}
}
#board-container {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
overflow: hidden;
}
#board {
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-gap: 5px;
padding: 10px;
box-sizing: border-box;
}
button.icon {
background: none;
border: none;
cursor: pointer;
padding: 0 4px;
}
#debug-tools {
position: absolute;
bottom: 0;
}
#save-buttion game-icon svg path {
transform: translate(-1.99 -2.72);
fill: none !important;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 2px
}
</style>
<game-theme-manager>
<div id="game">
<header>
<div class="menu">
<button id="help-button" class="icon" aria-label="help">
<game-icon icon="help"></game-icon>
</button>
</div>
<div class="title">
WORDLE
</div>
<div class="menu">
<button id="save-button" class="icon" aria-label="save">
<game-icon icon="save"></game-icon>
</button>
<button id="statistics-button" class="icon" aria-label="statistics">
<game-icon icon="statistics"></game-icon>
</button>
<button id="settings-button" class="icon" aria-label="settings">
<game-icon icon="settings"></game-icon>
</button>
</div>
</header>
<div id="board-container">
<div id="board"></div>
</div>
<game-keyboard></game-keyboard>
<game-modal></game-modal>
<game-page></game-page>
<div class="toaster" id="game-toaster"></div>
<div class="toaster" id="system-toaster"></div>
</div>
<div id="debug-tools"></div>
</game-theme-manager></div>
<div id="save" class="hidden">
<div class="overlay">
<div class="content">
<header>
<h1>
<slot></slot>
</h1>
<game-icon id="save-close" icon="close"></game-icon>
</header>
<div class="content-container">
<slot name="content">
<div class="sections">
<section>
<div class="setting" id="saveButton">
<div class="text">
<div class="title">Save Stats</div>
<div class="description">Save stats to the clipboard</div>
</div>
</div>
<div class="setting" id="loadButton">
<div class="text">
<div class="title">Load Stats</div>
<div class="description">To get your stats from <a href="https://www.powerlanguage.co.uk/wordle/">original wordle</a>, install <a href="https://www.tampermonkey.net/">Tampermonkey</a> and <a href="wordle_stats_export.user.js">this script</a>. Then go to that page, right click, and select Tampermonkey > Wordle Export Stats.</div>
<input id="inputtext" type="text">
<input id="inputload" type="button" value="Import">
</div>
</div>
</section>
</div>
</slot>
</div>
</div>
</div>
</div>
<script async="" src="wordle.js"></script>
<script async="" src="custom.js"></script>
<script>
(function() {
// Defining the hash before the main bundle allows the bundle access window.hash
window.wordle = window.wordle || {};
window.wordle.hash = 'e65ce0a5';
})();
</script>
</body></html>
Reference in new issue View Git Blame Copy Permalink