Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

executable file 224 lines (202 sloc) 7.81 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="publish-url" content="http://wpm.toolness.org">
    <base target="_blank">

    <!-- Dynamic servers like Django sites can serve this editor at a
path different from the static files by changing the line
below. -->
    <base href=".">
    
    <title>Mozilla Webpage Maker</title>
    <link rel="stylesheet" href="codemirror2/lib/codemirror.css">
    <link rel="stylesheet" href="css/jsbin-codemirror-theme.css">
    <link rel="stylesheet" href="css/tipsy.css">
    <link rel="stylesheet" href="css/mozbranding.css">
    <link rel="stylesheet" href="css/gumdrops.css">
    <link rel="stylesheet" href="css/editor.css">
    <link rel="stylesheet" href="css/modals.css">
  </head>
  <body>

    <header id="header">
      <div class="busta">
        <a id="tabzilla" href="http://www.mozilla.org" class="tabzilla-closed">mozilla.org</a>
        <div class="logo">
          <a>
            <img src="img/mozilla-logo.png">
            <b>W</b>EB<b>P</b>AGE <b>M</b>AKER
          </a>
        </div>
      </div>

      <div id="publish-box">
          <a class="button" id="undo_button" data-restore-help="We've rescued your very recent changes to this page, but you can click this button to undo them.">Undo</a>
          <a class="button" id="redo_button">Redo</a>
          <!-- TODO: Until we actually implement the sharing widget,
we're renaming 'Save' to 'Share' and not displaying the
real 'Share' button. -->
          <a class="button blue" id="save_button">Save</a>
          <a class="button" id="share_button">Share</a>
      </div>
    </header>

    <section id="editor" class="loading">
      <div id="source"></div>
      <div id="preview-holder">
        <iframe id="preview" src="blank.html"></iframe>
      </div>
    </section>

    <!-- footer -->
    <footer>
      <div class="error" class="hidden"></div>
      <div class="help" class="hidden"></div>
    </footer>
    
    <!-- save/public modal -->
    <div id="publish-dialog" class="modal-overlay" style="display: none">
      <div class="modal-box">
        <div class="close-icon"><img src="img/temp-icon.png"></div>

        <div class="modal-title">
          <strong>Hold on</strong>
          <span class="light-text">we're saving your thing.</span>
        </div>

        <div class="modal-selection done">
          <p>Ok, we're done.</p>
          <div class="content-box">
            <p>View your HTML page at:</p>
            <p><a class="view" href="" target="_blank"></a></p>
            <p>Remix your HTML page at:</p>
            <p><a class="remix" href="" target="_blank"></a></p>
          </div>
        </div>
      </div>
    </div>
    <!-- end of save/public modal dialog -->
 
    <!-- modal overlay (not a template) -->
    <div id="share-dialog" class="modal-overlay" style="display: none">
      <div class="modal-box">
        <div class="close-icon"><img src="img/temp-icon.png"></div>

        <div class="modal-title">
          <strong>choose</strong>
          <span class="light-text">how you want to share:</span>
        </div>

        <div class="button-bar">
          <ul id="share-buttons">
            <li><a data-id="twitter-widget" class="twitter">Share with Twitter</a></li>
            <li><a data-id="facebook-widget" class="facebook">Share with Facebook</a></li>
            <li><a data-id="google-widget" class="google">Share with Google+</a></li>
            <li><a data-id="link-to-this" class="link">Embed as Link</a></li>
            <li><a data-id="download-code" class="download">Download Code</a></li>
            <li><a data-id="mail-this" class="email">Email to a Friend</a></li>
          </ul>
        </div>
        
        <div class="modal-selections" id="share-container">
          <!-- twitter, facebook and goolge+ use socialshare -->
          <div class="modal-selection facebook-widget">
            Share your work on Facebook!
            <div class="content-box facebook">
              <a href="">Click here for the facebook like button</a>
            </div>
          </div>
          <div class="modal-selection google-widget">
            Share your work through Google!
            <div class="content-box google">
              <a href="">Click here for the Google+ button</a>
            </div>
          </div>
          <div class="modal-selection twitter-widget">
            Share your work via Twitter!
            <div class="content-box twitter">
              <a href="">Click here for the tweet button</a>
            </div>
          </div>
          
          <div class="modal-selection link-to-this">
            get the link for your page
            <div class="content-box" id="quick-save">
              <div class="done">
                your link is: <a href="" class="view">here</a>
              </div>
            </div>
          </div>

          <div class="modal-selection download-code">
            get the source code for your page:
            <div class="content-box">
              <pre id="modal-source-code" readonly>
              </pre>
            </div>
          </div>

          <div class="modal-selection mail-this">
            mail this to a friend
            <div class="content-box">
              <a href="" class="mailto">Click here to let a friend know about your remix!</a>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- modal overlay end -->
    
<script type="text/html" id="help-template">
  <div class="icon"><img src="img/help.png"></div>
  <div class="content">
    <%= html %>
    <% if (type == "cssSelector") { %>
      <span class="selector-matches"> It currently matches <%- matchCount %> element(s).</span>
    <% } %>
    <a class="learn-more" href="<%- url %>">more</a>
  </div>
</script>

<script type="text/html" id="error-template">
  <div class="icon"><img src="img/error.png"></div>
  <div class="content">
    <%= error %>
  </div>
</script>

<script type="text/html" id="initial-html"><!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: white;
        color: #333;
        padding-top: 1em;
      }
      h1 {
        color: #333;
        font-family: Georgia;
        text-align: center;
        text-shadow: 2px 2px 3px #CCC;
      }
      p {
        text-align: justify;
        text-shadow: 2px 2px 3px #999;
      }
    </style>
  </head>
  <body>
    <h1>Let's remix the web! It's easy!</h1>

    <p>Remixing the web is easier than you think. A bit of styling
       here, an image replacement there, and suddenly a page can
       look completely different! Give it a try with some of our
       templates, or load your favourite site and let's get mixin'.</p>
  </body>
</html>
</script>

  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.tipsy.js"></script>
  <script src="js/underscore.min.js"></script>
  <script src="js/backbone.min.js"></script>
  <script src="js/lscache.js"></script>
  <script src="codemirror2/lib/codemirror.js"></script>
  <script src="codemirror2/mode/xml/xml.js"></script>
  <script src="codemirror2/mode/javascript/javascript.js"></script>
  <script src="codemirror2/mode/css/css.js"></script>
  <script src="codemirror2/mode/htmlmixed/htmlmixed.js"></script>
  <script src="slowparse/slowparse.js"></script>
  <script src="slowparse/tree-inspectors.js"></script>
  <script src="slowparse/spec/errors.jquery.js"></script>
  <script src="js/hacktionary-data.js"></script>
  <script src="js/help.js"></script>
  <script src="js/editor.js"></script>
  <script src="js/publish.js"></script>
  <script src="js/share.js"></script>
  <script src="js/late-socials.js"></script>
  <script src="js/main.js"></script>
  </body>
</html>
Something went wrong with that request. Please try again.