CourageJar/courage_jar.html at main · yeonhw/CourageJar · 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
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的勇气罐子</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <h1>我的勇气罐子</h1>
        <p>储存你的勇气与成就，在需要时汲取力量</p>
      </header>

      <main>
        <!-- 玻璃罐展示区域 -->
        <section class="jar-section">
          <div class="jar-container">
            <!-- 玻璃罐 -->
            <div class="glass-jar" id="glassJar">
              <!-- 罐口 -->
              <div class="jar-mouth">
                <!-- 玻璃盖 -->
                <div class="jar-lid"></div>
                <!-- 金属扣环 -->
                <div class="jar-clasp"></div>
              </div>
              <!-- 罐身 -->
              <div class="jar-body">
                <!-- 纸团容器 -->
                <div class="paper-balls-container" id="paperBallsContainer">
                  <!-- 纸团将通过JavaScript动态生成 -->
                </div>
              </div>
              <!-- 罐底 -->
              <div class="jar-base"></div>
            </div>

            <!-- 控制按钮 -->
            <div class="jar-controls">
              <button class="btn btn-primary" id="shakeBtn">摇晃罐子</button>
              <button class="btn btn-secondary" id="addNoteBtn">
                添加勇气纸条
              </button>
            </div>

            <!-- 纸团数量 -->
            <div class="jar-stats">
              <span>勇气积蓄：</span>
              <span class="paper-count" id="paperCount">0</span>
              <span> 个纸团</span>
            </div>
          </div>
        </section>

        <!-- 添加纸条表单 -->
        <section class="add-note-section" id="addNoteSection">
          <h2>添加勇气纸条</h2>
          <form id="addNoteForm">
            <div class="form-group">
              <label for="noteContent"
                >“勇气”并不等同于伟大成就，它可以是： • 做成了一件小事 •
                没有放弃的一天 • 一句话带来的支撑 • 某个仍然选择继续的瞬间
              </label>
              <textarea
                id="noteContent"
                rows="4"
                placeholder="例如：今天我完成了一个重要的项目，我很棒！"
                required
              ></textarea>
            </div>
            <div class="form-actions">
              <button type="submit" class="btn btn-primary">放入罐子</button>
              <button type="button" class="btn btn-secondary" id="cancelBtn">
                取消
              </button>
            </div>
          </form>
        </section>
      </main>

      <!-- 纸团展示/编辑模态框 -->
      <div id="noteModal" class="modal">
        <div class="modal-content">
          <span class="close">&times;</span>
          <!-- 纸团打开动画 -->
          <div class="paper-opening-animation" id="paperOpeningAnimation">
            <div class="paper-ball" id="selectedPaperBall"></div>
            <div class="note-paper" id="notePaper">
              <textarea
                class="note-content"
                id="noteContentDisplay"
                placeholder="“勇气”并不等同于伟大成就，它可以是：
•	做成了一件小事
•	没有放弃的一天
•	一句话带来的支撑
•	某个仍然选择继续的瞬间
"
              ></textarea>
            </div>
            <!-- 编辑操作按钮 -->
            <div class="modal-actions" id="modalActions" style="display: none">
              <button class="btn btn-primary" id="saveNoteBtn">
                保存并放入罐子
              </button>
              <button class="btn btn-secondary" id="cancelEditBtn">取消</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 新纸团放入动画 -->
      <div id="newPaperBall" class="paper-ball new-paper-ball"></div>
    </div>

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