cfe0413/MakeYourNoise
0
1:root {2 --bg-color: #08090d;3 --card-bg: rgba(18, 20, 29, 0.65);4 --card-border: rgba(255, 255, 255, 0.07);5 --card-border-hover: rgba(255, 255, 255, 0.15);6 7 --text-primary: #f3f4f6;8 --text-secondary: #9ca3af;9 --text-muted: #6b7280;10 11 /* Noise Colors */12 --color-brown: #d97706;13 --color-pink: #ec4899;14 --color-white: #e2e8f0;15 --color-blue: #06b6d4;16 --color-violet: #8b5cf6;17 18 /* Accent Gradients */19 --primary-gradient: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);20 --accent-gradient: linear-gradient(135deg, #7f00ff 0%, #ff007f 100%);21 --success-gradient: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);22 23 --glow-color: rgba(79, 172, 254, 0.15);24}25 26* {27 box-sizing: border-box;28 margin: 0;29 padding: 0;30}31 32body {33 background-color: var(--bg-color);34 color: var(--text-primary);35 font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;36 min-height: 100vh;37 display: flex;38 justify-content: center;39 align-items: center;40 overflow-x: hidden;41 position: relative;42}43 44/* Background Glow Effects */45.background-glow {46 position: absolute;47 top: 50%;48 left: 50%;49 transform: translate(-50%, -50%);50 width: 800px;51 height: 800px;52 background: radial-gradient(circle, var(--glow-color) 0%, rgba(8, 9, 13, 0) 70%);53 z-index: 0;54 pointer-events: none;55 filter: blur(80px);56}57 58/* Container */59.app-container {60 width: 100%;61 max-width: 1000px;62 padding: 2.5rem;63 position: relative;64 z-index: 1;65 display: flex;66 flex-direction: column;67 gap: 2rem;68}69 70/* Header */71.app-header {72 text-align: center;73 margin-bottom: 0.5rem;74}75 76.logo {77 display: inline-flex;78 align-items: center;79 gap: 0.75rem;80 margin-bottom: 0.5rem;81}82 83.logo-icon {84 font-size: 2rem;85 background: var(--primary-gradient);86 -webkit-background-clip: text;87 -webkit-text-fill-color: transparent;88 filter: drop-shadow(0 2px 10px rgba(0, 242, 254, 0.4));89}90 91.logo h1 {92 font-family: 'Space Grotesk', sans-serif;93 font-size: 2.5rem;94 font-weight: 700;95 letter-spacing: -0.05em;96 background: linear-gradient(to right, #ffffff, #a5b4fc);97 -webkit-background-clip: text;98 -webkit-text-fill-color: transparent;99}100 101.subtitle {102 color: var(--text-secondary);103 font-size: 1.05rem;104 font-weight: 300;105}106 107/* Common Card Styles */108.card {109 background: var(--card-bg);110 border: 1px solid var(--card-border);111 border-radius: 20px;112 backdrop-filter: blur(16px);113 -webkit-backdrop-filter: blur(16px);114 padding: 1.75rem;115 transition: border-color 0.3s ease, box-shadow 0.3s ease;116}117 118.card:hover {119 border-color: var(--card-border-hover);120 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);121}122 123.card h2 {124 font-family: 'Space Grotesk', sans-serif;125 font-size: 1.25rem;126 font-weight: 600;127 margin-bottom: 1.25rem;128 display: flex;129 align-items: center;130 gap: 0.5rem;131 color: #ffffff;132}133 134/* Visualizer Card */135.visualizer-container {136 height: 180px;137 position: relative;138 padding: 0;139 overflow: hidden;140 background: rgba(10, 11, 16, 0.8);141 border-color: rgba(255, 255, 255, 0.05);142}143 144#visualizerCanvas {145 width: 100%;146 height: 100%;147 display: block;148}149 150.visualizer-overlay {151 position: absolute;152 top: 1rem;153 left: 1rem;154 pointer-events: none;155}156 157.status-badge {158 background: rgba(255, 255, 255, 0.08);159 border: 1px solid rgba(255, 255, 255, 0.1);160 padding: 0.35rem 0.75rem;161 border-radius: 30px;162 font-size: 0.75rem;163 font-weight: 600;164 letter-spacing: 0.1em;165 color: var(--text-secondary);166 transition: all 0.3s ease;167}168 169/* Grid layout for settings */170.controls-grid {171 display: grid;172 grid-template-columns: 1.15fr 1fr;173 gap: 1.5rem;174 align-items: start;175}176 177.controls-column {178 display: flex;179 flex-direction: column;180 gap: 1.5rem;181}182 183@media (max-width: 768px) {184 .controls-grid {185 grid-template-columns: 1fr;186 }187 .app-container {188 padding: 1.25rem;189 }190}191 192/* Noise Options Buttons */193.noise-options {194 display: flex;195 flex-direction: column;196 gap: 0.75rem;197}198 199.noise-btn {200 background: rgba(255, 255, 255, 0.02);201 border: 1px solid rgba(255, 255, 255, 0.05);202 border-radius: 14px;203 padding: 1rem;204 display: flex;205 align-items: center;206 gap: 1rem;207 cursor: pointer;208 text-align: left;209 transition: all 0.25s ease;210 color: var(--text-primary);211 width: 100%;212}213 214.noise-btn:hover {215 background: rgba(255, 255, 255, 0.06);216 border-color: rgba(255, 255, 255, 0.12);217 transform: translateY(-2px);218}219 220.noise-btn.active {221 background: rgba(255, 255, 255, 0.08);222 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);223}224 225.noise-color-indicator {226 width: 12px;227 height: 12px;228 border-radius: 50%;229 flex-shrink: 0;230 box-shadow: 0 0 10px currentColor;231}232 233.noise-color-indicator.brown { color: var(--color-brown); background-color: var(--color-brown); }234.noise-color-indicator.pink { color: var(--color-pink); background-color: var(--color-pink); }235.noise-color-indicator.white { color: var(--color-white); background-color: var(--color-white); }236.noise-color-indicator.blue { color: var(--color-blue); background-color: var(--color-blue); }237.noise-color-indicator.violet { color: var(--color-violet); background-color: var(--color-violet); }238 239/* Active borders for selected noise type */240.noise-btn[data-noise="brown"].active { border-color: rgba(217, 119, 6, 0.4); }241.noise-btn[data-noise="pink"].active { border-color: rgba(236, 72, 153, 0.4); }242.noise-btn[data-noise="white"].active { border-color: rgba(226, 232, 240, 0.4); }243.noise-btn[data-noise="blue"].active { border-color: rgba(6, 182, 212, 0.4); }244.noise-btn[data-noise="violet"].active { border-color: rgba(139, 92, 246, 0.4); }245 246.noise-info {247 display: flex;248 flex-direction: column;249 gap: 0.15rem;250}251 252.noise-name {253 font-size: 1rem;254 font-weight: 600;255}256 257.noise-desc {258 font-size: 0.8rem;259 color: var(--text-secondary);260}261 262/* Frequency Filter Card */263.filter-controls {264 display: flex;265 flex-direction: column;266 gap: 1.5rem;267}268 269.filter-slider-group {270 display: flex;271 flex-direction: column;272 gap: 0.5rem;273}274 275.slider-header {276 display: flex;277 justify-content: space-between;278 font-size: 0.85rem;279}280 281.slider-label {282 color: var(--text-secondary);283 font-weight: 500;284}285 286.slider-value {287 color: #ffffff;288 font-family: 'Space Grotesk', sans-serif;289 font-weight: 600;290}291 292/* Custom styled inputs & sliders */293.styled-slider {294 -webkit-appearance: none;295 appearance: none;296 width: 100%;297 height: 6px;298 border-radius: 3px;299 background: rgba(255, 255, 255, 0.1);300 outline: none;301 transition: background 0.3s;302}303 304.styled-slider::-webkit-slider-thumb {305 -webkit-appearance: none;306 appearance: none;307 width: 18px;308 height: 18px;309 border-radius: 50%;310 background: #ffffff;311 cursor: pointer;312 box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);313 transition: transform 0.1s, background-color 0.2s;314}315 316.styled-slider::-webkit-slider-thumb:hover {317 transform: scale(1.2);318 background: #00f2fe;319}320 321.slider-ticks-container {322 position: relative;323 height: 1rem;324 margin-top: 0.25rem;325}326 327.tick-mark {328 position: absolute;329 transform: translateX(-50%);330 font-size: 0.7rem;331 color: var(--text-muted);332 white-space: nowrap;333}334 335.tick-mark:first-child {336 transform: translateX(0);337}338 339.tick-mark:last-child {340 transform: translateX(-100%);341}342 343/* Export configurations card */344.export-settings {345 display: flex;346 flex-direction: row;347 gap: 1.5rem;348 align-items: flex-end;349}350 351.export-settings > .input-group {352 flex: 1;353}354 355.export-settings > .time-picker-group {356 flex: 1.3;357}358 359.input-group {360 display: flex;361 flex-direction: column;362 gap: 0.5rem;363}364 365.input-group label {366 font-size: 0.85rem;367 color: var(--text-secondary);368 font-weight: 500;369}370 371.settings-row {372 display: flex;373 gap: 1rem;374}375 376.input-group.half, .filter-slider-group.half {377 width: 50%;378}379 380.time-picker {381 display: flex;382 gap: 0.75rem;383}384 385.time-input-container {386 display: flex;387 align-items: center;388 background: rgba(255, 255, 255, 0.03);389 border: 1px solid rgba(255, 255, 255, 0.08);390 border-radius: 10px;391 padding: 0.5rem 0.75rem;392 flex: 1;393}394 395.time-input-container input {396 background: transparent;397 border: none;398 outline: none;399 color: #ffffff;400 font-family: 'Space Grotesk', sans-serif;401 font-size: 1.1rem;402 font-weight: 600;403 width: 100%;404 text-align: center;405}406 407.time-input-container input::-webkit-inner-spin-button,408.time-input-container input::-webkit-outer-spin-button {409 -webkit-appearance: none;410 margin: 0;411}412 413.time-input-container span {414 font-size: 0.8rem;415 color: var(--text-secondary);416 margin-left: 0.25rem;417 white-space: nowrap;418}419 420/* Select & text input styling */421select, input[type="text"] {422 background: rgba(255, 255, 255, 0.03);423 border: 1px solid rgba(255, 255, 255, 0.08);424 border-radius: 10px;425 padding: 0.65rem 0.75rem;426 color: #ffffff;427 font-family: inherit;428 font-size: 0.9rem;429 outline: none;430 transition: all 0.3s ease;431}432 433select:focus, input[type="text"]:focus {434 border-color: rgba(0, 242, 254, 0.4);435 box-shadow: 0 0 10px rgba(0, 242, 254, 0.15);436}437 438select option {439 background-color: #0e0f14;440 color: #ffffff;441}442 443/* App Action Buttons (Footer) */444.app-actions {445 display: flex;446 justify-content: space-between;447 align-items: center;448 gap: 1.5rem;449 margin-top: 0.5rem;450}451 452@media (max-width: 600px) {453 .app-actions {454 flex-direction: column;455 align-items: stretch;456 }457}458 459.preview-controls {460 display: flex;461 align-items: center;462 gap: 1.5rem;463 flex: 1;464}465 466.action-btn {467 border: none;468 border-radius: 14px;469 padding: 1rem 1.75rem;470 color: #ffffff;471 font-family: inherit;472 font-size: 1rem;473 font-weight: 600;474 cursor: pointer;475 display: inline-flex;476 align-items: center;477 justify-content: center;478 gap: 0.5rem;479 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);480}481 482.play-btn {483 background: var(--primary-gradient);484 box-shadow: 0 4px 15px rgba(0, 242, 254, 0.3);485 min-width: 160px;486}487 488.play-btn:hover {489 transform: translateY(-2px);490 box-shadow: 0 6px 20px rgba(0, 242, 254, 0.5);491}492 493.play-btn.playing {494 background: var(--accent-gradient);495 box-shadow: 0 4px 15px rgba(255, 0, 127, 0.3);496}497 498.play-btn.playing:hover {499 box-shadow: 0 6px 20px rgba(255, 0, 127, 0.5);500}501 502.volume-control {503 display: flex;504 align-items: center;505 gap: 0.75rem;506 flex: 1;507 max-width: 200px;508}509 510.volume-icon {511 font-size: 1.1rem;512}513 514.volume-control input[type="range"] {515 -webkit-appearance: none;516 appearance: none;517 width: 100%;518 height: 4px;519 border-radius: 2px;520 background: rgba(255, 255, 255, 0.15);521 outline: none;522}523 524.volume-control input[type="range"]::-webkit-slider-thumb {525 -webkit-appearance: none;526 appearance: none;527 width: 12px;528 height: 12px;529 border-radius: 50%;530 background: #ffffff;531 cursor: pointer;532}533 534.download-btn {535 background: var(--accent-gradient);536 box-shadow: 0 4px 15px rgba(255, 0, 127, 0.3);537}538 539.download-btn:hover {540 transform: translateY(-2px);541 box-shadow: 0 6px 20px rgba(255, 0, 127, 0.5);542}543 544/* Modal styling */545.modal {546 display: none;547 position: fixed;548 top: 0;549 left: 0;550 width: 100%;551 height: 100%;552 background: rgba(6, 7, 10, 0.85);553 z-index: 100;554 backdrop-filter: blur(8px);555 justify-content: center;556 align-items: center;557 padding: 1.5rem;558}559 560.modal.active {561 display: flex;562}563 564.modal-content {565 max-width: 450px;566 width: 100%;567 text-align: center;568 display: flex;569 flex-direction: column;570 align-items: center;571 gap: 1rem;572 padding: 2.5rem;573 animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);574}575 576@keyframes modalIn {577 from {578 transform: scale(0.9) translateY(20px);579 opacity: 0;580 }581 to {582 transform: scale(1) translateY(0);583 opacity: 1;584 }585}586 587.spinner {588 width: 50px;589 height: 50px;590 border: 3px solid rgba(255, 255, 255, 0.1);591 border-top: 3px solid #00f2fe;592 border-radius: 50%;593 animation: spin 1s linear infinite;594 margin-bottom: 0.5rem;595}596 597@keyframes spin {598 0% { transform: rotate(0deg); }599 100% { transform: rotate(360deg); }600}601 602.progress-bar-container {603 width: 100%;604 height: 6px;605 background: rgba(255, 255, 255, 0.1);606 border-radius: 3px;607 overflow: hidden;608 margin-top: 0.5rem;609}610 611.progress-bar-fill {612 height: 100%;613 width: 15%;614 background: var(--primary-gradient);615 border-radius: 3px;616 animation: pulseWidth 2s infinite ease-in-out;617}618 619@keyframes pulseWidth {620 0% { width: 10%; margin-left: 0%; }621 50% { width: 40%; margin-left: 30%; }622 100% { width: 10%; margin-left: 90%; }623}624 625/* iOS style Switch toggle for modulation */626.card h2 {627 display: flex;628 justify-content: space-between;629 align-items: center;630 width: 100%;631}632 633.switch {634 position: relative;635 display: inline-block;636 width: 44px;637 height: 24px;638}639 640.switch input {641 opacity: 0;642 width: 0;643 height: 0;644}645 646.slider-round {647 position: absolute;648 cursor: pointer;649 top: 0;650 left: 0;651 right: 0;652 bottom: 0;653 background-color: rgba(255, 255, 255, 0.1);654 transition: .3s;655 border-radius: 24px;656 border: 1px solid rgba(255, 255, 255, 0.1);657}658 659.slider-round:before {660 position: absolute;661 content: "";662 height: 18px;663 width: 18px;664 left: 2px;665 bottom: 2px;666 background-color: white;667 transition: .3s;668 border-radius: 50%;669}670 671input:checked + .slider-round {672 background: var(--primary-gradient);673 border-color: transparent;674 box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);675}676 677input:checked + .slider-round:before {678 transform: translateX(20px);679}680 681/* Disabled styling for controls */682.modulation-controls, .filter-slider-group, .input-group, .effect-controls-group {683 transition: opacity 0.3s ease;684}685 686.modulation-controls.disabled, .filter-slider-group.disabled, .input-group.disabled, .effect-controls-group.disabled {687 opacity: 0.35;688 pointer-events: none;689}690 691/* π 3. μμ°μ νΈν‘ λ° λν
μΌ ν¨κ³Ό ꡬ쑰ν */692.effects-container {693 display: flex;694 flex-direction: column;695 gap: 1.25rem;696}697 698.effect-section {699 display: flex;700 flex-direction: column;701 gap: 0.75rem;702}703 704.section-title-row {705 display: flex;706 justify-content: space-between;707 align-items: center;708 width: 100%;709}710 711.section-title-row h3 {712 font-size: 1.05rem;713 font-weight: 600;714 color: #ffffff;715 margin: 0;716}717 718.section-divider {719 border: 0;720 height: 1px;721 background: rgba(255, 255, 255, 0.08);722 margin: 0.5rem 0;723}724 725.effect-controls-group {726 display: flex;727 flex-direction: column;728 gap: 1.25rem;729}730 731/* Mobile responsive styles (width under 480px) */732@media (max-width: 480px) {733 .app-container {734 padding: 0.75rem;735 gap: 1.25rem;736 }737 738 .logo h1 {739 font-size: 1.8rem;740 }741 .subtitle {742 font-size: 0.85rem;743 }744 745 .card {746 padding: 1.25rem;747 border-radius: 16px;748 }749 750 .noise-btn {751 padding: 0.85rem;752 gap: 0.75rem;753 }754 .noise-name {755 font-size: 0.95rem;756 }757 .noise-desc {758 font-size: 0.75rem;759 }760 761 .time-picker {762 gap: 0.5rem;763 }764 .time-input-container {765 padding: 0.4rem 0.5rem;766 border-radius: 8px;767 }768 .time-input-container input {769 font-size: 0.95rem;770 }771 .time-input-container span {772 font-size: 0.7rem;773 }774 775 .export-settings {776 flex-direction: column;777 align-items: stretch;778 gap: 1.25rem;779 }780 781 .settings-row {782 flex-direction: column;783 gap: 1rem;784 }785 .input-group.half, .filter-slider-group.half {786 width: 100%;787 }788 789 .app-actions {790 flex-direction: column;791 align-items: stretch;792 gap: 1.25rem;793 }794 795 .preview-controls {796 flex-direction: column;797 align-items: stretch;798 gap: 0.75rem;799 }800 801 .volume-control {802 max-width: 100%;803 width: 100%;804 padding: 0.5rem;805 background: rgba(255, 255, 255, 0.02);806 border-radius: 10px;807 border: 1px solid rgba(255, 255, 255, 0.05);808 justify-content: center;809 }810 811 .play-btn, .download-btn {812 width: 100%;813 padding: 0.85rem;814 font-size: 0.95rem;815 border-radius: 12px;816 }817 818 .visualizer-container {819 height: 130px;820 }821 822 .modal-content {823 padding: 1.5rem;824 }825 .modal-content h3 {826 font-size: 1.1rem;827 }828 .modal-content p {829 font-size: 0.8rem;830 }831}832 833