Classical-Ciphers/disk_visualization.html at main · Glasspham/Classical-Ciphers · 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
132
<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" href="Pic/icon.ico" />
    <title>Disk Visualization</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="CSS/styles.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  </head>
  <body>
    <main class="container mt-4">
      <div class="cipher-header mb-3">
        <h1 class="display-4"><i class="fas fa-circle-notch text-info me-3"></i>Cipher Disk Visualization</h1>
      </div>
      <div class="row">
        <!-- Controls Section -->
        <div class="col-lg-6">
          <div class="cipher-tools">
            <h4><i class="fas fa-cogs text-info me-2"></i>Điều khiển</h4>

            <div class="form-group">
              <label for="outer-disk-input" class="form-label">Vòng ngoài (Outer Ring):</label>
              <input type="text" id="outer-disk-input" class="form-control text-mono" maxlength="30" value="AWCDEUGILMNOPQRSTVXY12KH" />
              <small class="text-light">Các ký tự cho vòng ngoài.</small>
            </div>

            <div class="form-group">
              <label for="inner-disk-input" class="form-label">Vòng trong (Inner Ring):</label>
              <input type="text" id="inner-disk-input" class="form-control text-mono" maxlength="30" value="DLGAZENBOSFCHTYQIXKVP&MR" />
              <small class="text-light">Các ký tự cho vòng trong.</small>
            </div>

            <div class="form-group">
              <label for="outer-align-input" class="form-label">Căn chỉnh vòng ngoài (12h):</label>
              <input type="text" id="outer-align-input" class="form-control" maxlength="1" value="A" />
              <small class="text-light">Ký tự của vòng ngoài sẽ được xoay lên vị trí 12 giờ.</small>
            </div>

            <div class="form-group">
              <label for="inner-align-input" class="form-label">Căn chỉnh vòng trong (12h):</label>
              <input type="text" id="inner-align-input" class="form-control" maxlength="1" value="D" />
              <small class="text-light">Ký tự của vòng trong sẽ được xoay lên vị trí 12 giờ.</small>
            </div>
          </div>
        </div>

        <!-- Visualization Section -->
        <div class="col-lg-6 text-dark">
          <div class="visualization-container text-center position-relative">
            <button id="settings-btn" class="btn btn-outline-light position-absolute top-0 start-0 m-2" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-title="Cài đặt xoay" data-bs-html="true">
              <i class="fas fa-cog"></i>
            </button>
            <template id="popover-content">
              <div>
                <fieldset class="mb-2">
                  <legend class="form-label fs-6">Đối tượng xoay:</legend>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="rotationTarget" id="rotate-inner-radio" value="inner" checked />
                    <label class="form-check-label" for="rotate-inner-radio">Vòng trong</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="rotationTarget" id="rotate-outer-radio" value="outer" />
                    <label class="form-check-label" for="rotate-outer-radio">Vòng ngoài</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="rotationTarget" id="rotate-both-radio" value="both" />
                    <label class="form-check-label" for="rotate-both-radio">Cả hai vòng</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="rotationTarget" id="rotate-none-radio" value="none" />
                    <label class="form-check-label" for="rotate-none-radio">Không xoay</label>
                  </div>
                </fieldset>
                <fieldset id="rotation-mode-group">
                  <legend class="form-label fs-6">Chế độ xoay:</legend>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="rotationMode" id="rotate-snap-radio" value="snap" checked />
                    <label class="form-check-label" for="rotate-snap-radio">Xoay theo khối (Snap)</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="radio" name="rotationMode" id="rotate-free-radio" value="free" />
                    <label class="form-check-label" for="rotate-free-radio">Xoay tự do (Free)</label>
                  </div>
                </fieldset>
              </div>
            </template>
            <br />
            <h4><i class="fas fa-eye text-info me-2"></i>Interactive Cipher Disk</h4>
            <br />
            <canvas id="cipher-disk-viz" width="300" height="300" class="cipher-disk-canvas"></canvas>
            <br />
            <small class="small text-secondary">Xoay các vòng bằng cách thay đổi ký tự căn chỉnh bên bảng điều khiển hoặc xoay vòng.</small>
            <div id="rotation-buttons-container" class="mt-3">
              <!-- Generic controls for inner/outer mode -->
              <div id="generic-rotation-controls" class="d-flex justify-content-center gap-2">
                <button id="rotate-left-btn" class="btn btn-outline-info"><i class="fas fa-undo-alt"></i></button>
                <button id="rotate-right-btn" class="btn btn-outline-info"><i class="fas fa-redo-alt"></i></button>
              </div>
              <!-- Specific controls for 'both' mode -->
              <div id="both-rotation-controls" class="d-none">
                <div class="d-flex justify-content-center align-items-center gap-3">
                  <!-- Inner Ring Controls -->
                  <div class="text-center">
                    <small class="text-secondary">Vòng trong</small>
                    <div class="d-flex gap-2">
                      <button id="inner-rotate-left-btn" class="btn btn-outline-primary"><i class="fas fa-undo-alt"></i></button>
                      <button id="inner-rotate-right-btn" class="btn btn-outline-primary"><i class="fas fa-redo-alt"></i></button>
                    </div>
                  </div>
                  <!-- Outer Ring Controls -->
                  <div class="text-center">
                    <small class="text-secondary">Vòng ngoài</small>
                    <div class="d-flex gap-2">
                      <button id="outer-rotate-left-btn" class="btn btn-outline-success"><i class="fas fa-undo-alt"></i></button>
                      <button id="outer-rotate-right-btn" class="btn btn-outline-success"><i class="fas fa-redo-alt"></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./JS/disk_visualization.js"></script>
    <script src="./JS/navbar.js"></script>
    <script src="./JS/footer.js"></script>
  </body>
</html>