<div class="game">
<div class="game-container">
<div class="d-flex justify-content-center align-items-center">
<div class="pt-2" style="cursor: pointer;" data-toggle="modal" data-target="#how-to-play-wordle">
<i style="font-size:18px" class="bi bi-question-circle"></i>
</div>
<h1 class="text-center font-weight-bolder mb-0 my-4">
<a class="word-generator-link" href="/word-game-generator-online">Guess the word in six tries </a>
</h1>
<div class="wordle-time pt-2" style="cursor: pointer;">
<i class="bi bi-stopwatch" style="font-size: 18px;"></i>
</div>
<!-- <div data-toggle="modal" data-target="#exampleModal">
<img src="/assets/images/timer.svg" alt="">
</div> -->
</div>
<div class="text-center" style="font-size: 14px;
color: #444;" id="wordle-running-timer"></div>
<div class="alert-container hide">
<span id="errorMsg"></span>
</div>
<div class="game-board">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<div data-keyboard class="game-keyboard mt-3">
<div class="game-keyboard-row">
<button role="button" class="key-btn" data-key="Q">Q</button>
<button role="button" class="key-btn" data-key="W">W</button>
<button role="button" class="key-btn" data-key="E">E</button>
<button role="button" class="key-btn" data-key="R">R</button>
<button role="button" class="key-btn" data-key="T">T</button>
<button role="button" class="key-btn " data-key="Y">Y</button>
<button role="button" class="key-btn" data-key="U">U</button>
<button role="button" class="key-btn" data-key="I">I</button>
<button role="button" class="key-btn" data-key="O">O</button>
<button role="button" class="key-btn" data-key="P">P</button>
</div>
<div class="game-keyboard-row">
<button role="button" class="key-btn" data-key="A">A</button>
<button role="button" class="key-btn" data-key="S">S</button>
<button role="button" class="key-btn" data-key="D">D</button>
<button role="button" class="key-btn" data-key="F">F</button>
<button role="button" class="key-btn" data-key="G">G</button>
<button role="button" class="key-btn" data-key="H">H</button>
<button role="button" class="key-btn" data-key="J">J</button>
<button role="button" class="key-btn" data-key="K">K</button>
<button role="button" class="key-btn" data-key="L">L</button>
</div>
<div class="game-keyboard-row">
<button role="button" class="key-btn backspace" data-delete>⌫</button>
<button role="button" class="key-btn" data-key="Z">Z</button>
<button role="button" class="key-btn" data-key="X">X</button>
<button role="button" class="key-btn" data-key="C">C</button>
<button role="button" class="key-btn" data-key="V">V</button>
<button role="button" class="key-btn" data-key="B">B</button>
<button role="button" class="key-btn letter-absent" data-key="N">N</button>
<button role="button" class="key-btn" data-key="M">M</button>
<button role="button" class="key-btn enter" data-enter>Enter</button>
</div>
</div>
<span class="open-popup" data-toggle="modal" data-target="#exampleModal"></span>
</div>
</div>
<h2 class="text-center font-weight-bolder mb-0 my-4">
<a class="word-generator-link" href="/word-game-generator-online"> Make your own wordle </a>
</h2>
<div class="modal fade modalWrapper" id="exampleModal">
<div class="modal-dialog" style="max-width:400px">
<div class="modal-content">
<div class="modal-header p-2" style="background-color: #f8f9fa;">
<div class="gameResult"></div>
<button type="button" class="close" style="position: absolute; right: 0; top:-3px;"
data-dismiss="modal">
<span class="times-icon">×</span>
</button>
</div>
<div class="modal-body text-center" style="padding:2rem 0px 4rem 0">
<!-- <div class="iconWinLose tick"></div> -->
<div class="result-content">
<span id="answer" style="font-size: 20px;">You guessed the word</span>
<div id="result-guess-word" class="guess-word"></div>
<div style="font-size: 15px; margin-top: 15px;" id="game-result-time"></div>
</div>
<div class="wordle-game-play-links pt-4" style="padding:0 30px">
<a class="wordle-game-restart" href="/word-game-generator-online">
RESTART
</a>
<a class="wordle-game-share-link wordle-game-button font-weight-bolder">
<img src="/assets/images/copy.svg" alt="copy-link" style="width:20px; margin:0px 5px;">
Share this Wordle Link</a>
<a class="wordle-game-copy-link wordle-game-button">
<img src="/assets/images/copy.svg" alt="copy-link" style="width:20px; margin:0px 5px;">
Challenge a friend to this word</a>
</div>
<div class="pt-4" style="font-size: 14px;">Share it with your friends</div>
<div class="social-sharing-icons d-flex">
<a class="facebook-share-link" target="_blank">
<img class="share-icon" src="/assets/images/facebooks.svg" alt="facebook-share">
</a>
<a class="twitter-share-link" target="_blank">
<img class="share-icon" src="/assets/images/twitters.svg" alt="twitter-share">
</a>
<a class="whatsapp-share-link" data-action="share/whatsapp/share" target="_blank"><img
class="share-icon" src="/assets/images/whatsapp.svg" alt="whatsapp-share"> </a>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="how-to-play-wordle" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog wordletip" style="top:20px !important">
<div class="modal-content">
<div class="modal-header px-4 p-2">
<h5 class="modal-title" id="exampleModalLabel">How to Play</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-2 px-4 py-4" style="font-size: 12px;">
<p>Guess the <strong>WORDLE</strong> in six tries.</p>
<p>Each guess must be a valid five-letter word. Hit the enter button to submit.</p>
<p>After each guess, the color of the tiles will change to show how close your guess was to the
word.</p>
<div id="wordle-examples">
<p><strong>Examples</strong></p>
<p><span class="wordle-game-spot wordle-game-correct" title="W"></span><span
class="wordle-game-spot" title="E"></span><span class="wordle-game-spot"
title="A"></span><span class="wordle-game-spot" title="R"></span><span
class="wordle-game-spot" title="Y"></span></p>
<p>The letter <strong>W</strong> is in the word and in the correct spot.</p>
<p><span class="wordle-game-spot" title="P"></span><span
class="wordle-game-spot wordle-game-present" title="I"></span><span class="wordle-game-spot"
title="L"></span><span class="wordle-game-spot" title="L"></span><span
class="wordle-game-spot" title="S"></span></p>
<p>The letter <strong>I</strong> is in the word but in the wrong spot.</p>
<p><span class="wordle-game-spot" title="V"></span><span class="wordle-game-spot"
title="A"></span><span class="wordle-game-spot" title="G"></span><span
class="wordle-game-spot wordle-game-absent" title="U"></span><span class="wordle-game-spot"
title="E"></span></p>
<p>The letter <strong>U</strong> is not in the word in any spot.</p>
</div>
<p>A new WORDLE can make easily yourself any time! </p>
<div class="wordl_ani">
<a style="background: #007bff;
color: #fff;
text-decoration: underline;
padding: 14px 15px;
border-radius: 5px;
display: block;
width: 170px;" href="/word-game-generator-online"> Make your own wordle </a>
</div>
</div>
</div>
</div>
</div>