Spaces:
Running
Running
audit this website and let me know if we can make some optimizations to the mobile view
Browse files- index.html +90 -10
index.html
CHANGED
|
@@ -2,8 +2,8 @@
|
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
|
| 7 |
<meta name="description" content="Advanced MTG card database with similarity search and market prices">
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
@@ -91,10 +91,24 @@
|
|
| 91 |
|
| 92 |
/* Disable complex animations on mobile */
|
| 93 |
@media (max-width: 768px) {
|
| 94 |
-
.orb {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 95 |
}
|
| 96 |
-
|
| 97 |
-
.container {
|
| 98 |
position: relative;
|
| 99 |
z-index: 20;
|
| 100 |
}
|
|
@@ -659,27 +673,93 @@
|
|
| 659 |
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
| 660 |
gap: 1.5rem;
|
| 661 |
}
|
| 662 |
-
|
| 663 |
@media (max-width: 768px) {
|
| 664 |
.gallery-grid {
|
| 665 |
grid-template-columns: repeat(2, 1fr);
|
| 666 |
-
gap:
|
| 667 |
}
|
| 668 |
|
| 669 |
.gallery-header {
|
| 670 |
flex-direction: column;
|
| 671 |
align-items: flex-start;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 672 |
}
|
| 673 |
}
|
| 674 |
|
| 675 |
@media (max-width: 480px) {
|
| 676 |
.gallery-grid {
|
| 677 |
grid-template-columns: 1fr;
|
| 678 |
-
gap:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 679 |
}
|
| 680 |
}
|
| 681 |
-
|
| 682 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 683 |
position: relative;
|
| 684 |
border-radius: 12px;
|
| 685 |
overflow: hidden;
|
|
|
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
| 6 |
+
<title>Deck Doctor</title>
|
| 7 |
<meta name="description" content="Advanced MTG card database with similarity search and market prices">
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
| 91 |
|
| 92 |
/* Disable complex animations on mobile */
|
| 93 |
@media (max-width: 768px) {
|
| 94 |
+
.orb {
|
| 95 |
+
animation: none;
|
| 96 |
+
opacity: 0.1;
|
| 97 |
+
filter: blur(40px);
|
| 98 |
+
width: 60vw;
|
| 99 |
+
height: 60vw;
|
| 100 |
+
}
|
| 101 |
+
|
| 102 |
+
.background-overlay {
|
| 103 |
+
backdrop-filter: blur(3px);
|
| 104 |
+
-webkit-backdrop-filter: blur(3px);
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
body::before {
|
| 108 |
+
filter: blur(10px) brightness(0.4);
|
| 109 |
+
}
|
| 110 |
}
|
| 111 |
+
.container {
|
|
|
|
| 112 |
position: relative;
|
| 113 |
z-index: 20;
|
| 114 |
}
|
|
|
|
| 673 |
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
| 674 |
gap: 1.5rem;
|
| 675 |
}
|
|
|
|
| 676 |
@media (max-width: 768px) {
|
| 677 |
.gallery-grid {
|
| 678 |
grid-template-columns: repeat(2, 1fr);
|
| 679 |
+
gap: 0.75rem;
|
| 680 |
}
|
| 681 |
|
| 682 |
.gallery-header {
|
| 683 |
flex-direction: column;
|
| 684 |
align-items: flex-start;
|
| 685 |
+
margin-bottom: 1rem;
|
| 686 |
+
}
|
| 687 |
+
|
| 688 |
+
.card-3d-container {
|
| 689 |
+
max-width: 100%;
|
| 690 |
+
}
|
| 691 |
+
|
| 692 |
+
.search-container {
|
| 693 |
+
width: 100%;
|
| 694 |
+
padding: 0 1rem;
|
| 695 |
+
}
|
| 696 |
+
|
| 697 |
+
.header-text {
|
| 698 |
+
font-size: 2.5rem;
|
| 699 |
+
margin-bottom: 1rem;
|
| 700 |
+
}
|
| 701 |
+
|
| 702 |
+
.glass-button {
|
| 703 |
+
padding: 10px 16px;
|
| 704 |
+
font-size: 0.85rem;
|
| 705 |
+
}
|
| 706 |
+
|
| 707 |
+
.responsive-grid {
|
| 708 |
+
gap: 1rem;
|
| 709 |
}
|
| 710 |
}
|
| 711 |
|
| 712 |
@media (max-width: 480px) {
|
| 713 |
.gallery-grid {
|
| 714 |
grid-template-columns: 1fr;
|
| 715 |
+
gap: 0.75rem;
|
| 716 |
+
}
|
| 717 |
+
|
| 718 |
+
body {
|
| 719 |
+
padding: 1rem;
|
| 720 |
+
}
|
| 721 |
+
|
| 722 |
+
.container {
|
| 723 |
+
padding: 0.5rem;
|
| 724 |
+
}
|
| 725 |
+
|
| 726 |
+
.header-text {
|
| 727 |
+
font-size: 2rem;
|
| 728 |
+
}
|
| 729 |
+
|
| 730 |
+
.search-input {
|
| 731 |
+
padding: 12px 16px 12px 40px;
|
| 732 |
+
font-size: 14px;
|
| 733 |
+
}
|
| 734 |
+
|
| 735 |
+
.search-icon {
|
| 736 |
+
left: 12px;
|
| 737 |
+
}
|
| 738 |
+
|
| 739 |
+
.price-section {
|
| 740 |
+
padding: 0.75rem;
|
| 741 |
+
}
|
| 742 |
+
|
| 743 |
+
.stat-box {
|
| 744 |
+
padding: 0.75rem;
|
| 745 |
}
|
| 746 |
}
|
| 747 |
+
|
| 748 |
+
@media (max-width: 360px) {
|
| 749 |
+
.header-text {
|
| 750 |
+
font-size: 1.8rem;
|
| 751 |
+
}
|
| 752 |
+
|
| 753 |
+
.glass-button {
|
| 754 |
+
padding: 8px 12px;
|
| 755 |
+
font-size: 0.8rem;
|
| 756 |
+
}
|
| 757 |
+
|
| 758 |
+
.search-input {
|
| 759 |
+
padding: 10px 14px 10px 36px;
|
| 760 |
+
}
|
| 761 |
+
}
|
| 762 |
+
.gallery-item {
|
| 763 |
position: relative;
|
| 764 |
border-radius: 12px;
|
| 765 |
overflow: hidden;
|