Hugging Face's logo

Spaces:
Lashtw
/
VibeCodeingRenew
Running

App Files Community
VibeCodeingRenew
File size: 4,988 Bytes
945eb9e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
import { createRoom, joinRoom } from "../services/classroom.js";
import { generateMonsterSVG, MONSTER_DEFS } from "../utils/monsterUtils.js";

export function renderLandingView() {
    // Select Decor Monsters
    // Left: Genesis Dragon (L3_AAA), Right: Gundam (L3_BAA) - or fallbacks
    const mLeft = MONSTER_DEFS.find(m => m.id === 'L3_AAA') || MONSTER_DEFS.find(m => m.stage === 3);
    const mRight = MONSTER_DEFS.find(m => m.id === 'L3_BAA') || MONSTER_DEFS.find(m => m.stage === 3);

    const svgLeft = generateMonsterSVG(mLeft);
    const svgRight = generateMonsterSVG(mRight);

    return `

    <div class="min-h-screen flex flex-col items-center justify-center p-4 relative overflow-hidden">

        

        <!-- Decor Monsters (Desktop Only) -->

        <div class="absolute bottom-10 left-10 w-48 h-48 hidden lg:block pointer-events-none" 

             style="animation: float 6s ease-in-out infinite;">

             <div class="w-full h-full drop-shadow-[0_0_15px_rgba(34,211,238,0.5)]">

                ${svgLeft}

             </div>

        </div>

        <div class="absolute bottom-10 right-10 w-48 h-48 hidden lg:block pointer-events-none" 

             style="animation: float 8s ease-in-out infinite reverse;">

             <div class="w-full h-full drop-shadow-[0_0_15px_rgba(59,130,246,0.5)]">

                ${svgRight}

             </div>

        </div>



        <div class="max-w-md w-full bg-gray-600 bg-opacity-20 backdrop-blur-lg rounded-xl shadow-2xl p-8 border border-gray-700 z-10">

            <h1 class="text-3xl sm:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 mb-8 text-center tracking-tighter whitespace-nowrap">

                VIBECODING-怪獸成長營

            </h1>

            

            <!-- Student Join Form -->

            <div id="student-form" class="space-y-6">

                <div>

                    <label class="block text-gray-400 text-sm font-bold mb-2">教室代碼 (Room Code)</label>

                    <input type="text" id="room-code-input" class="w-full bg-gray-800 text-white border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:border-cyan-500 transition-colors" placeholder="1234">

                </div>

                <div>

                    <label class="block text-gray-400 text-sm font-bold mb-2">您的暱稱 (Nickname)</label>

                    <input type="text" id="nickname-input" class="w-full bg-gray-800 text-white border border-gray-600 rounded-lg py-3 px-4 focus:outline-none focus:border-purple-500 transition-colors" placeholder="小明">

                </div>

                <button id="join-btn" class="w-full bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white font-bold py-3 px-4 rounded-lg transform transition hover:scale-105 active:scale-95 shadow-lg shadow-cyan-500/30">

                    進入教室

                </button>

            </div>



            <!-- Instructor Toggle -->

            <div class="mt-8 pt-6 border-t border-gray-700 text-center">

                <button id="instructor-mode-btn" class="text-gray-500 text-sm hover:text-cyan-400 transition-colors">

                    我是講師 (Instructor Mode)

                </button>

            </div>

        </div>

        

        <style>

            @keyframes float {

                0%, 100% { transform: translateY(0); }

                50% { transform: translateY(-20px); }

            }

        </style>

    </div>

    `;
}

export function setupLandingEvents(navigateTo) {
    const joinBtn = document.getElementById('join-btn');
    const instructorBtn = document.getElementById('instructor-mode-btn');

    joinBtn.addEventListener('click', async () => {
        const roomCode = document.getElementById('room-code-input').value.trim();
        const nickname = document.getElementById('nickname-input').value.trim();

        if (!roomCode || !nickname) {
            alert('請輸入教室代碼和暱稱');
            return;
        }

        try {
            joinBtn.textContent = '加入中...';
            joinBtn.disabled = true;

            const studentId = await joinRoom(roomCode, nickname);

            // Save Session
            localStorage.setItem('vibecoding_user_id', studentId);
            localStorage.setItem('vibecoding_room_code', roomCode);
            localStorage.setItem('vibecoding_nickname', nickname);

            navigateTo('student');
        } catch (error) {
            alert('加入失敗: ' + error.message);
            joinBtn.textContent = '進入教室';
            joinBtn.disabled = false;
        }
    });

    instructorBtn.addEventListener('click', () => {
        // Clear any previous admin referer to ensure clean state
        localStorage.removeItem('vibecoding_admin_referer');
        navigateTo('instructor');
    });
}