-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
87 lines (86 loc) · 17.3 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>OWOP edited by mathias377</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Draw pixels with other people in real-time on an (almost) infinite canvas!">
<meta name="keywords" content="pixel, game, draw, online, cursors, canvas, world">
<style>/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 7, 2017 */@font-face{font-family:pixel-op;src:url(/font/pixeloperator.woff2) format("woff2"),url(/font/pixeloperator.woff) format("woff");font-weight:400;font-style:normal}::-webkit-scrollbar{width:16px;height:16px}::-webkit-scrollbar-corner{background-color:transparent}::-webkit-scrollbar-button{height:16px;width:16px;border:6px solid;border-image:url(/img/button.png) 6 repeat;background-image:url(/img/gui.png);background-color:#333;border-width:6px;background-origin:border-box;background-repeat:no-repeat}::-webkit-scrollbar-button:hover{background-color:#a6a6a6}::-webkit-scrollbar-button:active{background-color:#595959;border-image:url(/img/button_pressed.png) 6 repeat}::-webkit-scrollbar-button:disabled{background-color:#666;border-image:url(/img/button_pressed.png) 6 repeat}::-webkit-scrollbar-button:vertical:increment{background-position:-32px 0}::-webkit-scrollbar-button:vertical:increment:disabled{background-position:-48px 0}::-webkit-scrollbar-button:vertical:decrement{background-position:0 0}::-webkit-scrollbar-button:vertical:decrement:disabled{background-position:-16px 0}::-webkit-scrollbar-button:horizontal:increment{background-position:0 16px}::-webkit-scrollbar-button:horizontal:increment:disabled{background-position:-16px 16px}::-webkit-scrollbar-button:horizontal:decrement{background-position:-32px 16px}::-webkit-scrollbar-button:horizontal:decrement:disabled{background-position:-48px 16px}::-webkit-scrollbar-thumb{border:6px solid;border-image:url(/img/button.png) 6 repeat;background-color:#333;border-width:6px}::-webkit-scrollbar-thumb:hover{background-color:#a6a6a6}::-webkit-scrollbar-thumb:active{background-color:#595959;border-image:url(/img/button_pressed.png) 6 repeat}body,html{font:16px pixel-op,sans-serif;width:100%;height:100%;margin:0;-ms-touch-action:none;touch-action:none;position:fixed}body{background-color:#d1d1d1;background-image:url(/img/unloaded.png);background-size:16px}html{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}hr{border-color:rgba(0,0,0,.2)}.hide{display:none!important}.selectable{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.centered{position:absolute;padding-top:1px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.centeredChilds{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tooltip{pointer-events:none;position:absolute;top:0;left:0;opacity:.9}.owopdropdown{pointer-events:none!important;padding:0!important;padding-top:1px!important;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border:none!important;background-color:transparent!important;-webkit-transition:-webkit-transform .5s ease-out;transition:-webkit-transform .5s ease-out;transition:transform .5s ease-out;transition:transform .5s ease-out,-webkit-transform .5s ease-out}button.winframe:active{-o-border-image:inherit;border-image:inherit}#chat,#dev-chat,#playercount-display,#xy-display,.whitetext{color:#80b3ff;font:16px pixel-op,sans-serif;text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000}#tool-select,img{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated}#load-scr{position:absolute;height:100%;width:100%;text-align:center;font:0/0 a;pointer-events:none;-webkit-transition:-webkit-transform 1.5s cubic-bezier(.68,-.55,.27,1.55);transition:-webkit-transform 1.5s cubic-bezier(.68,-.55,.27,1.55);transition:transform 1.5s cubic-bezier(.68,-.55,.27,1.55);transition:transform 1.5s cubic-bezier(.68,-.55,.27,1.55),-webkit-transform 1.5s cubic-bezier(.68,-.55,.27,1.55);background-image:url(/img/unloaded.png);-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000}#load-scr:before{content:" ";height:100%}#load-scr:before,#load-ul{display:inline-block;vertical-align:middle}#load-ul{list-style-type:none;padding:0;margin:0;max-width:50%;min-width:224px;pointer-events:auto;-webkit-transition:-webkit-transform 1s;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s,-webkit-transform 1s}#noscript-msg,#status{font:16px pixel-op}#status-msg{vertical-align:super;text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000,0 0 2px #000}#spinner{margin-right:8px}#animations,#viewport,#windows{position:absolute}#windows{pointer-events:none;width:100%;height:100%}#windows>div,.winframe{position:absolute;pointer-events:auto;background-color:#36393f;border:11px solid #36393f;border-width:11px;-o-border-image:url(/img/window_out.png) 11 repeat;border-image:url(/img/window_out.png) 11 repeat;border-image-outset:4px;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000}#windows>div>span{display:block;pointer-events:none;margin-top:-7px;text-shadow:1px 1px #421754;color:#add2d4;margin-bottom:3px;min-width:100%;text-align:center}.windowCloseButton{position:absolute;right:0;top:-2px;width:9px;height:9px;padding:0;background-image:url(/img/gui.png);background-position:-48px -32px;background-color:#ff7979;border:none}button.windowCloseButton:active{background-image:url(/img/gui.png);background-position:-48px -41px}.wincontainer{overflow:auto;min-width:100%;height:100%;margin:0 -5px -5px;background-color:#2f3035;border:5px solid #2f3035;border-width:5px;-o-border-image:url(/img/window_in.png) 5 repeat;border-image:url(/img/pallete_selector.png) 5 repeat}#windows>div>div>input{border:6px solid #6a707c;-o-border-image:url(/img/small_border.png) 6 repeat;border-image:url(/img/small_border.png) 6 repeat;border-image-outset:1px}#windows>div>div>*{-webkit-box-sizing:border-box;box-sizing:border-box}button{border:6px outset #36393f;-o-border-image:url(/img/button.png) 6 repeat;border-image:url(/img/button.png) 6 repeat;background-color:#36393f}button,button:hover{-webkit-transition:-webkit-filter .125s;transition:-webkit-filter .125s;transition:filter .125s;transition:filter .125s,-webkit-filter .125s}button:hover{-webkit-filter:brightness(110%);filter:brightness(110%)}button:active{border-style:inset;-o-border-image:url(/img/button_pressed.png) 6 repeat;border-image:url(/img/button_pressed.png) 6 repeat;-webkit-filter:brightness(90%);filter:brightness(90%);-webkit-transition:none;transition:none}button:focus{outline:none}#clusters>canvas{position:absolute;background-image:url(/img/unloaded.png);background-size:8px}#animations{top:0;left:0}#palette,#playercount-display,#xy-display{position:absolute;pointer-events:none;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:-webkit-transform .75s;transition:-webkit-transform .75s;transition:transform .75s;transition:transform .75s,-webkit-transform .75s}#xy-display{padding-left:2px;left:-4px;top:-4px}#playercount-display{right:-4px;top:-4px}#toole-container{overflow:hidden}#palette,#palette-create,#playercount-display,#xy-display,.framed{border:5px solid #aba389;-o-border-image:url(/img/small_border.png) 5 repeat;border-image:url(/img/small_border.png) 5 repeat;border-image-outset:1px;background-color:#2f3035;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000}#toole-container>button>div{position:fixed;margin:-18px -4px;width:36px;height:36px}#toole-container>button{position:relative;display:inline-block;width:40px;height:40px;padding:0}#toole-container>button.selected{background-color:#17191c}#tool-select>button>div{position:absolute;width:36px;height:36px;margin-left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}#palette{right:-5px;top:50%;-webkit-transform:translateY(-50%) translateX(200%);transform:translateY(-50%) translateX(200%);width:45px;height:40px;-webkit-box-sizing:border-box;box-sizing:border-box}#palette-bg{position:absolute;height:100%;width:44px;top:0;right:0;background-color:rgba(0,0,0,.3);pointer-events:none}#palette-create{right:50px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:24px;height:24px;background-image:url(/img/plus.png);background-repeat:no-repeat;pointer-events:all}#palette-create,#palette-input{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box}#palette-input{width:100%;height:100%;opacity:0;cursor:pointer}#palette-colors{position:absolute;left:-1px;top:-9px;-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}#palette-colors>div{width:32px;height:32px;margin:8px 0;border:1px solid rgba(0,0,0,.3);-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:all;cursor:pointer}#player-list{max-height:300px;overflow-y:scroll}#player-list>table{border-collapse:collapse;border:1px solid #000;color:#fff;text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000;padding:2px}#player-list>table>tr:nth-child(odd){background-color:rgba(0,0,0,.1)}#player-list>table>tr:nth-child(2n){background-color:rgba(0,0,0,.3)}#player-list>table>tr:first-child{text-align:left;background-color:rgba(0,0,0,.5)}#player-list td,#player-list th{padding:2px 6px}#player-list>table>tr>td:first-child{border-right:1px solid rgba(0,0,0,.5)}#player-list>table>tr>td:nth-child(2){border-right:1px solid rgba(0,0,0,.3)}#help-button{position:absolute;bottom:0;right:0;padding:0;margin:16px}#help-button>img{width:64px;display:block}#help{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:80%;max-width:800px;background-color:#2f3035;border:11px solid #2f3035;border-width:11px;-o-border-image:url(/img/window_out.png) 11 repeat;border-image:url(/img/window_out.png) 11 repeat;border-image-outset:1px;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000}#help>.title{display:block;pointer-events:none;margin-top:-7px;text-shadow:1px 1px #421754;color:#e4951a;margin-bottom:3px;min-width:100%;text-align:center}#help>.content{overflow:auto;min-width:100%;height:100%;margin:0 -5px -5px;background-color:#2f3035;border:5px solid #2f3035;border-width:5px;-o-border-image:url(/img/window_in.png) 5 repeat;border-image:url(/img/window_in.png) 5 repeat}#help>.content>.links{text-align:center}#help>.content>.links>a{display:inline-block;vertical-align:middle;width:25px;height:74px;-webkit-transition:.5s;transition:.5s}#help>.content>.links:hover>a{width:76px}#help>.content>.links>a>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#help.hidden{display:none}#chat{-webkit-transform:translateY(100%);transform:translateY(100%)}#chat,#dev-chat{position:absolute;left:0;bottom:0;min-width:20%;max-width:450px;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:pixel-op,monospace;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:transparent;pointer-events:none;overflow:hidden;-webkit-transition:background-color .2s,-webkit-box-shadow .2s,-webkit-transform .75s;transition:background-color .2s,-webkit-box-shadow .2s,-webkit-transform .75s;transition:background-color .2s,box-shadow .2s,transform .75s;transition:background-color .2s,box-shadow .2s,transform .75s,-webkit-box-shadow .2s,-webkit-transform .75s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}#dev-chat{right:0;left:auto}#chat.active,#dev-chat.active{background-color:rgba(0,0,0,.8);-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;pointer-events:all;overflow-y:auto}@-webkit-keyframes fade{0%{opacity:1}to{opacity:0}}@keyframes fade{0%{opacity:1}to{opacity:0}}#chat-messages>li{background-color:rgba(0,0,0,.8);-webkit-animation-name:fade;animation-name:fade;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-delay:15s;animation-delay:15s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-transition:background-color .2s;transition:background-color .2s;white-space:pre-wrap}#chat-messages>li a:link{color:#82c9ff}#chat-messages>li a:visited{color:#ab80f9}#chat-messages>li a:hover{color:#76b0dc}#chat-messages>li>.nick{color:#3ab2ff}#chat-messages>li.moderator{color:#86ff41}#chat-messages>li.admin{color:#ff4f4f}#chat-messages>li.discord>.nick{color:#6cffe7}#chat-messages>li.server{color:#ff41e4}#chat-messages>li.tell{color:#ffb735}#chat-messages>li{text-shadow:0 0 10px #000,0 0 5px #000,0 0 3px #0000,0 0 4px #000,0 0 7px #000,0 0 8px currentColor,0 0 10px currentColor,0 0 15px currentColor}#chat-messages.active>li{background-color:initial;-webkit-animation-duration:0s;animation-duration:0s;animation-direction:reverse}#chat-messages,#dev-chat-messages{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0;padding:0;font-size:16px;max-height:40vh;word-wrap:break-word;overflow:inherit;vertical-align:bottom}#chat-input{-webkit-box-flex:0;-ms-flex:0;flex:0;height:16px;color:#fff;pointer-events:all;border:1px solid #737373;padding:4px;background:rgba(0,0,0,.8);font-family:pixel-op,sans-serif;font-size:16px;resize:none;overflow-y:scroll;display:none}#chat-input:focus{outline:none}#chat-input:-ms-input-placeholder,#chat-input::-ms-input-placeholder{color:#bbb}#chat-input::-webkit-input-placeholder{color:#bbb}#chat-input::-moz-placeholder{color:#bbb}#chat-input::-ms-input-placeholder{color:#bbb}#chat-input::placeholder{color:#bbb}#terminal{position:fixed;left:0;bottom:0;height:40px;width:100%;background:#999}</style>
<link rel="shortcut icon" href="/favicon.ico"><script type="text/javascript" src="/app.37d18af1aa08023607a9.js" async></script></head>
<body>
<div id="viewport">
<canvas id="animations"></canvas>
</div>
<div id="load-scr">
<ul id="load-ul">
<li>
<img id="logo" src="/img/owop.png" alt="Our World Of Pixels" draggable="false"/>
</li>
<noscript>
<li id="noscript-msg" class="whitetext framed">
<p>World Of Pixels is an (almost) infinite canvas where you can draw online with other people, or explore many user created worlds.</p>
<p>But to use the website, you first need to <a href="http://www.enable-javascript.com/" target="_blank">enable javascript</a>!</p>
</li>
</noscript>
<li id="status" class="whitetext hide">
<img id="spinner" src="/img/loading.gif"/>
<span id="status-msg">Loading...</span>
</li>
<li id="load-options" class="framed hide">
<button id="reconnect-btn">Reconnect</button>
</li>
<script>document.getElementById('status').className='whitetext';</script>
</ul>
</div>
<div id="palette-bg"></div>
<span id="xy-display"></span>
<span id="playercount-display"></span>
<div id="windows" class="pixelated"></div>
<div id="palette">
<div id="palette-create">
<input id="palette-input" type="color"/>
</div>
<div id="palette-colors"></div>
</div>
<button id="help-button"><img src="/img/help.png" /></button>
<div id="dev-chat" class="hide">
<ul id="dev-chat-messages"></ul>
</div>
<div id="chat">
<ul id="chat-messages"></ul>
<textarea id="chat-input" draggable="false" type="text" maxlength="80" placeholder="Chat here" disabled></textarea>
</div>
<div id="help" class="hidden">
<span class="title">Help</span>
<button id="help-close" class="windowCloseButton"></button>
<div class="content whitetext">
<div class="links">
<a target="_blank" href="https://discord.gg/eBtPYp7"><img src="https://cdn.discordapp.com/icons/463406922025009152/4792417cfa4d503dd1bfc0b3e634205f.webp" style="object-position:left" width="36px" height="35px"></a>
<a target="_blank" href="https://discord.io/Mathias377-OWOP-server"><img src="https://cdn.discordapp.com/icons/498452484017225728/5d25b4e7121e165f8501ec7b0f603bcc.webp" width="36px" height="35px"></a>
<a target="_blank" href="https://discord.gg/UqpdSgv"><img src="https://cdn.discordapp.com/icons/455078712732549130/f3d3f2904c35abf4b26080c7497aea16.webp" style="object-position:right"></a>
<li><b>1</b> - Discord Cursors.io Hack Server Owner "mathias377"</li>
<li><b>2</b> - Discord mathias377's server Owner "mathias377"</li>
<li><b>3</b> - Discord Bop It's Server Owner "Bop It Freak"</li>
<!--<a target="_blank" href="https://reddit.com/r/OurWorldOfPixels"><img src="/img/reddit.png" /></a>-->
<!--<a target="_blank" href="https://www.facebook.com/OurWorldOfPixels/"><img src="/img/facebook.png" /></a>-->
<!--<a target="_blank" href="https://www.paypal.me/InfraRaven"><img src="/img/donate.png" /></a>-->
</div>
<hr />
<li>Type /help for a list of all commands</li>
<img id="spinner" src="/img/loading2.gif" width="126" height="189"/>
<div>You found easter egg</div>
<ul>
<li><b>Style by dimden he's discord (@Eff the cops#1877)</b></li>
<li><b>F1</b> - Hide part of the GUI</li>
<li><b>G</b> - Toggle grid</li>
<li><b>F</b> - Manually add color</li>
<li><b>Shift + click</b> / <b>Middle click</b> - Move camera</li>
<li><b>Ctrl + Z</b> - Undo pixel (+ Shift = bulk undo)</li>
<li><b>Ctrl + Scroll</b> - Change zoom level</li>
<li><b>P / M / O</b> - Select Pipette / Move / Cursor tool</li>
</ul>
</div>
</div>
</body>
</html>