Skip to content
Create a gist now

Instantly share code, notes, and snippets.

shadow extension splash page
<!doctype html>
<html lang="en">
<!--
/*************************************************************************
*
* ADOBE CONFIDENTIAL
* ___________________
*
* Copyright 2011 Adobe Systems Incorporated
* All Rights Reserved.
*
* NOTICE: All information contained herein is, and remains
* the property of Adobe Systems Incorporated and its suppliers,
* if any. The intellectual and technical concepts contained
* herein are proprietary to Adobe Systems Incorporated and its
* suppliers and are protected by trade secret or copyright law.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe Systems Incorporated.
**************************************************************************/
AdobePatentID="2121US01"
AdobePatentID="2122US01"
-->
<head>
<meta charset="utf-8">
<title>Adobe&reg; Shadow Getting Started Guide</title>
<link rel="shortcut icon" href="favicon.ico">
<style type="text/css" media="screen">
body { background: #f3f4f5; color: #777; font: 14px normal Helvetica, Arial, sans-serif; margin: 0; line-height: 21px;
-webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: #444; font-weight: normal; line-height: 1.3em; }
h1 { color: #444; margin: 0 0 18px; }
h2 { margin: 0 0 1.3em; }
h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 21px; }
ul { margin-bottom: 0; }
#container { margin: 69px auto; position: relative; width: 966px; }
header { padding: 84px 0 0; }
#main { background: #fff; margin: 0 0 180px; box-shadow: 0 0 3px #ccc; border-bottom: 1px solid #eaeaea; padding-bottom: 36px; }
#main section { padding: 39px 53px; }
#main section p:last-child { margin: 0; }
hr { background: #e7e7e7; border: none; height: 1px; margin: 0 53px; }
#main #intro p { font-size: 18px; line-height: 1.6;
width: 100%; }
#main h2, #main h3, #main h4, #main p { width: 315px; }
#remote-inspection { height: 370px; }
#intro { background: url("Assets/logo-adobe.png") no-repeat 897px 0; color: #888; font-size: 21px; line-height: 30px; }
#same-network { background: url("Assets/step-same-network.png") no-repeat 400px 5px; min-height: 290px; }
#connecting { background: url("Assets/step-connecting.png") no-repeat 387px 30px; min-height: 490px; }
#remote-inspection { background: url("Assets/step-remote-inspection.png") no-repeat 404px 30px; }
a:link { color: #017eca; text-decoration: none; }
a:visited { color: #017eca; text-decoration: none; }
a:hover { color: #017eca; text-decoration: underline; }
a:active { color: #004a7c; text-decoration: underline; }
.reg { font-size: 14px; vertical-align: super;}
</style>
</head>
<body>
<div id="container">
<div id="main" role="main">
<section id="intro">
<h1>Adobe<span class="reg">&reg;</span> Shadow Getting Started Guide</h1>
<p>Adobe<span class="reg">&reg;</span> Shadow is for web designers and developers targeting mobile browsers. After installing Shadow, you will be able to pair devices, have them browse in sync with your computer, perform remote inspection/debugging and see HTML/CSS/JavaScript changes instantly on your device. </p>
</section>
<hr>
<section id="same-network">
<h2>1. Ensure Devices are on the Same Network</h2>
<p>Shadow requires your computer and devices to be on the same network. Computer and devices must be on the same subnet for auto-discovery. If you cannot see your computer, try a Manual Connection.</p>
</section>
<hr>
<section id="connecting">
<h2>2. Connecting Devices to computer</h2>
<h3>A. Auto-Discovery</h3>
<p>The device running Shadow will look for computers also running Shadow. Tap the computer you would like to connect to. Enter the passcode into the Chrome Extension. This creates a wireless connection between your computer and device</p>
<h3>B. Manual Connection</h3>
<p>If you can't find the computer you want to connect to, tap the "+" button to perform a Manual Connect. A list of IP Addresses associated with your computer is located at the bottom of the Chrome Extension. Insert the IP Address into the text field on the device.</p>
<p>When a device is connected, Shadow will prevent the screen from dimming or going to sleep.</p>
</section>
<hr>
<section id="remote-inspection">
<h2>3. Inspecting &amp; debugging the page on your device</h2>
<p> In the Chrome Extension, click on the "&lt; &gt;" button next to the device you'd like to inspect or debug and the Developer Tools window will open; you can use remote inspection on one device at a time</p>
</section>
</div>
</div> <!--! end of #container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.