auto_clock/auto-clock.css at master · minjune0/auto_clock · 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

        body {
            font-family: 'Malgun Gothic', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
            overflow: hidden;
            transition: background-color 0.2s;
        }

        /* FR5 : 알림 시 흔들림 애니메이션 효과 구현 */
        @keyframes shake-animation {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-3px, -2px) rotate(-1deg); }
            20% { transform: translate(-5px, 0px) rotate(1deg); }
            30% { transform: translate(5px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-5px, 1px) rotate(0deg); }
            70% { transform: translate(5px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }

        body.alarm-active-bg { background-color: #ff4d4d !important; }
        .shake-me { animation: shake-animation 0.2s infinite; }

        .container {
            width: 600px;
            background-color: white;
            border: 2px solid #aaa;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            position: relative;
        }

        .header { display: flex; justify-content: flex-end; margin-bottom: 20px; }
        .battery-box { border: 1px solid #aaa; padding: 5px 15px; background-color: #eee; font-weight: bold; }

        .main-content { display: flex; gap: 20px; margin-bottom: 20px; }
        .clock-section { flex: 2; }
        .label { margin-bottom: 5px; font-weight: bold; color: #333; }

        .clock-display {
            width: 100%; height: 80px; background-color: #e0e0e0;
            border: 1px solid #aaa; display: flex; justify-content: center;
            align-items: center; font-size: 1.2rem; font-weight: bold;
        }

        /* FR2: 배터리 0% 시 검정 배경으로 변경  */
        .clock-display.dead { background-color: black !important; color: black; }
        .clock-display.dead span { visibility: hidden; }

        .alarm-status-section { flex: 1; }
        .alarm-list-box {
            width: 100%; height: 80px; background-color: #e0e0e0;
            border: 1px solid #aaa; overflow-y: auto; padding: 5px; box-sizing: border-box;
        }

        .alarm-item {
            font-size: 0.85rem; border-bottom: 1px solid #ccc;
            padding: 4px; cursor: pointer; display: flex; justify-content: space-between;
        }
        .alarm-item:hover { background-color: #ffcccc; color: #d00; }

        .controls { display: flex; align-items: center; gap: 5px; margin-top: 20px; }
        input[type="number"] { width: 45px; padding: 5px; text-align: center; }
        button { padding: 5px 12px; background-color: #ddd; border: 1px solid #999; cursor: pointer; font-weight: bold; }
        .charge-btn { background-color: #4CAF50; color: white; border: none; margin-left: auto; }

        /* FR5 : 알림 발생 시 알림창 css 구현 */
        #alarmModal {
            display: none;
            position: fixed;
            top: 20px; /* 상단에 고정함 */
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.95);
            padding: 15px 40px;
            border: 3px solid #d00;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            z-index: 1000;
            text-align: center;
            min-width: 300px;
        }
        #alarmModal h2 { margin: 0; color: #d00; font-size: 1.2rem; }
        #alarmModal p { margin: 5px 0; font-weight: bold; }
        #alarmModal button {
            background-color: #d00; color: white; padding: 5px 15px;
            border: none; border-radius: 5px; cursor: pointer;
        }