Spaces:
Running
Running
File size: 1,575 Bytes
18ac165 5aa86a7 18ac165 5aa86a7 18ac165 5aa86a7 18ac165 5aa86a7 18ac165 5aa86a7 18ac165 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
body {
font-family: 'Noto Sans TC', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f7f6;
color: #333;
}
header {
background-color: #005f73;
color: #ffffff;
padding: 2rem 1rem;
text-align: center;
}
h1, h2 {
color: #003440;
}
main {
max-width: 900px;
margin: 2rem auto;
padding: 0 1rem;
}
section {
background: #ffffff;
margin-bottom: 2rem;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.wave-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.wave-card {
flex: 1;
min-width: 300px;
background: #e9f5f9;
padding: 1rem;
border-left: 5px solid #00a896;
border-radius: 5px;
}
.interactive-container {
text-align: center;
margin-top: 1rem;
}
canvas {
background-color: #f0f8ff;
border: 1px solid #ccc;
cursor: grab;
}
canvas:active {
cursor: grabbing;
}
.formula {
background: #fffbe6;
border: 1px solid #ffe58f;
padding: 10px;
text-align: center;
border-radius: 5px;
font-size: 1.1rem;
}
.legend {
text-align: center;
margin-top: 10px;
}
.legend span {
margin: 0 10px;
padding: 2px 5px;
border-radius: 3px;
}
.p-wave { color: #d90429; font-weight: bold; }
.s-wave { color: #0077b6; font-weight: bold; }
.r-wave { color: #2d6a4f; font-weight: bold; }
.slider-container {
margin-top: 1rem;
}
footer {
text-align: center;
padding: 1rem;
margin-top: 2rem;
background: #e0e0e0;
font-size: 0.9rem;
}
|