@jjlmoya/utils-textiles 1.9.0 → 1.12.0

package/src/tool/clothingSizeConverter/component.astro

@@ -505,722 +505,3 @@ const brands = [
   startInit();
 </script>
 
-<style>
-  .clothing-converter {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 1rem 1rem 4rem;
-  }
-
-  .converter-card {
-    background: var(--bg-surface);
-    border: 1px solid var(--border-color);
-    border-radius: 2.5rem;
-    padding: 2.5rem;
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
-    display: flex;
-    flex-direction: column;
-    gap: 2.5rem;
-  }
-
-  .theme-dark .converter-card {
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
-  }
-
-  .selector-section {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  .selector-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .selector-label {
-    font-size: 0.75rem;
-    font-weight: 800;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-  }
-
-  .btn-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    gap: 0.75rem;
-  }
-
-  .cat-btn,
-  .gender-btn {
-    padding: 0.875rem;
-    border-radius: 1rem;
-    border: 2px solid transparent;
-    background: var(--bg-page);
-    cursor: pointer;
-    transition: all 0.3s;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    color: var(--text-muted);
-    font-weight: 600;
-    font-size: 0.875rem;
-  }
-
-  .cat-btn svg,
-  .gender-btn svg {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .cat-btn.active,
-  .gender-btn.active {
-    background: #3b82f6;
-    border-color: #1e40af;
-    color: white;
-    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
-    transform: translateY(-2px);
-  }
-
-  .cat-btn:hover,
-  .gender-btn:hover {
-    border-color: #3b82f6;
-  }
-
-  .tabs {
-    display: flex;
-    gap: 0.5rem;
-    border-bottom: 2px solid var(--border-color);
-  }
-
-  .tab-btn {
-    padding: 0.875rem 1.5rem;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    color: var(--text-muted);
-    font-weight: 600;
-    border-bottom: 3px solid transparent;
-    margin-bottom: -2px;
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    transition: color 0.2s;
-  }
-
-  .tab-btn svg {
-    width: 1.1rem;
-    height: 1.1rem;
-  }
-
-  .tab-btn.active {
-    color: #3b82f6;
-    border-bottom-color: #3b82f6;
-  }
-
-  .tab-content {
-    display: none;
-  }
-
-  .tab-content.active {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    animation: tab-fade-in 0.3s ease;
-  }
-
-  @keyframes tab-fade-in {
-    from {
-      opacity: 0;
-      transform: translateY(8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .control-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
-  }
-
-  .field-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .field-label {
-    font-size: 0.75rem;
-    font-weight: 800;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-  }
-
-  .select-wrap {
-    position: relative;
-  }
-
-  .select-wrap::after {
-    content: '▾';
-    position: absolute;
-    right: 1.25rem;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    color: var(--text-muted);
-  }
-
-  .region-select,
-  .size-select {
-    appearance: none;
-    width: 100%;
-    background: var(--bg-page);
-    border: 1.5px solid var(--border-color);
-    border-radius: 1rem;
-    padding: 0.875rem 2.75rem 0.875rem 1.25rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text-main);
-    outline: none;
-    cursor: pointer;
-    transition: border-color 0.2s;
-  }
-
-  .region-select:focus,
-  .size-select:focus {
-    border-color: #3b82f6;
-  }
-
-  .results-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
-  }
-
-  .result-card {
-    background: var(--bg-page);
-    border: 1px solid var(--border-color);
-    border-radius: 1.25rem;
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    transition: all 0.3s;
-  }
-
-  .result-card:hover {
-    transform: translateY(-2px);
-    border-color: #3b82f6;
-  }
-
-  .result-label {
-    font-size: 0.7rem;
-    font-weight: 800;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .result-value {
-    font-size: 2.5rem;
-    font-weight: 900;
-    color: #3b82f6;
-    line-height: 1;
-  }
-
-  .quick-grid-section {
-    border-top: 1px solid var(--border-color);
-    padding-top: 1.5rem;
-  }
-
-  .section-title {
-    font-size: 0.75rem;
-    font-weight: 800;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin: 0 0 1rem;
-  }
-
-  .size-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
-    gap: 0.75rem;
-  }
-
-  :global(.size-cell) {
-    aspect-ratio: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.75rem;
-    background: var(--bg-surface);
-    border: 1.5px solid var(--border-color);
-    font-size: 0.875rem;
-    font-weight: 700;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
-  :global(.size-cell:hover) {
-    border-color: #3b82f6;
-    color: #3b82f6;
-    transform: scale(1.05);
-  }
-
-  :global(.size-cell.active) {
-    background: #3b82f6;
-    border-color: #1e40af;
-    color: white;
-    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.35);
-    transform: scale(1.05);
-  }
-
-  .measurements-layout {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-  }
-
-  .measurements-inputs {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-  }
-
-  .measurements-section-title {
-    font-size: 1.1rem;
-    font-weight: 800;
-    color: var(--text-main);
-    margin: 0;
-  }
-
-  .measure-field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .measure-label {
-    font-size: 0.75rem;
-    font-weight: 700;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .measure-input {
-    width: 100%;
-    background: var(--bg-page);
-    border: 1.5px solid var(--border-color);
-    border-radius: 1rem;
-    padding: 0.875rem 1.25rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--text-main);
-    outline: none;
-    transition: border-color 0.2s;
-  }
-
-  .measure-input:focus {
-    border-color: #3b82f6;
-  }
-
-  .btn-recommend {
-    padding: 1rem;
-    background: #10b981;
-    color: white;
-    border: none;
-    border-radius: 1rem;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.3s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.75rem;
-    font-size: 1rem;
-  }
-
-  .btn-recommend:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
-  }
-
-  .btn-recommend svg {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
-  .tips-card {
-    background: rgba(59, 130, 246, 0.05);
-    border: 1px solid rgba(59, 130, 246, 0.2);
-    border-radius: 1.25rem;
-    padding: 1.5rem;
-    color: #1e40af;
-  }
-
-  .theme-dark .tips-card {
-    background: rgba(59, 130, 246, 0.08);
-    color: #93c5fd;
-  }
-
-  .tips-title {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.9rem;
-    font-weight: 700;
-    margin: 0 0 1rem;
-  }
-
-  .tips-title svg {
-    width: 1.1rem;
-    height: 1.1rem;
-    flex-shrink: 0;
-  }
-
-  .tips-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 0.75rem;
-  }
-
-  .tip-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem;
-    background: rgba(59, 130, 246, 0.08);
-    border-radius: 0.75rem;
-    font-size: 0.8rem;
-    font-weight: 600;
-  }
-
-  .theme-dark .tip-item {
-    background: rgba(59, 130, 246, 0.12);
-  }
-
-  .tip-item svg {
-    width: 1rem;
-    height: 1rem;
-    flex-shrink: 0;
-    color: #3b82f6;
-  }
-
-  .recommendation-box {
-    display: none;
-    background: #ecfdf5;
-    border: 2px solid #10b981;
-    border-radius: 1.25rem;
-    padding: 1.5rem;
-    color: #047857;
-    animation: slide-down 0.3s ease;
-  }
-
-  .theme-dark .recommendation-box {
-    background: rgba(6, 78, 59, 0.3);
-    color: #6ee7b7;
-  }
-
-  @keyframes slide-down {
-    from {
-      opacity: 0;
-      transform: translateY(-8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .recommend-header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-  }
-
-  .recommend-header svg {
-    width: 1.5rem;
-    height: 1.5rem;
-    flex-shrink: 0;
-  }
-
-  .recommend-header h4 {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 700;
-  }
-
-  :global(.rec-size-label) {
-    display: block;
-    font-size: 1rem;
-    margin-bottom: 0.5rem;
-  }
-
-  :global(.rec-size) {
-    color: #10b981;
-    font-style: normal;
-    font-size: 1.2em;
-  }
-
-  :global(.rec-info) {
-    display: block;
-    font-size: 0.875rem;
-    opacity: 0.85;
-  }
-
-  :global(.rec-error) {
-    color: #dc2626;
-  }
-
-  :global(.recommend-details) {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.75rem;
-    margin-top: 1rem;
-    padding-top: 1rem;
-    border-top: 1px solid rgba(16, 185, 129, 0.3);
-  }
-
-  :global(.recommend-item) {
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  :global(.rec-label) {
-    font-size: 0.7rem;
-    text-transform: uppercase;
-    opacity: 0.7;
-  }
-
-  :global(.recommend-item strong) {
-    font-weight: 700;
-    color: #10b981;
-  }
-
-  .fit-guide {
-    border-top: 1px solid var(--border-color);
-    padding-top: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-  }
-
-  .fit-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-    gap: 1rem;
-  }
-
-  .fit-card {
-    background: var(--bg-page);
-    border: 2px solid var(--border-color);
-    border-radius: 1rem;
-    padding: 1.25rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    transition: all 0.3s;
-    color: inherit;
-    text-align: center;
-  }
-
-  .fit-card:hover {
-    border-color: #3b82f6;
-    background: rgba(59, 130, 246, 0.04);
-    transform: translateY(-2px);
-  }
-
-  .fit-card.active {
-    border-color: #0284c7;
-    background: rgba(2, 132, 199, 0.08);
-    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
-  }
-
-  .theme-dark .fit-card.active {
-    background: rgba(2, 132, 199, 0.12);
-  }
-
-  .fit-brand {
-    font-weight: 700;
-    color: var(--text-main);
-    font-size: 0.95rem;
-  }
-
-  .fit-size-label {
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    font-weight: 600;
-  }
-
-  .fit-notification {
-    display: none;
-    padding: 1.25rem;
-    background: rgba(3, 105, 161, 0.06);
-    border: 2px solid #0284c7;
-    border-radius: 1rem;
-    color: #0369a1;
-    font-size: 0.875rem;
-    line-height: 1.5;
-  }
-
-  .theme-dark .fit-notification {
-    background: rgba(3, 105, 161, 0.1);
-    color: #7dd3fc;
-  }
-
-  .fit-info {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.85rem;
-    color: var(--text-muted);
-    margin: 0;
-  }
-
-  .fit-info svg {
-    width: 1rem;
-    height: 1rem;
-    flex-shrink: 0;
-  }
-
-  .table-section {
-    border-top: 1px solid var(--border-color);
-    padding-top: 1.5rem;
-  }
-
-  .table-wrap {
-    overflow-x: auto;
-    border-radius: 1.25rem;
-    border: 1px solid var(--border-color);
-    margin-top: 1rem;
-  }
-
-  .conv-table {
-    width: 100%;
-    border-collapse: collapse;
-    background: var(--bg-surface);
-  }
-
-  .conv-table thead {
-    background: var(--bg-page);
-    border-bottom: 2px solid var(--border-color);
-  }
-
-  .conv-table th {
-    padding: 1rem 1.25rem;
-    text-align: left;
-    font-weight: 700;
-    color: var(--text-main);
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-
-  .conv-table td {
-    padding: 1rem 1.25rem;
-    border-bottom: 1px solid var(--border-color);
-    color: var(--text-muted);
-    font-weight: 500;
-  }
-
-  .conv-table tbody tr:hover td {
-    background: var(--bg-page);
-  }
-
-  :global(.eu-cell) {
-    font-weight: 700;
-    color: #3b82f6;
-  }
-
-  :global(.eu-cell.active) {
-    background: rgba(59, 130, 246, 0.1);
-  }
-
-  .info-banner {
-    display: flex;
-    align-items: flex-start;
-    gap: 1rem;
-    padding: 1.25rem;
-    background: rgba(59, 130, 246, 0.05);
-    border: 1px solid rgba(59, 130, 246, 0.2);
-    border-radius: 1.25rem;
-    color: #1e40af;
-    font-size: 0.875rem;
-    line-height: 1.5;
-  }
-
-  .theme-dark .info-banner {
-    background: rgba(59, 130, 246, 0.08);
-    color: #bfdbfe;
-  }
-
-  .info-banner svg {
-    width: 1.25rem;
-    height: 1.25rem;
-    flex-shrink: 0;
-    margin-top: 0.125rem;
-  }
-
-  .info-banner p {
-    margin: 0;
-  }
-
-  .info-banner strong {
-    display: block;
-    margin-bottom: 0.25rem;
-  }
-
-  @media (max-width: 640px) {
-    .converter-card {
-      padding: 1.5rem;
-      gap: 2rem;
-      border-radius: 1.5rem;
-    }
-
-    .btn-group {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    .control-row {
-      grid-template-columns: 1fr;
-    }
-
-    .results-grid {
-      grid-template-columns: 1fr;
-    }
-
-    .measurements-layout {
-      grid-template-columns: 1fr;
-    }
-
-    .fit-grid {
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
-
-  @media (max-width: 400px) {
-    .btn-group {
-      grid-template-columns: 1fr;
-    }
-
-    .fit-grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-</style>