SmartRenamer/options.html at main · mohammednabarawy/SmartRenamer · 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
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>SmartRenamer</title>
    <style>
      body {
        width: 300px;
        height: 400px; /* Increased the height to accommodate the new section */
        font-family: Arial, sans-serif;
        font-size: 14px;
        padding: 10px;
      }

      h1 {
        font-size: 16px;
        margin-bottom: 10px;
      }

      input[type="checkbox"] {
        margin-bottom: 10px;
      }

      input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
      }

      button {
        padding: 5px 10px;
        background-color: #4caf50;
        color: white;
        border: none;
        cursor: pointer;
      }

      button:hover {
        background-color: #45a049;
      }

      /* Add a tooltip style */
      .tooltip {
        position: relative;
        display: inline-block;
        cursor: help;
      }

      .tooltip-text {
        visibility: hidden;
        width: 200px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%; /* Position above the element */
        left: 50%;
        margin-left: -100px; /* Center the tooltip */
        opacity: 0;
        transition: opacity 0.3s;
      }

      .tooltip:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>SmartRenamer Settings</h1>
    <!-- Checkbox for including website name -->
    <label class="tooltip" for="websiteNameCheckbox">
      <input type="checkbox" id="websiteNameCheckbox" checked />
      Include website name in filename
      <span class="tooltip-text"
        >Include the name of the website in the filename.</span
      >
    </label>
    <br />

    <!-- Checkbox for including date -->
    <label class="tooltip" for="dateCheckbox">
      <input type="checkbox" id="dateCheckbox" checked />
      Include date in filename
      <span class="tooltip-text"
        >Include the current date in the filename.</span
      >
    </label>
    <br />

    <!-- Separator input with tooltip -->
    <label class="tooltip" for="separatorInput">
      Separator character:
      <input
        type="text"
        id="separatorInput"
        placeholder="Separator character (e.g., -)"
      />
      <span class="tooltip-text"
        >Specify the character used to separate elements in the filename.</span
      >
    </label>
    <br />

    <!-- Save button -->
    <button id="saveButton">Save</button>
    <div id="status"></div>

    <!-- Add a section for file type filters -->
    <h2>File Type Filters</h2>
    <div id="fileTypeFilters">
      <!-- Users can define rules for different file types -->
      <div class="file-type-rule">
        <label for="fileTypeImage">Image:</label>
        <input
          type="text"
          id="fileTypeImage"
          placeholder="Image naming scheme"
        />
      </div>
      <div class="file-type-rule">
        <label for="fileTypeDocument">Document:</label>
        <input
          type="text"
          id="fileTypeDocument"
          placeholder="Document naming scheme"
        />
      </div>
      <div class="file-type-rule">
        <label for="fileTypeVideo">Video:</label>
        <input
          type="text"
          id="fileTypeVideo"
          placeholder="Video naming scheme"
        />
      </div>
    </div>

    <h2>Preview</h2>
    <div id="filenamePreview">Preview will appear here</div>
  </body>
</html>