Ordenando-Cartas-con-Bubble-Sort/index.html at main · PatsyThePug/Ordenando-Cartas-con-Bubble-Sort · 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
<!DOCTYPE html>
<html lang="es" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bubble Sort Card Visualization</title>
    <link href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center mb-4">
                    <i class="fas fa-sort-amount-up me-2"></i>
                    Ordenando Cartas con Bubble Sort
                </h1>
            </div>
        </div>

        <!-- Controls Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <label for="cardCount" class="form-label">Original:</label>
                                <div class="input-group">
                                    <input type="number" id="cardCount" class="form-control" value="6" min="2" max="20">
                                    <button id="drawBtn" class="btn btn-outline-secondary">
                                        <i class="fas fa-random me-1"></i>draw
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <button id="sortBtn" class="btn btn-success" disabled>
                                    <i class="fas fa-sort me-1"></i>Sort
                                </button>
                            </div>
                            <div class="col-md-4">
                                <button id="resetBtn" class="btn btn-outline-warning">
                                    <i class="fas fa-undo me-1"></i>Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cards Display Section -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-cards me-2"></i>
                            Cards
                        </h5>
                    </div>
                    <div class="card-body">
                        <div id="cardsContainer" class="d-flex flex-wrap justify-content-center gap-3 p-3">
                            <!-- Cards will be generated here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bubble Log Section -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-list me-2"></i>
                            Bubble Log:
                        </h5>
                    </div>
                    <div class="card-body">
                        <div id="bubbleLog" class="bubble-log-container">
                            <div class="text-muted text-center py-3">
                                <i class="fas fa-info-circle me-2"></i>
                                Genera cartas y presiona "Sort" para ver el proceso paso a paso
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Algorithm Info -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title">
                            <i class="fas fa-info-circle me-2"></i>
                            Acerca del Algoritmo Bubble Sort
                        </h6>
                        <p class="card-text small text-muted">
                            El algoritmo Bubble Sort compara elementos adyacentes y los intercambia si están en el orden incorrecto.
                            Este proceso se repite hasta que no se necesiten más intercambios. Es un algoritmo educativo ideal
                            para entender los conceptos básicos de ordenamiento.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="script.js"></script>
</body>
</html>