diff --git a/app/static/styles.css b/app/static/styles.css index 0e9a7d2..f671063 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -595,94 +595,137 @@ a { color: inherit; text-decoration: none; } pointer-events: none; } -.shape { - position: absolute; - border-radius: 50%; -} +.shape { position: absolute; } -/* 큰 원 테두리 — 우측 상단 */ +/* 1. 큰 원 테두리 — 우측 상단 */ .shape-1 { - width: 380px; - height: 380px; - border: 1.5px solid rgba(30, 86, 160, .25); + width: 360px; + height: 360px; + border: 4px solid rgba(99, 179, 237, .45); border-radius: 50%; - top: -100px; - right: -80px; - animation: shapeFloat1 28s ease-in-out infinite; + top: -90px; + right: -70px; + animation: shapeFloat1 16s ease-in-out infinite; } -/* 중간 다이아몬드 — 좌측 하단 */ +/* 2. 다이아몬드 (채움) — 좌측 하단 */ .shape-2 { - width: 140px; - height: 140px; - background: rgba(30, 86, 160, .1); - border-radius: 24px; - bottom: 100px; - left: -50px; - animation: shapeFloat2 22s ease-in-out infinite; + width: 130px; + height: 130px; + background: rgba(99, 179, 237, .2); + border: 3px solid rgba(99, 179, 237, .5); + border-radius: 20px; + bottom: 90px; + left: -45px; + animation: shapeFloat2 13s ease-in-out infinite; } -/* 작은 원 — 중앙 우측 */ +/* 3. 중간 원 — 중앙 우측 */ .shape-3 { - width: 72px; - height: 72px; - border: 1.5px solid rgba(255, 255, 255, .12); + width: 80px; + height: 80px; + border: 3px solid rgba(255, 255, 255, .3); border-radius: 50%; - top: 42%; - right: 14%; - animation: shapeFloat3 19s ease-in-out infinite; + top: 40%; + right: 12%; + animation: shapeFloat3 11s ease-in-out infinite; } -/* 큰 둥근 사각형 테두리 — 하단 중앙 */ +/* 4. 둥근 사각형 테두리 — 하단 */ .shape-4 { - width: 220px; - height: 220px; - border: 1px solid rgba(30, 86, 160, .2); - border-radius: 40px; - bottom: -70px; - right: 18%; - animation: shapeFloat4 25s ease-in-out infinite; + width: 200px; + height: 200px; + border: 3px solid rgba(99, 179, 237, .35); + border-radius: 36px; + bottom: -60px; + right: 16%; + animation: shapeFloat4 15s ease-in-out infinite; } -/* 아주 작은 원 — 상단 좌측 */ +/* 5. 작은 원 채움 — 상단 좌측 */ .shape-5 { - width: 40px; - height: 40px; - background: rgba(30, 86, 160, .18); + width: 44px; + height: 44px; + background: rgba(147, 197, 253, .35); + border: 2px solid rgba(147, 197, 253, .6); border-radius: 50%; - top: 22%; - left: 18%; - animation: shapeFloat5 16s ease-in-out infinite; + top: 20%; + left: 16%; + animation: shapeFloat5 9s ease-in-out infinite; +} + +/* 6. 세모 — 우측 중하단 */ +.shape-6 { + width: 90px; + height: 90px; + background: rgba(99, 179, 237, .22); + clip-path: polygon(50% 0%, 0% 100%, 100% 100%); + bottom: 28%; + right: 6%; + animation: shapeFloat6 12s ease-in-out infinite; +} + +/* 7. 별 — 좌측 중앙 */ +.shape-7 { + width: 60px; + height: 60px; + background: rgba(253, 224, 71, .3); + clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); + top: 52%; + left: 10%; + animation: shapeFloat7 10s ease-in-out infinite; +} + +/* 8. 큰 세모 테두리 — 상단 중앙 (outline 효과) */ +.shape-8 { + width: 110px; + height: 110px; + background: transparent; + border-left: 4px solid rgba(99, 179, 237, .3); + border-bottom: 4px solid rgba(99, 179, 237, .3); + top: 8%; + left: 38%; + animation: shapeFloat8 14s ease-in-out infinite; } @keyframes shapeFloat1 { 0%, 100% { transform: translate(0, 0); } - 25% { transform: translate(-18px, 28px); } - 50% { transform: translate(12px, 18px); } - 75% { transform: translate(-8px, -14px); } + 25% { transform: translate(-22px, 32px); } + 50% { transform: translate(16px, 22px); } + 75% { transform: translate(-10px, -18px); } } - @keyframes shapeFloat2 { 0%, 100% { transform: rotate(45deg) translate(0, 0); } - 33% { transform: rotate(62deg) translate(18px, -22px); } - 66% { transform: rotate(32deg) translate(-14px, 18px); } + 33% { transform: rotate(68deg) translate(22px, -26px); } + 66% { transform: rotate(28deg) translate(-18px, 22px); } } - @keyframes shapeFloat3 { 0%, 100% { transform: translate(0, 0); } - 50% { transform: translate(22px, -28px); } + 50% { transform: translate(28px, -34px); } } - @keyframes shapeFloat4 { 0%, 100% { transform: rotate(12deg) translate(0, 0); } - 40% { transform: rotate(22deg) translate(-18px, -12px); } - 80% { transform: rotate(4deg) translate(14px, 8px); } + 40% { transform: rotate(24deg) translate(-22px, -14px); } + 80% { transform: rotate(2deg) translate(18px, 10px); } } - @keyframes shapeFloat5 { 0%, 100% { transform: translate(0, 0) scale(1); } - 33% { transform: translate(14px, -18px) scale(1.15); } - 66% { transform: translate(-10px, 12px) scale(0.9); } + 33% { transform: translate(16px, -20px) scale(1.2); } + 66% { transform: translate(-12px, 14px) scale(0.85); } +} +@keyframes shapeFloat6 { + 0%, 100% { transform: translate(0, 0) rotate(0deg); } + 33% { transform: translate(-18px, -22px) rotate(20deg); } + 66% { transform: translate(14px, 10px) rotate(-15deg); } +} +@keyframes shapeFloat7 { + 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } + 33% { transform: translate(20px, -16px) rotate(36deg) scale(1.15); } + 66% { transform: translate(-14px, 18px) rotate(-18deg) scale(0.9); } +} +@keyframes shapeFloat8 { + 0%, 100% { transform: rotate(0deg) translate(0, 0); } + 50% { transform: rotate(30deg) translate(18px, 22px); } } /* ════════════════════════════════════════════════════ diff --git a/app/templates/denied.html b/app/templates/denied.html index 402de8a..fb81f1b 100644 --- a/app/templates/denied.html +++ b/app/templates/denied.html @@ -18,6 +18,9 @@
+
+
+