tennis-legue/info_tournament.html at main · RiccardoMaistri/tennis-legue · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
    <link
      rel="stylesheet"
      as="style"
      onload="this.rel='stylesheet'"
      href="https://fonts.googleapis.com/css2?display=swap&amp;family=Inter%3Awght%40400%3B500%3B700%3B900&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900"
    />

    <title>Stitch Design</title>
    <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />

    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  </head>
  <body>
    <div
      class="relative flex size-full min-h-screen flex-col bg-[#101a23] dark justify-between group/design-root overflow-x-hidden"
      style='font-family: Inter, "Noto Sans", sans-serif;'
    >
      <div>
        <div class="flex items-center bg-[#101a23] p-4 pb-2 justify-between">
          <div class="text-white flex size-12 shrink-0 items-center" data-icon="ArrowLeft" data-size="24px" data-weight="regular">
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
              <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
            </svg>
          </div>
          <h2 class="text-white text-lg font-bold leading-tight tracking-[-0.015em] flex-1 text-center pr-12">Tournament Name</h2>
        </div>
        <div class="pb-3">
          <div class="flex border-b border-[#314d68] px-4 gap-8">
            <a class="flex flex-col items-center justify-center border-b-[3px] border-b-[#0c7ff2] text-white pb-[13px] pt-4" href="#">
              <p class="text-white text-sm font-bold leading-normal tracking-[0.015em]">Participants</p>
            </a>
            <a class="flex flex-col items-center justify-center border-b-[3px] border-b-transparent text-[#90adcb] pb-[13px] pt-4" href="#">
              <p class="text-[#90adcb] text-sm font-bold leading-normal tracking-[0.015em]">Bracket</p>
            </a>
            <a class="flex flex-col items-center justify-center border-b-[3px] border-b-transparent text-[#90adcb] pb-[13px] pt-4" href="#">
              <p class="text-[#90adcb] text-sm font-bold leading-normal tracking-[0.015em]">Rules</p>
            </a>
            <a class="flex flex-col items-center justify-center border-b-[3px] border-b-transparent text-[#90adcb] pb-[13px] pt-4" href="#">
              <p class="text-[#90adcb] text-sm font-bold leading-normal tracking-[0.015em]">Results</p>
            </a>
          </div>
        </div>
        <div class="flex gap-3 p-3 flex-wrap pr-4">
          <div class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-full bg-[#223649] pl-4 pr-4">
            <p class="text-white text-sm font-medium leading-normal">All</p>
          </div>
          <div class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-full bg-[#223649] pl-4 pr-4">
            <p class="text-white text-sm font-medium leading-normal">Group A</p>
          </div>
          <div class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-full bg-[#223649] pl-4 pr-4">
            <p class="text-white text-sm font-medium leading-normal">Group B</p>
          </div>
          <div class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-full bg-[#223649] pl-4 pr-4">
            <p class="text-white text-sm font-medium leading-normal">Group C</p>
          </div>
          <div class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-full bg-[#223649] pl-4 pr-4">
            <p class="text-white text-sm font-medium leading-normal">Group D</p>
          </div>
        </div>
        <div class="flex items-center gap-4 bg-[#101a23] px-4 min-h-[72px] py-2">
          <div
            class="bg-center bg-no-repeat aspect-square bg-cover rounded-full h-14 w-fit"
            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDQBW17yXQIHdXNRVR1EGoy6u9esXIWSuhq6ExUTM5v5XtAPKGohehZM_AEFYese1ElEk1Sq8yzMKKaahzHfKFa1UmoWKxa22L31C-ydoJIRuJg9FHExoPmnzz8DraOp2zquqI2thZrVNO633cYCCzsewOVPKvN64sF9oPDQbkml35QiEPcglu0_ZwjzhcGkJ8RC8FJGqLtj63WRcIzGMSzm_Av3ChzoTOe3QucgzWRhcFuVbxsGAX4W11oBY6qb3L_GIRgXAGTJXEC");'
          ></div>
          <div class="flex flex-col justify-center">
            <p class="text-white text-base font-medium leading-normal line-clamp-1">Ethan Carter</p>
            <p class="text-[#90adcb] text-sm font-normal leading-normal line-clamp-2">Group A</p>
          </div>
        </div>
        <div class="flex items-center gap-4 bg-[#101a23] px-4 min-h-[72px] py-2">
          <div
            class="bg-center bg-no-repeat aspect-square bg-cover rounded-full h-14 w-fit"
            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAGWc_yW8AoQ7YtGcAL9S1sjwOV9RHq6hK54gkieQtOKak6YvBjEif3sLmyurkwCnXiaVnZNFe1o0SWLv7Ab3IBD0M9Srl1slfjoY9qIB52ZC4bksY_pnoQWy-BynIKIvAPE75sZjrDSFMtLHc3B5VuxJR3tcFObPlvJ0Gu5So8WJZuberHGwT6GUp7kMrEcQ8RMqox1Tq_hgXyxVbTKQz1m42NrxMoHtpi4Whe3i5SOTvQP_jR5pSaM1aN_ZN2os4yw2c-7qxA0i-j");'
          ></div>
          <div class="flex flex-col justify-center">
            <p class="text-white text-base font-medium leading-normal line-clamp-1">Olivia Bennett</p>
            <p class="text-[#90adcb] text-sm font-normal leading-normal line-clamp-2">Group B</p>
          </div>
        </div>
        <div class="flex items-center gap-4 bg-[#101a23] px-4 min-h-[72px] py-2">
          <div
            class="bg-center bg-no-repeat aspect-square bg-cover rounded-full h-14 w-fit"
            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCHdlcNEU2Wcv4Z0HXDPUTzCdZgRyzbMPu0qlGwgONtthQyAaFfkwoY0S88tLWL-di3nHxgGHk6rXenAdPwKxwKT41O94MMemiN5L0w5-SJQjzKnlpwegrRsBiCw0ecqUTl9gN8pGTeMIFWTTIAzpdDewzRFHwlhW9xWX5Kxu-9R3-mWa3cc-i9KmchrB32RQd-gDhvhXETybq1j1UJv8m0K7LghDRV6HeFzeG3k7Ic6dyZgNlHQ2_ipcJPx74WUzB49lT6UAYH94jh");'
          ></div>
          <div class="flex flex-col justify-center">
            <p class="text-white text-base font-medium leading-normal line-clamp-1">Noah Thompson</p>
            <p class="text-[#90adcb] text-sm font-normal leading-normal line-clamp-2">Group C</p>
          </div>
        </div>
        <div class="flex items-center gap-4 bg-[#101a23] px-4 min-h-[72px] py-2">
          <div
            class="bg-center bg-no-repeat aspect-square bg-cover rounded-full h-14 w-fit"
            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAzKHWwej3zbztA5C60ygCS3JGG91Mt7MhBZcpMLDAJY3wpa-NEWtRRsAVOgi0wS52MkEEC2b3HRASxjko6p7krYWgwMfFg-QylCPjKuCxAmuS2cuDRlipAMbSGjcD2zI7v0lQM-qhISUzjey1gcIOlL22hg6lzD2oKJUzbNzFGpKLhQAnzm3gZ-Z8v0M12O-WSEI2Fbp-bpjssnoP_PzKz-sF6hy05VIn3VaWGVnuEX_e2Ez0JoYYUXovPvjzPrDTHvGSFs3VlS768");'
          ></div>
          <div class="flex flex-col justify-center">
            <p class="text-white text-base font-medium leading-normal line-clamp-1">Sophia Ramirez</p>
            <p class="text-[#90adcb] text-sm font-normal leading-normal line-clamp-2">Group D</p>
          </div>
        </div>
        <div class="flex items-center gap-4 bg-[#101a23] px-4 min-h-[72px] py-2">
          <div
            class="bg-center bg-no-repeat aspect-square bg-cover rounded-full h-14 w-fit"
            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAn0J0rfCTn1RogHBdTo7ZOc27YfU7ysr0zd21z4altHi8w0mbyhdC0ysEi-rsLuKUP1bI5tdj_UGI3D4Yk2BtfcZpXooVRflgxTqnxxvWagbQq19M8k0uWK5h3jy_-ck2PEit-rp4bFH-di1RWVZpblwPuP2iaKihiyFPqT_YWlDL8o4FfI-N5I_60ww-BbF_s4wrvTrfRT1iIVFNTw-3QcVZ71oOzZ7g68fBamDk38Sv3MatdjDXo7At1nDTTAgFHs0tYAXkLJKX-");'
          ></div>
          <div class="flex flex-col justify-center">
            <p class="text-white text-base font-medium leading-normal line-clamp-1">Liam Walker</p>
            <p class="text-[#90adcb] text-sm font-normal leading-normal line-clamp-2">Group A</p>
          </div>
        </div>
      </div>
      <div>
        <div class="flex justify-end overflow-hidden px-5 pb-5">
          <button
            class="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-14 bg-[#0c7ff2] text-white text-base font-bold leading-normal tracking-[0.015em] min-w-0 px-2 gap-4 pl-4 pr-6"
          >
            <div class="text-white" data-icon="Plus" data-size="24px" data-weight="regular">
              <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
                <path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path>
              </svg>
            </div>
          </button>
        </div>
        <div class="h-5 bg-[#101a23]"></div>
      </div>
    </div>
  </body>
</html>