mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-19 05:58:37 +03:00
Popup.html redesign - almost done
This commit is contained in:
mmble
@@ -6,113 +6,112 @@
|
||||
<link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css">
|
||||
</head>
|
||||
|
||||
<body id="sponsorblockPopup" class="sponsorBlockPageBody">
|
||||
<div class="logoText">
|
||||
<img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">
|
||||
<p>SponsorBlock</p>
|
||||
</div>
|
||||
<!-- Loading text -->
|
||||
<p id="loadingIndicator" class="">__MSG_noVideoID__</p>
|
||||
<!-- If the video was found in the database -->
|
||||
<p id="videoFound"></p>
|
||||
<p id="downloadedSponsorMessageTimes" class=""></p>
|
||||
<div class="sidebyside">
|
||||
<div id="disableExtension">
|
||||
<!--github: mbledkowski/toggle-switch-->
|
||||
<label for="toggleSwitch" class="toggleSwitchContainer">
|
||||
<input type="checkbox" style="display:none;" id="toggleSwitch" checked>
|
||||
<span class="switchBg shadow"></span>
|
||||
<span class="switchBg white"></span>
|
||||
<span class="switchBg green"></span>
|
||||
<span class="switchDot"></span>
|
||||
</label>
|
||||
<p id="disableSkipping">__MSG_disableSkipping__</p>
|
||||
<p id="enableSkipping" style="display: none">__MSG_enableSkipping__</p>
|
||||
<body style="margin: 0; min-width: 320px;">
|
||||
<div id="sponsorblockPopup" class="sponsorBlockPageBody">
|
||||
<div class="logoText bottomSpace">
|
||||
<img src="icons/IconSponsorBlocker256px.png" height="40px" id="sponsorBlockPopupLogo">
|
||||
<p>SponsorBlock</p>
|
||||
</div>
|
||||
<div id="additionalButtons">
|
||||
<!-- grayedOut until loading complete -->
|
||||
<div id="mainControls" class="grayedOut">
|
||||
<input type="checkbox" style="display:none;" id="whitelistToggle">
|
||||
<label for="whitelistToggle" class="whitelistToggleText">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18">
|
||||
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
|
||||
</svg>
|
||||
<p id="whitelistChannel">__MSG_whitelistChannel__</p>
|
||||
<p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
|
||||
</label>
|
||||
<div id="videoInfo" class="bottomSpace">
|
||||
<div class="bottomSpace">
|
||||
<!-- Loading text -->
|
||||
<p id="loadingIndicator">__MSG_noVideoID__</p>
|
||||
<!-- If the video was found in the database -->
|
||||
<p id="videoFound"></p>
|
||||
</div>
|
||||
<p id="downloadedSponsorMessageTimes"></p>
|
||||
</div>
|
||||
<div class="sidebyside">
|
||||
<div id="disableExtension">
|
||||
<!--github: mbledkowski/toggle-switch-->
|
||||
<label for="toggleSwitch" class="toggleSwitchContainer bottomSpace">
|
||||
<input type="checkbox" style="display:none;" id="toggleSwitch" checked>
|
||||
<span class="switchBg shadow"></span>
|
||||
<span class="switchBg white"></span>
|
||||
<span class="switchBg green"></span>
|
||||
<span class="switchDot"></span>
|
||||
</label>
|
||||
<p id="disableSkipping">__MSG_disableSkipping__</p>
|
||||
<p id="enableSkipping" style="display: none">__MSG_enableSkipping__</p>
|
||||
</div>
|
||||
<div id="additionalButtons">
|
||||
<!-- grayedOut until loading complete -->
|
||||
<div id="mainControls" class="grayedOut bottomSpace" title="__MSG_forceChannelCheckPopup__">
|
||||
<input type="checkbox" style="display:none;" id="whitelistToggle">
|
||||
<label for="whitelistToggle" class="whitelistToggleText">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16">
|
||||
<path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
|
||||
</svg>
|
||||
<p id="whitelistChannel">__MSG_whitelistChannel__</p>
|
||||
<p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
|
||||
</label>
|
||||
</div>
|
||||
<button id="optionsButton" title="__MSG_optionsInfo__">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="16" height="16">
|
||||
__MSG_Options__
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="recordingSubtitle">__MSG_yourWork__</h1>
|
||||
<div class="sidebyside">
|
||||
<div id="usernameElement">
|
||||
<p>__MSG_Username__</p>
|
||||
<div id="setUsernameContainer">
|
||||
<p id="usernameValue"></p>
|
||||
<button id="setUsernameButton" title="__MSG_setUsername__">
|
||||
<img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16">
|
||||
</button>
|
||||
</div>
|
||||
<div id="setUsername" style="display: none">
|
||||
<div id="setUsernameStatusContainer" style="display: none">
|
||||
<p id="setUsernameStatus"></p>
|
||||
</div>
|
||||
<input id="usernameInput" hint="Username"></input>
|
||||
<button id="submitUsername">
|
||||
<img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sponsorTimesContributionsContainer" style="display: none">
|
||||
<p>__MSG_soFarUHSubmited__</p>
|
||||
<span id="sponsorTimesContributionsDisplay">
|
||||
0
|
||||
</span>
|
||||
</div>
|
||||
<button id="optionsButton">
|
||||
<img src="/icons/settings.svg" alt="Settings icon" width="18" height="18">
|
||||
__MSG_Options__
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="recordingSubtitle popupElement">__MSG_yourWork__</h2>
|
||||
|
||||
<p class="popupElement">
|
||||
<span id="sponsorTimesContributionsContainer" class="popupElement" style="display: none">
|
||||
__MSG_soFarUHSubmited__
|
||||
<span id="sponsorTimesContributionsDisplay" class="popupElement">
|
||||
<span id="sponsorTimesViewsContainer" style="display: none">
|
||||
__MSG_savedPeopleFrom__
|
||||
<span id="sponsorTimesViewsDisplay">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
|
||||
<br>
|
||||
(<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
|
||||
<span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
|
||||
<span>__MSG_youHaveSavedTimeEnd__</span>).
|
||||
</span>
|
||||
<div id="sponsorTimesSkipsDoneContainer" style="display: none">
|
||||
__MSG_youHaveSkipped__
|
||||
<span id="sponsorTimesSkipsDoneDisplay">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">__MSG_Sponsors__</span>.
|
||||
</span>
|
||||
<span id="sponsorTimesViewsContainer" class="popupElement" style="display: none">
|
||||
__MSG_savedPeopleFrom__
|
||||
<span id="sponsorTimesViewsDisplay" class="popupElement">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimesViewsDisplayEndWord" class="popupElement">__MSG_Segments__</span>.
|
||||
</span>
|
||||
<span id="sponsorTimesOthersTimeSavedContainer" class="popupElement" style="display: none">
|
||||
__MSG_youHaveSavedTime__
|
||||
<span id="sponsorTimesOthersTimeSavedDisplay" class="popupElement">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimesOthersTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>
|
||||
<span class="popupElement">__MSG_youHaveSavedTimeEnd__</span>
|
||||
</span>
|
||||
<div id="sponsorTimesSkipsDoneContainer" class="popupElement" style="display: none">
|
||||
__MSG_youHaveSkipped__
|
||||
<span id="sponsorTimesSkipsDoneDisplay" class="popupElement">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span>
|
||||
</div>
|
||||
<div id="sponsorTimeSavedContainer" class="popupElement" style="display: none">
|
||||
__MSG_youHaveSaved__
|
||||
<span id="sponsorTimeSavedDisplay" class="popupElement">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>.
|
||||
</div>
|
||||
<div class="popupElement">
|
||||
__MSG_viewLeaderboard__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats"
|
||||
target="_blank">__MSG_here__</a>.
|
||||
</div>
|
||||
</p>
|
||||
<div id="setUsernameContainer" class="popupElement">
|
||||
<button id="setUsernameButton" class="warningButton popupElement">__MSG_setUsername__</button>
|
||||
<sub class="popupElement">
|
||||
__MSG_publicStats__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats"
|
||||
target="_blank">__MSG_here__</a>.
|
||||
</sub>
|
||||
</div>
|
||||
<div id="setUsername" class="popupElement" style="display: none">
|
||||
<h3>__MSG_setUsername__</h3>
|
||||
<div id="setUsernameStatusContainer" style="display: none">
|
||||
<h2 id="setUsernameStatus"></h2>
|
||||
<span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
|
||||
(<b><span id="sponsorTimeSavedDisplay">
|
||||
0
|
||||
</span>
|
||||
<span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
|
||||
</div>
|
||||
<input id="usernameInput" hint="Username"></input>
|
||||
<button id="submitUsername" class="warningButton popupElement">__MSG_setUsername__</button>
|
||||
<a class="discreteLink largeButton" href="https://sponsor.ajay.app/stats"
|
||||
target="_blank">__MSG_viewLeaderboard__</a>
|
||||
<button id="showNoticeAgain" style="display: none">__MSG_showNotice__</button>
|
||||
<footer id="sbFooter">
|
||||
<a href="https://sponsor.ajay.app" target="_blank" rel="noopener">Website</a> |
|
||||
<a href="https://github.com/ajayyy/SponsorBlock" target="_blank" rel="noopener">GitHub</a> |
|
||||
<a href="https://discord.gg/QnmVMpU" target="_blank" rel="noopener">Discord</a> |
|
||||
<a href="https://github.com/ajayyy/SponsorBlock/graphs/contributors" target="_blank" rel="noopener">Credits</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="optionsButtonContainer" class="popupElement">
|
||||
<button id="optionsButton" class="dangerButton popupElement">__MSG_Options__</button>
|
||||
<sub class="popupElement">
|
||||
__MSG_optionsInfo__
|
||||
</sub>
|
||||
</div>
|
||||
<button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
|
||||
<!-- Scripts that need to load after the html -->
|
||||
<script src="./js/vendor.js" async></script>
|
||||
<script src="./js/popup.js" async></script>
|
||||
|
||||
Reference in New Issue
Block a user