Plugins/samples/index.html

﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Vorlon.js - Test page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://localhost:1337/vorlon.max.js"></script>
    <style>
      body {
        margin: 0;
        padding: 50px;
        padding-top: 10px;
        font-family: Helvetica, Arial, sans-serif;
        color: #666;
      }

      h1, h2 {
        margin-bottom: 0px;
        margin-top: 40px;
      }

      h1, h2, a, a:visited {
        color: #6C2983;
      }

      #test {
        font-size: 18px;
      }

      .class1 {
        color: coral;
      }

      #footer {
        background: rgba(255, 255, 255, 0.8);
        position: fixed;
        bottom: 20px;
        left: 0;
        width: 100%;
        text-align: center;
        padding: 10px
      }
    </style>
  </head>
  <body>
    <h1>Vorlon.JS Test Page</h1>
    <p>
      This test page includes the vorlon client script. Ensure you are running the Vorlon.JS server, as explained <a href="http://vorlonjs.com/documentation">in the Vorlon.JS docs</a>. Then open the <a href="http://localhost:1337/dashboard">Vorlon.JS dashboard</a> and refresh this page.
    </p>

    <h2>Console Logging</h2>
    <p>Console messages get logged to the Vorlon.JS dashboard. Try it!</p>
    <button onclick="console.log('This is a log message!')">console.log()</button>
    <button onclick="console.warn('This is a warning!')">console.warn()</button>
    <button onclick="console.error('This is an error!')">console.error()</button>

    <h2>Dom Explorer</h2>
    <p>You can inspect the DOM of this page from the Vorlon.JS dashboard. Here is some html with inline styles, and css styles applied.
    <div>
      <input type="text" placeholder="This is an input"/>

      <div id="test">
        <p>This text is styled by css</p>
      </div>
      <div id="test2" style="font-family: monospace">
        <p>This text has inline styles</p>
      </div>
      <div id="test3" class="class1 class2">
        <p>This text has some classes</p>
      </div>
      <div>
        <img src="./ship.svg" width="50px"/>
      </div>
    </div>

    <div id="footer">
      Learn more about <a href="http://vorlonjs.com">Vorlon.JS</a> or find the source at <a href="http://github.com/MicrosoftDX/Vorlonjs">GitHub</a>.
    </div>

    <script>
      console.log('The sample page has loaded!');
    </script>
  </body>
</html>