Skip to content

Commit

Permalink
overlay
Browse files Browse the repository at this point in the history
  • Loading branch information
@tailuge
tailuge committed Oct 17, 2023
1 parent 9411eaa commit dc83541
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 18 deletions.
27 changes: 27 additions & 0 deletions dist/diagrams/diagrams.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,33 @@ body {
margin: auto;
}

.child {
position: absolute;
top: 0;
left: 0;
}

.child:nth-child(4) {
opacity: 0.25;
}

.child:nth-child(3) {
opacity: 0.33;
}

.child:nth-child(2) {
opacity: 0.5;
}

.child:nth-child(1) {
opacity: 1;
}

.parent {
width: 412px;
position: relative;
}

#R,
#m,
#e,
Expand Down
65 changes: 47 additions & 18 deletions dist/diagrams/diamond.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,54 +11,83 @@
</head>

<body>
<div class="parent diagram">
<div class="replaydiagram child">
<div
class="topview"
data-state="?ruletype=threecushion&state=%7B%22init%22%3A%5B-1.3861049855898413%2C-0.6663021183415567%2C-1.3528009836432033%2C-0.4691857532050591%2C0.769%2C0%5D%2C%22shots%22%3A%5B%7B%22type%22%3A%22AIM%22%2C%22offset%22%3A%7B%22x%22%3A-0.277%2C%22y%22%3A0.114%2C%22z%22%3A0%7D%2C%22angle%22%3A0.702%2C%22power%22%3A1.856%2C%22pos%22%3A%7B%22x%22%3A-1.3861049855898413%2C%22y%22%3A-0.6663021183415567%2C%22z%22%3A0%7D%2C%22i%22%3A0%7D%5D%7D"
></div>
<p class="description">too short</p>
</div>

<div class="replaydiagram child">
<div
class="topview"
data-state="?ruletype=threecushion&state=%7B%22init%22%3A%5B-0.5815437036760774%2C-0.6619233786671217%2C-1.4918488063657103%2C-0.38701043008579117%2C0.769%2C0%5D%2C%22shots%22%3A%5B%7B%22type%22%3A%22AIM%22%2C%22offset%22%3A%7B%22x%22%3A-0.299%2C%22y%22%3A0.02%2C%22z%22%3A0%7D%2C%22angle%22%3A0.831%2C%22power%22%3A1.86%2C%22pos%22%3A%7B%22x%22%3A-0.5815437036760774%2C%22y%22%3A-0.6619233786671217%2C%22z%22%3A0%7D%2C%22i%22%3A0%7D%5D%7D"
></div>
<p class="description">too short</p>
</div>

<div class="replaydiagram child">
<div
class="topview"
data-state="?ruletype=threecushion&state=%7B%22init%22%3A%5B0.08637877514555886%2C-0.720797194837692%2C-1.4907664534548462%2C-0.3085631553225074%2C0.769%2C0%5D%2C%22shots%22%3A%5B%7B%22type%22%3A%22AIM%22%2C%22offset%22%3A%7B%22x%22%3A-0.298%2C%22y%22%3A-0.038%2C%22z%22%3A0%7D%2C%22angle%22%3A0.97%2C%22power%22%3A1.976%2C%22pos%22%3A%7B%22x%22%3A0.08637877514555886%2C%22y%22%3A-0.720797194837692%2C%22z%22%3A0%7D%2C%22i%22%3A0%7D%5D%7D"
></div>
<p class="description">too short</p>
</div>

<div class="replaydiagram child">
<div
class="topview"
data-state="?ruletype=threecushion&state=%7B%22init%22%3A%5B0.8528801731849832%2C-0.6958489270689311%2C-1.502105336938249%2C-0.21468732812712402%2C0.769%2C0%5D%2C%22shots%22%3A%5B%7B%22type%22%3A%22AIM%22%2C%22offset%22%3A%7B%22x%22%3A-0.3%2C%22y%22%3A0.009%2C%22z%22%3A0%7D%2C%22angle%22%3A1.17%2C%22power%22%3A1.976%2C%22pos%22%3A%7B%22x%22%3A0.8528801731849832%2C%22y%22%3A-0.6958489270689311%2C%22z%22%3A0%7D%2C%22i%22%3A0%7D%5D%7D"
></div>
<p class="description">too short</p>
</div>
</div>

<div class="diagram">
<iframe
width="400"
height="300"
src="https://www.youtube.com/embed/OP8btRejsJs?si=8V9v5NsS545-Gzyt&amp;start=138"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>

<div class="replaydiagram">
<div
class="topview"
data-state="?ruletype=threecushion&state=%7B%22init%22%3A%5B-1.3861049855898413%2C-0.6663021183415567%2C-1.3528009836432033%2C-0.4691857532050591%2C0.769%2C0%5D%2C%22shots%22%3A%5B%7B%22type%22%3A%22AIM%22%2C%22offset%22%3A%7B%22x%22%3A-0.277%2C%22y%22%3A0.114%2C%22z%22%3A0%7D%2C%22angle%22%3A0.702%2C%22power%22%3A1.856%2C%22pos%22%3A%7B%22x%22%3A-1.3861049855898413%2C%22y%22%3A-0.6663021183415567%2C%22z%22%3A0%7D%2C%22i%22%3A0%7D%5D%7D"
></div>
<p class="description">
too short
</p>
<p class="description">too short</p>
</div>

<div class="replaydiagram">
<div
class="topview"
data-state="?ruletype=threecushion&state=%7B%22init%22%3A%5B-0.5815437036760774%2C-0.6619233786671217%2C-1.4918488063657103%2C-0.38701043008579117%2C0.769%2C0%5D%2C%22shots%22%3A%5B%7B%22type%22%3A%22AIM%22%2C%22offset%22%3A%7B%22x%22%3A-0.299%2C%22y%22%3A0.02%2C%22z%22%3A0%7D%2C%22angle%22%3A0.831%2C%22power%22%3A1.86%2C%22pos%22%3A%7B%22x%22%3A-0.5815437036760774%2C%22y%22%3A-0.6619233786671217%2C%22z%22%3A0%7D%2C%22i%22%3A0%7D%5D%7D"
></div>
<p class="description">
too short
</p>
<p class="description">too short</p>
</div>

<div class="replaydiagram">
<div
class="topview"
data-state="?ruletype=threecushion&state=%7B%22init%22%3A%5B0.08637877514555886%2C-0.720797194837692%2C-1.4907664534548462%2C-0.3085631553225074%2C0.769%2C0%5D%2C%22shots%22%3A%5B%7B%22type%22%3A%22AIM%22%2C%22offset%22%3A%7B%22x%22%3A-0.298%2C%22y%22%3A-0.038%2C%22z%22%3A0%7D%2C%22angle%22%3A0.97%2C%22power%22%3A1.976%2C%22pos%22%3A%7B%22x%22%3A0.08637877514555886%2C%22y%22%3A-0.720797194837692%2C%22z%22%3A0%7D%2C%22i%22%3A0%7D%5D%7D"
></div>
<p class="description">
too short
</p>
<p class="description">too short</p>
</div>

<div class="replaydiagram">
<div
class="topview"
data-state="?ruletype=threecushion&state=%7B%22init%22%3A%5B0.8528801731849832%2C-0.6958489270689311%2C-1.502105336938249%2C-0.21468732812712402%2C0.769%2C0%5D%2C%22shots%22%3A%5B%7B%22type%22%3A%22AIM%22%2C%22offset%22%3A%7B%22x%22%3A-0.3%2C%22y%22%3A0.009%2C%22z%22%3A0%7D%2C%22angle%22%3A1.17%2C%22power%22%3A1.976%2C%22pos%22%3A%7B%22x%22%3A0.8528801731849832%2C%22y%22%3A-0.6958489270689311%2C%22z%22%3A0%7D%2C%22i%22%3A0%7D%5D%7D"
></div>
<p class="description">
too short
</p>
<p class="description">too short</p>
</div>


<div class="diagram">
<iframe width="400" height="300" src="https://www.youtube.com/embed/OP8btRejsJs?si=8V9v5NsS545-Gzyt&amp;start=138" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>


<div class="diagram">
<p>
Physical Constants <button id="replay" type="button">replay</button>
Expand Down

0 comments on commit dc83541

Please sign in to comment.