14_volume_rgb.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>14_krutilki_RGB</title>
  7. <link rel="stylesheet" href="./14_krutilki_rgb.css" />
  8. </head>
  9. <body>
  10. <div class="container">
  11. <video id="myaudio" controls="" loop="" autoplay="" muted>
  12. <source src="./metallica_-_metallika_nothing_else_matters_(zf.fm).mp3" type="audio/mp3" />
  13. Тег audio не поддерживается вашим браузером.
  14. </video>
  15. <div id="volume"></div>
  16. <input type="range" max="1" step="0.01" id="volumeLevel" placeholder="asd" />
  17. </div>
  18. <div class="container">
  19. <div id="rgbDiv"></div>
  20. <div>
  21. <div id="redDiv"></div>
  22. <input
  23. type="number"
  24. min="0"
  25. max="255"
  26. id="redLevel"
  27. placeholder="red"
  28. style="border: 2px solid red; background: rgb(255, 150, 150)"
  29. />
  30. <div id="redGradient" class="gradient" style="border: 2px solid red; background: rgb(255, 0, 0)"></div>
  31. </div>
  32. <div>
  33. <div id="greenDiv"></div>
  34. <input
  35. type="number"
  36. min="0"
  37. max="255"
  38. id="greenLevel"
  39. placeholder="green"
  40. style="border: 2px solid green; background: rgb(150, 255, 150)"
  41. />
  42. <div
  43. id="greenGradient"
  44. class="gradient"
  45. style="border: 2px solid green; background: rgb(0, 255, 0)"
  46. ></div>
  47. </div>
  48. <div>
  49. <div id="blueDiv"></div>
  50. <input
  51. type="number"
  52. min="0"
  53. max="255"
  54. id="blueLevel"
  55. placeholder="blue"
  56. style="border: 2px solid blue; background: rgb(150, 150, 255)"
  57. />
  58. <div
  59. id="blueGradient"
  60. class="gradient"
  61. style="border: 2px solid blue; background: rgb(0, 0, 255)"
  62. ></div>
  63. </div>
  64. </div>
  65. <script src="./14_krutilki_RGB.js"></script>
  66. </body>
  67. </html>