<div id="card">
<!-- Use it like any other HTML element -->
<model-viewer src="https://docs.myostat.ca/download/attachments/65142999/cm1t23s30d.gltf"
ios-src="https://docs.myostat.ca/download/attachments/65142999/cm1t23s30d.usdz"
auto-rotate
camera-controls
interaction-prompt="none"
camera-orbit="0deg 180deg 100%"
shadow-intensity="1"
style="background-color: #D6EAF8;"
>
</model-viewer>
<section class="attribution">
<span>
<h1>CM1-C</h1>
<span>24VDC Integrated Servos</span>
</span>
<span>
<div class="tooltip">
<span class="tooltiptext">Documentation</span>
<a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1+-+RT3.12+Manual">
<img src="https://docs.myostat.ca/download/attachments/65142999/docs.svg">
</a>
</div>
<div class="tooltip">
<span class="tooltiptext">Software</span>
<a class="cc" href="http://www.myostat.ca/CoolMuscleSoftware">
<img src="https://docs.myostat.ca/download/attachments/65142999/software.svg">
</a>
</div>
<div class="tooltip">
<span class="tooltiptext">Downloads</span>
<a class="cc" href="http://www.myostat.ca/CoolMuscleDrawings">
<img src="https://docs.myostat.ca/download/attachments/65142999/file.svg">
</a>
</div>
<div class="tooltip">
<span class="tooltiptext" style="margin-left: -92px;">Support</span>
<a class="cc" href="https://jira.myostat.ca/servicedesk/customer/portal/2">
<img src="https://docs.myostat.ca/download/attachments/65142999/help.svg">
</a>
</div>
</span>
</section>
</div>
|
<div id="card">
<!-- Use it like any other HTML element -->
<model-viewer src="https://docs.myostat.ca/download/attachments/65142999/cm1t23s30d.gltf"
auto-rotate
camera-controls
interaction-prompt="none"
camera-orbit="0deg 180deg 100%"
shadow-intensity="1"
style="background-color: #7DCEA0;"
>
</model-viewer>
<section class="attribution">
<span>
<h1>CM1-T</h1>
<span>24V Integrated EtherNet/IP, TCP/UPD, Modbus-TCP Servos</span>
</span>
<span>
<div class="tooltip">
<span class="tooltiptext">Documentation</span>
<a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1+-+RT3.12+Manual">
<img src="https://docs.myostat.ca/download/attachments/65142999/docs.svg">
</a>
</div>
<div class="tooltip">
<span class="tooltiptext">Software</span>
<a class="cc" href="http://www.myostat.ca/CoolMuscleSoftware">
<img src="https://docs.myostat.ca/download/attachments/65142999/software.svg">
</a>
</div>
<div class="tooltip">
<span class="tooltiptext">Downloads</span>
<a class="cc" href="http://www.myostat.ca/CoolMuscleDrawings">
<img src="https://docs.myostat.ca/download/attachments/65142999/file.svg">
</a>
</div>
<div class="tooltip">
<span class="tooltiptext" style="margin-left: -92px;">Support</span>
<a class="cc" href="https://jira.myostat.ca/servicedesk/customer/portal/2">
<img src="https://docs.myostat.ca/download/attachments/65142999/help.svg">
</a>
</div>
</span>
</section>
<section class="attribution">
<span>
<h1>CM1-E</h1>
<span>24VDC Integrated EtherCAT Servos</span>
</span>
<span>
<div class="tooltip">
<span class="tooltiptext">Documentation</span>
<a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1+-+RT3.12+Manual">
<img src="https://docs.myostat.ca/download/attachments/65142999/docs.svg">
</a>
</div>
<div class="tooltip">
<span class="tooltiptext">Software</span>
<a class="cc" href="http://www.myostat.ca/CoolMuscleSoftware">
<img src="https://docs.myostat.ca/download/attachments/65142999/software.svg">
</a>
</div>
<div class="tooltip">
<span class="tooltiptext">Downloads</span>
<a class="cc" href="http://www.myostat.ca/CoolMuscleDrawings">
<img src="https://docs.myostat.ca/download/attachments/65142999/file.svg">
</a>
</div>
<div class="tooltip">
<span class="tooltiptext" style="margin-left: -92px;">Support</span>
<a class="cc" href="https://jira.myostat.ca/servicedesk/customer/portal/2">
<img src="https://docs.myostat.ca/download/attachments/65142999/help.svg">
</a>
</div>
</span>
</section>
</div>
|
<div id="card">
<!-- Use it like any other HTML element -->
<model-viewer src="https://docs.myostat.ca/download/attachments/65142999/cm1t23s30d.gltf"
auto-rotate
camera-controls
interaction-prompt="none"
camera-orbit="0deg 180deg 100%"
shadow-intensity="1"
style="background-color: #FAD7A0;"
>
</model-viewer>
<section class="attribution">
<span>
<h1>CM2</h1>
120/240VAC Integrated Servo Motor
</span>
<a class="cc" href="https://docs.myostat.ca/display/MYOS/CM1+-+RT3.12+Manual" target="_blank">
<img src="https://docs.myostat.ca/download/attachments/65142999/docs.svg">
</a>
</section>
</div>
|
<div id="card">
<!-- Use it like any other HTML element -->
<model-viewer src="https://docs.myostat.ca/download/attachments/65142999/cm1t23s30d.gltf"
auto-rotate
camera-controls
interaction-prompt="none"
camera-orbit="0deg 180deg 100%"
shadow-intensity="1"
style="background-color: #CD6155;"
>
</model-viewer>
<section class="attribution">
<span>
<h1>CM3</h1>
<span>By <a href="https://poly.google.com/view/dLHpzNdygsg" target="_blank">Poly</a></span>
</span>
<a class="cc" href="https://creativecommons.org/licenses/by/2.0/" target="_blank">
<img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg">
<img src="https://mirrors.creativecommons.org/presskit/icons/by.svg">
</a>
</section>
</div>
|
<style>
body {
margin: 1em;
padding: 0;
font-family: Google Sans, Noto, Roboto, Helvetica Neue, sans-serif;
color: #244376;
}
#card {
margin: 3em auto;
display: flex;
flex-direction: column;
max-width: 600px;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
model-viewer {
width: 100%;
height: 400px;
background-color: #70BCD1;
--poster-color: #ffffff00;
}
.attribution {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 1em;
}
.attribution h1 {
margin: 0 0 0.25em;
}
.attribution img {
opacity: 0.5;
height: 2em;
}
.attribution .cc {
flex-shrink: 0;
text-decoration: none;
}
footer {
display: flex;
flex-direction: column;
max-width: 600px;
margin: auto;
text-align: center;
font-style: italic;
line-height: 1.5em;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<!-- Import model-viewer -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
|