Skip to content

Commit e0add69

Browse files
VyvaHartVyvaHart
authored
Merge pull request #27 from VyvaHart/dev
changed control container design
2 parents 69e80d3 + 2334f86 commit e0add69

File tree

3 files changed

+85
-97
lines changed

3 files changed

+85
-97
lines changed

‎css/leftContainer.css‎

Lines changed: 66 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,91 @@
11
.top-left-container {
22
position: absolute;
33
top: 15px;
4-
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
5-
padding: 15px;
6-
border-radius: 5px;
7-
color: white;
8-
z-index: 100; /* Ensures it stays on top */
4+
background: rgba(0, 0, 0, 0.3); /* Softer, semi-transparent background */
5+
backdrop-filter: blur(8px); /* Blur effect for a frosted glass look */
6+
padding: 20px;
7+
border-radius: 12px;
8+
color: #f1f1f1;
9+
z-index: 100;
910
display: flex;
1011
flex-direction: column;
1112
align-items: flex-start;
12-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
13-
gap: 13px; /* Sets a consistent gap between elements */
14-
/* transition: transform 0.5s ease; Smooth slide transition */
13+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* More prominent shadow */
14+
gap: 15px;
15+
font-family: Arial, sans-serif; /* Clean, readable font */
1516
}
1617

1718
.top-left-container > span {
18-
margin-bottom: 0; /* Removes margin bottom */
19-
font-weight: thin;
20-
font-size: 1.2rem; /* Increases font size */
19+
font-weight: 300;
20+
font-size: 1.1rem;
21+
margin-bottom: 5px;
2122
}
2223

23-
label.max-iterations {
24+
label.max-iterations, .color-compression {
25+
color: #e0e0e0;
26+
font-size: 0.9rem;
2427
display: flex;
2528
flex-direction: column;
26-
align-items: flex-start;
27-
color: white;
28-
margin-bottom: 0; /* Removes margin bottom */
29+
gap: 4px;
2930
}
3031

3132
input {
32-
border: none;
33-
background: transparent;
34-
padding: 5px; /* Adds padding to input fields */
33+
border: 1px solid rgba(255, 255, 255, 0.2);
34+
background: rgba(255, 255, 255, 0.1);
35+
color: #f1f1f1;
36+
padding: 6px;
37+
border-radius: 5px;
38+
transition: background-color 0.3s ease;
39+
}
40+
41+
input:focus {
42+
background-color: rgba(255, 255, 255, 0.2);
3543
}
3644

3745
#theme-select {
38-
margin-bottom: 0; /* Removes margin bottom */
39-
background-color: rgba(100, 83, 83, 0.6); /* Dark background color */
40-
color: white; /* White text color */
41-
padding: 8px;
46+
background-color: rgba(100, 83, 83, 0.6);
47+
color: #f1f1f1;
48+
padding: 10px;
4249
border: none;
43-
border-radius: 8px; /* Rounded corners */
50+
border-radius: 10px;
4451
outline: none;
4552
font-size: 1rem;
46-
width: 100%; /* Optional: makes it fit the container width */
53+
transition: background-color 0.3s ease;
54+
width: 100%;
4755
}
4856

49-
hr {
50-
height: 2px; /* adjust the height to make the line thicker */
51-
width: 100%; /* Makes the line full-width */
52-
border: none; /* remove the default border */
53-
background-color: #ccc; /* change the background color to a lighter gray */
54-
margin: 0 auto; /* Centers the line */
57+
#theme-select:hover {
58+
background-color: rgba(100, 83, 83, 0.8);
5559
}
5660

5761
.button-container {
5862
display: flex;
59-
flex-direction: row;
60-
align-items: center;
61-
justify-content: flex-start; /* Align buttons to the left */
62-
gap: 20px;
63-
width: 100%;
64-
margin-top: 2rem; /* Removes margin top */
6563
justify-content: space-around;
64+
gap: 15px;
65+
width: 100%;
66+
margin-top: 1.5rem;
6667
}
6768

6869
.button-container button {
69-
background: none;
70+
background: rgba(255, 255, 255, 0.1);
7071
border: none;
71-
padding: 0;
72+
border-radius: 8px;
73+
padding: 8px;
7274
cursor: pointer;
73-
width: 25px; /* Increases button size */
74-
height: 25px;
75+
width: 35px;
76+
height: 35px;
77+
transition: transform 0.3s, background 0.3s;
78+
}
79+
80+
.button-container button:hover {
81+
transform: scale(1.1);
82+
background: rgba(255, 255, 255, 0.3);
7583
}
7684

7785
.button-container button img {
7886
width: 100%;
7987
height: 100%;
80-
object-fit: contain; /* Makes sure images fit within buttons */
81-
}
82-
83-
#show-button {
84-
background-color: #33333300;
85-
color: white;
86-
border: none;
87-
padding: 10px; /* Adjust padding to fit the icon */
88-
border-radius: 5px;
89-
cursor: pointer;
90-
background-image: url("/assets/show.png"); /* Path to your image */
91-
background-size: contain; /* Ensures the icon fits within the button */
92-
background-repeat: no-repeat;
93-
background-position: center;
94-
width: 40px; /* Set a width to fit the icon */
95-
height: 40px; /* Set a height to fit the icon */
88+
object-fit: contain;
9689
}
9790

9891
#screenshot-flash {
@@ -105,44 +98,32 @@ hr {
10598
opacity: 0;
10699
pointer-events: none;
107100
transition: opacity 0.3s ease-out;
108-
z-index: 1000; /* Make sure it's above other content */
101+
z-index: 1000;
109102
}
110103

111104
input[type="range"] {
112-
-webkit-appearance: none;
113105
appearance: none;
114-
background: transparent;
115-
cursor: pointer;
116-
width: 10rem; /* Increases range input width */
117-
margin-top: 0; /* Removes margin top */
118-
padding-left: 2px;
119-
}
120-
121-
/* Chrome, Safari, Opera, and Edge Chromium */
122-
input[type="range"]::-webkit-slider-runnable-track {
123-
background: #ffffff;
124-
border-radius: 0.5rem;
125-
height: 0.5rem;
106+
width: 100%;
107+
height: 8px;
108+
background: #f1f1f1;
109+
border-radius: 5px;
110+
outline: none;
111+
margin: 4px 0;
126112
}
127113

128114
input[type="range"]::-webkit-slider-thumb {
129-
-webkit-appearance: none; /* Override default look */
130115
appearance: none;
116+
width: 20px;
117+
height: 20px;
131118
background: rgba(100, 83, 83, 0.6);
132-
border-radius: 0.5rem;
133-
height: 0.5rem;
134-
width: 3rem;
119+
border-radius: 50%;
120+
cursor: pointer;
135121
}
136122

137-
.color-compression {
138-
display: flex;
139-
flex-direction: column;
140-
align-items: start; /* Align items to the start of the container */
141-
gap: 1px; /* Adds a little space */
123+
input[type="range"]::-moz-range-thumb {
124+
width: 20px;
125+
height: 20px;
126+
background: rgba(100, 83, 83, 0.6);
127+
border-radius: 50%;
128+
cursor: pointer;
142129
}
143-
144-
.color-compression input[type="range"] {
145-
margin-top: 0; /* Removes margin top */
146-
width: 100%;
147-
margin-bottom: 0; /* Removes margin bottom */
148-
}

‎css/styles.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,4 +73,18 @@ canvas {
7373
left: 0;
7474
z-index: 2; /* Overlay it above the WebGL canvas */
7575
pointer-events: none; /* Make sure it doesn't block user interactions */
76+
}
77+
78+
#github-button {
79+
position: absolute;
80+
bottom: 20px;
81+
left: 20px;
82+
background-color: transparent;
83+
}
84+
85+
#github-button iframe {
86+
border: none;
87+
padding: 0;
88+
margin: 0;
89+
border-radius: 10px;
7690
}

‎index.html‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,37 +30,26 @@
3030
<input type="range" min="0" max="15" value="8" step="1" />
3131
</label>
3232

33-
<hr>
34-
3533
<div class="color-compression">
3634
<label for="colorCompressionRange">Color Compression: <span id="colorCompressionDisplay">1.0</span></label>
3735
<input type="range" id="colorCompressionRange" min="0.1" max="10" step="0.1" value="1">
3836
</div>
3937

40-
<hr>
41-
4238
<span>Zoom level: <span id="zoom-level">0</span></span>
4339

44-
<!-- <span>Coordinates:</span> -->
45-
<hr>
46-
4740
<label>
4841
Re: <input type="text" id="Re" readonly>
4942
</label>
5043
<label>
5144
Im: <input type="text" id="Im" readonly>
5245
</label>
5346

54-
<hr>
55-
5647
<!-- Control explanation section -->
5748
<div class="control-explanation">
5849
<h3>Controls</h3>
5950
<li>Zoom In/Out: <strong>Q/E</strong></li>
60-
<li>Ctrl+LMB: <strong>Center a point</strong></li>
51+
<li>Center a point: <strong>Ctrl+LMB</strong></li>
6152
</div>
62-
63-
<hr>
6453

6554
<!-- <label for="theme-select">Select color map:</label> -->
6655
<select id="theme-select">
@@ -98,6 +87,10 @@ <h3>Controls</h3>
9887
<div id="screenshot-flash"></div>
9988
</div>
10089

90+
<div id="github-button">
91+
<iframe src="https://ghbtns.com/github-btn.html?user=VyvaHart&repo=MandelbrotGL&type=star&count=true&size=large" frameborder="0" scrolling="0" width="70" height="30" title="GitHub"></iframe>
92+
</div>
93+
10194
<!-- <div id="coordinates"></div> -->
10295

10396
<canvas id="canvas"></canvas>

0 commit comments

Comments
 (0)