zhereh-frontend

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

+page.svelte (2157B)

      1 <svelte:head>
      2 	<title>How to play Sverdle</title>
      3 	<meta name="description" content="How to play Sverdle" />
      4 </svelte:head>
      5 
      6 <div class="text-column">
      7 	<h1>How to play Sverdle</h1>
      8 
      9 	<p>
     10 		Sverdle is a clone of <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a>, the
     11 		word guessing game. To play, enter a five-letter English word. For example:
     12 	</p>
     13 
     14 	<div class="example">
     15 		<span class="close">r</span>
     16 		<span class="missing">i</span>
     17 		<span class="close">t</span>
     18 		<span class="missing">z</span>
     19 		<span class="exact">y</span>
     20 	</div>
     21 
     22 	<p>
     23 		The <span class="exact">y</span> is in the right place. <span class="close">r</span> and
     24 		<span class="close">t</span>
     25 		are the right letters, but in the wrong place. The other letters are wrong, and can be discarded.
     26 		Let's make another guess:
     27 	</p>
     28 
     29 	<div class="example">
     30 		<span class="exact">p</span>
     31 		<span class="exact">a</span>
     32 		<span class="exact">r</span>
     33 		<span class="exact">t</span>
     34 		<span class="exact">y</span>
     35 	</div>
     36 
     37 	<p>This time we guessed right! You have <strong>six</strong> guesses to get the word.</p>
     38 
     39 	<p>
     40 		Unlike the original Wordle, Sverdle runs on the server instead of in the browser, making it
     41 		impossible to cheat. It uses <code>&lt;form&gt;</code> and cookies to submit data, meaning you can
     42 		even play with JavaScript disabled!
     43 	</p>
     44 </div>
     45 
     46 <style>
     47 	span {
     48 		display: inline-flex;
     49 		justify-content: center;
     50 		align-items: center;
     51 		font-size: 0.8em;
     52 		width: 2.4em;
     53 		height: 2.4em;
     54 		background-color: white;
     55 		box-sizing: border-box;
     56 		border-radius: 2px;
     57 		border-width: 2px;
     58 		color: rgba(0, 0, 0, 0.7);
     59 	}
     60 
     61 	.missing {
     62 		background: rgba(255, 255, 255, 0.5);
     63 		color: rgba(0, 0, 0, 0.5);
     64 	}
     65 
     66 	.close {
     67 		border-style: solid;
     68 		border-color: var(--color-theme-2);
     69 	}
     70 
     71 	.exact {
     72 		background: var(--color-theme-2);
     73 		color: white;
     74 	}
     75 
     76 	.example {
     77 		display: flex;
     78 		justify-content: flex-start;
     79 		margin: 1rem 0;
     80 		gap: 0.2rem;
     81 	}
     82 
     83 	.example span {
     84 		font-size: 1.4rem;
     85 	}
     86 
     87 	p span {
     88 		position: relative;
     89 		border-width: 1px;
     90 		border-radius: 1px;
     91 		font-size: 0.4em;
     92 		transform: scale(2) translate(0, -10%);
     93 		margin: 0 1em;
     94 	}
     95 </style>