Skip to content

Commit 7cc955f

Browse files
justlxjustlx
committed
Sub fight widget
1 parent 55ec9e1 commit 7cc955f

File tree

6 files changed

+984
-0
lines changed

6 files changed

+984
-0
lines changed

‎SubFight/widget.css‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
* {
2+
font-family: '{{fontName}}', sans-serif;
3+
color: {{fontColor}};
4+
font-size: {{fontSize}}px;
5+
font-weight: {{fontWeight}};
6+
overflow: hidden;
7+
text-align: {{textAlign}};
8+
-webkit-text-stroke-width: {{strokeSize}}px;
9+
-webkit-text-stroke-color: {{strokeColor}};
10+
box-sizing: border-box;
11+
}
12+
13+
.battle-container {
14+
width: 100vw;
15+
height: auto;
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: flex-start;
19+
align-items: center;
20+
padding: 20px 0 0 0;
21+
margin: 0;
22+
background: transparent;
23+
position: fixed;
24+
top: 0;
25+
left: 0;
26+
}
27+
28+
.connected-bar-container {
29+
width: 100%;
30+
padding: 0 20px;
31+
margin-bottom: 10px;
32+
}
33+
34+
.connected-bar {
35+
display: flex;
36+
height: {{barHeight}}px;
37+
background-color: {{barBackgroundColor}};
38+
border-radius: 10px;
39+
overflow: hidden;
40+
position: relative;
41+
}
42+
43+
.bar-segment {
44+
flex: 1;
45+
position: relative;
46+
display: flex;
47+
align-items: center;
48+
justify-content: center;
49+
transition: flex 0.3s ease;
50+
}
51+
52+
.bar-left {
53+
background-color: {{optionAColor}};
54+
border-radius: 10px 0 0 10px;
55+
}
56+
57+
.bar-right {
58+
background-color: {{optionBColor}};
59+
border-radius: 0 10px 10px 0;
60+
}
61+
62+
.bar-center {
63+
position: absolute;
64+
top: 50%;
65+
left: 50%;
66+
transform: translate(-50%, -50%);
67+
z-index: 20;
68+
min-width: 80px;
69+
}
70+
71+
.vs-overlay {
72+
background-color: rgba(0, 0, 0, 0.8);
73+
border-radius: 8px;
74+
padding: 8px;
75+
text-align: center;
76+
border: 2px solid rgba(255, 255, 255, 0.3);
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
}
81+
82+
.vs-logo {
83+
max-width: 40px;
84+
max-height: 40px;
85+
width: auto;
86+
height: auto;
87+
}
88+
89+
.points-display {
90+
font-size: {{fontSize}}px;
91+
font-weight: bold;
92+
color: white;
93+
-webkit-text-stroke-width: 2px;
94+
-webkit-text-stroke-color: rgba(0, 0, 0, 0.8);
95+
z-index: 10;
96+
position: absolute;
97+
top: 50%;
98+
transform: translateY(-50%);
99+
}
100+
101+
.points-left {
102+
left: 15px;
103+
}
104+
105+
.points-right {
106+
right: 15px;
107+
}
108+
109+
.info-section {
110+
width: 100%;
111+
padding: 0 20px;
112+
margin-bottom: 20px;
113+
position: relative;
114+
height: 60px;
115+
}
116+
117+
.timer-wrapper {
118+
width: 100%;
119+
position: absolute;
120+
top: 0;
121+
left: 0;
122+
text-align: center;
123+
}
124+
125+
.timer-display {
126+
font-size: {{fontSize}}px;
127+
font-weight: bold;
128+
color: {{fontColor}};
129+
-webkit-text-stroke-width: {{strokeSize}}px;
130+
-webkit-text-stroke-color: {{strokeColor}};
131+
background-color: rgba(0, 0, 0, 0.7);
132+
padding: 8px 16px;
133+
border-radius: 8px;
134+
display: inline-block;
135+
border: 2px solid rgba(255, 255, 255, 0.3);
136+
}
137+
138+
.option-labels {
139+
position: absolute;
140+
top: 0px;
141+
left: 0;
142+
padding: 0 30px;
143+
width: 100%;
144+
display: flex;
145+
justify-content: space-between;
146+
}
147+
148+
.option-label {
149+
font-size: {{fontSize}}px;
150+
font-weight: {{fontWeight}};
151+
color: {{fontColor}};
152+
-webkit-text-stroke-width: {{strokeSize}}px;
153+
-webkit-text-stroke-color: {{strokeColor}};
154+
}
155+
156+
.option-label:first-child {
157+
text-align: left;
158+
}
159+
160+
.option-label:last-child {
161+
text-align: right;
162+
}
163+
164+
.helper-text {
165+
text-align: center;
166+
font-size: {{fontSize}}px;
167+
color: {{fontColor}};
168+
-webkit-text-stroke-width: {{strokeSize}}px;
169+
-webkit-text-stroke-color: {{strokeColor}};
170+
margin-bottom: 20px;
171+
opacity: 0.8;
172+
}
173+
174+
.demo-section {
175+
text-align: center;
176+
}
177+
178+
.demo-button {
179+
background-color: rgba(255, 255, 255, 0.2);
180+
border: 2px solid {{fontColor}};
181+
border-radius: 8px;
182+
padding: 10px 20px;
183+
font-size: {{fontSize}}px;
184+
font-weight: {{fontWeight}};
185+
color: {{fontColor}};
186+
-webkit-text-stroke-width: {{strokeSize}}px;
187+
-webkit-text-stroke-color: {{strokeColor}};
188+
cursor: pointer;
189+
transition: all 0.3s ease;
190+
}
191+
192+
.demo-button:hover {
193+
background-color: rgba(255, 255, 255, 0.3);
194+
transform: scale(1.05);
195+
}

‎SubFight/widget.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<link href="https://fonts.googleapis.com/css?family={{fontName}}:400,{{fontWeight}}" rel="stylesheet">
2+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3+
<div class="battle-container" id="battleContainer" style="display: none;">
4+
<div class="connected-bar-container">
5+
<div class="connected-bar">
6+
<div class="bar-segment bar-left" id="bar1">
7+
<div class="points-display points-left" id="pointsA">0</div>
8+
</div>
9+
<div class="bar-center">
10+
<div class="vs-overlay">
11+
<img src="https://cdn.streamelements.com/assets/campari/Images/Logos/SE.png" alt="VS" class="vs-logo">
12+
</div>
13+
</div>
14+
<div class="bar-segment bar-right" id="bar2">
15+
<div class="points-display points-right" id="pointsB">0</div>
16+
</div>
17+
</div>
18+
</div>
19+
<div class="info-section">
20+
<div class="timer-wrapper">
21+
<div class="timer-display" id="countdown">0:00</div>
22+
</div>
23+
<div class="option-labels">
24+
<div class="option-label" id="labelA">Option A</div>
25+
<div class="option-label" id="labelB">Option B</div>
26+
</div>
27+
</div>
28+
<div class="helper-text" id="helperText" style="display: none;">
29+
Use !vs [seconds] [option A]; [option B] to start a battle
30+
</div>
31+
</div>

0 commit comments

Comments
 (0)