Hugging Face's logo

Spaces:
2026casino
/
undefined
Running

App Files Community
Aleksandr Sashka commited on
Commit
003a56a
·
verified ·
1 Parent(s): eee4551

сделай адаптацию по все размеры экранов

Browse files
Files changed (1) hide show
  1. index.html +65 -23
index.html CHANGED
@@ -26,15 +26,14 @@
26
  padding: 0 15px;
27
  width: 100%;
28
  box-sizing: border-box;
 
29
  }
30
-
31
- /* Mobile Responsive Styles */
32
  @media (max-width: 768px) {
33
  .site-wrapper {
34
- padding: 0 10px;
35
  }
36
-
37
- .bebas {
38
  font-size: 2.5rem !important;
39
  }
40
 
@@ -42,13 +41,16 @@
42
  margin: 0 auto;
43
  max-width: 100%;
44
  }
45
-
46
  /* Header adjustments */
47
  header {
48
- padding: 0 10px;
49
  }
50
 
51
- .hidden.md\\:flex {
 
 
 
 
52
  display: none;
53
  }
54
 
@@ -97,22 +99,46 @@
97
  }
98
 
99
  /* Table adjustments */
100
- .payment-table {
101
- font-size: 12px;
102
- }
103
-
104
- .payment-table th,
105
- .payment-table td {
106
- padding: 8px 4px;
107
- }
108
  }
109
 
 
 
 
 
 
 
110
  @media (max-width: 480px) {
111
  .bebas {
112
  font-size: 2rem !important;
113
  }
114
 
115
- .bonuses-grid {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  grid-template-columns: 1fr !important;
117
  }
118
 
@@ -278,8 +304,8 @@
278
  }
279
  </style>
280
  </head>
281
- <body class="text-white bg-black" style="width: 1100px; margin: 0 auto;">
282
- <div class="site-wrapper w-full" style="width: 1100px;">
283
  <!-- Header -->
284
  <header class="fixed top-0 z-50 bg-black backdrop-blur-md border-b-2 border-yellow-500 shadow-lg w-full">
285
  <nav class="w-full px-4 py-3 max-w-1200 mx-auto">
@@ -910,12 +936,28 @@ feather.replace();
910
  mobileMenu.classList.remove('active');
911
  });
912
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
913
 
914
- // Update background to cover full viewport
915
- document.body.style.minHeight = '100vh';
916
- document.querySelector('.site-wrapper').style.minHeight = '100vh';
917
 
918
- // Responsive table handling
 
 
919
  const paymentTable = document.querySelector('.card-gradient table');
920
  if (paymentTable && window.innerWidth < 768) {
921
  paymentTable.classList.add('payment-table');
 
26
  padding: 0 15px;
27
  width: 100%;
28
  box-sizing: border-box;
29
+ overflow-x: hidden;
30
  }
31
+ /* Mobile Responsive Styles */
 
32
  @media (max-width: 768px) {
33
  .site-wrapper {
34
+ padding: 0 12px;
35
  }
36
+ .bebas {
 
37
  font-size: 2.5rem !important;
38
  }
39
 
 
41
  margin: 0 auto;
42
  max-width: 100%;
43
  }
 
44
  /* Header adjustments */
45
  header {
46
+ padding: 0 15px;
47
  }
48
 
49
+ /* Body fixes */
50
+ body {
51
+ overflow-x: hidden;
52
+ }
53
+ .hidden.md\\:flex {
54
  display: none;
55
  }
56
 
 
99
  }
100
 
101
  /* Table adjustments */
102
+ .responsive-table {
103
+ font-size: 12px;
104
+ width: 100%;
105
+ display: block;
106
+ overflow-x: auto;
107
+ white-space: nowrap;
 
 
108
  }
109
 
110
+ .responsive-table th,
111
+ .responsive-table td {
112
+ padding: 8px 12px;
113
+ min-width: 100px;
114
+ }
115
+ }
116
  @media (max-width: 480px) {
117
  .bebas {
118
  font-size: 2rem !important;
119
  }
120
 
121
+ /* Smaller padding for mobile */
122
+ .site-wrapper {
123
+ padding: 0 8px;
124
+ }
125
+
126
+ /* Adjust card padding */
127
+ .card-gradient {
128
+ padding: 1rem !important;
129
+ }
130
+
131
+ /* Smaller buttons */
132
+ .btn-gold {
133
+ padding: 10px 20px;
134
+ font-size: 14px;
135
+ }
136
+
137
+ /* Adjust hero section spacing */
138
+ .hero-grid {
139
+ padding-top: 1rem !important;
140
+ }
141
+ .bonuses-grid {
142
  grid-template-columns: 1fr !important;
143
  }
144
 
 
304
  }
305
  </style>
306
  </head>
307
+ <body class="text-white bg-black">
308
+ <div class="site-wrapper w-full max-w-[1200px] mx-auto px-4">
309
  <!-- Header -->
310
  <header class="fixed top-0 z-50 bg-black backdrop-blur-md border-b-2 border-yellow-500 shadow-lg w-full">
311
  <nav class="w-full px-4 py-3 max-w-1200 mx-auto">
 
936
  mobileMenu.classList.remove('active');
937
  });
938
  });
939
+ // Responsive viewport handling
940
+ function handleViewport() {
941
+ document.body.style.minHeight = '100vh';
942
+ document.querySelector('.site-wrapper').style.minHeight = 'calc(100vh - 70px)'; // Account for header
943
+
944
+ // Adjust table display on small screens
945
+ const paymentTable = document.querySelector('.card-gradient table');
946
+ if (paymentTable) {
947
+ if (window.innerWidth < 768) {
948
+ paymentTable.classList.add('responsive-table');
949
+ } else {
950
+ paymentTable.classList.remove('responsive-table');
951
+ }
952
+ }
953
+ }
954
 
955
+ // Initial call
956
+ handleViewport();
 
957
 
958
+ // Update on resize
959
+ window.addEventListener('resize', handleViewport);
960
+ // Responsive table handling
961
  const paymentTable = document.querySelector('.card-gradient table');
962
  if (paymentTable && window.innerWidth < 768) {
963
  paymentTable.classList.add('payment-table');