public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y folien feinschliff, input-date demo, tag-attribut demo update, synonyme

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-21 23:32:30 +02:00
parent 67857b9bfd
commit 80786cb040
6 changed files with 131 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
slides/223015c/assets/demos/input-date.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Input Date</title>
<style>
body { font-family: system-ui, -apple-system, sans-serif; padding: 1.4rem; margin: 0; background: #fff; }
label { display: block; font-size: 0.95rem; color: #374151; margin-bottom: 8px; font-weight: 600; }
input[type=date] {
font: 1.15rem system-ui, sans-serif;
padding: 10px 12px;
border: 1.5px solid #d1d5db;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.15);
border-color: #d63384;
margin-bottom: 16px;
}
.picker {
width: 320px;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
overflow: hidden;
font-size: 0.9rem;
}
.picker-head {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
border-bottom: 1px solid #e5e7eb;
font-weight: 600;
}
.picker-head button {
border: 0; background: transparent; font-size: 1rem; padding: 4px 8px; cursor: pointer; color: #6b7280;
}
.dow, .grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
padding: 6px 10px;
}
.dow { font-size: 0.75rem; color: #6b7280; font-weight: 600; text-align: center; padding-bottom: 2px; }
.grid { padding-top: 0; padding-bottom: 14px; }
.grid div {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border-radius: 50%; font-variant-numeric: tabular-nums;
}
.grid .muted { color: #d1d5db; }
.grid .today { background: #fce7f3; color: #d63384; font-weight: 700; }
.grid .sel { background: #d63384; color: #fff; font-weight: 700; }
.grid div:hover:not(.muted):not(.sel) { background: #f3f4f6; }
</style>
</head>
<body>
<label for="d">Geburtsdatum</label>
<input type="date" id="d" value="2026-04-21" />
<div class="picker" aria-hidden="true">
<div class="picker-head">
<button>‹</button>
<span>April 2026</span>
<button>›</button>
</div>
<div class="dow"><div>Mo</div><div>Di</div><div>Mi</div><div>Do</div><div>Fr</div><div>Sa</div><div>So</div></div>
<div class="grid">
<div class="muted">30</div><div class="muted">31</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
<div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div>
<div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div>
<div>20</div><div class="sel">21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div>
<div>27</div><div>28</div><div>29</div><div>30</div><div class="muted">1</div><div class="muted">2</div><div class="muted">3</div>
</div>
</div>
</body>
</html>