<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Archiv webů ČSOS</title>
    <style>
        @font-face {
            font-family: 'GT Planar';
            src: url('GT-Planar-Regular.woff2') format('woff2');
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #edece3;
            font-family: GT Planar;
        }
        .card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 600px;
        }
        h1, h2 {
            margin-bottom: 15px;
            color: #fe5900;
        }
        p {
            margin-bottom: 10px;
        }
		table {
			width: 100%;
			border-collapse: collapse;
		}

		th, td {
			border: 1px solid black;
			padding: 8px;
			text-align: left;
		}

		th {
			font-weight: bold;
		}

		tr:nth-child(even) {
			background-color: #f2f2f2; /* Light gray for alternating rows */
		}

		tr:hover {
			background-color: #ddd; /* Slight highlight on hover */
		}
		.help-icon {
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.2em;
			height: 1.2em;
			border-radius: 50%;
			border: 1px solid #555;
			font-weight: bold;
			font-family: sans-serif;
			user-select: none;
		}

		dialog {
			padding: 1em 1.5em;
			border: none;
			border-radius: 6px;
		}

		dialog::backdrop {
			background: rgba(0, 0, 0, 0.4);
		}

    </style>
</head>
<body>
    <div class="card">
        <h1>Archiv starých webů ČSOS</h1>

        <p>
            Vítejte v archivu starých svazových webů.<br><br>
			Nový svazový web naleznete na adrese <a href="https://ceskyorientak.cz/">ceskyorientak.cz</a>.<br><br>
			Máte odkaz na starý web a chcete vědět, kam směřuje? Vložte jej níže a budete přesměrováni na příslušný odkaz do archivu.
        </p>
        
        <form onsubmit="event.preventDefault(); rewriteAndOpen();">
            <input type="text" id="urlInput">
            <button type="submit">Otevřít</button>
        </form>

        <br>

		<h2>Archivované weby</h2>

        <table>
			<thead>
				<tr>
					<th>Datum archivace</th>
					<th>Název webu</th>
					<th>Původní url</th>
				</tr>
			</thead>
            <tbody>
                <tr>
                    <td>10. 6. 2025</td>
                    <td>Trail-O</td>
                    <td><a href="https://trailo.archiv.ceskyorientak.cz">www.trailo.cz</a></td>
                </tr>
                <tr>
                    <td>10. 6. 2025</td>
                    <td>LOB</td>
                    <td><a href="https://ski-o.archiv.ceskyorientak.cz">www.ski-o.cz</a></td>
                </tr>
                <tr>
                    <td>10. 6. 2025</td>
                    <td>OB</td>
                    <td><a href="https://orientacnibeh.archiv.ceskyorientak.cz">www.orientacnibeh.cz</a></td>
                </tr>
                <tr>
                    <td>10. 6. 2025</td>
                    <td>ČSOS</td>
                    <td><a href="https://orientacnisporty.archiv.ceskyorientak.cz">www.orientacnisporty.cz</a></td>
                </tr>
				<tr>
					<td>11. 6. 2025</td>
					<td>Čistoles</td>
                    <td><a href="https://cistoles.archiv.ceskyorientak.cz">cistoles.cz</a></td>
				</tr>
				<tr>
					<td>27. 6. 2025</td>
					<td>MTBO</td>
                    <td><a href="https://mtbo.archiv.ceskyorientak.cz">www.mtbo.cz</a></td>
				</tr>
				<tr>
					<td>5. 1. 2026&emsp;<span class="help-icon" data-dialog="help1">?</span></td>
					<td>repre</td>
                    <td><a href="https://reprezentace.archiv.ceskyorientak.cz">reprezentace.orientacnibeh.cz</a></td>
				</tr>
				<tr>
					<td>2. 2. 2026</td>
					<td>quickevent</td>
                    <td><a href="https://quickevent.archiv.ceskyorientak.cz">quickevent.eu</a></td>
				</tr>
				<tr>
					<td>26. 5. 2026</td>
					<td>MTBO Junioři</td>
                    <td><a href="https://junior-mtbo.archiv.ceskyorientak.cz">junior-mtbo.webnode.cz</a></td>
				</tr>
				<tr>
					<td>11. 6. 2026</td>
					<td>World Cup 2018</td>
                    <td><a href="https://wcup2018.archiv.ceskyorientak.cz">wcup2018.cz</a></td>
				</tr>
				<tr>
					<td>11. 6. 2026</td>
					<td>World Cup 2023</td>
                    <td><a href="https://wcup.archiv.ceskyorientak.cz/2023/en/home/index.html">wcup.cz</a></td>
				</tr>
            </tbody>
        </table>
    </div>
	
	<dialog id="help1">
	  <p>Jednotlivé novinky/akce/dokumenty, které se týkaly pouze některých týmů (dospělí/junioři/dorost) jsou agregovány do jednoho.</p>
	  <button data-close>Zavřít</button>
	</dialog>

    <script>
        function rewriteAndOpen() {
            var inputUrl = document.getElementById("urlInput").value;
            if (!inputUrl.startsWith("http://") && !inputUrl.startsWith("https://")) {
                inputUrl = "https://" + inputUrl;
            }
            if (!inputUrl.match(/\.\w+$/)) {
                inputUrl += ".html";
            }
            var rewrittenUrl = inputUrl.replace(".cz", ".archiv.ceskyorientak.cz").replace("www.", "");

            if (rewrittenUrl) {
                window.open(rewrittenUrl, "_blank");
            }
        }

  document.addEventListener('click', (event) => {
    const openTrigger = event.target.closest('[data-dialog]');
    if (openTrigger) {
      const dialogId = openTrigger.getAttribute('data-dialog');
      const dialog = document.getElementById(dialogId);
      if (dialog instanceof HTMLDialogElement) {
        dialog.showModal();
      }
      return;
    }

    const closeTrigger = event.target.closest('[data-close]');
    if (closeTrigger) {
      const dialog = closeTrigger.closest('dialog');
      if (dialog) {
        dialog.close();
      }
    }
  });
    </script>
</body>
</html>

