https://inlang.com/assets/tiles-B0qMYsqe.js

1const t=`<!doctype html>
2<html>
3	<head>
4		<title>Language Selector</title>
5		<style>
6			.tile-container {
7				display: flex;
8				flex-wrap: wrap;
9				justify-content: flex-start;
10				align-items: center;
11			}
12
13			.tile {
14				display: flex;
15				align-items: center;
16				margin: 5px;
17				padding: 10px;
18				border-radius: 5px;
19				border: 1px solid #e5e5e5;
20				cursor: pointer;
21				font-size: 14px;
22				font-weight: bold;
23				color: #333333;
24				background-color: #ffffff;
25				transition: background-color 0.2s ease-in-out;
26			}
27
28			.tile:hover:not(.selected) {
29				background-color: #f5f5f5;
30			}
31
32			.tile .selected {
33				background-color: #007aff;
34				color: #ffffff;
35				border-color: #007aff;
36			}
37
38			.flag-icon {
39				height: 20px;
40				width: 20px;
41				display: block;
42				margin-right: 10px;
43				border-radius: 50%;
44				overflow: hidden;
45			}
46
47			.flag-icon img {
48				height: 100%;
49				width: 100%;
50				object-fit: cover;
51			}
52		</style>
53	</head>
54	<body>
55		<div class="container">
56			<div class="tile selected">
57				<span class="flag-icon"><img src="flags/us.svg" alt="US flag" /></span>
58				English
59			</div>
60			<div class="tile">
61				<span class="flag-icon"><img src="flags/de.svg" alt="German flag" /></span>
62				German
63			</div>
64			<div class="tile">
65				<span class="flag-icon"><img src="flags/fr.svg" alt="French flag" /></span>
66				French
67			</div>
68			<div class="tile">
69				<span class="flag-icon"><img src="flags/es.svg" alt="Spanish flag" /></span>
70				Spanish
71			</div>
72			<div class="tile">
73				<span class="flag-icon"><img src="flags/it.svg" alt="Italian flag" /></span>
74				Italian
75			</div>
76			<!-- Add more languages and flags as needed -->
77		</div>
78
79		<script>
80			// Add event listeners to the language tiles to toggle the selected class
81			var languageTiles = document.querySelectorAll(".tile");
82			for (var i = 0; i < languageTiles.length; i++) {
83				languageTiles[i].addEventListener("click", function () {
84					this.classList.toggle("selected");
85				});
86			}
87		<\/script>
88	</body>
89</html>
90`;export{t as default};