Studio - APP

🛠️ プログラム作成 [修正モード]

ファイル名: .html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ProVocab - 縦スクロール暗記版</title>
    <style>
        :root {
            --primary: #4a90e2;
            --secondary: #8e44ad;
            --bg: #f4f7f6;
            --card-bg: #ffffff;
            --text-main: #2c3e50;
        }
        body { font-family: 'Helvetica Neue', Arial, sans-serif; background: var(--bg); margin: 0; padding-bottom: 90px; color: var(--text-main); }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        
        /* ナビゲーション */
        nav { position: fixed; bottom: 0; width: 100%; background: #fff; display: flex; border-top: 1px solid #ddd; z-index: 1000; padding-bottom: env(safe-area-inset-bottom); }
        nav button { flex: 1; padding: 12px; border: none; background: none; cursor: pointer; font-weight: bold; color: #999; font-size: 0.75rem; display: flex; flex-direction: column; align-items: center; }
        nav button span { font-size: 1.2rem; margin-bottom: 3px; }
        nav button.active { color: var(--primary); background: #f0f7ff; }

.mode-section { display: none; animation: fadeIn 0.3s; }
        .mode-section.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 検索・共通 */
        .search-area { position: sticky; top: 0; background: var(--bg); padding: 10px 0; z-index: 100; }
        .search-box { display: flex; gap: 10px; }
        input { flex: 1; padding: 15px; border: 2px solid #ddd; border-radius: 12px; font-size: 16px; outline: none; transition: 0.2s; }
        input:focus { border-color: var(--primary); }
        .show-all-btn { background: none; border: none; color: var(--primary); text-decoration: underline; cursor: pointer; width: 100%; margin-top: 10px; }

/* 共通カードデザイン */
        .card { background: var(--card-bg); padding: 20px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 15px; position: relative; border-left: 5px solid transparent; }
        .card.registered { border-left-color: var(--primary); }

.header-row { display: flex; justify-content: space-between; align-items: flex-start; }
        .word-info h3 { font-size: 1.6rem; margin: 0; color: var(--text-main); }
        .pronounce { font-size: 0.9rem; color: #888; font-weight: normal; font-family: sans-serif; }
        .emoji-big { font-size: 2.5rem; line-height: 1; }
        .tag { display: inline-block; background: #eee; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; margin: 5px 0; color: #555; font-weight: bold; }
        .meaning-box { margin: 10px 0; font-weight: bold; font-size: 1.1rem; border-left: 3px solid var(--primary); padding-left: 8px; }
        .etymology-box { background: #f3e5f5; border-radius: 8px; padding: 8px; margin: 10px 0; border-left: 4px solid var(--secondary); font-size: 0.9rem; color: #4a235a; }
        .example-box { font-style: italic; color: #666; background: #f9f9f9; padding: 10px; border-radius: 8px; font-size: 0.85rem; margin-top: 10px; }

.btn { padding: 12px; border: none; border-radius: 8px; cursor: pointer; background: var(--primary); color: white; font-weight: bold; width: 100%; margin-top: 10px; }
        .btn:disabled { background: #ccc; cursor: default; }
        .btn-del { background: transparent; color: #e74c3c; border: 1px solid #e74c3c; padding: 4px 10px; font-size: 0.8rem; border-radius: 4px; cursor: pointer; float: right; }

/* --- 縦スクロール暗記モード用スタイル --- */
        .memo-card-container {
            perspective: 1000px;
            margin-bottom: 20px;
            cursor: pointer;
            height: 280px; /* カードの高さ */
        }
        .memo-card {
            width: 100%; height: 100%;
            position: relative;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        .memo-card.flipped { transform: rotateY(180deg); }
        
        .memo-face {
            position: absolute; width: 100%; height: 100%;
            backface-visibility: hidden;
            border-radius: 16px;
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            padding: 20px; box-sizing: border-box;
            display: flex; flex-direction: column;
        }
        
        .memo-front {
            justify-content: center; align-items: center; text-align: center;
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            border: 2px solid #eef;
        }
        .memo-back {
            transform: rotateY(180deg);
            overflow-y: auto;
            border: 2px solid var(--primary);
        }

.mastery-row {
            display: flex; gap: 5px; margin-top: auto; padding-top: 10px; border-top: 1px solid #eee;
        }
        .m-btn { flex: 1; padding: 8px; border: none; border-radius: 4px; color: white; font-size: 0.8rem; cursor: pointer; }
        .status-badge { position: absolute; top: 10px; right: 10px; font-size: 1.2rem; }
    </style>
</head>
<body>

<div class="container">
    <section id="search-mode" class="mode-section active">
        <div class="search-area">
            <h2 style="text-align:center; margin:0 0 10px 0;">🔍 辞書検索</h2>
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="英単語を入力... (例: ab)" oninput="searchDict()">
            </div>
            <button class="show-all-btn" onclick="showAllDict()">全単語リストを表示 (100語収録)</button>
        </div>
        <div id="searchResult"></div>
    </section>

<section id="study-mode" class="mode-section">
        <h2 style="text-align:center;">📖 My単語帳</h2>
        <div id="studyList"></div>
    </section>

<section id="memorize-mode" class="mode-section">
        <h2 style="text-align:center;">🧠 暗記リスト</h2>
        <p style="text-align:center; font-size:0.8rem; color:#888;">タップで裏返して答え合わせ</p>
        <div id="memoList"></div>
    </section>
</div>

let myWords = JSON.parse(localStorage.getItem('myWordsRoot100')) || [];

// --- 初期化 ---
    window.onload = function() {
        searchDict();
    };

// --- 検索機能 ---
    function searchDict() {
        const input = document.getElementById('searchInput').value.trim().toLowerCase();
        const resultDiv = document.getElementById('searchResult');
        resultDiv.innerHTML = "";

if (input.length === 0) {
            resultDiv.innerHTML = `<p style="text-align:center; color:#888;">単語を入力してください</p>`;
            return;
        }
        
        // 100語の中から検索
        const matches = geminiDictionary.filter(d => 
            d.w.toLowerCase().includes(input) || 
            d.m.includes(input)
        );

renderDictList(matches, resultDiv);
    }

function showAllDict() {
        document.getElementById('searchInput').value = "";
        const resultDiv = document.getElementById('searchResult');
        renderDictList(geminiDictionary, resultDiv);
    }

function renderDictList(list, container) {
        if (list.length === 0) {
            container.innerHTML = `<p style="text-align:center; color:#999;">見つかりませんでした。</p>`;
            return;
        }

container.innerHTML = list.map(d => {
            const isReg = myWords.some(w => w.w === d.w);
            return `
                <div class="card ${isReg ? 'registered' : ''}">
                    <div class="header-row">
                        <div class="emoji-big">${d.em}</div>
                        <div style="flex:1; margin-left:15px;">
                            <h3>${d.w}</h3>
                            <span class="pronounce">${d.p}</span>
                            <div><span class="tag">${d.pos}</span></div>
                        </div>
                    </div>
                    <div class="meaning-box">${d.m}</div>
                    <div class="etymology-box">🌱 ${d.ety}</div>
                    <div class="example-box">${d.ex}</div>
                    <button class="btn" onclick="toggleRegister('${d.w}')" ${isReg ? 'disabled' : ''}>
                        ${isReg ? '✅ 登録済み' : '単語帳に追加'}
                    </button>
                </div>
            `;
        }).join('');
    }

// --- 登録機能 ---
    function toggleRegister(wordStr) {
        const existing = myWords.find(w => w.w === wordStr);
        if (existing) return;

function saveData() {
        localStorage.setItem('myWordsRoot100', JSON.stringify(myWords));
    }

// --- 勉強モード (削除・一覧) ---
    function renderStudyList() {
        const listDiv = document.getElementById('studyList');
        if (myWords.length === 0) {
            listDiv.innerHTML = `<p style="text-align:center; margin-top:50px; color:#888;">単語帳は空です。<br>検索タブから追加してください。</p>`;
            return;
        }
        listDiv.innerHTML = myWords.map((w, idx) => `
            <div class="card">
                <button class="btn-del" onclick="deleteWord(${idx})">🗑️</button>
                <div style="display:flex; align-items:center; gap:10px;">
                    <span style="font-size:1.5rem;">${w.em}</span>
                    <h3 style="margin:0;">${w.w}</h3>
                    <span style="font-size:0.8rem; color:#888;">${getMasteryIcon(w.mastery)}</span>
                </div>
                <div class="meaning-box" style="font-size:1rem; margin-top:10px;">${w.m}</div>
                <div style="font-size:0.85rem; color:#666;">🌱 ${w.ety}</div>
            </div>
        `).join('');
    }

function deleteWord(idx) {
        if(confirm("削除しますか？")) {
            myWords.splice(idx, 1);
            saveData();
            renderStudyList();
        }
    }

// --- 記憶モード (縦スクロール・フリップ式) ---
    function startMemorize() {
        const listDiv = document.getElementById('memoList');
        if (myWords.length === 0) {
            listDiv.innerHTML = `<p style="text-align:center; margin-top:50px;">単語帳に登録すると<br>ここにカードが表示されます。</p>`;
            return;
        }

listDiv.innerHTML = myWords.map((w, idx) => `
            <div class="memo-card-container" onclick="flipItem(this)">
                <div class="memo-card">
                    <div class="memo-face memo-front">
                        <div style="font-size:0.9rem; color:#888; position:absolute; top:15px; left:15px;">${w.pos}</div>
                        <div class="status-badge">${getMasteryIcon(w.mastery)}</div>
                        <h2 style="font-size:2.5rem; margin:0; color:#333;">${w.w}</h2>
                        <p style="color:#666;">${w.p}</p>
                        <p style="font-size:0.8rem; color:#aaa; margin-top:20px;">TAP TO CHECK</p>
                    </div>
                    <div class="memo-face memo-back">
                        <div style="display:flex; gap:10px; align-items:center; border-bottom:1px solid #eee; padding-bottom:10px;">
                            <span style="font-size:2rem;">${w.em}</span>
                            <h2 style="margin:0;">${w.w}</h2>
                        </div>
                        <div class="meaning-box" style="color:#e74c3c; margin-top:15px;">${w.m}</div>
                        <div class="etymology-box">🌱 ${w.ety}</div>
                        <div class="example-box">${w.ex}</div>
                        
                        <div class="mastery-row" onclick="event.stopPropagation()">
                            <button class="m-btn" style="background:#e74c3c;" onclick="updateMastery(${idx}, 0)">❌ 忘</button>
                            <button class="m-btn" style="background:#f39c12;" onclick="updateMastery(${idx}, 1)">⚠️ 悩</button>
                            <button class="m-btn" style="background:#2ecc71;" onclick="updateMastery(${idx}, 2)">⭕ 覚</button>
                        </div>
                    </div>
                </div>
            </div>
        `).join('');
    }

function flipItem(el) {
        // カードの要素(.memo-card)を取得して回転クラスをつけ外し
        const card = el.querySelector('.memo-card');
        card.classList.toggle('flipped');
    }

function updateMastery(idx, level) {
        myWords[idx].mastery = level;
        saveData();
        // 現在のリストを再描画せずに、ボタンの見た目だけ変えるなどの処理も可能だが、
        // わかりやすく再描画する（ただしフリップ状態は戻る）
        startMemorize();
    }

function getMasteryIcon(level) {
        return ['❌','⚠️','⭕'][level] || '🆕';
    }

// --- モード切替 ---
    function changeMode(modeId) {
        document.querySelectorAll('.mode-section').forEach(s => s.classList.remove('active'));
        document.querySelectorAll('nav button').forEach(b => b.classList.remove('active'));
        
        document.getElementById(modeId).classList.add('active');
        document.getElementById('nav-' + modeId.split('-')[0]).classList.add('active');
        
        if(modeId === 'study-mode') renderStudyList();
        if(modeId === 'memorize-mode') startMemorize();
    }
</script>

</body>
</html>

キャンセルして新規作成に戻る

📷 素材アップロード

🛠️ プログラム作成 [修正モード]

📂 APP の作品