Spaces:

openfree
/

ekhkpv

Running

App Files Files Community

openfree commited on 9 days ago

Commit

c2cb624

•

1 Parent(s): ca6a55e

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +382 -19

index.html CHANGED Viewed

@@ -1,19 +1,382 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>LoveCall Pro</title>
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#ff4757">
+    <style>
+        :root {
+            --primary: #ff4757;
+            --accent: #2ed573;
+            --dark: #2f3542;
+            --light: #f1f2f6;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+        body {
+            background: var(--light);
+            height: 100vh;
+            overflow-x: hidden;
+        }
+        .app-container {
+            max-width: 100%;
+            margin: 0 auto;
+            background: white;
+            min-height: 100vh;
+            position: relative;
+        }
+        .header {
+            background: var(--primary);
+            padding: 20px;
+            color: white;
+            text-align: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .status-bar {
+            background: rgba(255,255,255,0.2);
+            padding: 8px;
+            border-radius: 20px;
+            margin-top: 10px;
+            font-size: 0.9em;
+        }
+        .main-section {
+            padding: 20px;
+        }
+        .contact-card {
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            padding: 20px;
+            margin-bottom: 20px;
+            position: relative;
+        }
+        .contact-header {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .contact-avatar {
+            width: 60px;
+            height: 60px;
+            background: var(--primary);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            color: white;
+        }
+        .emergency-trigger {
+            width: 200px;
+            height: 200px;
+            margin: 30px auto;
+            position: relative;
+        }
+        .trigger-outer {
+            width: 100%;
+            height: 100%;
+            background: var(--primary);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            animation: pulse 2s infinite;
+        }
+        .trigger-inner {
+            width: 90%;
+            height: 90%;
+            background: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+        }
+        .setup-section {
+            padding: 20px;
+            background: var(--light);
+            border-radius: 15px;
+            margin-top: 20px;
+        }
+        .setup-step {
+            margin-bottom: 15px;
+            padding: 15px;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        }
+        .button {
+            padding: 15px 30px;
+            border: none;
+            border-radius: 25px;
+            background: var(--primary);
+            color: white;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s;
+            width: 100%;
+            margin-top: 10px;
+        }
+        .button:active {
+            transform: scale(0.98);
+        }
+        .permission-alert {
+            background: #fff3cd;
+            border: 1px solid #ffeeba;
+            color: #856404;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+        }
+        .status-indicator {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+        .status-active {
+            background: var(--accent);
+            box-shadow: 0 0 0 rgba(46, 213, 115, 0.4);
+            animation: pulse-green 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4);
+            }
+            70% {
+                box-shadow: 0 0 0 20px rgba(255, 71, 87, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
+            }
+        }
+        @keyframes pulse-green {
+            0% {
+                box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.4);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(46, 213, 115, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(46, 213, 115, 0);
+            }
+        }
+        #volumeIndicator {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0,0,0,0.8);
+            color: white;
+            padding: 20px;
+            border-radius: 10px;
+            display: none;
+            z-index: 1000;
+        }
+        .subscription-info {
+            margin-top: 20px;
+            padding: 15px;
+            background: #e8f5e9;
+            border-radius: 10px;
+            font-size: 0.9em;
+            color: #2e7d32;
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <div class="header">
+            <h1>LoveCall Pro</h1>
+            <div class="status-bar">
+                <span class="status-indicator status-active"></span>
+                긴급 통화 서비스 활성화됨
+            </div>
+        </div>
+        <div class="main-section">
+            <div class="contact-card">
+                <div class="contact-header">
+                    <div class="contact-avatar">❤️</div>
+                    <div>
+                        <h2 id="emergencyContact">긴급 연락처</h2>
+                        <p id="contactPhone">연락처를 등록해주세요</p>
+                    </div>
+                </div>
+            </div>
+            <div class="emergency-trigger">
+                <div class="trigger-outer">
+                    <div class="trigger-inner">
+                        <span style="font-size: 36px">SOS</span>
+                        <span style="font-size: 14px; margin-top: 8px">긴급 호출 준비됨</span>
+                    </div>
+                </div>
+            </div>
+            <div class="permission-alert">
+                <strong>권한 필요</strong>
+                <p>긴급 통화 기능을 사용하기 위해 전화 권한이 필요합니다.</p>
+                <button class="button" onclick="requestPermissions()">권한 허용하기</button>
+            </div>
+            <div class="setup-section">
+                <h3>설정 방법</h3>
+                <div class="setup-step">
+                    <h4>1. 긴급 연락처 등록</h4>
+                    <button class="button" onclick="registerContact()">연락처 등록하기</button>
+                </div>
+                <div class="setup-step">
+                    <h4>2. 볼륨 버튼 테스트</h4>
+                    <button class="button" onclick="testVolumeButton()">테스트 시작</button>
+                </div>
+            </div>
+            <div class="subscription-info">
+                프리미엄 서비스 이용중 (월 5,000원)
+                <br>다음 결제일: 2024년 2월 1일
+            </div>
+        </div>
+    </div>
+    <div id="volumeIndicator">
+        볼륨 버튼 감지중... <span id="countdown">5</span>초
+    </div>
+    <script>
+        let volumeButtonPressed = false;
+        let pressTimer = null;
+        let countdownInterval = null;
+        // 권한 요청
+        async function requestPermissions() {
+            try {
+                if ('permissions' in navigator) {
+                    const result = await navigator.permissions.query({ name: 'microphone' });
+                    if (result.state === 'granted') {
+                        alert('권한이 허용되었습니다.');
+                    } else {
+                        const permission = await navigator.mediaDevices.getUserMedia({ audio: true });
+                        alert('권한이 허용되었습니다.');
+                    }
+                }
+            } catch (error) {
+                alert('권한 요청 중 오류가 발생했습니다. 설정에서 직접 허용해주세요.');
+            }
+        }
+        // 연락처 등록
+        function registerContact() {
+            const name = prompt('긴급 연락처 이름을 입력하세요:');
+            const phone = prompt('전화번호를 입력하세요 (- 없이):');
+            if (name && phone) {
+                document.getElementById('emergencyContact').textContent = name;
+                document.getElementById('contactPhone').textContent = phone;
+                localStorage.setItem('emergencyContact', JSON.stringify({ name, phone }));
+                alert('긴급 연락처가 등록되었습니다.');
+            }
+        }
+        // 볼륨 버튼 테스트
+        function testVolumeButton() {
+            const indicator = document.getElementById('volumeIndicator');
+            const countdown = document.getElementById('countdown');
+            let seconds = 5;
+            indicator.style.display = 'block';
+            countdownInterval = setInterval(() => {
+                seconds--;
+                countdown.textContent = seconds;
+                if (seconds <= 0) {
+                    clearInterval(countdownInterval);
+                    indicator.style.display = 'none';
+                    alert('테스트가 완료되었습니다.');
+                }
+            }, 1000);
+        }
+        // 볼륨 버튼 이벤트 처리
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'VolumeUp') {
+                if (!volumeButtonPressed) {
+                    volumeButtonPressed = true;
+                    pressTimer = setTimeout(() => {
+                        const contact = JSON.parse(localStorage.getItem('emergencyContact'));
+                        if (contact) {
+                            window.location.href = `tel:${contact.phone}`;
+                        } else {
+                            alert('긴급 연락처를 먼저 등록해주세요.');
+                        }
+                    }, 5000);
+                }
+            }
+        });
+        document.addEventListener('keyup', (e) => {
+            if (e.key === 'VolumeUp') {
+                volumeButtonPressed = false;
+                if (pressTimer) {
+                    clearTimeout(pressTimer);
+                }
+            }
+        });
+        // 저장된 연락처 불러오기
+        window.onload = () => {
+            const savedContact = localStorage.getItem('emergencyContact');
+            if (savedContact) {
+                const contact = JSON.parse(savedContact);
+                document.getElementById('emergencyContact').textContent = contact.name;
+                document.getElementById('contactPhone').textContent = contact.phone;
+            }
+        };
+        // 서비스 워커 등록
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('service-worker.js')
+                .then(registration => {
+                    console.log('ServiceWorker registration successful');
+                })
+                .catch(err => {
+                    console.log('ServiceWorker registration failed: ', err);
+                });
+        }
+    </script>
+</body>
+</html>