| | | 1 | | @layout MUNity.BlazorServer.Shared.MobileGameLayout |
| | | 2 | | @page "/game/mobile/{GameId}" |
| | | 3 | | |
| | | 4 | | <div class="app-top-menu top-menu-sm" style="display: block !important;"> |
| | | 5 | | <!-- BEGIN menu --> |
| | | 6 | | <div class="menu game-menu-center"> |
| | | 7 | | |
| | | 8 | | <div class="menu-item game-item-center"> |
| | | 9 | | <a href="javascript:;" class="menu-link"> |
| | | 10 | | <div class="menu-icon"> |
| | | 11 | | <i class="oi oi-home"></i> |
| | | 12 | | </div> |
| | | 13 | | <div class="menu-text">Anmeldung <span class="menu-label">jetzt offen</span></div> |
| | | 14 | | </a> |
| | | 15 | | </div> |
| | | 16 | | |
| | | 17 | | |
| | | 18 | | <!-- Start and Stop scroll Buttons --> |
| | | 19 | | <div class="menu-item menu-control menu-control-start show" style="display: block !important;"> |
| | | 20 | | <a class="menu-link" ><i class="fa fa-angle-left"></i></a> |
| | | 21 | | </div> |
| | | 22 | | <div class="menu-item menu-control menu-control-end show" style="display: block !important;"> |
| | | 23 | | <a class="menu-link" ><i class="fa fa-angle-right"></i></a> |
| | | 24 | | </div> |
| | | 25 | | </div> |
| | | 26 | | <!-- END menu --> |
| | | 27 | | </div> |
| | | 28 | | |
| | | 29 | | <div class="row mt-3"> |
| | | 30 | | <div class="col-12"> |
| | | 31 | | <div class="card border-0 mb-3 bg-gray-900 text-white"> |
| | | 32 | | <!-- BEGIN card-body --> |
| | | 33 | | <div class="card-body p-0"> |
| | | 34 | | <!-- BEGIN title --> |
| | | 35 | | <div class="mb-3 text-gray-300"> |
| | | 36 | | <b>Abgeordnete</b> |
| | | 37 | | </div> |
| | | 38 | | <!-- END title --> |
| | | 39 | | <!-- BEGIN product --> |
| | | 40 | | <div class="d-flex align-items-center mb-15px border-1 border-dark bg-dark-900 pt-1 pb-1" style="height: |
| | | 41 | | <div class="widget-img w-60px"> |
| | | 42 | | <div class="h-100 w-100" style="background: url(/img/flags/small/de.png) center no-repeat; backg |
| | | 43 | | </div> |
| | | 44 | | <div class="text-truncate" style="margin-left: 10px;"> |
| | | 45 | | <div>Landname</div> |
| | | 46 | | <div class="text-gray-300">Anzeigename</div> |
| | | 47 | | </div> |
| | | 48 | | <div class="ms-auto mb-0" style="margin-bottom: 0px; margin-top: auto;"> |
| | | 49 | | @*<div class="fs-13px"><span data-animation="number" data-value="195">195</span></div>*@ |
| | | 50 | | <div class="row" style="margin-right: 10px; margin-bottom: 0px; margin-top: auto;"> |
| | | 51 | | <div class="col"> |
| | | 52 | | <div class="text-white"><i class="fa fa-volume-up"></i></div> |
| | | 53 | | </div> |
| | | 54 | | |
| | | 55 | | <div class="col"> |
| | | 56 | | <div class="text-gray-600"><i class="oi oi-bell"></i></div> |
| | | 57 | | </div> |
| | | 58 | | |
| | | 59 | | <div class="col"> |
| | | 60 | | <div class="text-gray-600"><i class="oi oi-flag"></i></div> |
| | | 61 | | </div> |
| | | 62 | | </div> |
| | | 63 | | |
| | | 64 | | </div> |
| | | 65 | | </div> |
| | | 66 | | |
| | | 67 | | <div class="block block-1"> |
| | | 68 | | <div class="ribbon">Ribbon Nr.1</div> |
| | | 69 | | <div class="d-flex align-items-center mb-15px border-1 border-dark bg-dark-900 pt-1 pb-1" style="hei |
| | | 70 | | <div class="widget-img w-60px"> |
| | | 71 | | <div class="h-100 w-100" style="background: url(/img/flags/small/de.png) center no-repeat; b |
| | | 72 | | </div> |
| | | 73 | | <div class="text-truncate" style="margin-left: 10px;"> |
| | | 74 | | <div>Landname</div> |
| | | 75 | | <div class="text-gray-300">Anzeigename</div> |
| | | 76 | | </div> |
| | | 77 | | <div class="ms-auto mb-0" style="margin-bottom: 0px; margin-top: auto;"> |
| | | 78 | | @*<div class="fs-13px"><span data-animation="number" data-value="195">195</span></div>*@ |
| | | 79 | | <div class="row" style="margin-right: 10px; margin-bottom: 0px; margin-top: auto;"> |
| | | 80 | | <div class="col"> |
| | | 81 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 82 | | </div> |
| | | 83 | | |
| | | 84 | | <div class="col"> |
| | | 85 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 86 | | </div> |
| | | 87 | | |
| | | 88 | | <div class="col"> |
| | | 89 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 90 | | </div> |
| | | 91 | | </div> |
| | | 92 | | |
| | | 93 | | </div> |
| | | 94 | | </div> |
| | | 95 | | </div> |
| | | 96 | | |
| | | 97 | | |
| | | 98 | | <div class="block block-2"> |
| | | 99 | | <div class="ribbon"><span>Ribbon Nr.2</span></div> |
| | | 100 | | |
| | | 101 | | <div class="d-flex align-items-center mb-15px border-1 border-dark bg-dark-900 pt-1 pb-1" style="hei |
| | | 102 | | <div class="widget-img w-60px"> |
| | | 103 | | <div class="h-100 w-100" style="background: url(/img/flags/small/de.png) center no-repeat; b |
| | | 104 | | </div> |
| | | 105 | | <div class="text-truncate" style="margin-left: 10px;"> |
| | | 106 | | <div>Landname</div> |
| | | 107 | | <div class="text-gray-300">Anzeigename</div> |
| | | 108 | | </div> |
| | | 109 | | <div class="ms-auto mb-0" style="margin-bottom: 0px; margin-top: auto;"> |
| | | 110 | | @*<div class="fs-13px"><span data-animation="number" data-value="195">195</span></div>*@ |
| | | 111 | | <div class="row" style="margin-right: 10px; margin-bottom: 0px; margin-top: auto;"> |
| | | 112 | | <div class="col"> |
| | | 113 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 114 | | </div> |
| | | 115 | | |
| | | 116 | | <div class="col"> |
| | | 117 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 118 | | </div> |
| | | 119 | | |
| | | 120 | | <div class="col"> |
| | | 121 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 122 | | </div> |
| | | 123 | | </div> |
| | | 124 | | |
| | | 125 | | </div> |
| | | 126 | | </div> |
| | | 127 | | |
| | | 128 | | </div> |
| | | 129 | | <div class="block block-3"> |
| | | 130 | | <div class="ribbon">Ribbon Nr.3</div> |
| | | 131 | | |
| | | 132 | | <div class="d-flex align-items-center mb-15px border-1 border-dark bg-dark-900 pt-1 pb-1" style="hei |
| | | 133 | | <div class="widget-img w-60px"> |
| | | 134 | | <div class="h-100 w-100" style="background: url(/img/flags/small/de.png) center no-repeat; b |
| | | 135 | | </div> |
| | | 136 | | <div class="text-truncate" style="margin-left: 10px;"> |
| | | 137 | | <div>Landname</div> |
| | | 138 | | <div class="text-gray-300">Anzeigename</div> |
| | | 139 | | </div> |
| | | 140 | | <div class="ms-auto mb-0" style="margin-bottom: 0px; margin-top: auto;"> |
| | | 141 | | @*<div class="fs-13px"><span data-animation="number" data-value="195">195</span></div>*@ |
| | | 142 | | <div class="row" style="margin-right: 10px; margin-bottom: 0px; margin-top: auto;"> |
| | | 143 | | <div class="col"> |
| | | 144 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 145 | | </div> |
| | | 146 | | |
| | | 147 | | <div class="col"> |
| | | 148 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 149 | | </div> |
| | | 150 | | |
| | | 151 | | <div class="col"> |
| | | 152 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 153 | | </div> |
| | | 154 | | </div> |
| | | 155 | | |
| | | 156 | | </div> |
| | | 157 | | </div> |
| | | 158 | | |
| | | 159 | | </div> |
| | | 160 | | <div class="block block-2"> |
| | | 161 | | <div class="ribbon"><span class="icon">#</span></div> |
| | | 162 | | <div class="ribbon"><span>Ribbon Nr.2</span></div> |
| | | 163 | | |
| | | 164 | | <div class="d-flex align-items-center mb-15px border-1 border-dark bg-dark-900 pt-1 pb-1" style="hei |
| | | 165 | | <div class="widget-img w-60px"> |
| | | 166 | | <div class="h-100 w-100" style="background: url(/img/flags/small/de.png) center no-repeat; b |
| | | 167 | | </div> |
| | | 168 | | <div class="text-truncate" style="margin-left: 10px;"> |
| | | 169 | | <div>Landname</div> |
| | | 170 | | <div class="text-gray-300">Anzeigename</div> |
| | | 171 | | </div> |
| | | 172 | | <div class="ms-auto mb-0" style="margin-bottom: 0px; margin-top: auto;"> |
| | | 173 | | @*<div class="fs-13px"><span data-animation="number" data-value="195">195</span></div>*@ |
| | | 174 | | <div class="row" style="margin-right: 10px; margin-bottom: 0px; margin-top: auto;"> |
| | | 175 | | <div class="col"> |
| | | 176 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 177 | | </div> |
| | | 178 | | |
| | | 179 | | <div class="col"> |
| | | 180 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 181 | | </div> |
| | | 182 | | |
| | | 183 | | <div class="col"> |
| | | 184 | | <div class="text-gray-300"><i class="oi oi-home"></i></div> |
| | | 185 | | </div> |
| | | 186 | | </div> |
| | | 187 | | |
| | | 188 | | </div> |
| | | 189 | | </div> |
| | | 190 | | |
| | | 191 | | </div> |
| | | 192 | | |
| | | 193 | | </div> |
| | | 194 | | <!-- END card-body --> |
| | | 195 | | </div> |
| | | 196 | | </div> |
| | | 197 | | </div> |
| | | 198 | | |
| | | 199 | | <style> |
| | | 200 | | @@media (min-width: 768px) { |
| | | 201 | | .top-menu-sm { |
| | | 202 | | margin-top: -60px; |
| | | 203 | | } |
| | | 204 | | } |
| | | 205 | | |
| | | 206 | | @@media (max-width: 767px) { |
| | | 207 | | .game-menu-center { |
| | | 208 | | padding: 0; |
| | | 209 | | margin: auto !important; |
| | | 210 | | } |
| | | 211 | | |
| | | 212 | | |
| | | 213 | | } |
| | | 214 | | .game-item-center { |
| | | 215 | | position: absolute; |
| | | 216 | | display: block; |
| | | 217 | | margin-left: auto; |
| | | 218 | | margin-right: auto; |
| | | 219 | | left: auto; |
| | | 220 | | right: auto; |
| | | 221 | | width: 60% |
| | | 222 | | } |
| | | 223 | | |
| | | 224 | | |
| | | 225 | | .block { |
| | | 226 | | height: 75px; |
| | | 227 | | background-color: lightgray; |
| | | 228 | | position: relative; |
| | | 229 | | margin: 0 0 10px; |
| | | 230 | | } |
| | | 231 | | |
| | | 232 | | /* Ribbon style 1 */ |
| | | 233 | | .block-1 { |
| | | 234 | | border: 3px solid #c7111a; |
| | | 235 | | background: #ffffff; |
| | | 236 | | -webkit-box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 237 | | -moz-box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 238 | | box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 239 | | } |
| | | 240 | | |
| | | 241 | | .block-1 .ribbon { |
| | | 242 | | background-color: #EA141F; |
| | | 243 | | top: -12px; |
| | | 244 | | left: 40px; |
| | | 245 | | display: inline-block; |
| | | 246 | | |
| | | 247 | | text-align: center; |
| | | 248 | | line-height: 24px; |
| | | 249 | | color: #fff; |
| | | 250 | | font-size: 0.688rem; |
| | | 251 | | position: absolute; |
| | | 252 | | padding: 0 10px; |
| | | 253 | | font-weight: 600; |
| | | 254 | | -webkit-box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 255 | | -moz-box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 256 | | box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 257 | | z-index: 11; |
| | | 258 | | } |
| | | 259 | | |
| | | 260 | | .block-1 .ribbon::after { |
| | | 261 | | content: ""; |
| | | 262 | | position: absolute; |
| | | 263 | | left: -12px; |
| | | 264 | | width: 0; |
| | | 265 | | height: 0; |
| | | 266 | | border-style: solid; |
| | | 267 | | border-width: 0 0 12px 12px; |
| | | 268 | | border-color: transparent transparent #c7111a transparent; |
| | | 269 | | z-index: 10; |
| | | 270 | | } |
| | | 271 | | |
| | | 272 | | /* Ribbon style 2 */ |
| | | 273 | | .block-2 { |
| | | 274 | | border: 3px solid #c7111a; |
| | | 275 | | background: #ffffff; |
| | | 276 | | -webkit-box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 277 | | -moz-box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 278 | | box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 279 | | } |
| | | 280 | | |
| | | 281 | | .block-2 .ribbon { |
| | | 282 | | height: 75px; |
| | | 283 | | left: -5px; |
| | | 284 | | overflow: hidden; |
| | | 285 | | position: absolute; |
| | | 286 | | text-align: right; |
| | | 287 | | top: -5px; |
| | | 288 | | width: 75px; |
| | | 289 | | z-index: 1; |
| | | 290 | | } |
| | | 291 | | |
| | | 292 | | .block-2 .ribbon span { |
| | | 293 | | background-color: #EA141F; |
| | | 294 | | box-shadow: 0 3px 10px -5px #000; |
| | | 295 | | color: #fff; |
| | | 296 | | display: block; |
| | | 297 | | font-weight: 600; |
| | | 298 | | left: -21px; |
| | | 299 | | line-height: 20px; |
| | | 300 | | position: absolute; |
| | | 301 | | top: 19px; |
| | | 302 | | -webkit-transform: rotate(-45deg); |
| | | 303 | | transform: rotate(-45deg); |
| | | 304 | | width: 100px; |
| | | 305 | | text-align: center; |
| | | 306 | | font-size: 0.688rem; |
| | | 307 | | } |
| | | 308 | | |
| | | 309 | | .block-2 .ribbon span.icon { |
| | | 310 | | background-color: #EA141F; |
| | | 311 | | box-shadow: 0 3px 10px -5px #000; |
| | | 312 | | color: #fff; |
| | | 313 | | display: block; |
| | | 314 | | font-weight: 600; |
| | | 315 | | left: -19px; |
| | | 316 | | line-height: 28px; |
| | | 317 | | position: absolute; |
| | | 318 | | top: -4px; |
| | | 319 | | -webkit-transform: rotate(-45deg); |
| | | 320 | | transform: rotate(-45deg); |
| | | 321 | | width: 56px; |
| | | 322 | | text-align: center; |
| | | 323 | | font-size: 0.688rem; |
| | | 324 | | } |
| | | 325 | | |
| | | 326 | | .block-2 .ribbon span::after, |
| | | 327 | | .block-2 .ribbon span::before { |
| | | 328 | | border-bottom: 3px solid transparent; |
| | | 329 | | border-top: 3px solid #c7111a; |
| | | 330 | | content: " "; |
| | | 331 | | position: absolute; |
| | | 332 | | top: 100%; |
| | | 333 | | z-index: -1; |
| | | 334 | | } |
| | | 335 | | |
| | | 336 | | .block-2 .ribbon span::before { |
| | | 337 | | border-left: 3px solid #c7111a; |
| | | 338 | | border-top: 3px solid #c7111a; |
| | | 339 | | left: 0; |
| | | 340 | | } |
| | | 341 | | |
| | | 342 | | .block-2 .ribbon span::after { |
| | | 343 | | border-right: 3px solid #c7111a; |
| | | 344 | | border-top: 3px solid #c7111a; |
| | | 345 | | right: 0; |
| | | 346 | | } |
| | | 347 | | |
| | | 348 | | /* Ribbon style 2 */ |
| | | 349 | | .block-3 { |
| | | 350 | | border: 3px solid #c7111a; |
| | | 351 | | background: #ffffff; |
| | | 352 | | -webkit-box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 353 | | -moz-box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 354 | | box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15); |
| | | 355 | | } |
| | | 356 | | |
| | | 357 | | .block-3 .ribbon { |
| | | 358 | | left: -6px; |
| | | 359 | | top: -6px; |
| | | 360 | | padding: 5px 10px; |
| | | 361 | | font-size: 0.688rem; |
| | | 362 | | font-weight: 600; |
| | | 363 | | padding-right: 30px; |
| | | 364 | | letter-spacing: 0.1px; |
| | | 365 | | color: hsla(0,0%,100%,.87); |
| | | 366 | | background: linear-gradient(-66deg,transparent,transparent 19%,#EA141F 0%,#EA141F); |
| | | 367 | | position: absolute; |
| | | 368 | | } |
| | | 369 | | |
| | | 370 | | .block-3 .ribbon::before { |
| | | 371 | | border: 3px solid transparent; |
| | | 372 | | content: " "; |
| | | 373 | | position: absolute; |
| | | 374 | | top: 100%; |
| | | 375 | | z-index: 10; |
| | | 376 | | border-right: 3px solid #c7111a; |
| | | 377 | | border-top: 3px solid #c7111a; |
| | | 378 | | left: 0; |
| | | 379 | | } |
| | | 380 | | |
| | | 381 | | </style> |
| | | 382 | | |
| | | 383 | | @code { |
| | 0 | 384 | | [Parameter] public string GameId { get; set; } |
| | | 385 | | |
| | | 386 | | } |
| | | 387 | | |