Created
February 2, 2022 09:41
-
-
Save avipars/89bedbfde448b5e7c9e31a6e16f3fa29 to your computer and use it in GitHub Desktop.
Wordle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> | |
<title>Wordle - A daily word game</title> | |
<meta name="description" content="Guess the hidden word in 6 tries. A new puzzle is available each day."> | |
<!-- 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 - A daily word game"> | |
<meta property="og:description" content="Guess the hidden word in 6 tries. A new puzzle is available each day."> | |
<meta property="og:image" content="https://www.dailywordle.com/images/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="manifest.json" /> | |
<link href="images/wordle_logo_32x32.png" rel="icon shortcut" sizes="3232" /> | |
<link href="images/wordle_logo_192x192.png" rel="apple-touch-icon" /> | |
<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> | |
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2SSGMHY3NP"></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> | |
<script src="main.e65ce0a5.js"></script> | |
<game-app></game-app> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment