jsfiddle.net
Open in
urlscan Pro
2606:4700:3032::ac43:9e09
Public Scan
URL:
https://jsfiddle.net/replicarichardmillewatch/uzvc3erh/
Submission: On January 28 via manual from VN — Scanned from CH
Submission: On January 28 via manual from VN — Scanned from CH
Form analysis 1 forms found in the DOM
POST https://fiddle.jshell.net/_display/?editor_console=true
<form method="post" id="show-result" target="result" action="https://fiddle.jshell.net/_display/?editor_console=true" autocomplete="off">
<input type="hidden" name="authenticity_token" value="HeDitGrWou91Wu/tDbjoA3dUsXakcIMsuiz8KAh5p9NmQKk2ZMHbcI+JmS7VYXQQWukoIYE2ZZ6dEjyL/ng08w==">
<header>
<h1>
<span class="title">JSFiddle</span>
<div class="changelog-badge">
<a title="JSFiddle" href="/">
<svg width="46px" height="33px" viewBox="0 0 46 33" id="no-war">
<g stroke-width="1.8" fill="none" fill-rule="evenodd">
<path d="M23.4888889,20.543316 C21.4404656,18.4187374 19.0750303,15.6666667 16.4832014,15.6666667 C13.8721947,15.6666667 11.7555556,17.6366138 11.7555556,20.0666667 C11.7555556,22.4967196 13.8721947,24.4666667 16.4832014,24.4666667 C18.8347252,24.4666667 19.9845474,23.0125628 20.6429148,22.312473" id="Oval-1" stroke-linecap="round"></path>
<path d="M22.5111111,19.5900174 C24.5595344,21.7145959 26.9249697,24.4666667 29.5167986,24.4666667 C32.1278053,24.4666667 34.2444444,22.4967196 34.2444444,20.0666667 C34.2444444,17.6366138 32.1278053,15.6666667 29.5167986,15.6666667 C27.1652748,15.6666667 26.0154526,17.1207706 25.3570852,17.8208603" id="Oval-1-Copy" stroke-linecap="round"></path>
<path d="M45,22.7331459 C45,19.1499462 42.7950446,16.079593 39.6628004,14.7835315 C39.6774469,14.5246474 39.7003932,14.2674038 39.7003932,14.0035978 C39.7003932,6.82243304 33.8412885,1 26.611593,1 C21.3985635,1 16.9102123,4.03409627 14.8051788,8.41527616 C13.7828502,7.62878013 12.503719,7.15547161 11.1134367,7.15547161 C7.77825654,7.15547161 5.07450503,9.84159999 5.07450503,13.1544315 C5.07450503,13.7760488 5.16938207,14.3779791 5.3477444,14.9418479 C2.74863428,16.4787471 1,19.2867709 1,22.5105187 C1,27.3287502 4.89630545,31.2367856 9.72803666,31.31094 L36.3341301,31.3109406 C41.1201312,31.3406346 45,27.4870665 45,22.7331459 L45,22.7331459 Z" stroke-linejoin="round"></path>
</g>
</svg>
</a>
</div>
</h1>
<div id="actions">
<nav class="actionCont">
<div class="actionItem">
<a class="aiButton" id="run" title="Run (Command/Ctrl + Enter)" href="#run">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
Run</a>
</div>
<!-- Logged in users don't need the info popup on saving/updating/forking -->
<div class="actionItem dropdown ">
<a class="aiButton dropdownTrigger" title="Save (Command/Ctrl + S)" href="#save" data-popover-trigger="saveInfo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
Save</a>
</div>
<div class="actionItem dropdown visible">
<a class="aiButton dropdownTrigger" title="Fork" href="#fork" data-popover-trigger="forkInfo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shuffle"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>
Fork</a>
</div>
<div class="actionItem hidden ">
<a class="aiButton" id="mark_favourite" title="Set as base" href="#set-as-base">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
Set as base</a>
</div>
<div class="actionItem ">
<a class="aiButton" id="collaborate" title="Collaborate" href="#collaborate">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
Collaborate</a>
</div>
<div class="actionItem dropdown visible ">
<a class="aiButton dropdownTrigger" id="share" title="Embed" href="#embed" data-popover-trigger="embed">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
Embed</a>
</div> <!-- /actionItem -->
</nav>
<ul class="actionCont dropdown right">
<li class="actionItem dropdown">
<a id="upvote-iframe-load" class="aiButtonVote dropdownTrigger" href="#upvote" data-popover-trigger="upvote">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#87C449" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
Vote for features</a>
</li>
<li class="actionItem">
<a class="aiButton dropdownTrigger" href="#" title="Editor settings" data-popover-trigger="editor-settings">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sliders"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
Settings
</a>
</li> <!-- /actionItem -->
<li class="actionItem"><a class="aiButton" href="/user/login/">Sign in</a></li>
</ul>
<div class="dropdownCont hidden" data-popover-ref="editor-settings" data-popover-position="left">
<div class="dcWrapper editorSettings">
<div id="editor-options">
<h3>Editor layout</h3>
<div id="layout">
<!-- HACK: for some reason the first input always gets the value of the last active
grid mode, for that reason a hack is to create an invisible first input -->
<input style="display: none;" name="layout" type="radio" value="grid_invisible_hack">
<label>
<input name="layout" type="radio" value="1" checked="">
<span class="gridMode grid_1"></span> Classic </label>
<label>
<input name="layout" type="radio" value="2">
<span class="gridMode grid_2"></span> Columns </label>
<label>
<input name="layout" type="radio" value="3">
<span class="gridMode grid_3"></span> Bottom results </label>
<label>
<input name="layout" type="radio" value="4">
<span class="gridMode grid_4"></span> Right results </label>
<label>
<input name="layout" type="radio" value="5">
<span class="gridMode grid_5"></span> Tabs (columns) </label>
<label>
<input name="layout" type="radio" value="6">
<span class="gridMode grid_6"></span> Tabs (rows) </label>
</div>
<h3>Console</h3>
<div class="fieldsCont">
<p class="proBadge">
<label class="checkboxCont ">
<input type="checkbox" name="editorConsole">
<span class="checkbox"></span> Console in the editor <small>(beta)</small>
</label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="clearConsole">
<span class="checkbox"></span> Clear console on run </label>
</p>
</div> <!-- /fieldsCont -->
<h3>General</h3>
<div class="fieldsCont">
<!-- <p>
<label class="checkboxCont">
<input type="checkbox" name="darkTheme" checked>
<span class="checkbox"></span>
Dark theme
</label>
</p> -->
<p>
<label class="checkboxCont">
<input type="checkbox" name="lineNumbers" checked="">
<span class="checkbox"></span> Line numbers </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="lineWrapping" checked="">
<span class="checkbox"></span> Wrap lines </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="indentWithTabs">
<span class="checkbox"></span> Indent with tabs </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="codeHints">
<span class="checkbox"></span> Code hinting (autocomplete) <small>(beta)</small>
</label>
</p>
</div> <!-- /fieldsCont -->
<div class="selectPairs">
<div class="selectPair">
<span class="label">Indent size:</span>
<div class="selectCont">
<select name="indentUnit">
<option value="2">2 spaces</option>
<option value="3">3 spaces</option>
<option value="4">4 spaces</option>
</select>
</div>
</div> <!-- /selectPair -->
<div class="selectPair">
<span class="label">Key map:</span>
<div class="selectCont">
<select name="keyMap">
<option value="default">Default</option>
<option value="sublime">Sublime Text</option>
<!-- <option value="vim">VIM</option> -->
<option value="emacs">EMACS</option>
</select>
</div>
</div> <!-- /selectPair -->
<div class="selectPair">
<span class="label">Font size:</span>
<div class="selectCont">
<select name="fontSize">
<option value="1">Default</option>
<option value="2">Big</option>
<option value="3">Bigger</option>
<option value="4">Jabba</option>
</select>
</div>
</div> <!-- /selectPair -->
</div> <!-- /selectPairs -->
<h3>Behavior</h3>
<div class="fieldsCont">
<p>
<label class="checkboxCont disabled" data-title="Log in to use auto-running">
<input type="checkbox" name="autoRun" disabled="">
<span class="checkbox"></span> Auto-run code </label>
</p>
<p>
<label class="checkboxCont disabled" data-title="Log in to use auto-running">
<input type="checkbox" name="autoRunValid" disabled="">
<span class="checkbox"></span> Only auto-run code that validates </label>
</p>
<p>
<label class="checkboxCont disabled" data-title="Log in to use auto-saving">
<input type="checkbox" name="autoSave" disabled="">
<span class="checkbox"></span> Auto-save code (bumps the version) </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="autoCloseTags" checked="">
<span class="checkbox"></span> Auto-close HTML tags </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="autoCloseBrackets" checked="">
<span class="checkbox"></span> Auto-close brackets </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="codeLinting" checked="">
<span class="checkbox"></span> Live code validation </label>
</p>
<p>
<label class="checkboxCont">
<input type="checkbox" name="matchTags">
<span class="checkbox"></span> Highlight matching tags </label>
</p>
</div> <!-- /fieldsCont -->
<h3>Boilerplates</h3>
<div class="fieldsCont">
<p>
<label class="checkboxCont">
<input type="checkbox" name="reduceHelloBar">
<span class="checkbox"></span> Show boilerplates bar less often </label>
</p>
</div> <!-- /fieldsCont -->
</div> <!-- /editor-options -->
</div> <!-- /dcWrapper -->
</div> <!-- /dropdownCont -->
<div class="dropdownCont hidden" data-popover-ref="upvote" data-popover-position="left">
<div class="dcWrapper" style="width: 750px;" id="votehub-cont">
<script type="text/javascript">
let votehubLoaded = false
document.querySelector("#upvote-iframe-load").addEventListener("click", function() {
async function loadVoteHub() {
const response = await fetch("https://vote-hub.app/api/voter")
const obj = await response.json()
const userId = obj.voter
let frame =
`<iframe src="https://vote-hub.app/votings/c3246f03-9571-43a3-b4ed-a26f4c290757/embed?identifier=${userId}&show_name=1&show_description=1&show_total=0&show_percent=1" style="width: 100%; min-height: calc(100vh - 90px); border: none"></iframe>`
let frameCont = document.querySelector("#voting-iframe-cont")
if (!votehubLoaded) {
frameCont.innerHTML = frame
votehubLoaded = true
}
}
loadVoteHub()
})
</script>
<style>
#votehub-cont {
display: grid;
grid-template-columns: 2fr 1fr;
}
#voting-iframe-cont {
position: relative;
left: -10px;
width: 100%;
}
#approved-votes {
padding: 20px;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 10px;
}
#approved-votes h3 {
font-weight: bold;
font-size: 14px;
margin-bottom: 15px;
}
#approved-votes li {
margin-top: 5px;
}
#approved-votes a {
color: #2E71FF;
}
.aiButtonVote {
border: solid 1px rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 0 10px;
margin-top: 10px;
height: 35px;
display: flex;
outline: none;
text-decoration: none;
color: #fff;
align-items: center;
justify-content: center;
position: relative;
font-weight: bold;
}
.aiButtonVote:hover {
border: solid 1px #fff;
text-decoration: none;
}
.aiButtonVote svg {
margin-right: 7px;
}
.aiButtonVote:after {
content: "January";
display: block;
position: absolute;
right: -10px;
bottom: -12px;
color: #222;
font-size: 11px;
font-weight: normal;
border-radius: 5px;
padding: 2px 5px;
background-color: #87C449;
}
</style>
<div id="voting-iframe-cont"> Loading ... </div>
<div id="approved-votes">
<h3>Planned features by votes</h3>
<ul>
<li><a href="https://github.com/orgs/jsfiddle/projects/4/views/2" target="_blank">Publish fiddles as mini-websites</a></li>
<li><a href="https://github.com/orgs/jsfiddle/projects/4/views/2" target="_blank">Save fiddles as templates</a></li>
<li><a href="https://github.com/orgs/jsfiddle/projects/4/views/2" target="_blank">Download a zipped fiddle</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="dropdownCont center hidden" data-popover-ref="saveInfo">
<div class="dcWrapper info">
<p><strong>Save anonymous (public) fiddle?</strong></p>
<p>- Be sure not to include <strong>personal data</strong><br>- Do not include <strong>copyrighted material</strong></p>
<p class="warning"><strong>Log in</strong> if you'd like to <strong>delete this fiddle</strong> in the future.</p>
<button id="save">Save</button>
</div>
</div>
<div class="dropdownCont center hidden" data-popover-ref="forkInfo">
<div class="dcWrapper info">
<p><strong>Fork anonymous (public) fiddle?</strong></p>
<p>- Be sure not to include <strong>personal data</strong><br>- Do not include <strong>copyrighted material</strong></p>
<p class="warning"><strong>Log in</strong> if you'd like to <strong>delete this fiddle</strong> in the future.</p>
<button id="fork">Fork</button>
</div>
</div>
<div class="dropdownCont center hidden" data-popover-ref="embed">
<div class="dcWrapper embed">
<div id="creator">
<section>
<h3>Tabs:</h3>
<div class="inlineFields">
<label class="inputCont_checkbox checkboxCont">
<input type="checkbox" name="tabs" value="js" checked="">
<span class="checkbox"><i class="bts bt-check"></i></span> JavaScript </label>
<label class="inputCont_checkbox checkboxCont">
<input type="checkbox" name="tabs" value="html" checked="">
<span class="checkbox"><i class="bts bt-check"></i></span> HTML </label>
<label class="inputCont_checkbox checkboxCont">
<input type="checkbox" name="tabs" value="css" checked="">
<span class="checkbox"><i class="bts bt-check"></i></span> CSS </label>
<label class="inputCont_checkbox checkboxCont">
<input type="checkbox" name="tabs" value="result" checked="">
<span class="checkbox"><i class="bts bt-check"></i></span> Result </label>
</div> <!-- /inlineFields -->
</section>
<section class="noborder">
<h3>Visual:</h3>
<div class="inlineFields">
<label class="inputCont_checkbox checkboxCont">
<input type="radio" name="skin" value="light" checked="">
<span class="radio"></span> Light </label>
<label class="inputCont_checkbox checkboxCont">
<input type="radio" name="skin" value="dark">
<span class="radio"></span> Dark </label>
</div> <!-- /inlineFields -->
<label class="inputCont_text">
<input type="text" name="accentColor" maxlength="7" placeholder="Accent color">
</label>
<label class="inputCont_text">
<input type="text" name="fontColor" maxlength="7" placeholder="Font color">
</label>
<label class="inputCont_text">
<input type="text" name="menuColor" maxlength="7" placeholder="Menu background">
</label>
<label class="inputCont_text">
<input type="text" name="bodyColor" maxlength="7" placeholder="Code background">
</label>
</section>
<section class="noborder">
<h3> Embed snippet <a href="#" class="codeTypeToggle">Prefer iframe?</a>: </h3>
<div class="embedCodeWrap">
<textarea class="embedCode" id="share_embedded_dropdown" data-view="embed" data-pattern-value="<script async src="{embedSrc}"></script>"><script async src="{embedSrc}"></script>
</textarea>
</div> <!-- /embedCodeWrap -->
<div class="embedCodeWrap hidden">
<textarea class="embedCode" data-view="embedded"
data-pattern-value="<iframe width="100%" height="300" src="{embedSrc}" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>"><iframe width="100%" height="300" src="{embedSrc}" allowfullscreen allowpaymentrequest frameborder="0"></iframe>
</textarea>
<p><strong>No autoresizing</strong> to fit the code</p>
<p><strong>Render blocking</strong> of the parent page</p>
</div> <!-- /embedCodeWrap -->
</section>
</div> <!-- /creator -->
<div id="preview"></div> <!-- /preview -->
</div> <!-- /dcWrapper -->
</div> <!-- /dropdownCont -->
<div id="progressbar">
<div class="pb"></div>
</div>
</header>
<main id="layout-container">
<div id="sidebar">
<section id="s-cont">
<div id="profile-segment" class="">
<div class="userSidebar ">
<div class="userProfile">
<div class="avatar">
<img src="https://www.gravatar.com/avatar/d32951caddd5c995ba2d2cf40683d61d?s=80" height="45" width="45">
</div>
<div class="profileDetails">
<a href="/user/replicarichardmillewatch/fiddles/">
replicarichardmillewatch
</a>
<div class="company">
</div> <!-- /company -->
<ul class="socialInfo">
<li class="more">
<svg viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="1.4" fill="none" stroke-linejoin="round" stroke="currentColor">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</g>
</svg>
</li>
</ul>
</div> <!-- /profileDetails -->
</div> <!-- /userProfile -->
</div> <!-- /userSidebar -->
</div>
<div class="sidebarItem opened">
<h3 class="toggler" title="Posted on 28 12 2023"> Fiddle meta </h3>
<div class="body">
<p>
<input type="text" name="title" maxlength="255" value="Exploring the Exquisite Craftsmanship of the Richard Mille RM 50-02" placeholder="Untitled fiddle">
</p>
<p>
<textarea rows="10" cols="40" name="description" placeholder="No description"></textarea>
</p>
<p class="privateFiddleCont">
<label class="checkboxCont proBadge">
<input type="checkbox" name="is_private" value="1" disabled="">
<span class="checkbox"></span> Private fiddle <a class="proBadgeSelf" href="/extra/" target="_blank">Extra</a>
</label>
</p>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<div class="sidebarItem">
<h3 class="toggler proBadge"> Groups <a class="proBadgeSelf" href="/extra/" target="_blank">Extra</a>
</h3>
<div class="body">
<ul class="groupsList toggleGroupPrivacy">
</ul> <!-- .groupsList -->
<div id="choices-select">
<div class="choices" data-type="select-multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">
<div class="choices__inner"><select name="ignore_this_select" multiple="" class="choices__input" hidden="" tabindex="-1" data-choice="active"></select>
<div class="choices__list choices__list--multiple"></div><input type="text" class="choices__input choices__input--cloned" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list"
aria-label="false">
</div>
<div class="choices__list choices__list--dropdown" aria-expanded="false">
<div class="choices__list" aria-multiselectable="true" role="listbox">
<div id="choices--ignore_this_select-y9-item-choice-1" class="choices__item choices__item--choice choices__item--disabled" role="option" data-choice="" data-id="1" data-value="" data-select-text="Press to select"
data-choice-disabled="" aria-disabled="true">You have no groups</div>
</div>
</div>
</div>
</div>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<script src="/js/Groups.js?21de636e8f31cf176d5198b4e09445a0624d7737"></script>
<script type="text/javascript">
var resources = []
</script>
<div class="sidebarItem">
<h3 class="toggler "> Resources <strong class="resourcesLabel">URL</strong> <strong class="resourcesLabel">cdnjs</strong>
<em id="resource-counter" class="hidden">0</em>
</h3>
<div class="body">
<ul id="external_resources_list">
</ul>
<div id="external-resources-form">
<p>
<input id="external_resource" type="text" name="q" value="" placeholder="JavaScript/CSS URL" autocomplete="off">
<a id="add_external_resource" class="submit" href="#" title="Add resource">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
</a>
</p>
</div>
<input type="hidden" value="" id="external_resources_id" name="add_external_resources">
<ul class="resourcesInfo">
<li>Paste a direct CSS/JS URL</li>
<li>Type a library name to fetch from CDNJS</li>
</ul>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<div class="sidebarItem">
<h3 class="toggler"> Async requests </h3>
<div class="body">
<p><code>/echo</code> simulates Async calls:<br> JSON: <code>/echo/json/</code><br> JSONP: <code>//jsfiddle.net/echo/jsonp/</code><br> HTML: <code>/echo/html/</code><br> XML: <code>/echo/xml/</code>
</p>
<p>See <a href="https://jsfiddle.gitbook.io/help/async-requests" target="_new">docs</a> for more info.</p>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<div class="sidebarItem">
<h3 class="toggler"> Other (links, license) </h3>
<div class="body">
<p class="maintainers">Created and maintained by <a title="Piotr's twitter" href="https://twitter.com/zalun" target="_blank" rel="noopener">Piotr</a> and
<a title="UX and UI Designer" href="https://twitter.com/oskar" target="_blank" rel="noopener">Oskar</a>.</p>
<p>Hosted on <a href="https://m.do.co/c/52e7a0ad196d" target="_blank" rel="noopener"><strong>DigitalOcean</strong></a></p>
<p><strong></strong></p>
<p>All code belongs to the poster and no license is enforced. JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.</p>
<p><strong>Links</strong></p>
<p>
<a href="https://github.com/jsfiddle/jsfiddle-issues/issues" target="_blank" rel="noopener">Bug tracker</a><br>
<a href="https://jsfiddle.net/about" target="_blank" rel="noopener">About</a><br>
<a href="https://docs.jsfiddle.net" target="_blank" rel="noopener">Docs</a><br>
<a href="http://status.jsfiddle.net" target="_blank" rel="noopener">Service status</a>
</p>
</div> <!-- /body -->
</div> <!-- /sidebarItem -->
<style media="screen">
.maintainers {
position: absolute;
top: -900em;
left: -900em;
}
</style>
</section>
<section id="s-bottom">
<div class="twitterCont">
<!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=jsfiddlenet" id="_carbonads_js"></script> -->
<script type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIEKQ7&placement=jsfiddlenet" id="_carbonads_js"></script>
<div id="carbonads"><span>
<span class="carbon-wrap">
<a href="https://srv.carbonads.net/ads/click/x/GTND427ECYBD523MCV7LYKQUCTSITK3JCAAIVZ3JCAYD5K3ICASDCKQKC6YD52JJCKAD4K7MCVADL53ECKAD62QIHEYI5K3NCESIP2JECTNCYBZ52K" class="carbon-img" target="_blank" rel="noopener sponsored">
<img src="https://srv.carbonads.net/static/30242/99bb975614dc1f58cda02f8b0fea882634a9841f" alt="ads via Carbon" border="0" height="100" width="130" data-no-statview="no" style="max-width: 130px;">
</a>
<a href="https://srv.carbonads.net/ads/click/x/GTND427ECYBD523MCV7LYKQUCTSITK3JCAAIVZ3JCAYD5K3ICASDCKQKC6YD52JJCKAD4K7MCVADL53ECKAD62QIHEYI5K3NCESIP2JECTNCYBZ52K" class="carbon-text" target="_blank" rel="noopener sponsored">
Try the intuitive platform that lets you manage, collaborate, and automate all in one place.
</a>
</span>
<a href="http://carbonads.net/?utm_source=jsfiddlenet&utm_medium=ad_via_link&utm_campaign=in_unit&utm_term=carbon" class="carbon-poweredby" target="_blank" rel="noopener sponsored">ads via Carbon</a>
<div class="carbon-pixels" style="display: none;"><img
src="https://ad.doubleclick.net/ddm/trackimp/N728909.3091281BUYSELLADS/B28860815.379635107;dc_trk_aid=570635010;dc_trk_cid=180634297;ord=170647801;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;gdpr=$;gdpr_consent=$;ltd=;dc_tdv=1?"
border="0" height="1" width="1" alt="ads via Carbon" style="display: none;"></div>
</span></div>
</div>
<div id="support-jsfiddle">
<h3>Support the development of JSFiddle and get extra features ✌🏻</h3>
<a href="/extra/">Become a supporter</a>
</div>
<!-- <div id="fallback">
<a href="https://instagram.com/oskarkrawczyk" target="_blank">
<h3>Lifestyle, adventure and backstage photographer based in Warsaw, Poland.</h3>
<img src="/img/fallback/logo-adunit.jpg" />
</a>
</div> -->
<div id="fallback">
<a href="https://pixelpeeper.com/exif-data-viewer?utm_source=jsfiddle" target="_blank">
<h3>Exif Data Viewer: turn JPG files into Lightroom presets.</h3>
<img src="/img/fallback/logo-adunit.jpg">
</a>
</div>
</section>
</div> <!-- #sidebar -->
<div id="content">
<div id="editor">
<div class="panel-v left" style="width: calc(50% - 0.5px);">
<div class="panel-h panel" style="height: calc(50% - 0.5px);">
<textarea id="id_code_html" name="code_html" style="display: none;"></textarea>
<div class="windowLabelCont">
<a href="#" class="windowLabel" data-panel="html" data-popover-trigger="html">
<span class="label">HTML</span>
<svg width="8" height="7" viewBox="-0.019531 -52.792969 30.039062 25.195312">
<path d="M29.941406 -52.500000C29.785156 -52.656250 29.589844 -52.753906 29.355469 -52.792969L0.644531 -52.792969C0.410156 -52.753906 0.214844 -52.656250 0.058594 -52.500000C-0.019531 -52.265625 0.000000 -52.050781 0.117188 -51.855469L14.472656 -27.890625C14.628906 -27.734375 14.804688 -27.636719 15.000000 -27.597656C15.234375 -27.636719 15.410156 -27.734375 15.527344 -27.890625L29.882812 -51.855469C30.000000 -52.089844 30.019531 -52.304688 29.941406 -52.500000ZM29.941406 -52.500000"></path>
</svg>
</a>
<a href="#" class="panelTidy" data-panel="html">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg> Tidy</a>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap fontSize_1" translate="no">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"></textarea></div>
<div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="display: block; bottom: 0px; width: 18px; visibility: hidden;">
<div style="min-width: 1px; height: 1489px;"></div>
</div>
<div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; visibility: hidden;">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 50px; min-height: 1469px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines" role="presentation">
<div role="presentation" style="position: relative; outline: none;">
<div class="CodeMirror-measure">
<pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>33</div>
</div>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 16.7969px;"> </div>
</div>
<div class="CodeMirror-code" role="presentation" style="">
<div class="CodeMirror-activeline" style="position: relative;">
<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div>
<div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">div</span> <span class="cm-attribute">class</span>=<span class="cm-string">"Voila__ChatMessage"</span> <span class="cm-attribute">dir</span>=<span class="cm-string">"ltr"</span><span class="cm-tag cm-bracket">><</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">2</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span>Introduction<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">3</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>Welcome to the world of luxury timepieces, where precision engineering meets exquisite craftsmanship. In this blog post, we will dive deep into the realm of horology to explore the Richard Mille RM 50-02, a timepiece that exemplifies the pinnacle of watchmaking. From its innovative design to its exceptional materials, we will uncover the secrets behind this remarkable watch.<span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">><</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">></span>See More Product At <span class="cm-tag cm-bracket"><</span><span class="cm-tag">a</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://replicarichardmillewatch.com/"</span><span class="cm-tag cm-bracket">></span>Fake Richard Mille Watch<span class="cm-tag cm-bracket"></</span><span class="cm-tag">a</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag cm-error">br</span><span class="cm-tag cm-bracket cm-error">></span><span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">><</span><span class="cm-tag">img</span> <span class="cm-attribute">src</span>=<span class="cm-string">"https://replicarichardmillewatch.com/wp-content/uploads/2023/12/Richard-Mille-RM005-Rose-Gold-1-2-768x768.jpg"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag cm-error">br</span><span class="cm-tag cm-bracket cm-error">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">4</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span>1. The History of Richard Mille<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">5</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>Before we delve into the specifics of the RM 50-02, let's take a moment to appreciate the brand behind it - Richard Mille. Founded in 2001 by French businessman Richard Mille, the brand has quickly gained a reputation for producing some of the most technologically advanced and aesthetically striking timepieces in the world.<span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">><</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag cm-error">br</span><span class="cm-tag cm-bracket cm-error">></span><span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">><</span><span class="cm-tag">img</span> <span class="cm-attribute">src</span>=<span class="cm-string">"https://replicarichardmillewatch.com/wp-content/uploads/2023/12/Richard-Mille-RM-11-White-Gold-with-Custom-Diamond-Set-Bezel-4-768x768.jpg"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag cm-error">br</span><span class="cm-tag cm-bracket cm-error">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">6</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>Mille's vision was to combine cutting-edge materials with revolutionary engineering techniques to create watches that push the boundaries of what is possible in horology. With a focus on innovation and performance, Richard Mille has become a favorite among watch enthusiasts and celebrities alike.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">7</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span>2. The Concept Behind the RM 50-02<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">8</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>The Richard Mille RM 50-02 is a testament to the brand's commitment to pushing the limits of watchmaking. Designed specifically for motorsport enthusiasts, this timepiece combines high-performance features with exceptional craftsmanship.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">9</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>The RM 50-02 is inspired by Formula 1 racing, incorporating elements that evoke the adrenaline-fueled world of motorsports. Its striking design and advanced functionalities make it the perfect companion for those who appreciate speed, precision, and style.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">10</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span>3. Materials and Construction<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">11</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>One of the standout features of the RM 50-02 is its exceptional use of materials. Richard Mille has always been at the forefront of innovation in this regard, and the RM 50-02 is no exception.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">12</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span>a. Carbon TPT<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">13</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>The case of the RM 50-02 is crafted from Carbon TPT, a material commonly used in motorsports due to its lightweight and high-strength properties. Carbon TPT is made by layering ultra-thin carbon fibers in a specific pattern, resulting in a robust and visually captivating material.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">14</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span>b. Titanium<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">15</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>To enhance its durability and flexibility, Richard Mille integrates titanium components into the construction of the RM 50-02. Titanium is renowned for its corrosion resistance and lightweight nature, making it an ideal choice for high-performance watches.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">16</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span>c. Sapphire Crystal<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">17</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>Protecting the dial of the RM 50-02 is a sapphire crystal, known for its exceptional scratch resistance. This transparent material provides unparalleled clarity and allows for a full view of the intricate mechanics inside the watch.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">18</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span>4. Features and Complications<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">19</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>The Richard Mille RM 50-02 is not just an exquisite timepiece; it also boasts an array of impressive features and complications. Let's explore some of them:<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">20</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span>a. Split-Seconds Chronograph<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">21</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>At the heart of the RM 50-02 is a split-seconds chronograph movement, allowing for precise timing during motorsport events. This complication enables users to measure intermediate times without interrupting the ongoing timing procedure.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">22</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span>b. G-Sensor<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">23</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>To further enhance its motorsport functionality, Richard Mille has integrated a G-sensor into the RM 50-02. This accelerometer measures forces acting on the watch during acceleration, deceleration, and turns, providing valuable data for racing enthusiasts.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">24</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span>c. Torque Indicator<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">25</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>The torque indicator is another unique feature of the RM 50-02. It displays the tension in the mainspring to ensure optimal performance and accuracy. This innovative feature allows wearers to monitor the power reserve at a glance.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">26</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span>d. Skeletonized Dial<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h3</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">27</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>The dial of the RM 50-02 features a mesmerizing skeletonized design that showcases the intricate inner workings of the watch. Every component is meticulously crafted and assembled by hand, creating a visually stunning timepiece.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">28</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span>5. Limited Editions and Collaborations<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">29</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>Richard Mille is known for producing limited edition watches that are highly sought after by collectors. The RM 50-02 is no exception, with several exclusive editions available to commemorate special events or collaborations.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">30</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>One notable collaboration was with renowned Formula 1 driver Fernando Alonso. The limited edition RM 50-02 Alonso pays tribute to his illustrious career and features design elements inspired by his racing achievements.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">31</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span>Conclusion<span class="cm-tag cm-bracket"></</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">32</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>The Richard Mille RM 50-02 encapsulates everything that makes this brand truly exceptional - innovation, craftsmanship, and a relentless pursuit of perfection. From its use of cutting-edge materials to its advanced functionalities, this timepiece represents the pinnacle of horological engineering.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">33</div>
<div class="CodeMirror-gutter-elt" style="left: 50px; width: 8px;">
<div class="CodeMirror-foldgutter-open CodeMirror-guttermarker-subtle"></div>
</div>
</div>
<pre class=" CodeMirror-line "
role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></span>Whether you are a motorsport enthusiast or simply appreciate the artistry behind luxury watches, the RM 50-02 is sure to captivate your attention. With its striking design and unparalleled performance, it stands as a testament to Richard Mille's unwavering commitment to pushing boundaries and redefining what is possible in watchmaking.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag cm-error">div</span><span class="cm-tag cm-bracket cm-error">></span><span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">></span>#Richard_Mille_Replica, #RichardMilleReplicaStore, #Richard_Mille_Replica_Store, #RichardMilleReplicaCom, #Richard_Mille_Replica_Com, #FakeRichardMille, #Fake_Richard_Mille/<span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">></span></span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 1469px;"></div>
<div class="CodeMirror-gutters" style="height: 1519px; left: 0px;">
<div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div>
<div class="CodeMirror-gutter CodeMirror-foldgutter"></div>
</div>
</div>
</div>
</div>
<div class="gutter gutter-vertical" style="height: 1px;"></div>
<div class="panel-h panel" style="height: calc(50% - 0.5px);">
<textarea id="id_code_js" name="code_js" style="display: none;"></textarea>
<div class="windowLabelCont">
<a href="#" class="windowLabel" data-panel="js" data-popover-trigger="js">
<span class="label">JavaScript + No-Library (pure JS)</span>
<svg width="8" height="7" viewBox="-0.019531 -52.792969 30.039062 25.195312">
<path d="M29.941406 -52.500000C29.785156 -52.656250 29.589844 -52.753906 29.355469 -52.792969L0.644531 -52.792969C0.410156 -52.753906 0.214844 -52.656250 0.058594 -52.500000C-0.019531 -52.265625 0.000000 -52.050781 0.117188 -51.855469L14.472656 -27.890625C14.628906 -27.734375 14.804688 -27.636719 15.000000 -27.597656C15.234375 -27.636719 15.410156 -27.734375 15.527344 -27.890625L29.882812 -51.855469C30.000000 -52.089844 30.019531 -52.304688 29.941406 -52.500000ZM29.941406 -52.500000"></path>
</svg>
</a>
<a href="#" class="panelTidy" data-panel="js">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg> Tidy</a>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap fontSize_1 CodeMirror-focused" translate="no">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"></textarea></div>
<div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; visibility: hidden;">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; visibility: hidden;">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 50px; min-height: 25px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines" role="presentation">
<div role="presentation" style="position: relative; outline: none;">
<div class="CodeMirror-measure">
<pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>1</div>
</div>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors" style="">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 16.7969px;"> </div>
</div>
<div class="CodeMirror-code" role="presentation">
<div class="CodeMirror-activeline" style="position: relative;">
<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div>
<div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 25px;"></div>
<div class="CodeMirror-gutters" style="height: 75px; left: 0px;">
<div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div>
<div class="CodeMirror-gutter CodeMirror-foldgutter"></div>
</div>
</div>
</div>
</div>
</div>
<div class="gutter gutter-horizontal" style="width: 1px;"></div>
<div class="panel-v right" style="width: calc(50% - 0.5px);">
<div class="panel-h panel" style="height: calc(50% - 0.5px);">
<textarea id="id_code_css" name="code_css" style="display: none;"></textarea>
<div class="windowLabelCont">
<a href="#" class="windowLabel" data-panel="css" data-popover-trigger="css">
<span class="label">CSS</span>
<svg width="8" height="7" viewBox="-0.019531 -52.792969 30.039062 25.195312">
<path d="M29.941406 -52.500000C29.785156 -52.656250 29.589844 -52.753906 29.355469 -52.792969L0.644531 -52.792969C0.410156 -52.753906 0.214844 -52.656250 0.058594 -52.500000C-0.019531 -52.265625 0.000000 -52.050781 0.117188 -51.855469L14.472656 -27.890625C14.628906 -27.734375 14.804688 -27.636719 15.000000 -27.597656C15.234375 -27.636719 15.410156 -27.734375 15.527344 -27.890625L29.882812 -51.855469C30.000000 -52.089844 30.019531 -52.304688 29.941406 -52.500000ZM29.941406 -52.500000"></path>
</svg>
</a>
<a href="#" class="panelTidy" data-panel="css">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg> Tidy</a>
</div>
<div class="CodeMirror cm-s-default CodeMirror-wrap fontSize_1" translate="no">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 62px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"
style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"></textarea></div>
<div class="CodeMirror-vscrollbar" tabindex="-1" cm-not-content="true" style="width: 18px; visibility: hidden;">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div class="CodeMirror-hscrollbar" tabindex="-1" cm-not-content="true" style="height: 18px; visibility: hidden;">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1">
<div class="CodeMirror-sizer" style="margin-left: 58px; margin-bottom: 0px; border-right-width: 50px; min-height: 25px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines" role="presentation">
<div role="presentation" style="position: relative; outline: none;">
<div class="CodeMirror-measure">
<pre class="CodeMirror-line-like"><span>xxxxxxxxxx</span></pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>1</div>
</div>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 16.7969px;"> </div>
</div>
<div class="CodeMirror-code" role="presentation">
<div class="CodeMirror-activeline" style="position: relative;">
<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -58px; width: 58px;"></div>
<div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" aria-hidden="true" style="left: -58px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 16px; width: 21px;">1</div>
</div>
<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text=""></span></span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent; top: 25px;"></div>
<div class="CodeMirror-gutters" style="height: 75px; left: 0px;">
<div class="CodeMirror-gutter CodeMirror-lint-markers"></div>
<div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 34px;"></div>
<div class="CodeMirror-gutter CodeMirror-foldgutter"></div>
</div>
</div>
</div>
</div>
<div class="gutter gutter-vertical" style="height: 1px;"></div>
<div class="panel-h panel resultsPanel" style="height: calc(50% - 0.5px);">
<div class="resultsCont minimized consoleEnabled">
<div class="iframeCont">
<iframe name="result"
allow="midi; geolocation; microphone; camera; display-capture; encrypted-media; clipboard-read; clipboard-write; notifications; payment-handler; persistent-storage; background-sync; ambient-light-sensor; accessibility-events;"
sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-top-navigation-by-user-activation allow-downloads" allowfullscreen="" allowpaymentrequest="" frameborder="0"
src="//fiddle.jshell.net/replicarichardmillewatch/uzvc3erh/show/?editor_console=">
</iframe>
</div>
<div class="windowLabelCont">
<span class="windowLabel hidden"> Result </span>
<em class="size hidden">695px</em>
</div>
<div id="console">
<section class="header">
<svg class="logo" height="16" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="1.8" fill="none" stroke-linejoin="round">
<polyline points="4,17 10,11 4,5"></polyline>
<line x1="12" x2="20" y1="19" y2="19"></line>
</g>
</svg>
<h3>Console (beta)</h3>
<div class="consoleActions">
<a id="console-clear" href="#">Clear console</a>
<a id="console-minimize" href="#">Minimize</a>
</div>
<div id="console-summary">
<span class="log ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="1.8" fill="none" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" x2="12" y1="8" y2="12"></line>
<line x1="12" x2="12.01" y1="16" y2="16"></line>
</g>
</svg>0 </span>
<span class="info ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" x2="12" y1="8" y2="12"></line>
<line x1="12" x2="12.01" y1="16" y2="16"></line>
</g>
</svg>0 </span>
<span class="warn ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<path
d="M10.29 3.86l-8.47 14.14 -7.80912e-08 1.35236e-07c-.552351.956547-.224686 2.17975.73186 2.7321 .297614.171855.634491.264121.97814.267898h16.94l-1.12917e-07 1.24109e-09c1.1045-.0121397 1.99004-.917357 1.9779-2.02186 -.00377709-.343648-.0960428-.680526-.267898-.97814l-8.47-14.14 1.92952e-08 3.18097e-08c-.572861-.944407-1.80285-1.2456-2.74726-.672744 -.275097.166869-.505875.397647-.672744.672744Z">
</path>
<line x1="12" x2="12" y1="9" y2="13"></line>
<line x1="12" x2="12.01" y1="17" y2="17"></line>
</g>
</svg>0 </span>
<span class="error ">
<svg height="12" version="1.1" viewBox="0 0 24 24">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<polygon points="7.86,2 16.14,2 22,7.86 22,16.14 16.14,22 7.86,22 2,16.14 2,7.86 7.86,2"></polygon>
<line x1="12" x2="12" y1="8" y2="12"></line>
<line x1="12" x2="12.01" y1="16" y2="16"></line>
</g>
</svg>0 </span>
</div>
</section>
<ul id="console-output">
<li class="system">JSFiddle Console (beta). Turn on/off in Editor settings.</li>
<li class="system">☁️ "Running fiddle"</li>
</ul><input id="console-input" type="text" placeholder=">_">
</div>
</div>
</div>
</div>
</div>
<div class="windowSettings html hidden" data-panel="html" data-popover-ref="html">
<h3>Language</h3>
<div class="selectCont">
<select name="panel_html" class="panelChoice" id="panel_html_choice" data-panel_id="id_code_html" data-panel="html">
<option data-mime-type="text/html" value="0" selected="">HTML</option>
<option data-mime-type="text/x-haml" value="1">HAML</option>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div> <!-- /selectCont -->
<h3>Doctype</h3>
<div class="selectCont">
<select name="doctype">
<option id="dtd_XHTML 1.0 Strict" value="1">XHTML 1.0 Strict</option>
<option id="dtd_XHTML 1.0 Transitional" value="2">XHTML 1.0 Transitional</option>
<option selected="" id="dtd_HTML 5" value="3">HTML 5</option>
<option id="dtd_HTML 4.01 Strict" value="4">HTML 4.01 Strict</option>
<option id="dtd_HTML 4.01 Transitional" value="5">HTML 4.01 Transitional</option>
<option id="dtd_HTML 4.01 Frameset" value="6">HTML 4.01 Frameset</option>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div>
<h3>Body tag</h3>
<p>
<label>
<input id="id_body_tag" type="text" name="body_tag" maxlength="255" value="">
</label>
</p>
</div> <!-- /windowSettings -->
<div class="windowSettings js hidden" data-panel="js" data-popover-ref="js">
<h3>Language</h3>
<div class="selectCont">
<select name="panel_js" class="panelChoice" id="panel_js_choice" data-panel_id="id_code_js" data-panel="js">
<option data-mime-type="text/javascript" value="0" selected="">JavaScript</option>
<option data-mime-type="text/coffeescript" value="1">CoffeeScript</option>
<option data-mime-type="application/javascript" value="2">JavaScript 1.7</option>
<option data-mime-type="text/jsx" value="3">Babel + JSX</option>
<option data-mime-type="text/typescript" value="4">TypeScript</option>
<option data-mime-type="text/coffeescript" value="5">CoffeeScript 2</option>
<option data-mime-type="text/javascript" value="6">Vue</option>
<option data-mime-type="text/jsx" value="7">React</option>
<option data-mime-type="text/jsx" value="8">Preact</option>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div> <!-- /selectCont -->
<h3>Frameworks & Extensions</h3>
<div class="panelExtrasChoice">
<div class="selectCont">
<select name="js_lib" id="js_lib">
<optgroup label="Alpine.js">
<option value="409">Alpine.js 2.1.2</option>
</optgroup>
<optgroup label="AngularJS">
<option value="137">AngularJS 1.1.1</option>
<option value="180">AngularJS 1.2.1</option>
<option value="283">AngularJS 1.4.8</option>
<option value="281">AngularJS 2.0.0-alpha.47</option>
</optgroup>
<optgroup label="Bonsai">
<option value="120">Bonsai 0.4.1</option>
</optgroup>
<optgroup label="Brick">
<option value="176">Brick edge</option>
</optgroup>
<optgroup label="CreateJS">
<option value="170">CreateJS 2013.09.25</option>
<option value="279">CreateJS 2015.05.21</option>
</optgroup>
<optgroup label="D3">
<option value="134">D3 3.x</option>
<option value="386">D3 4.13.0</option>
<option value="397">D3 5.9.2</option>
</optgroup>
<optgroup label="Dojo">
<option value="87">Dojo (nightly)</option>
<option value="372">Dojo 1.4.8</option>
<option value="370">Dojo 1.5.6</option>
<option value="368">Dojo 1.6.5</option>
<option value="366">Dojo 1.7.12</option>
<option value="364">Dojo 1.8.14</option>
<option value="362">Dojo 1.9.11</option>
<option value="360">Dojo 1.10.8</option>
<option value="358">Dojo 1.11.4</option>
<option value="356">Dojo 1.12.2</option>
</optgroup>
<optgroup label="Ember">
<option value="190">Ember (latest)</option>
</optgroup>
<optgroup label="Enyo">
<option value="115">Enyo (nightly)</option>
<option value="116">Enyo 2.0.1</option>
<option value="121">Enyo 2.1</option>
<option value="145">Enyo 2.2.0</option>
<option value="214">Enyo 2.4.0</option>
<option value="238">Enyo 2.5.1</option>
<option value="299">Enyo 2.7.0</option>
</optgroup>
<optgroup label="ExtJS">
<option value="23">ExtJS 3.1.0</option>
<option value="109">ExtJS 3.4.0</option>
<option value="107">ExtJS 4.1.0</option>
<option value="80">ExtJS 4.1.1</option>
<option value="147">ExtJS 4.2.0</option>
<option value="258">ExtJS 5.0.0</option>
<option value="256">ExtJS 5.1.0</option>
<option value="338">ExtJS 6.2.0</option>
</optgroup>
<optgroup label="FabricJS">
<option value="250">FabricJS 1.5.0</option>
<option value="342">FabricJS 1.7.7</option>
<option value="378">FabricJS 1.7.15</option>
<option value="380">FabricJS 1.7.20</option>
</optgroup>
<optgroup label="Glow">
</optgroup>
<optgroup label="Inferno">
<option value="336">Inferno 1.0.0-beta9</option>
</optgroup>
<optgroup label="JSBlocks">
<option value="252">JSBlocks (edge)</option>
</optgroup>
<optgroup label="KineticJS">
<option value="124">KineticJS 4.0.5</option>
<option value="139">KineticJS 4.3.1</option>
</optgroup>
<optgroup label="Knockout.js">
<option value="104">Knockout.js 2.0.0</option>
<option value="117">Knockout.js 2.1.0</option>
<option value="122">Knockout.js 2.2.1</option>
<option value="163">Knockout.js 2.3.0</option>
<option value="172">Knockout.js 3.0.0</option>
<option value="388">Knockout.js 3.4.2</option>
</optgroup>
<optgroup label="Lo-Dash">
<option value="167">Lo-Dash 2.2.1</option>
</optgroup>
<optgroup label="Minified">
<option value="164">Minified 1.0 beta1</option>
</optgroup>
<optgroup label="MithrilJS">
<option value="273">MithrilJS 0.2.0</option>
<option value="390">MithrilJS 1.1.6</option>
</optgroup>
<optgroup label="Mootools">
<option value="59">Mootools (nightly)</option>
<option value="62">Mootools 1.3.2</option>
<option value="63">Mootools 1.3.2 (compat)</option>
<option value="95">Mootools 1.4.5</option>
<option value="96">Mootools 1.4.5 (compat)</option>
<option value="216">Mootools 1.5.1</option>
<option value="263">Mootools 1.5.2</option>
<option value="329">Mootools 1.5.2 (compat)</option>
<option value="325">Mootools 1.6.0</option>
<option value="327">Mootools 1.6.0 (compat)</option>
</optgroup>
<optgroup label="No-Library">
<option value="11" selected="">No-Library (pure JS)</option>
</optgroup>
<optgroup label="OpenUI5">
<option value="271">OpenUI5 (latest, mobile)</option>
</optgroup>
<optgroup label="Paper.js">
<option value="158">Paper.js 0.22</option>
</optgroup>
<optgroup label="Pixi">
<option value="315">Pixi 3.0.11</option>
<option value="331">Pixi 4.0.0</option>
</optgroup>
<optgroup label="Processing.js">
<option value="67">Processing.js 1.2.3</option>
<option value="81">Processing.js 1.3.6</option>
<option value="135">Processing.js 1.4.1</option>
<option value="206">Processing.js 1.4.7</option>
</optgroup>
<optgroup label="Prototype">
<option value="4">Prototype 1.6.1.0</option>
<option value="265">Prototype 1.7.3</option>
</optgroup>
<optgroup label="RactiveJS">
<option value="287">RactiveJS 0.7.3</option>
</optgroup>
<optgroup label="Raphael">
<option value="30">Raphael 1.4</option>
<option value="36">Raphael 1.5.2</option>
<option value="76">Raphael 2.1.0</option>
</optgroup>
<optgroup label="React">
<option value="159">React 0.3.2</option>
<option value="166">React 0.4.0</option>
<option value="184">React 0.8.0</option>
<option value="192">React 0.9.0</option>
<option value="285">React 0.14.3</option>
</optgroup>
<optgroup label="RightJS">
<option value="45">RightJS 2.1.1</option>
<option value="136">RightJS 2.3.1</option>
</optgroup>
<optgroup label="Riot">
<option value="382">Riot 3.7.4</option>
</optgroup>
<optgroup label="Shipyard">
<option value="99">Shipyard (nightly)</option>
<option value="105">Shipyard 0.2</option>
</optgroup>
<optgroup label="Thorax">
<option value="143">Thorax 2.0.0rc3</option>
<option value="174">Thorax 2.0.0rc6</option>
</optgroup>
<optgroup label="Three.js">
<option value="82">Three.js r54</option>
<option value="399">Three.js 105</option>
</optgroup>
<optgroup label="Underscore">
<option value="111">Underscore 1.3.3</option>
<option value="133">Underscore 1.4.3</option>
<option value="160">Underscore 1.4.4</option>
<option value="267">Underscore 1.8.3</option>
</optgroup>
<optgroup label="Vue">
<option value="236">Vue (edge)</option>
<option value="289">Vue 1.0.12</option>
<option value="344">Vue 2.2.1</option>
</optgroup>
<optgroup label="WebApp Install">
<option value="142">WebApp Install 0.1</option>
</optgroup>
<optgroup label="XTK">
<option value="106">XTK edge</option>
</optgroup>
<optgroup label="YUI">
<option value="9">YUI 2.8.0r4</option>
<option value="102">YUI 3.5.0</option>
<option value="118">YUI 3.6.0</option>
<option value="123">YUI 3.7.3</option>
<option value="130">YUI 3.8.0</option>
<option value="153">YUI 3.10.1</option>
<option value="182">YUI 3.14.0</option>
<option value="204">YUI 3.16.0</option>
<option value="230">YUI 3.17.2</option>
</optgroup>
<optgroup label="Zepto">
<option value="90">Zepto 1.0rc1</option>
</optgroup>
<optgroup label="jQuery">
<option value="46">jQuery (edge)</option>
<option value="131">jQuery 1.9.1</option>
<option value="248">jQuery 2.1.3</option>
<option value="319">jQuery 2.2.4</option>
<option value="376">jQuery 3.2.1</option>
<option value="384">jQuery 3.3.1</option>
<option value="401">jQuery 3.4.1</option>
</optgroup>
<optgroup label="jQuery Slim">
<option value="407">jQuery Slim 3.2.1</option>
<option value="405">jQuery Slim 3.3.1</option>
<option value="403">jQuery Slim 3.4.1</option>
</optgroup>
<optgroup label="jTypes">
<option value="165">jTypes 2.1.0</option>
</optgroup>
<optgroup label="qooxdoo">
<option value="127">qooxdoo 2.0.3</option>
<option value="126">qooxdoo 2.1</option>
</optgroup>
<optgroup label="svg.js">
<option value="395">svg.js 2.6.5</option>
<option value="393">svg.js 2.7.1</option>
<option value="391">svg.js 3.0.5</option>
</optgroup>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div>
<ul id="js_dependency">
</ul>
</div>
<h3>Framework <script> attribute</h3>
<p class="libraryTagAttributes">
<label>
<input id="id_js_lib_option" type="text" name="js_lib_option" maxlength="255" placeholder="ie. data-type=""" value="">
</label>
</p>
</div> <!-- /windowSettings -->
<div class="windowSettings css hidden" data-panel="css" data-popover-ref="css">
<h3>Language</h3>
<div class="selectCont">
<select name="panel_css" class="panelChoice" id="panel_css_choice" data-panel_id="id_code_css" data-panel="css">
<option data-mime-type="text/css" value="0" selected="">CSS</option>
<option data-mime-type="text/x-scss" value="1">SCSS</option>
<option data-mime-type="text/x-sass" value="2">SASS</option>
<option data-mime-type="text/css" value="4">PostCSS (Stage 0+)</option>
<option data-mime-type="text/css" value="5">PostCSS (Stage 3+)</option>
</select>
<label>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</label>
</div> <!-- /selectCont -->
<h3>Options</h3>
<p id="normalize_check">
<label class="checkboxCont">
<input type="checkbox" name="normalize_css" id="id_normalize_css" value="1">
<span class="checkbox"><i class="bts bt-check"></i></span> Normalized CSS </label>
</p>
</div> <!-- /windowSettings -->
<div id="problem-banner"></div>
</div> <!-- #content -->
<ul id="flash-messages" class="draft hidden">
<li class="warning">
<!--?xml version="1.0" encoding="UTF-8"?--><svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke-linecap="round" stroke-width="2" fill="none" stroke-linejoin="round">
<polyline points="23,4 23,10 17,10"></polyline>
<path
d="M20.49 15l8.16053e-09-2.30983e-08c-1.65578 4.68667-6.79735 7.1437-11.484 5.48792 -4.68667-1.65578-7.1437-6.79735-5.48792-11.484 1.65578-4.68667 6.79735-7.1437 11.484-5.48792 1.26714.447675 2.41794 1.17344 3.36792 2.12402l4.63 4.36">
</path>
</g>
</svg> This fiddle has previously unsaved changes. <span class="flashActions">
<a id="apply-draft" href="#">Apply changes</a>
<a id="discard-draft" href="#">Discard</a>
</span>
</li>
</ul>
</main> <!-- #layout-container -->
<div id="loader">
<svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 33">
<g stroke-width="1" fill="none" fill-rule="evenodd">
<path class="cloud"
d="M45,22.7331459 C45,19.1499462 42.7950446,16.079593 39.6628004,14.7835315 C39.6774469,14.5246474 39.7003932,14.2674038 39.7003932,14.0035978 C39.7003932,6.82243304 33.8412885,1 26.611593,1 C21.3985635,1 16.9102123,4.03409627 14.8051788,8.41527616 C13.7828502,7.62878013 12.503719,7.15547161 11.1134367,7.15547161 C7.77825654,7.15547161 5.07450503,9.84159999 5.07450503,13.1544315 C5.07450503,13.7760488 5.16938207,14.3779791 5.3477444,14.9418479 C2.74863428,16.4787471 1,19.2867709 1,22.5105187 C1,27.3287502 4.89630545,31.2367856 9.72803666,31.31094 L36.3341301,31.3109406 C41.1201312,31.3406346 45,27.4870665 45,22.7331459 L45,22.7331459 Z"
stroke-linejoin="round"></path>
<path class="loop" d="M25.3570852,17.8208603
C26.0154526,17.1207706 27.1652748,15.6666667 29.5167986,15.6666667
C32.1278053,15.6666667 34.2444444,17.6366138 34.2444444,20.0666667
C34.2444444,22.4967196 32.1278053,24.4666667 29.5167986,24.4666667
C26.9249697,24.4666667 24.5595344,21.7145959 23.4888889,20.543316
C21.4404656,18.4187374 19.0750303,15.6666667 16.4832014,15.6666667
C13.8721947,15.6666667 11.7555556,17.6366138 11.7555556,20.0666667
C11.7555556,22.4967196 13.8721947,24.4666667 16.4832014,24.4666667
C18.8347252,24.4666667 19.9845474,23.0125628 20.6429148,22.312473
L25.3570852,17.8208603" stroke-linecap="round"></path>
</g>
</svg>
<span class="shadow"></span>
</div>
</form>Text Content
Close
START WITH A BOILERPLATE:
* jQuery
* Vue
* React
* React + JSX
* Preact
* TypeScript
* CoffeeScript
* SCSS
* CSS Grid
* Bootstrap
* PostCSS
Show boilerplate bar less often?
LINKS:
* 👍🏻 Roadmap (vote for features)
* 🐞 Bug tracker
* 📙 Docs
* 🎛 Service status
Support JSFiddle and get extra features Groups, Private fiddles, Ad-free & more
JSFIDDLE IS FOR:
* Demos for docs
* Bug reporting (test-case) for Github Issues
* Presenting code answers on Stack Overflow
* Live code collaboration
* Code snippets hosting
* ... or just your humble code playground ✌🏻
JSFIDDLE
Run
Save
Fork
Set as base
Collaborate
Embed
* Vote for features
* Settings
* Sign in
EDITOR LAYOUT
Classic Columns Bottom results Right results Tabs (columns) Tabs (rows)
CONSOLE
Console in the editor (beta)
Clear console on run
GENERAL
Line numbers
Wrap lines
Indent with tabs
Code hinting (autocomplete) (beta)
Indent size:
2 spaces 3 spaces 4 spaces
Key map:
Default Sublime Text EMACS
Font size:
Default Big Bigger Jabba
BEHAVIOR
Auto-run code
Only auto-run code that validates
Auto-save code (bumps the version)
Auto-close HTML tags
Auto-close brackets
Live code validation
Highlight matching tags
BOILERPLATES
Show boilerplates bar less often
Loading ...
PLANNED FEATURES BY VOTES
* Publish fiddles as mini-websites
* Save fiddles as templates
* Download a zipped fiddle
Save anonymous (public) fiddle?
- Be sure not to include personal data
- Do not include copyrighted material
Log in if you'd like to delete this fiddle in the future.
Save
Fork anonymous (public) fiddle?
- Be sure not to include personal data
- Do not include copyrighted material
Log in if you'd like to delete this fiddle in the future.
Fork
TABS:
JavaScript HTML CSS Result
VISUAL:
Light Dark
EMBED SNIPPET PREFER IFRAME?:
<script async src="{embedSrc}"></script>
<iframe width="100%" height="300" src="{embedSrc}" allowfullscreen
allowpaymentrequest frameborder="0"></iframe>
No autoresizing to fit the code
Render blocking of the parent page
replicarichardmillewatch
*
FIDDLE META
Private fiddle Extra
GROUPS EXTRA
You have no groups
RESOURCES URL CDNJS 0
* Paste a direct CSS/JS URL
* Type a library name to fetch from CDNJS
ASYNC REQUESTS
/echo simulates Async calls:
JSON: /echo/json/
JSONP: //jsfiddle.net/echo/jsonp/
HTML: /echo/html/
XML: /echo/xml/
See docs for more info.
OTHER (LINKS, LICENSE)
Created and maintained by Piotr and Oskar.
Hosted on DigitalOcean
All code belongs to the poster and no license is enforced. JSFiddle or its
authors are not responsible or liable for any loss or damage of any kind during
the usage of provided code.
Links
Bug tracker
About
Docs
Service status
Try the intuitive platform that lets you manage, collaborate, and automate all
in one place. ads via Carbon
SUPPORT THE DEVELOPMENT OF JSFIDDLE AND GET EXTRA FEATURES ✌🏻
Become a supporter
EXIF DATA VIEWER: TURN JPG FILES INTO LIGHTROOM PRESETS.
HTML Tidy
xxxxxxxxxx
33
1
<div class="Voila__ChatMessage" dir="ltr"><div>
2
<h2>Introduction</h2>
3
<p>Welcome to the world of luxury timepieces, where precision engineering meets exquisite craftsmanship. In this blog post, we will dive deep into the realm of horology to explore the Richard Mille RM 50-02, a timepiece that exemplifies the pinnacle of watchmaking. From its innovative design to its exceptional materials, we will uncover the secrets behind this remarkable watch.<br><strong>See More Product At <a href="https://replicarichardmillewatch.com/">Fake Richard Mille Watch</a></strong></br><br><img src="https://replicarichardmillewatch.com/wp-content/uploads/2023/12/Richard-Mille-RM005-Rose-Gold-1-2-768x768.jpg"></br>
4
<h2>1. The History of Richard Mille</h2>
5
<p>Before we delve into the specifics of the RM 50-02, let's take a moment to appreciate the brand behind it - Richard Mille. Founded in 2001 by French businessman Richard Mille, the brand has quickly gained a reputation for producing some of the most technologically advanced and aesthetically striking timepieces in the world.<br><strong></strong></br><br><img src="https://replicarichardmillewatch.com/wp-content/uploads/2023/12/Richard-Mille-RM-11-White-Gold-with-Custom-Diamond-Set-Bezel-4-768x768.jpg"></br>
6
<p>Mille's vision was to combine cutting-edge materials with revolutionary engineering techniques to create watches that push the boundaries of what is possible in horology. With a focus on innovation and performance, Richard Mille has become a favorite among watch enthusiasts and celebrities alike.</p>
7
<h2>2. The Concept Behind the RM 50-02</h2>
8
<p>The Richard Mille RM 50-02 is a testament to the brand's commitment to pushing the limits of watchmaking. Designed specifically for motorsport enthusiasts, this timepiece combines high-performance features with exceptional craftsmanship.</p>
9
<p>The RM 50-02 is inspired by Formula 1 racing, incorporating elements that evoke the adrenaline-fueled world of motorsports. Its striking design and advanced functionalities make it the perfect companion for those who appreciate speed, precision, and style.</p>
10
<h2>3. Materials and Construction</h2>
11
<p>One of the standout features of the RM 50-02 is its exceptional use of materials. Richard Mille has always been at the forefront of innovation in this regard, and the RM 50-02 is no exception.</p>
12
<h3>a. Carbon TPT</h3>
13
<p>The case of the RM 50-02 is crafted from Carbon TPT, a material commonly used in motorsports due to its lightweight and high-strength properties. Carbon TPT is made by layering ultra-thin carbon fibers in a specific pattern, resulting in a robust and visually captivating material.</p>
14
<h3>b. Titanium</h3>
15
<p>To enhance its durability and flexibility, Richard Mille integrates titanium components into the construction of the RM 50-02. Titanium is renowned for its corrosion resistance and lightweight nature, making it an ideal choice for high-performance watches.</p>
16
<h3>c. Sapphire Crystal</h3>
17
<p>Protecting the dial of the RM 50-02 is a sapphire crystal, known for its exceptional scratch resistance. This transparent material provides unparalleled clarity and allows for a full view of the intricate mechanics inside the watch.</p>
18
<h2>4. Features and Complications</h2>
19
<p>The Richard Mille RM 50-02 is not just an exquisite timepiece; it also boasts an array of impressive features and complications. Let's explore some of them:</p>
20
<h3>a. Split-Seconds Chronograph</h3>
21
<p>At the heart of the RM 50-02 is a split-seconds chronograph movement, allowing for precise timing during motorsport events. This complication enables users to measure intermediate times without interrupting the ongoing timing procedure.</p>
22
<h3>b. G-Sensor</h3>
23
<p>To further enhance its motorsport functionality, Richard Mille has integrated a G-sensor into the RM 50-02. This accelerometer measures forces acting on the watch during acceleration, deceleration, and turns, providing valuable data for racing enthusiasts.</p>
24
<h3>c. Torque Indicator</h3>
25
<p>The torque indicator is another unique feature of the RM 50-02. It displays the tension in the mainspring to ensure optimal performance and accuracy. This innovative feature allows wearers to monitor the power reserve at a glance.</p>
26
<h3>d. Skeletonized Dial</h3>
27
<p>The dial of the RM 50-02 features a mesmerizing skeletonized design that showcases the intricate inner workings of the watch. Every component is meticulously crafted and assembled by hand, creating a visually stunning timepiece.</p>
28
<h2>5. Limited Editions and Collaborations</h2>
29
<p>Richard Mille is known for producing limited edition watches that are highly sought after by collectors. The RM 50-02 is no exception, with several exclusive editions available to commemorate special events or collaborations.</p>
30
<p>One notable collaboration was with renowned Formula 1 driver Fernando Alonso. The limited edition RM 50-02 Alonso pays tribute to his illustrious career and features design elements inspired by his racing achievements.</p>
31
<h2>Conclusion</h2>
32
<p>The Richard Mille RM 50-02 encapsulates everything that makes this brand truly exceptional - innovation, craftsmanship, and a relentless pursuit of perfection. From its use of cutting-edge materials to its advanced functionalities, this timepiece represents the pinnacle of horological engineering.</p>
33
<p>Whether you are a motorsport enthusiast or simply appreciate the artistry behind luxury watches, the RM 50-02 is sure to captivate your attention. With its striking design and unparalleled performance, it stands as a testament to Richard Mille's unwavering commitment to pushing boundaries and redefining what is possible in watchmaking.</p></div><br>#Richard_Mille_Replica, #RichardMilleReplicaStore, #Richard_Mille_Replica_Store, #RichardMilleReplicaCom, #Richard_Mille_Replica_Com, #FakeRichardMille, #Fake_Richard_Mille/<br>
JavaScript + No-Library (pure JS) Tidy
xxxxxxxxxx
1
1
CSS Tidy
xxxxxxxxxx
1
1
Result 695px
CONSOLE (BETA)
Clear console Minimize
0 0 0 0
* JSFiddle Console (beta). Turn on/off in Editor settings.
* ☁️ "Running fiddle"
LANGUAGE
HTML HAML
DOCTYPE
XHTML 1.0 Strict XHTML 1.0 Transitional HTML 5 HTML 4.01 Strict HTML 4.01
Transitional HTML 4.01 Frameset
BODY TAG
LANGUAGE
JavaScript CoffeeScript JavaScript 1.7 Babel + JSX TypeScript CoffeeScript 2 Vue
React Preact
FRAMEWORKS & EXTENSIONS
Alpine.js 2.1.2 AngularJS 1.1.1 AngularJS 1.2.1 AngularJS 1.4.8 AngularJS
2.0.0-alpha.47 Bonsai 0.4.1 Brick edge CreateJS 2013.09.25 CreateJS 2015.05.21
D3 3.x D3 4.13.0 D3 5.9.2 Dojo (nightly) Dojo 1.4.8 Dojo 1.5.6 Dojo 1.6.5 Dojo
1.7.12 Dojo 1.8.14 Dojo 1.9.11 Dojo 1.10.8 Dojo 1.11.4 Dojo 1.12.2 Ember
(latest) Enyo (nightly) Enyo 2.0.1 Enyo 2.1 Enyo 2.2.0 Enyo 2.4.0 Enyo 2.5.1
Enyo 2.7.0 ExtJS 3.1.0 ExtJS 3.4.0 ExtJS 4.1.0 ExtJS 4.1.1 ExtJS 4.2.0 ExtJS
5.0.0 ExtJS 5.1.0 ExtJS 6.2.0 FabricJS 1.5.0 FabricJS 1.7.7 FabricJS 1.7.15
FabricJS 1.7.20 Inferno 1.0.0-beta9 JSBlocks (edge) KineticJS 4.0.5 KineticJS
4.3.1 Knockout.js 2.0.0 Knockout.js 2.1.0 Knockout.js 2.2.1 Knockout.js 2.3.0
Knockout.js 3.0.0 Knockout.js 3.4.2 Lo-Dash 2.2.1 Minified 1.0 beta1 MithrilJS
0.2.0 MithrilJS 1.1.6 Mootools (nightly) Mootools 1.3.2 Mootools 1.3.2 (compat)
Mootools 1.4.5 Mootools 1.4.5 (compat) Mootools 1.5.1 Mootools 1.5.2 Mootools
1.5.2 (compat) Mootools 1.6.0 Mootools 1.6.0 (compat) No-Library (pure JS)
OpenUI5 (latest, mobile) Paper.js 0.22 Pixi 3.0.11 Pixi 4.0.0 Processing.js
1.2.3 Processing.js 1.3.6 Processing.js 1.4.1 Processing.js 1.4.7 Prototype
1.6.1.0 Prototype 1.7.3 RactiveJS 0.7.3 Raphael 1.4 Raphael 1.5.2 Raphael 2.1.0
React 0.3.2 React 0.4.0 React 0.8.0 React 0.9.0 React 0.14.3 RightJS 2.1.1
RightJS 2.3.1 Riot 3.7.4 Shipyard (nightly) Shipyard 0.2 Thorax 2.0.0rc3 Thorax
2.0.0rc6 Three.js r54 Three.js 105 Underscore 1.3.3 Underscore 1.4.3 Underscore
1.4.4 Underscore 1.8.3 Vue (edge) Vue 1.0.12 Vue 2.2.1 WebApp Install 0.1 XTK
edge YUI 2.8.0r4 YUI 3.5.0 YUI 3.6.0 YUI 3.7.3 YUI 3.8.0 YUI 3.10.1 YUI 3.14.0
YUI 3.16.0 YUI 3.17.2 Zepto 1.0rc1 jQuery (edge) jQuery 1.9.1 jQuery 2.1.3
jQuery 2.2.4 jQuery 3.2.1 jQuery 3.3.1 jQuery 3.4.1 jQuery Slim 3.2.1 jQuery
Slim 3.3.1 jQuery Slim 3.4.1 jTypes 2.1.0 qooxdoo 2.0.3 qooxdoo 2.1 svg.js 2.6.5
svg.js 2.7.1 svg.js 3.0.5
FRAMEWORK <SCRIPT> ATTRIBUTE
LANGUAGE
CSS SCSS SASS PostCSS (Stage 0+) PostCSS (Stage 3+)
OPTIONS
Normalized CSS
* This fiddle has previously unsaved changes. Apply changes Discard