Skip to content

Commit

Permalink
fix for VedalAI#18
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zyrenth
Zyrenth committed Jun 10, 2024
1 parent d790e5b commit fc1c11d
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 104 deletions.
22 changes: 15 additions & 7 deletions frontend/www/css/modals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,10 @@

.modal {
position: relative;
padding: 20px;

background-color: #111;
border: 1px solid #ffffff1A;

display: flex;
flex-direction: row;
/* justify-content: center; */
gap: 20px;

border-radius: 20px;
font-size: 1rem;

Expand All @@ -42,8 +36,21 @@

-webkit-user-select: none;
user-select: none;
}

.modal-inside-wrapper {
width: 100%;
height: auto;

padding: 20px;

display: flex;
flex-direction: row;
/* justify-content: center; */
gap: 20px;

max-height: 80vh;

overflow-y: auto;
}

Expand Down Expand Up @@ -241,7 +248,8 @@ form label:not([aria-required]) {
}

.modal,
.modal-overlay {
.modal-overlay,
.modal-inside-wrapper {
flex-direction: column;
align-items: center;

Expand Down
196 changes: 99 additions & 97 deletions frontend/www/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,118 +9,120 @@
</head>

<body>
<% if (htmlWebpackPlugin.options.title == "Config") { %>
<% if (htmlWebpackPlugin.options.title=="Config" ) { %>
<h1>This extension is not configurable.</h1>
<% } else { %>
<main>
<div class="onboarding" id="onboarding">
<h2>Welcome to Swarm Control&trade;</h2>

<p>Please authenticate with Twitch in order to continue.</p>
<button id="twitch-login" class="button btn-primary">Authenticate</button>
</div>

<!-- Purchase modal -->
<div class="modal-wrapper" id="modal-wrapper" style="opacity: 0; pointer-events: none;">
<div class="modal">
<img id="modal-image" class="modal-image" src="">
<div class="modal-descriptors">
<!-- Title and description -->
<h2 id="modal-title"></h2>
<p id="modal-description"></p>
<div id="modal-price" style="display: flex; font-size:large; text-emphasis: bold;">
<img src="img/bits.png" class="bits-image">
<p id="modal-bits">X</p>
</div>

<!-- Checkbox, input and dropdown options -->
<div id="modal-options">
<form id="modal-options-form" action="#"></form>
</div>
<% } else { %>
<main>
<div class="onboarding" id="onboarding">
<h2>Welcome to Swarm Control&trade;</h2>

<!-- Buy and cancel buttons -->
<div class="modal-buttons">
<button id="modal-confirm" class="button btn-success">Redeem</button>
<button id="modal-cancel" class="button btn-danger">Cancel</button>
</div>
<p>Please authenticate with Twitch in order to continue.</p>
<button id="twitch-login" class="button btn-primary">Authenticate</button>
</div>

<!-- Modal processing overlay -->
<div class="modal-overlay modal-processing" id="modal-processing"
style="opacity: 0; pointer-events: none;">
<div class="modal-spinner-container">
<div class="spinner"></div>
<p>Processing your request...</p>
</div>
<!-- Purchase modal -->
<div class="modal-wrapper" id="modal-wrapper" style="opacity: 0; pointer-events: none;">
<div class="modal">
<div class="modal-inside-wrapper">
<img id="modal-image" class="modal-image" src="">
<div class="modal-descriptors">
<!-- Title and description -->
<h2 id="modal-title"></h2>
<p id="modal-description"></p>
<div id="modal-price" style="display: flex; font-size:large; text-emphasis: bold;">
<img src="img/bits.png" class="bits-image">
<p id="modal-bits">X</p>
</div>

<!-- Checkbox, input and dropdown options -->
<div id="modal-options">
<form id="modal-options-form" action="#"></form>
</div>

<!-- Buy and cancel buttons -->
<div class="modal-buttons">
<button id="modal-confirm" class="button btn-success">Redeem</button>
<button id="modal-cancel" class="button btn-danger">Cancel</button>
</div>
</div>
</div>

<p id="modal-processing-description"></p>
<!-- Modal processing overlay -->
<div class="modal-overlay modal-processing" id="modal-processing"
style="opacity: 0; pointer-events: none;">
<div class="modal-spinner-container">
<div class="spinner"></div>
<p>Processing your request...</p>
</div>

<!-- Close button -->
<div class="modal-buttons">
<button id="modal-processing-close" class="button btn-danger">Close</button>
</div>
</div>
<p id="modal-processing-description"></p>

<!-- Modal error overlay -->
<div class="modal-overlay" id="modal-error" style="opacity: 0; pointer-events: none;">
<p class="modal-error-x">&#x2715;</p>
<div class="modal-descriptors">
<h2 id="modal-error-title">An error has occurred.</h2>
<p id="modal-error-description"></p>
<!-- Close button -->
<div class="modal-buttons">
<button id="modal-processing-close" class="button btn-danger">Close</button>
</div>
</div>

<!-- Modal error overlay -->
<div class="modal-overlay" id="modal-error" style="opacity: 0; pointer-events: none;">
<p class="modal-error-x">&#x2715;</p>
<div class="modal-descriptors">
<h2 id="modal-error-title">An error has occurred.</h2>
<p id="modal-error-description"></p>

<!-- Close button -->
<div class="modal-buttons">
<button id="modal-error-close" class="button btn-danger">Close</button>
</div>
</div>
</div>

<!-- Close button -->
<div class="modal-buttons">
<button id="modal-error-close" class="button btn-danger">Close</button>
<!-- Modal success overlay -->
<div class="modal-overlay" id="modal-success" style="opacity: 0; pointer-events: none;">
<p class="modal-success-x">&#x2714;</p>
<div class="modal-descriptors">
<h2 id="modal-success-title"></h2>
<p id="modal-success-description"></p>

<!-- Close button -->
<div class="modal-buttons">
<button id="modal-success-close" class="button btn-danger">Close</button>
</div>
</div>
</div>
</div>
</div>

<!-- Modal success overlay -->
<div class="modal-overlay" id="modal-success" style="opacity: 0; pointer-events: none;">
<p class="modal-success-x">&#x2714;</p>
<div class="modal-descriptors">
<h2 id="modal-success-title"></h2>
<p id="modal-success-description"></p>

<!-- Close button -->
<div class="modal-buttons">
<button id="modal-success-close" class="button btn-danger">Close</button>
</div>
<div id="items">
<div class="redeems-content-spinner">
<div class="spinner"></div>
<p>Loading content...</p>
</div>
</div>
</div>
</div>
</main>

<div id="options-templates" style="display:none;">
<div id="modal-dropdown">
<label for="modal-dropdown-input">Choose one</label>
<select id="modal-dropdown-input"></select>
</div>

<div id="items">
<div class="redeems-content-spinner">
<div class="spinner"></div>
<p>Loading content...</p>
<div id="modal-text">
<label for="modal-text-input" id="modal-text-label">Enter text</label>
<input id="modal-text-input" type="text" placeholder="Enter text here">
</div>

<div id="modal-number">
<label for="modal-number-input" id="modal-number-label">Enter number</label>
<input id="modal-number-input" type="text" placeholder="Enter number here">
</div>

<div id="modal-toggle">
<label for="modal-toggle-input" id="modal-toggle-label">Enabled?</label>
<input id="modal-toggle-input" type="checkbox">
</div>
</div>
</div>
</main>

<div id="options-templates" style="display:none;">
<div id="modal-dropdown">
<label for="modal-dropdown-input">Choose one</label>
<select id="modal-dropdown-input"></select>
</div>

<div id="modal-text">
<label for="modal-text-input" id="modal-text-label">Enter text</label>
<input id="modal-text-input" type="text" placeholder="Enter text here">
</div>

<div id="modal-number">
<label for="modal-number-input" id="modal-number-label">Enter number</label>
<input id="modal-number-input" type="text" placeholder="Enter number here">
</div>

<div id="modal-toggle">
<label for="modal-toggle-input" id="modal-toggle-label">Enabled?</label>
<input id="modal-toggle-input" type="checkbox">
</div>
</div>
<% } %>
<% } %>
</body>

</html>
</html>

0 comments on commit fc1c11d

Please sign in to comment.