Spaces:
Running
Running
| <html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>λ©λμ± μ€νΌλ λ Έλ¬΄ν</title><style>*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{height:100%}body{font-family:'Malgun Gothic','λ§μ κ³ λ',Dotum,'λμ',sans-serif;background-color:#f8f9fa;color:#212529;line-height:1.6;display:flex;flex-direction:column;min-height:100%;padding:15px}.title-container{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:20px;flex-wrap:wrap}h1{color:#343a40;font-size:1.8em;margin:0}.title-image{height:50px;width:auto;border-radius:4px;vertical-align:middle}.nav{display:flex;justify-content:center;gap:15px;margin-bottom:25px;flex-wrap:wrap}.nav button{padding:10px 20px;font-weight:bold;border:none;border-radius:6px;background-color:#e9ecef;color:#495057;cursor:pointer;transition:background-color .2s ease,color .2s ease;font-size:1rem;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.nav button:hover{background-color:#dee2e6}.nav button.active{background-color:#0d6efd;color:white}.page{display:none;flex-grow:1;width:100%;overflow:hidden}.page.active{display:block}.page iframe{width:100%;height:calc(100vh - 160px);border:1px solid #dee2e6;border-radius:8px;background-color:white}@media (max-width:768px){.nav{gap:10px}.nav button{padding:8px 15px;font-size:.9rem}.page iframe{height:calc(100vh - 200px)}}@media (max-width:480px){h1{font-size:1.4em}.title-image{height:35px}.nav button{flex-basis:calc(50% - 10px);font-size:.85rem}.page iframe{height:calc(100vh - 240px)}}</style></head><body><div class="title-container"><h1>λ©λμ± μ€νΌλ λ Έλ¬΄ν</h1><img src="{{ url_for('static', filename='1746134673.jpg') }}" alt="s" class="title-image"></div><nav class="nav"><button id="btnCapture" class="active" type="button">μ°ν₯ μΊ‘μ² κ²μ</button><button id="btnUpload" type="button">λΆλ± μ λ‘λ κ²μ</button></nav><section id="pageCapture" class="page active"><iframe src="/capture.html" title="Screen Capture Search"></iframe></section><section id="pageUpload" class="page"><iframe src="/upload.html" title="Image Upload Search"></iframe></section><script>document.addEventListener('DOMContentLoaded',()=>{const t=document.getElementById('btnCapture'),e=document.getElementById('btnUpload'),c=document.getElementById('pageCapture'),n=document.getElementById('pageUpload'),o=[t,e],a=[c,n];function i(t){o.forEach((e,c)=>{e.classList.toggle('active',c===t)}),a.forEach((e,c)=>{e.classList.toggle('active',c===t)})}t.addEventListener('click',()=>i(0)),e.addEventListener('click',()=>i(1)),i(0)});</script><script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="yojo" data-description="Support me on Buy me a coffee!" data-message="β컀νΌκ° νμ§νκΈ°" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script></body></html> |