Skip to content

Commit

Permalink
Improve: Styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sudo-Ivan
Sudo-Ivan committed Nov 18, 2023
1 parent e1575d6 commit e2bf66f
Showing 1 changed file with 34 additions and 30 deletions.
64 changes: 34 additions & 30 deletions html/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,38 +10,42 @@
<div class="popup-container">
<header class="popup-header">
<h1 class="popup-title">Custom Text Replacer</h1>
<nav class="popup-nav">
<button id="homeTab" class="tab-btn active" aria-controls="homeContent" aria-selected="true">Home</button>
<button id="settingsTab" class="tab-btn" aria-controls="settingsContent" aria-selected="false">Settings</button>
<nav class="popup-nav" role="tablist">
<button id="homeTab" class="tab-btn active" aria-controls="homeContent" aria-selected="true" aria-expanded="true">Home</button>
<button id="settingsTab" class="tab-btn" aria-controls="settingsContent" aria-selected="false" aria-expanded="false">Settings</button>
</nav>
</header>
<section id="homeContent" class="content active" role="tabpanel" aria-labelledby="homeTab">
<div id="replacements-list" class="replacements-list"></div>
<div class="input-group">
<input type="text" id="originalTextPopup" placeholder="Original text" class="input-field">
<input type="text" id="newTextPopup" placeholder="New text" class="input-field">
<button id="addButton" class="btn add-btn">Add</button>
</div>
</section>
<section id="settingsContent" class="content" role="tabpanel" aria-labelledby="settingsTab" hidden>
<div class="settings-item">
<label for="toggleReplacement">Enable Text Replacement:</label>
<input type="checkbox" id="toggleReplacement" checked>
</div>
<div class="settings-item">
<label for="caseSensitive">Case Sensitive Replacement:</label>
<input type="checkbox" id="caseSensitive">
</div>
<div class="settings-item">
<label for="matchWholeWord">Match Whole Words Only:</label>
<input type="checkbox" id="matchWholeWord">
</div>
<div class="settings-item">
<button id="saveSettings" class="btn save-btn">Save Settings</button>
</div>
<div id="status" class="status-message"></div>
<div id="error" class="error-message"></div>
</section>
<main>
<section id="homeContent" class="content active" role="tabpanel" aria-labelledby="homeTab">
<div id="replacements-list" class="replacements-list"></div>
<div class="input-group">
<input type="text" id="originalTextPopup" placeholder="Original text" class="input-field">
<input type="text" id="newTextPopup" placeholder="New text" class="input-field">
<button id="addButton" class="btn add-btn">Add</button>
</div>
</section>
<section id="settingsContent" class="content" role="tabpanel" aria-labelledby="settingsTab" hidden>
<div class="settings-item">
<label for="toggleReplacement">Enable Text Replacement:</label>
<input type="checkbox" id="toggleReplacement" checked>
</div>
<div class="settings-item">
<label for="caseSensitive">Case Sensitive Replacement:</label>
<input type="checkbox" id="caseSensitive">
</div>
<div class="settings-item">
<label for="matchWholeWord">Match Whole Words Only:</label>
<input type="checkbox" id="matchWholeWord">
</div>
<div class="settings-item">
<button id="saveSettings" class="btn save-btn">Save Settings</button>
</div>
<div id="status" class="status-message"></div>
<div id="error" class="error-message"></div>
</section>
</main>
<footer class="popup-footer">
</footer>
</div>
<script src="../js/popup.js"></script>
</body>
Expand Down

0 comments on commit e2bf66f

Please sign in to comment.