pomodoro-webext/options.html at master · mamolas/pomodoro-webext · 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
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="pomodoro.css"/>
    <style>
      /* Popup message styles */
      .popup-message {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 20px;
        border-radius: 6px;
        color: white;
        font-weight: 500;
        font-size: 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 10000;
        opacity: 0;
        transform: translateX(100%);
        transition: all 0.3s ease-in-out;
        max-width: 300px;
        word-wrap: break-word;
      }

      .popup-message.show {
        opacity: 1;
        transform: translateX(0);
      }

      .popup-message.fade-out {
        opacity: 0;
        transform: translateX(100%);
      }

      .popup-success {
        background: linear-gradient(135deg, #4CAF50, #45a049);
        border-left: 4px solid #2E7D32;
      }

      .popup-error {
        background: linear-gradient(135deg, #f44336, #d32f2f);
        border-left: 4px solid #c62828;
      }

      .popup-info {
        background: linear-gradient(135deg, var(--clock-min-color, #81B5A1), #6fa085);
        border-left: 4px solid #5a8a6b;
      }

      /* Dark theme support */
      @media (prefers-color-scheme: dark) {
        .popup-message {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
      }

      /* Sound file input styling */
      .sound-file-hidden {
        visibility: hidden;
      }
    </style>
  </head>

  <body>
    <form id="options-form">
      <fieldset>
        <legend>Notification sound</legend>
        <input class="option-input" id="soundEnabled" name="soundEnabled" type="checkbox"/>
        <label class="option-label" for="soundEnabled">Enable notification sound</label><br/>
        <input class="option-input" id="customSound" name="customSound" type="checkbox"/>
        <label class="option-label" for="customSound" title="Check this box if you want to use a custom sound. Only the first 5 seconds will be played. Due to local storage limitation, you will not be allowed to save options if the file is too big.">Use a custom notification sound <img src="../icons/question.png" width="15px"/></label><br/>
        <input class="option-input sound-file-hidden" id="soundFile" name="soundFile" type="file" accept="audio/*"/>
        <span id="customSoundFilename"></span>
        <br/><label class="option-label" for="volume">Notification volume: <span id="volume_value"></span>%</label>&nbsp;<a title="test" href="#" id="volume_test">&#128266;</a>
        <input class="option-input" id="volume" name="volume" min="0" max="100" value="50" step="5" type="range"/>
      </fieldset>
      <fieldset>
        <legend>Other preferences</legend>
        <input class="option-input" id="showMinutes" name="showMinutes" type="checkbox"/>
        <label class="option-label" for="showMinutes">Show minutes on extension icon</label><br/>
        <input class="option-input" id="useAdvancedTimers" name="useAdvancedTimers" type="checkbox"/>
        <label class="option-label" for="useAdvancedTimers" title="Check this box to replace the two standard time scales with a free text field. You can use this field to set a custom comma separated streak/pause durations loop, for example 30,5,30,5,30,30.">Show advanced timers field <img src="../icons/question.png" width="15px"/></label><br/>
        <input class="option-input" id="loopDisabled" name="loopDisabled" type="checkbox"/>
        <label class="option-label" for="loopDisabled" title="Don't cycle through streak and break phases, do single streaks only">Single streaks timer only <img src="../icons/question.png" width="15px"/></label><br/>
      </fieldset>
      <div class="options" id="messages">&nbsp;</div>
      <button class="options" type="submit" id="save">Save</button>
      <button class="options" id="exportStatsJSON">Export usage data in JSON</button>
      <button class="options" id="exportStatsCSV">Export usage data in CSV</button>
    </form>
    <script src="options.js"></script>

  </body>

</html>