james123231 commited on
Commit
dd98894
·
verified ·
1 Parent(s): 6a60119

Manual changes saved

Browse files
Files changed (1) hide show
  1. index.html +339 -30
index.html CHANGED
@@ -1,3 +1,4 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
@@ -1145,32 +1146,76 @@
1145
  color: #e5e7eb;
1146
  }
1147
 
1148
- /* Responsive */
1149
- @media (max-width: 900px) {
 
 
 
1150
  .hero {
1151
- grid-template-columns: minmax(0,1fr);
1152
- padding-bottom: 32px;
1153
  }
1154
- .hero-right {
1155
- order: -1;
 
 
 
 
 
 
 
1156
  }
1157
  .hero-card-body {
1158
- grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
1159
  }
1160
- .features-grid {
1161
- grid-template-columns: repeat(2, minmax(0,1fr));
 
 
 
 
1162
  }
1163
- .steps-grid {
1164
  grid-template-columns: repeat(2, minmax(0,1fr));
 
1165
  }
1166
  .cta-strip {
1167
- grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
 
1168
  }
1169
- .mid-page-ad {
1170
- grid-template-columns: minmax(0,1.4fr) minmax(0,1.1fr);
 
 
 
1171
  }
1172
  }
1173
- @media (max-width: 720px) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1174
  .nav-links {
1175
  display: none;
1176
  }
@@ -1183,47 +1228,310 @@
1183
  .mobile-nav.open {
1184
  display: block;
1185
  }
1186
- .hero-card-body {
 
 
 
 
 
 
 
1187
  grid-template-columns: minmax(0,1fr);
1188
- min-height: 0;
 
1189
  }
1190
- .hero-output {
1191
- border-left: none;
1192
- border-top: 1px solid rgba(15,23,42,0.9);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1193
  }
1194
  .hero-prompt {
 
1195
  border-right: none;
 
 
1196
  }
1197
- .hero-ad-banner {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1198
  flex-direction: column;
1199
  align-items: flex-start;
 
1200
  }
1201
- .mid-page-ad {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1202
  grid-template-columns: minmax(0,1fr);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1203
  }
1204
- .steps-grid, .features-grid {
1205
  grid-template-columns: minmax(0,1fr);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1206
  }
1207
  .cta-strip {
 
1208
  grid-template-columns: minmax(0,1fr);
1209
- text-align: left;
 
 
1210
  }
1211
  .cta-actions {
1212
- justify-content: flex-start;
1213
  }
1214
  .cta-note {
1215
- text-align: left;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1216
  }
1217
  }
 
1218
  @media (max-width: 480px) {
 
 
 
1219
  .hero-heading {
1220
- font-size: 30px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1221
  }
1222
  .hero-card {
1223
- padding: 12px;
1224
  }
1225
- .feature-card, .step-card {
1226
- padding: 12px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1227
  }
1228
  }
1229
  </style>
@@ -1913,4 +2221,5 @@ ${slice}`;
1913
  </script>
1914
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
1915
  </body>
1916
- </html>
 
 
1
+ ```html
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
 
1146
  color: #e5e7eb;
1147
  }
1148
 
1149
+ /* Enhanced Responsive Styles */
1150
+ @media (max-width: 1024px) {
1151
+ .container {
1152
+ padding: 0 12px;
1153
+ }
1154
  .hero {
1155
+ gap: 32px;
 
1156
  }
1157
+ .hero-heading {
1158
+ font-size: clamp(28px, 5vw, 40px);
1159
+ }
1160
+ .hero-subtitle {
1161
+ font-size: 14px;
1162
+ max-width: 100%;
1163
+ }
1164
+ .hero-card {
1165
+ padding: 14px;
1166
  }
1167
  .hero-card-body {
1168
+ min-height: 200px;
1169
  }
1170
+ .section-title {
1171
+ font-size: 18px;
1172
+ }
1173
+ .section-subtitle {
1174
+ font-size: 13px;
1175
+ max-width: 100%;
1176
  }
1177
+ .features-grid, .steps-grid {
1178
  grid-template-columns: repeat(2, minmax(0,1fr));
1179
+ gap: 16px;
1180
  }
1181
  .cta-strip {
1182
+ grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
1183
+ padding: 12px;
1184
  }
1185
+ .cta-primary-text {
1186
+ font-size: 15px;
1187
+ }
1188
+ .cta-secondary-text {
1189
+ font-size: 12px;
1190
  }
1191
  }
1192
+
1193
+ @media (max-width: 768px) {
1194
+ :root {
1195
+ --nav-height: 60px;
1196
+ --radius-xl: 20px;
1197
+ }
1198
+ .container {
1199
+ padding: 0 8px;
1200
+ }
1201
+ nav {
1202
+ height: var(--nav-height);
1203
+ }
1204
+ .logo-mark {
1205
+ width: 28px;
1206
+ height: 28px;
1207
+ }
1208
+ .logo-mark-inner {
1209
+ width: 20px;
1210
+ height: 20px;
1211
+ font-size: 12px;
1212
+ }
1213
+ .logo-title {
1214
+ font-size: 14px;
1215
+ }
1216
+ .logo-subtitle {
1217
+ font-size: 10px;
1218
+ }
1219
  .nav-links {
1220
  display: none;
1221
  }
 
1228
  .mobile-nav.open {
1229
  display: block;
1230
  }
1231
+ .mobile-nav a {
1232
+ font-size: 13px;
1233
+ padding: 6px 4px;
1234
+ }
1235
+ main {
1236
+ padding: 16px 0 48px;
1237
+ }
1238
+ .hero {
1239
  grid-template-columns: minmax(0,1fr);
1240
+ padding: 8px 0 48px;
1241
+ gap: 24px;
1242
  }
1243
+ .hero-right {
1244
+ order: -1;
1245
+ }
1246
+ .hero-left {
1247
+ gap: 16px;
1248
+ }
1249
+ .hero-heading {
1250
+ font-size: clamp(26px, 8vw, 36px);
1251
+ line-height: 1.1;
1252
+ }
1253
+ .hero-subtitle {
1254
+ font-size: 13px;
1255
+ }
1256
+ .hero-cta-row {
1257
+ gap: 12px;
1258
+ }
1259
+ .btn-primary, .btn-secondary {
1260
+ padding: 8px 16px;
1261
+ font-size: 12px;
1262
+ }
1263
+ .hero-meta {
1264
+ gap: 16px;
1265
+ }
1266
+ .hero-meta-count {
1267
+ font-size: 12px;
1268
+ }
1269
+ .hero-meta-count span.num {
1270
+ font-size: 16px;
1271
+ }
1272
+ .hero-meta-badges {
1273
+ gap: 8px;
1274
+ font-size: 10px;
1275
+ }
1276
+ .hero-ad-banner {
1277
+ flex-direction: column;
1278
+ align-items: flex-start;
1279
+ padding: 8px 10px;
1280
+ gap: 8px;
1281
+ }
1282
+ .hero-ad-text strong {
1283
+ font-size: 11px;
1284
+ }
1285
+ .hero-ad-text span {
1286
+ font-size: 10px;
1287
+ }
1288
+ .hero-card {
1289
+ padding: 12px;
1290
+ border-radius: 20px;
1291
+ }
1292
+ .hero-card-inner {
1293
+ border-radius: 16px;
1294
+ }
1295
+ .hero-card-header {
1296
+ padding: 6px 8px 6px 10px;
1297
+ }
1298
+ .window-dot {
1299
+ width: 7px;
1300
+ height: 7px;
1301
+ }
1302
+ .hero-card-title {
1303
+ font-size: 11px;
1304
+ }
1305
+ .hero-card-tabs {
1306
+ gap: 4px;
1307
+ padding: 6px 8px;
1308
+ }
1309
+ .hero-tab {
1310
+ font-size: 10px;
1311
+ padding: 3px 8px;
1312
+ }
1313
+ .hero-card-body {
1314
+ grid-template-columns: minmax(0,1fr);
1315
+ min-height: auto;
1316
  }
1317
  .hero-prompt {
1318
+ padding: 8px 10px;
1319
  border-right: none;
1320
+ border-bottom: 1px solid rgba(15,23,42,0.9);
1321
+ gap: 8px;
1322
  }
1323
+ .prompt-label {
1324
+ font-size: 10px;
1325
+ }
1326
+ .prompt-textarea {
1327
+ font-size: 11px;
1328
+ padding: 8px 9px 28px;
1329
+ min-height: 70px;
1330
+ }
1331
+ .prompt-footer {
1332
+ bottom: 5px;
1333
+ font-size: 10px;
1334
+ }
1335
+ .kbd {
1336
+ padding: 1px 4px;
1337
+ font-size: 9px;
1338
+ }
1339
+ .hero-run-row {
1340
  flex-direction: column;
1341
  align-items: flex-start;
1342
+ gap: 8px;
1343
  }
1344
+ .run-button {
1345
+ width: 100%;
1346
+ justify-content: center;
1347
+ padding: 7px 12px;
1348
+ font-size: 11px;
1349
+ }
1350
+ .hero-output {
1351
+ padding: 8px 10px;
1352
+ border-left: none;
1353
+ }
1354
+ .output-header {
1355
+ font-size: 10px;
1356
+ }
1357
+ .output-console {
1358
+ padding: 6px;
1359
+ font-size: 10px;
1360
+ }
1361
+ .output-stats {
1362
+ font-size: 9px;
1363
+ }
1364
+ .sidebar-ad {
1365
+ padding: 6px 8px;
1366
+ font-size: 9px;
1367
+ }
1368
+ .sidebar-ad-title strong {
1369
+ font-size: 10px;
1370
+ }
1371
+ .sidebar-ad-cta {
1372
+ padding: 2px 6px;
1373
+ font-size: 9px;
1374
+ }
1375
+ .section {
1376
+ padding: 16px 0;
1377
+ }
1378
+ .section-header {
1379
+ gap: 4px;
1380
+ margin-bottom: 16px;
1381
+ }
1382
+ .section-kicker {
1383
+ font-size: 10px;
1384
+ }
1385
+ .section-title {
1386
+ font-size: 16px;
1387
+ }
1388
+ .section-subtitle {
1389
+ font-size: 12px;
1390
+ }
1391
+ .features-grid, .steps-grid {
1392
  grid-template-columns: minmax(0,1fr);
1393
+ gap: 14px;
1394
+ }
1395
+ .feature-card, .step-card {
1396
+ padding: 12px;
1397
+ border-radius: 16px;
1398
+ }
1399
+ .feature-icon, .step-index {
1400
+ width: 24px;
1401
+ height: 24px;
1402
+ font-size: 12px;
1403
+ }
1404
+ .feature-title, .step-title {
1405
+ font-size: 13px;
1406
+ }
1407
+ .feature-desc, .step-desc {
1408
+ font-size: 11px;
1409
+ }
1410
+ .feature-meta, .step-note {
1411
+ font-size: 10px;
1412
  }
1413
+ .mid-page-ad {
1414
  grid-template-columns: minmax(0,1fr);
1415
+ padding: 12px 14px;
1416
+ gap: 12px;
1417
+ }
1418
+ .mid-ad-title {
1419
+ font-size: 13px;
1420
+ }
1421
+ .mid-ad-copy {
1422
+ font-size: 11px;
1423
+ max-width: 100%;
1424
+ }
1425
+ .mid-ad-logos {
1426
+ gap: 8px;
1427
+ }
1428
+ .mid-ad-logo-pill {
1429
+ padding: 3px 8px;
1430
+ font-size: 9px;
1431
+ }
1432
+ .mid-ad-save {
1433
+ font-size: 10px;
1434
+ }
1435
+ .mid-ad-button {
1436
+ padding: 5px 10px;
1437
+ font-size: 10px;
1438
  }
1439
  .cta-strip {
1440
+ margin-top: 24px;
1441
  grid-template-columns: minmax(0,1fr);
1442
+ padding: 12px;
1443
+ gap: 12px;
1444
+ text-align: center;
1445
  }
1446
  .cta-actions {
1447
+ justify-content: center;
1448
  }
1449
  .cta-note {
1450
+ text-align: center;
1451
+ max-width: 100%;
1452
+ }
1453
+ footer {
1454
+ padding: 14px 0 24px;
1455
+ font-size: 10px;
1456
+ }
1457
+ .footer-inner {
1458
+ gap: 10px;
1459
+ }
1460
+ .footer-links {
1461
+ gap: 12px;
1462
+ }
1463
+ .footer-links a {
1464
+ font-size: 10px;
1465
  }
1466
  }
1467
+
1468
  @media (max-width: 480px) {
1469
+ .container {
1470
+ padding: 0 4px;
1471
+ }
1472
  .hero-heading {
1473
+ font-size: clamp(24px, 10vw, 32px);
1474
+ }
1475
+ .hero-subtitle {
1476
+ font-size: 12px;
1477
+ }
1478
+ .btn-primary, .btn-secondary {
1479
+ width: 100%;
1480
+ justify-content: center;
1481
+ }
1482
+ .hero-cta-row {
1483
+ flex-direction: column;
1484
+ }
1485
+ .hero-meta {
1486
+ flex-direction: column;
1487
+ align-items: flex-start;
1488
+ gap: 12px;
1489
  }
1490
  .hero-card {
1491
+ padding: 10px;
1492
  }
1493
+ .prompt-textarea {
1494
+ min-height: 60px;
1495
+ font-size: 10px;
1496
+ }
1497
+ .output-console {
1498
+ font-size: 9px;
1499
+ }
1500
+ .section-title {
1501
+ font-size: 15px;
1502
+ }
1503
+ .cta-primary-text {
1504
+ font-size: 14px;
1505
+ }
1506
+ .cta-secondary-text {
1507
+ font-size: 11px;
1508
+ }
1509
+ }
1510
+
1511
+ @media (max-width: 320px) {
1512
+ .pill {
1513
+ font-size: 10px;
1514
+ padding: 3px 10px;
1515
+ gap: 6px;
1516
+ }
1517
+ .pill-dot {
1518
+ width: 8px;
1519
+ height: 8px;
1520
+ }
1521
+ .badge-free {
1522
+ font-size: 9px;
1523
+ padding: 2px 6px;
1524
+ }
1525
+ .hero-heading {
1526
+ font-size: 24px;
1527
+ }
1528
+ .hero-card-tabs {
1529
+ flex-wrap: wrap;
1530
+ justify-content: center;
1531
+ }
1532
+ .hero-tab {
1533
+ font-size: 9px;
1534
+ padding: 3px 6px;
1535
  }
1536
  }
1537
  </style>
 
2221
  </script>
2222
  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
2223
  </body>
2224
+ </html>
2225
+ ```