Update index.html

index.html

@@ -718,6 +718,44 @@
         
         .lock-controls-btn.locked {
             color: #64ffda;
+        }
+              .time-markers-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin: 15px 0;
+            padding: 15px;
+            background-color: rgba(17, 34, 64, 0.5);
+            border-radius: 5px;
+        }
+        
+        .time-marker {
+            padding: 8px 12px;
+            background-color: rgba(100, 255, 218, 0.2);
+            border: 1px solid #64ffda;
+            border-radius: 4px;
+            cursor: grab;
+            user-select: none;
+            transition: background-color 0.3s;
+        }
+        
+        .time-marker:hover {
+            background-color: rgba(100, 255, 218, 0.3);
+        }
+        
+        .time-marker.dragging {
+            opacity: 0.7;
+            cursor: grabbing;
+        }
+        
+        .time-input-container {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        
+        .time-input-container input {
+            width: 80px;
         }
     </style>
 </head>
@@ -940,6 +978,26 @@ document.getElementById('sw-register-btn').addEventListener('click', async () =>
         <div class="tech-decoration"></div>
         
         <div class="settings">
+        <div class="time-markers-container" id="time-markers-container">
+            <!-- ここにタイムマーカーが動的に追加されます -->
+        </div>
+        
+        <div class="setting-item">
+            <label for="start-time">再生開始秒数:</label>
+            <div class="time-input-container">
+                <input type="number" id="start-time" min="0" value="0" step="0.01" disabled>
+                <button class="time-set-button" id="set-start-time" disabled>現在の秒数に設定</button>
+            </div>
+        </div>
+        
+        <div class="setting-item">
+            <label for="end-time">再生終了秒数:</label>
+            <div class="time-input-container">
+                <input type="number" id="end-time" min="0" value="0" step="0.01" disabled>
+                <button class="time-set-button" id="set-end-time" disabled>現在の秒数に設定</button>
+                <button class="time-set-button" id="reset-end-time" disabled>動画の長さに戻す</button>
+            </div>
+        </div>
             <h2>設定</h2>
             <div class="setting-item">
                 <label for="start-time">再生開始秒数:</label>
@@ -2135,6 +2193,108 @@ function pauseMedia() {
     tempoInput.value = isTMode ? 66 : 92;
     tempoInput.dispatchEvent(new Event('input'));
 });
+          document.addEventListener('DOMContentLoaded', function() {
+            // URLパラメータをチェック
+            const urlParams = new URLSearchParams(window.location.search);
+            const isTMode = urlParams.has('mode') && urlParams.get('mode') === 't';
+            
+            // タイムマーカーデータ
+            const timeMarkers = isTMode ? [
+                { label: '①', time: 15.2 },
+                { label: '②', time: 43.8 },
+                { label: '①[2番]', time: 79.0 },
+                { label: '②[2番]', time: 108.0 },
+                { label: '③', time: 137.25 },
+                { label: '④', time: 162.55 },
+                { label: '⑤', time: 191.65 }
+            ] : [
+                { label: 'A', time: 8.35 },
+                { label: 'B', time: 72.1 },
+                { label: 'C', time: 98.67 },
+                { label: 'D', time: 155.83 },
+                { label: 'E', time: 192.55 }
+            ];
+            
+            // タイムマーカーを表示
+            const timeMarkersContainer = document.getElementById('time-markers-container');
+            
+            timeMarkers.forEach(marker => {
+                const markerElement = document.createElement('div');
+                markerElement.className = 'time-marker';
+                markerElement.textContent = `・${marker.label}(${marker.time}秒)`;
+                markerElement.dataset.time = marker.time;
+                
+                // ドラッグ開始
+                markerElement.addEventListener('dragstart', function(e) {
+                    e.dataTransfer.setData('text/plain', marker.time);
+                    this.classList.add('dragging');
+                });
+                
+                // ドラッグ終了
+                markerElement.addEventListener('dragend', function() {
+                    this.classList.remove('dragging');
+                });
+                
+                // ドラッグ可能に設定
+                markerElement.draggable = true;
+                
+                // クリックで開始時間に設定
+                markerElement.addEventListener('click', function() {
+                    document.getElementById('start-time').value = marker.time;
+                    updateProgressMarkers();
+                });
+                
+                timeMarkersContainer.appendChild(markerElement);
+            });
+            
+            // ドロップターゲットの設定
+            const startTimeInput = document.getElementById('start-time');
+            const endTimeInput = document.getElementById('end-time');
+            
+            [startTimeInput, endTimeInput].forEach(input => {
+                // ドラッグオーバー
+                input.addEventListener('dragover', function(e) {
+                    e.preventDefault();
+                    this.style.backgroundColor = 'rgba(100, 255, 218, 0.2)';
+                });
+                
+                // ドラッグリーブ
+                input.addEventListener('dragleave', function() {
+                    this.style.backgroundColor = '';
+                });
+                
+                // ドロップ
+                input.addEventListener('drop', function(e) {
+                    e.preventDefault();
+                    this.style.backgroundColor = '';
+                    
+                    const time = parseFloat(e.dataTransfer.getData('text/plain'));
+                    if (!isNaN(time)) {
+                        this.value = time;
+                        updateProgressMarkers();
+                    }
+                });
+            });
+            
+            // 入力ボックスの変更時にマーカーを更新
+            startTimeInput.addEventListener('input', updateProgressMarkers);
+            endTimeInput.addEventListener('input', updateProgressMarkers);
+            
+            // 既存のupdateProgressMarkers関数を再利用
+            function updateProgressMarkers() {
+                const duration = video.duration || videoDuration;
+                const startTime = parseFloat(startTimeInput.value) || 0;
+                const endTime = parseFloat(endTimeInput.value) || duration;
+                
+                if (duration > 0) {
+                    startMarker.style.left = `${(startTime / duration) * 100}%`;
+                    endMarker.style.left = `${(endTime / duration) * 100}%`;
+                    
+                    startMarker.style.display = 'block';
+                    endMarker.style.display = 'block';
+                }
+            }
+        });
 </script>
 </body>
 </html>