Graph-Visualizer-Project/index.html at main · Sortable/Graph-Visualizer-Project · GitHub

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Graph Theory Visualizer </title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="theme-pink">

    <header>
        <div class="logo" onclick="toggleTheme()">COPIGEMGPT<span>.NET</span></div>
        <nav id="auth-nav">
            <button class="btn-login-top" onclick="showAuthPage('login')">LOGIN</button>
            <button class="btn-reg-top" onclick="showAuthPage('register')">REGISTER</button>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h1>LÝ THUYẾT ĐỒ THỊ</h1>
            <div class="search-container">
                <input type="text" id="algo-search" placeholder="Nhập tên thuật toán (Dijkstra, Prim...)" onkeypress="handleEnterSearch(event)">
                    <button onclick="executeSearch()">TÌM KIẾM</button>
            </div>
        </section>

       <section class="algo-grid">
            <div class="card card-prim" onclick="goToAlgo('Prim')">
                <img src="images/prim.png" alt="Prim">
                <span>Prim's Algorithm</span>
            </div>
            <div class="card card-dfs" onclick="goToAlgo('DFS')">
                <img src="images/DFS.png" alt="DFS">
                <span>DFS Search</span>
            </div>
            <div class="card card-ford" onclick="goToAlgo('Ford-Bellman')">
                <img src="images/ford.png" alt="Ford-Bellman">
                <span>Ford-Bellman</span>
            </div>
            <div class="card card-dijkstra" onclick="goToAlgo('Dijkstra')">
                <img src="images/dijsktra.png" alt="Dijkstra">
                <span>Dijkstra</span>
            </div>
            <div class="card card-kruskal" onclick="goToAlgo('Kruskal')">
                <img src="images/kruskal.png" alt="Kruskal">
                <span>Kruskal's Algorithm</span>
            </div>
        </section>

        <section id="algo-workspace" style="display: none;">
            <div class="workspace-header">
                <button class="btn-back" onclick="goBackHome()">← QUAY LẠI</button>
                <h2 id="workspace-title">THUẬT TOÁN</h2>
            </div>

            <div class="workspace-layout">
                <div class="glass-panel left-panel">
                    <h3 class="panel-title">BẢNG NHẬP LIỆU</h3>
                    <div class="input-group">
                        <label>Đỉnh bắt đầu:</label>
                        <input type="text" placeholder="VD: 1, A, S...">
                    </div>
                    <div class="input-group">
                        <label>Danh sách cạnh (u v w):</label>
                        <textarea placeholder="Nhập định dạng: u v w&#10;1 2 5&#10;2 3 7"></textarea>
                    </div>
                    <button class="btn-mock-run" onclick="mockRunAlgo()">CHẠY THUẬT TOÁN</button>

                    <div class="divider"></div>

                    <h3 class="panel-title">KẾT QUẢ THUẬT TOÁN</h3>
                    <div id="result-container" class="result-container">
                        <div class="result-item">
                            <h4>Trạng Thái</h4>
                            <p id="res-status" class="res-value placeholder">Đang chờ dữ liệu...</p>
                        </div>
                        <div class="result-item">
                            <h4 id="res-title-main">Kết Quả Trả Về</h4>
                            <div id="res-main" class="res-box placeholder">Chưa có dữ liệu.</div>
                        </div>
                        <div class="result-item">
                            <h4 id="res-title-sub">Thông Số Chi Tiết</h4>
                            <p id="res-sub" class="res-value placeholder">--</p>
                        </div>
                    </div>
                </div>

                <div class="right-panel">
                    <div class="glass-panel map-panel">
                        <h3 class="panel-title">MÔ PHỎNG ĐỒ THỊ</h3>
                        <div class="map-container" id="graph-map">
                            <span class="placeholder">Bản đồ đồ thị sẽ hiển thị ở đây...</span>
                        </div>
                    </div>

                    <div class="glass-panel execution-panel">
                        <h3 class="panel-title">CÁC BƯỚC THỰC HIỆN</h3>
                        <div class="execution-log" id="execution-log">
                            <span class="placeholder">Chờ chạy thuật toán để xem chi tiết từng bước...</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <div id="auth-page" class="auth-overlay">
        <div class="auth-box">
            <h2 id="auth-title">LOGIN</h2>
            <input type="text" id="user-email" placeholder="Nhập Username...">
            <input type="password" id="user-pass" placeholder="Nhập Password...">
            <p id="error-msg" class="error-text"></p>

            <div id="login-actions">
                <button class="btn-action-main" onclick="processLogin()">ĐĂNG NHẬP</button>
                <hr>
                <button class="btn-action-sub" onclick="showAuthPage('register')">Đăng ký tài khoản mới</button>
            </div>

            <div id="register-actions" style="display:none;">
                <button class="btn-action-main" onclick="processRegister()">XÁC NHẬN ĐĂNG KÝ</button>
                <button class="btn-action-sub" onclick="showAuthPage('login')">Quay lại Đăng nhập</button>
            </div>

            <button class="btn-close-text" onclick="hideAuthPage()">Đóng cửa sổ</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>