Beispiel:WAI-ARIA-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Fantasy Football - Live Ticker</title>
<style>
body {
  display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1em;
	max-width: 55em;
	background: var(--blue);
}		
body > * {
	border: thin solid; 
	border-radius: 0 .5rem .5rem;
	padding: .5em;
	background: var(--sand);
}
main {
		grid-row: 2 / 4;
}

h1 {
  grid-column: 1 / -1;
}

#match {text-align: center;}

.event {
  display: grid;
	grid-template-columns: 1fr repeat(3,3em) 1fr;
}
.event >* {
  border: thin solid pink;
	text-align: center;
}
.event span:first-child {
	text-align: end;
}
.event span:last-child {
	text-align: start;
}
.event span:nth-of-type(3) {
	font-weight: bold;
}
		
			label, button {
				display: block;
				margin: 2em;
			}
			input {
				width: 3.5em;
			}

aside {
	background: var(--red);
	color: var(--sand);
}

aside h2 {
	color: var(--gold);
}

footer {
	grid-column: 1 / -1;
	background: transparent;
	border:none;
}
footer p,footer a {
	color: var(--gold);
	text-align: right;
}
			
:root {
	--sand: oklch(80% 0.07 100); 
	--gold: gold;
	--red: oklch(40% 0.12 30);  
	--lightred: oklch(75% 0.12 30);  	 
	--blue: oklch(40% 0.0572 240);
	--lightblue: oklch(75% 0.0572 240);	
}			
		</style>
		<script>
{
  "teams": {
    "Red Roosters": {
      "players": [
        "Player 1",
        "Player 2",
        "Player 3",
        "Player 4",
        "Player 5",
        "Player 6",
        "Player 7",
        "Walter Frosch",
        "Player 9",
        "Player 10",
        "Player 11"
      ],
      "points": 0
    },
    "Backend Birds": {
      "players": [
        "Paul PHP",
        "Player 2",
        "Player 3",
        "Player 4",
        "Player 5",
        "Player 6",
        "Player 7",
        "Player 8",
        "Player 9",
        "Player 10",
        "Player 11"
      ],
      "points": 0
    },
    "Golden Gunners": {
      "players": [
        "Player 1",
        "Player 2",
        "Player 3",
        "Player 4",
        "Player 5",
        "Player 6",
        "Player 7",
        "Player 8",
        "Player 9",
        "Player 10",
        "Player 11"
      ],
      "points": 0
    },
    "Black Scorpions": {
      "players": [
        "Dahlia Bloodcauldron",
        "Erendil Subris",
        "Jared Heartseeker",
        "Kelron Farstrider",
        "Eldrin Yundrin",
        "Arwen Moosleitner",
        "Harkon Septus",
        "Gandalf Gans",
        "Imrahil von Dol Amroth",
        "Rabid Runner",
        "Sleek Surfer"
      ],
      "points": 0
    }
  },
  "matches": [
    {
      "match": "Red Roosters vs Blue Birds",
      "date": "2024-11-01",
      "result": null
    },
    {
      "match": "Red Roosters vs Golden Gunners",
      "date": "2024-11-08",
      "result": null
    },
    {
      "match": "Red Roosters vs Black Scorpions",
      "date": "2024-11-15",
      "result": null
    },
    {
      "match": "Blue Birds vs Golden Gunners",
      "date": "2024-11-02",
      "result": null
    },
    {
      "match": "Blue Birds vs Black Scorpions",
      "date": "2024-11-09",
      "result": null
    },
    {
      "match": "Golden Gunners vs Black Scorpions",
      "date": "2024-11-16",
      "result": null
    }
  ],
  "ranking": [
    {
      "team": "Red Roosters",
      "points": 0
    },
    {
      "team": "Blue Birds",
      "points": 0
    },
    {
      "team": "Golden Gunners",
      "points": 0
    },
    {
      "team": "Black Scorpions",
      "points": 0
    }
  ]
}

		</script>
	</head>
	<body>
		<h1>Fantasy Football - Alles auf einen Blick!</h1>

<main id="ticker">
	<h2>Live Ticker </h2>
  <p id="match">Red Roosters vs. Black Scorpions</p>
<div id="ticker-grid" role="log" aria-live="polite" aria-atomic="true">  
	<p class="event"><span>Villa ⇅ Frosch</span><span class="time">12'</span><span class="result"></span><span class="time"></span><span class="player"></span></p>
  <p class="event"><span></span><span class="time"></span><span class="result">1:1</span><span class="time">8'</span><span class="player">Jose Joo</span></p>
  <p class="event"><span>⚽ Walter Frosch</span><span class="time">4'</span><span class="result">1:0</span><span class="time"></span><span class="player"></span></p>
	<p class="event"><span></span><span class="time">0'</span><span class="result">Anpfiff</span><span class="time"></span><span class="player"></span></p>
</div>
</main>

<aside>
	<h2>Tabelle</h2>
  <table id="ranking" aria-live="polite" aria-relevant="additions text">
  	<tr>
    	<th>Platz</th>
      <th>Team</th>
      <th>Spiele</th>
      <th>Tore</th>
      <th>Punkte</th>
    </tr>
    <tr>
    	<td>1. </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>  
    <tr>
    	<td>2. </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
    	<td>3. </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
    	<td>4. </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>  
  </table>                    
</aside>
<aside id="timetable">
	<h2>Spielplan</h2>
  <ol>
  	<li>
    <li>
    <li>
  </ol>  
</aside>

<footer>
<p>Nach einem Vorschlag von <a href="https://github.com/SELFHTML/Fertige-Layouts/tree/master/SteelJoker">SteelJoker, 2013</a></p>
</footer>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:WAI-ARIA-1.html&oldid=99644“