Spaces:
Running
Running
make me a program, program of a simulation in which we can choose a rectangfle or circle that we can place a tiny ball or square like the dvd player bouncing off but its a ball or a square in a rectangle, square or ball and we can choose in wich direction/angle we are going to throw it and it is going to bounce like the dvd and also make it so that there is an option to see a trail
86134e2 verified | /* Custom Styles for BounceBox Simulator */ | |
| .control-btn { | |
| @apply flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-all duration-200 hover:border-blue-500 hover:text-blue-600; | |
| } | |
| .control-btn.active { | |
| @apply border-blue-500 bg-blue-50 text-blue-600; | |
| } | |
| .btn-primary { | |
| @apply flex items-center justify-center p-3 bg-blue-600 text-white rounded-lg font-medium transition-all duration-200 hover:bg-blue-700 transform hover:scale-105; | |
| } | |
| .btn-secondary { | |
| @apply flex items-center justify-center p-3 bg-gray-200 text-gray-700 rounded-lg font-medium transition-all duration-200 hover:bg-gray-300 transform hover:scale-105; | |
| } | |
| .slider { | |
| background: linear-gradient(to right, #3b82f6 0%, #3b82f6 50%, #e5e7eb 50%, #e5e7eb 100%); | |
| } | |
| .slider::-webkit-slider-thumb { | |
| @apply appearance-none h-5 w-5 bg-white border-2 border-blue-600 rounded-full cursor-pointer shadow-lg; | |
| } | |
| .slider::-moz-range-thumb { | |
| @apply h-5 w-5 bg-white border-2 border-blue-600 rounded-full cursor-pointer shadow-lg; | |
| } | |
| /* Canvas styling */ | |
| #simulationCanvas { | |
| cursor: crosshair; | |
| } | |
| /* Animation for bounce counter */ | |
| @keyframes bounce { | |
| 0%, 20%, 53%, 80%, 100% { | |
| transform: translate3d(0,0,0); | |
| } | |
| 40%, 43% { | |
| transform: translate3d(0,-8px,0); | |
| } | |
| 70% { | |
| transform: translate3d(0,-4px,0); | |
| } | |
| 90% { | |
| transform: translate3d(0,-2px,0); | |
| } | |
| } | |
| .bounce-animation { | |
| animation: bounce 0.6s ease-in-out; | |
| } |