Skip to content

Commit

Permalink
Merge pull request #34 from Harshil-kumar-4/main
Browse files Browse the repository at this point in the history 
added feature to switch between dark and light theme
  • Loading branch information
@Dev-tanay
Dev-tanay authored Jul 22, 2024
2 parents 05c8327 + e2111f3 commit 3e85c84
Show file tree
Hide file tree
Showing 5 changed files with 445 additions and 4 deletions.
Binary file added images/BulpOff.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/BulpOn.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 45 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
<link rel="icon" type="image/x-icon" href="images\icon.png">

<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><link rel="stylesheet" href="./style.css">
<link rel="stylesheet" src="style.css">
</head>

<body>

<img id="bulp" src="BulpOn.png" onclick="changeImage()">
<div class="ui">

<style>
.con {
width : 600px;
Expand Down Expand Up @@ -163,6 +171,14 @@ <h1> TIME START NOW</h1>
<range name="lightness" title="Lightness" color></range>
</div>

<div class="ui__prefs">
<range class="p1" name="size" title="Cube Size" list="2,3,4,5"></range>
<range class="p2" name="flip" title="Flip Type" list="Swift&nbsp;,Smooth,Bounce"></range>
<range class="p3" name="scramble" title="Scramble Length" list="20,25,30"></range>
<range class="p4" name="fov" title="Camera Angle" list="Ortographic,Perspective"></range>
<range class="p5" name="theme" title="Color Scheme" list="Cube,Erno,Dust,Camo,Rain"></range>
</div>

<div class="ui__stats">

<div class="stats" name="cube-size">
Expand All @@ -187,6 +203,27 @@ <h1> TIME START NOW</h1>
<i>Average of 25:</i><b>-</b>
</div>

<div class="ui__stats">
<div class="stats" name="cube-size">
<i class="t1">Cube:</i><b>3x3x3</b>
</div>
<div class="stats" name="total-solves">
<i class="t2">Total solves:</i><b>-</b>
</div>
<div class="stats" name="best-time">
<i class="t3">Best time:</i><b>-</b>
</div>
<div class="stats" name="worst-time">
<i class="t4">Worst time:</i><b>-</b>
</div>
<div class="stats" name="average-5">
<i class="t5">Average of 5:</i><b>-</b>
</div>
<div class="stats" name="average-12">
<i class="t6">Average of 12:</i><b>-</b>
</div>
<div class="stats" name="average-25">
<i class="t7">Average of 25:</i><b>-</b>
</div>

<div class="ui__buttons">
Expand Down Expand Up @@ -266,19 +303,21 @@ <h1> TIME START NOW</h1>


<div class="ui__buttons">
<button class="btn btn--bl btn--stats">
<button id="b1" class="btn btn--bl btn--stats">
<icon trophy></icon>
</button>
<button class="btn btn--br btn--prefs">
<button id="b2" class="btn btn--br btn--prefs">
<icon settings></icon>
</button>
<button id="b3" class="btn btn--bl btn--back">

<button class="btn btn--tl btn--back">
<icon back></icon>
</button>
<button class="btn btn--br btn--theme">
<button id="b4" class="btn btn--br btn--theme">
<icon theme></icon>
</button>
<button class="btn btn--br btn--reset">
<button id="b5" class="btn btn--br btn--reset">
<icon reset></icon>
</button>
<div class="main_B">
Expand Down Expand Up @@ -458,6 +497,8 @@ <h2>2. Changing the view of the cube</h2>
</div>

<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js'></script><script src="script.js"></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js'></script><script src="./script.js"></script>
<script>
window.addEventListener("load", () => {
Expand Down
44 changes: 44 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4173,6 +4173,50 @@ function rotateU() {
const move = { axis: 'y', angle: -Math.PI / 2 };
game.controls.keyboardMove('LAYER', { position: new THREE.Vector3(0, 1, 0), axis: move.axis, angle: move.angle });
}
//adding interactivity for the image

let currentImage = "BulpOn.png";
let imageOn = "BulpOn.png";
let imageOff = "BulpOff.png";
function changeImage() {
if (currentImage === imageOn) {
document.getElementById("bulp").src = imageOff;
document.querySelector('.ui__background').style.backgroundColor = "black";
document.querySelector('.ui').style.color = "white";
document.querySelector('#b1').style.color = "white";
document.querySelector('#b2').style.color = "white";
document.querySelector('#b3').style.color = "white";
document.querySelector('#b4').style.color = "white";
document.querySelector('#b5').style.color = "white";
document.querySelector('.t1').style.color = "white";
document.querySelector('.t2').style.color = "white";
document.querySelector('.t3').style.color = "white";
document.querySelector('.t4').style.color = "white";
document.querySelector('.t5').style.color = "white";
document.querySelector('.t6').style.color = "white";
document.querySelector('.t7').style.color = "white";
document.querySelector('.range__list').style.color = "white";
currentImage = imageOff;
} else {
document.getElementById("bulp").src = imageOn;
document.querySelector('.ui__background').style.backgroundColor = "white";
document.querySelector('.ui').style.color = "";
document.querySelector('#b1').style.color = "";
document.querySelector('#b2').style.color = "";
document.querySelector('#b3').style.color = "";
document.querySelector('#b4').style.color = "";
document.querySelector('#b5').style.color = "";
document.querySelector('.t1').style.color = "";
document.querySelector('.t2').style.color = "";
document.querySelector('.t3').style.color = "";
document.querySelector('.t4').style.color = "";
document.querySelector('.t5').style.color = "";
document.querySelector('.t6').style.color = "";
document.querySelector('.t7').style.color = "";
document.querySelector('.range__list').style.color = "";
currentImage = imageOn;
}
}

function rotateUPrime() {
const move = { axis: 'y', angle: Math.PI / 2 };
Expand Down
356 changes: 356 additions & 0 deletions style.css
View file

Large diffs are not rendered by default.

0 comments on commit 3e85c84

Please sign in to comment.