wuerfel_menue.php


Quell Code


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
  text-align: center;
  color:black;
  font-size:20px;
}

.container {
  height: 100px;
  width:100px;
  margin-top: 50px;
  margin-left:50%;
}

.dice {
  position: relative;
  margin: auto;
  height: 100px;
  width: 100px;
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  height: 100px;
  width: 100px;
  opacity: .6;
  border-radius: 50%;
  display: table;
  }

.container:hover .dice > .side {
  position: relative;
  transform: none;
  display: inline-table;
  vertical-align:top;
  margin: 2%;
  transition: .8s;
}

.container .dice > .side:hover {
  transform: scale(1.4);
}

a {
  text-decoration: none;
  color:#000;
  display: table-cell;
  vertical-align: middle; 
 }

.one {
transform: rotateX(90deg) translateZ(50px);
  background: #7F2900;
}

.two {
transform: translateZ(50px);
  background: #CCBF00;
  }

.three {
  transform: rotateY(90deg) translateZ(50px);
  background: #C44CFF;
  }

.four {
  transform: rotateY(180deg) translateZ(50px);
  background: #7F0055;
 
  }

.five {
  transform: rotateY(-90deg) translateZ(50px);
  background: #00BDFF;
 
  }

.six {
  transform: rotateX(-90deg) translateZ(50px);
  background: #7DFF00;
}
</style>
</head>
<body>
<div class="container">
    <div class="dice" onmouseout="start()" id="dice">
    	<div class="side one">
             <a href="">Home</a>
        </div>
        <div class="side two">
             <a href="">Forum</a>
        </div>
		<div class="side three">
             <a href="">chat</a>
        </div> 
		<div class="side four">
             <a href="">Gästebuch</a>
        </div>
		<div class="side five">
             <a href="">Kontact</a>
        </div>
		<div class="side six">
             <a href="">Shoutbox</a>
        </div>
	</div>
</div>
<script>
var min=1000;
var max=5000;
function sekunden(){
   var x = Math.round(Math.random() * (max - min)) + min;
   return x;
}
var min1=1;
var max1=2365;
function rotation(){
   var x1 = Math.round(Math.random() * (max1 - min1)) + min1;
   return x1;
}
var min11=1;
var max11=136;
function rotation1(){
   var x11 = Math.round(Math.random() * (max11 - min11)) + min11;
   return x11;
}

was=['+','-'];
var min3=0;
var max3=1;
function was1(){
   var x3 = Math.round(Math.random() * (max3 - min3)) + min3;
   return was[x3];
}

function dreh(){
    var nn=rotation();
    var nn1=rotation1();
    document.getElementById("dice").animate([
   { transform: 'rotateX('+nn+'deg) rotateY('+nn+'deg) ' }, 
   { transform: 'translateY('+was1()+nn1+'px) translateX('+was1()+nn1+'px)' }
], { 
  duration: sekunden(),
  iterations: 1
});

timer=setTimeout(function(){dreh()},sekunden())
}

$(".container").hover(function(){
       $(".container,.dice").css('width','100%');
       $("#dice").css("animation-play-state", "paused"); 
       $(".container").css('margin-left','0');
       clearTimeout(timer);
  },
   function(){
       $(".container").css('width','100px');
       $(".container").css('margin-left','50%');
       dreh();
  });
  dreh();
</script>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7. <style>
  8. body {
  9. text-align: center;
  10. color:black;
  11. font-size:20px;
  12. }
  14. .container {
  15. height: 100px;
  16. width:100px;
  17. margin-top: 50px;
  18. margin-left:50%;
  19. }
  21. .dice {
  22. position: relative;
  23. margin: auto;
  24. height: 100px;
  25. width: 100px;
  26. transform-style: preserve-3d;
  27. }
  29. .side {
  30. position: absolute;
  31. height: 100px;
  32. width: 100px;
  33. opacity: .6;
  34. border-radius: 50%;
  35. display: table;
  36. }
  38. .container:hover .dice > .side {
  39. position: relative;
  40. transform: none;
  41. display: inline-table;
  42. vertical-align:top;
  43. margin: 2%;
  44. transition: .8s;
  45. }
  47. .container .dice > .side:hover {
  48. transform: scale(1.4);
  49. }
  51. a {
  52. text-decoration: none;
  53. color:#000;
  54. display: table-cell;
  55. vertical-align: middle;
  56. }
  58. .one {
  59. transform: rotateX(90deg) translateZ(50px);
  60. background: #7F2900;
  61. }
  63. .two {
  64. transform: translateZ(50px);
  65. background: #CCBF00;
  66. }
  68. .three {
  69. transform: rotateY(90deg) translateZ(50px);
  70. background: #C44CFF;
  71. }
  73. .four {
  74. transform: rotateY(180deg) translateZ(50px);
  75. background: #7F0055;
  77. }
  79. .five {
  80. transform: rotateY(-90deg) translateZ(50px);
  81. background: #00BDFF;
  83. }
  85. .six {
  86. transform: rotateX(-90deg) translateZ(50px);
  87. background: #7DFF00;
  88. }
  89. </style>
  90. </head>
  91. <body>
  92. <div class="container">
  93. <div class="dice" onmouseout="start()" id="dice">
  94. <div class="side one">
  95. <a href="">Home</a>
  96. </div>
  97. <div class="side two">
  98. <a href="">Forum</a>
  99. </div>
  100. <div class="side three">
  101. <a href="">chat</a>
  102. </div>
  103. <div class="side four">
  104. <a href="">Gästebuch</a>
  105. </div>
  106. <div class="side five">
  107. <a href="">Kontact</a>
  108. </div>
  109. <div class="side six">
  110. <a href="">Shoutbox</a>
  111. </div>
  112. </div>
  113. </div>
  114. <script>
  115. var min=1000;
  116. var max=5000;
  117. function sekunden(){
  118. var x = Math.round(Math.random() * (max - min)) + min;
  119. return x;
  120. }
  121. var min1=1;
  122. var max1=2365;
  123. function rotation(){
  124. var x1 = Math.round(Math.random() * (max1 - min1)) + min1;
  125. return x1;
  126. }
  127. var min11=1;
  128. var max11=136;
  129. function rotation1(){
  130. var x11 = Math.round(Math.random() * (max11 - min11)) + min11;
  131. return x11;
  132. }
  134. was=['+','-'];
  135. var min3=0;
  136. var max3=1;
  137. function was1(){
  138. var x3 = Math.round(Math.random() * (max3 - min3)) + min3;
  139. return was[x3];
  140. }
  142. function dreh(){
  143. var nn=rotation();
  144. var nn1=rotation1();
  145. document.getElementById("dice").animate([
  146. { transform: 'rotateX('+nn+'deg) rotateY('+nn+'deg) ' },
  147. { transform: 'translateY('+was1()+nn1+'px) translateX('+was1()+nn1+'px)' }
  148. ], {
  149. duration: sekunden(),
  150. iterations: 1
  151. });
  153. timer=setTimeout(function(){dreh()},sekunden())
  154. }
  156. $(".container").hover(function(){
  157. $(".container,.dice").css('width','100%');
  158. $("#dice").css("animation-play-state", "paused");
  159. $(".container").css('margin-left','0');
  160. clearTimeout(timer);
  161. },
  162. function(){
  163. $(".container").css('width','100px');
  164. $(".container").css('margin-left','50%');
  165. dreh();
  166. });
  167. dreh();
  168. </script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
  text-align: center;
  color:black;
  font-size:20px;
}

.container {
  height: 100px;
  width:100px;
  margin-top: 50px;
  margin-left:50%;
}

.dice {
  position: relative;
  margin: auto;
  height: 100px;
  width: 100px;
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  height: 100px;
  width: 100px;
  opacity: .6;
  border-radius: 50%;
  display: table;
  }

.container:hover .dice > .side {
  position: relative;
  transform: none;
  display: inline-table;
  vertical-align:top;
  margin: 2%;
  transition: .8s;
}

.container .dice > .side:hover {
  transform: scale(1.4);
}

a {
  text-decoration: none;
  color:#000;
  display: table-cell;
  vertical-align: middle; 
 }

.one {
transform: rotateX(90deg) translateZ(50px);
  background: #7F2900;
}

.two {
transform: translateZ(50px);
  background: #CCBF00;
  }

.three {
  transform: rotateY(90deg) translateZ(50px);
  background: #C44CFF;
  }

.four {
  transform: rotateY(180deg) translateZ(50px);
  background: #7F0055;
 
  }

.five {
  transform: rotateY(-90deg) translateZ(50px);
  background: #00BDFF;
 
  }

.six {
  transform: rotateX(-90deg) translateZ(50px);
  background: #7DFF00;
}
</style>
</head>
<body>
<div class="container">
    <div class="dice" onmouseout="start()" id="dice">
    	<div class="side one">
             <a href="">Home</a>
        </div>
        <div class="side two">
             <a href="">Forum</a>
        </div>
		<div class="side three">
             <a href="">chat</a>
        </div> 
		<div class="side four">
             <a href="">Gästebuch</a>
        </div>
		<div class="side five">
             <a href="">Kontact</a>
        </div>
		<div class="side six">
             <a href="">Shoutbox</a>
        </div>
	</div>
</div>
<script>
var min=1000;
var max=5000;
function sekunden(){
   var x = Math.round(Math.random() * (max - min)) + min;
   return x;
}
var min1=1;
var max1=2365;
function rotation(){
   var x1 = Math.round(Math.random() * (max1 - min1)) + min1;
   return x1;
}
var min11=1;
var max11=136;
function rotation1(){
   var x11 = Math.round(Math.random() * (max11 - min11)) + min11;
   return x11;
}

was=['+','-'];
var min3=0;
var max3=1;
function was1(){
   var x3 = Math.round(Math.random() * (max3 - min3)) + min3;
   return was[x3];
}

function dreh(){
    var nn=rotation();
    var nn1=rotation1();
    document.getElementById("dice").animate([
   { transform: 'rotateX('+nn+'deg) rotateY('+nn+'deg) ' }, 
   { transform: 'translateY('+was1()+nn1+'px) translateX('+was1()+nn1+'px)' }
], { 
  duration: sekunden(),
  iterations: 1
});

timer=setTimeout(function(){dreh()},sekunden())
}

$(".container").hover(function(){
       $(".container,.dice").css('width','100%');
       $("#dice").css("animation-play-state", "paused"); 
       $(".container").css('margin-left','0');
       clearTimeout(timer);
  },
   function(){
       $(".container").css('width','100px');
       $(".container").css('margin-left','50%');
       dreh();
  });
  dreh();
</script>

vConsole
LogSystem
AllLogInfoWarnErrorAllLogInfoWarnError
13:28:13
Uncaught TypeError: Cannot read properties of null (reading 'style')
/loesungen/index.php?name=wuerfel_menue.php:2751:53
13:28:14
500
13:28:13
WeChatLib: 0 (xxxx.xx.xx)
13:28:15
System: Unknown
13:28:15
Protocol: HTTPS
13:28:15
UA: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
13:28:15
navigationStart: 1744982892778
13:28:15
navigation: 4ms
13:28:15
dns: 115ms
13:28:15
tcp (ssl): 228ms (117ms)
13:28:15
request: 220ms
13:28:15
response: 7ms
13:28:15
domComplete (domLoaded): 1867ms (1436ms)
13:28:15
loadEvent: 17ms
13:28:15
total (DOM): 2455ms (2438ms)
ClearClearHide