Kiyomi/test.html at main · HeapReaper/Kiyomi · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex justify-center items-center min-h-screen bg-gray-100 relative">

<!-- Certificaat -->
<div class="border-4 border-[#a62525] p-8 w-[900px] shadow-lg relative z-10 overflow-hidden">

  <!-- Vier achtergrondafbeeldingen -->
  <div class="absolute inset-0 pointer-events-none opacity-15">
    <img src="https://www.creativefabrica.com/wp-content/uploads/2022/03/20/Helicopter-Icon-Graphics-27535472-1.jpg" class="absolute top-20 left-20 w-48" alt="Helikopter">
    <img src="https://static.vecteezy.com/system/resources/thumbnails/008/019/120/small_2x/plane-icon-solid-illustration-pictogram-isolated-on-white-free-vector.jpg" class="absolute top-10 right-10 w-48" alt="Dubbeldekker">
    <img src="https://cdn.dribbble.com/userupload/21381054/file/original-b650593434e61c81b7d91c8ecb07f435.jpg?resize=752x&vertical=center" class="absolute bottom-20 left-20 w-48" alt="Drone">
    <img src="https://cdn.pixabay.com/photo/2017/10/05/09/42/glider-2818823_1280.jpg" class="absolute bottom-20 right-20 w-40" alt="Zwever">
  </div>

  <!-- Logo links -->
  <div class="absolute top-8 left-8 px-8 z-10">
    <div class="w-24 h-24 flex items-center justify-center">
      <img src="https://nbg1.your-objectstorage.com/trmc-wp-frehle7832cxd/4589cdmw82/2024/07/TRMC_LOGO.png"/>
    </div>
  </div>

  <!-- Titel -->
  <div class="text-center mb-6 relative z-10">
    <h1 class="text-2xl font-bold text-[#a62525] uppercase">Twentse Radio Modelvliegtuig Club</h1>
    <h2 class="text-3xl text-[#a62525] italic font-serif">Brevet</h2>
  </div>

  <!-- Naam & Datum -->
  <div class="text-center mb-8 relative z-10">
    <p class="text-xl font-bold text-[#a62525]">
      <span class=" h-8 w-10 border-b border-[#a62525]">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="text-black font-normal text-[#a62525]">op
        <span class="h-8 w-10 border-b border-[#a62525]"">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </span>
    </p>
  </div>

  <!-- Tekst -->
  <p class="text-sm leading-relaxed text-center px-6 mb-8 relative z-10">
    Dit brevet dient als officieel bewijs dat de houder met succes heeft voldaan aan alle vereisten voor het verkrijgen van het Modelvliegbrevet.<br>
    Hiermee wordt bevestigd dat de houder beschikt over de kennis, vaardigheden en verantwoordelijkheidszin om op een veilige en verantwoorde wijze modelvliegtuigen te besturen.<br>
    Uitgereikt door TRMC op <span class="h-8 w-10 border-b border-[#a62525]">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </p>

  <!-- Brevetten lijst -->
  <div class="flex justify-center gap-6 mb-8 relative z-10">
    <label class="flex items-center gap-2">
      <input type="checkbox" class="w-4 h-4 border-gray-400 custom-checkbox">
      <span class="text-sm">Vliegtuig</span>
    </label>

    <label class="flex items-center gap-2">
      <input type="checkbox" class="w-4 h-4 border-gray-400 custom-checkbox">
      <span class="text-sm">Motorzweefvliegtuig</span>
    </label>

   <label class="flex items-center gap-2">
      <input type="checkbox" class="w-4 h-4 border-gray-400 custom-checkbox">
      <span class="text-sm">Zweefvliegtuig</span>
    </label>

    <label class="flex items-center gap-2">
      <input type="checkbox" class="w-4 h-4 border-gray-400 custom-checkbox">
      <span class="text-sm">Helikopter</span>
    </label>

    <label class="flex items-center gap-2">
      <input type="checkbox" class="w-4 h-4 border-gray-400 custom-checkbox">
      <span class="text-sm">Multicopter</span>
    </label>
  </div>

  <!-- Handtekeningen -->
  <div class="flex justify-between mt-10 px-8 relative z-10">
    <div class="text-center">
      <div class="h-8 w-20 border-b border-[#a62525] mb-1"></div>
      <p class="text-xs">Voorzitter</p>
    </div>
    <div class="text-center">
      <div class="h-8 w-20 border-b border-[#a62525] mb-1"></div>
      <p class="text-xs">Secretaris</p>
    </div>
  </div>

</div>
</body>
<style>
  .custom-checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid #a62525;
    appearance: none;
    border-radius: 3px;
    cursor: pointer;
  }

  .custom-checkbox:checked {
    background-color: #a62525;
    border-color: #a62525;
  }
</style>
</html>