View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Easy UC</title> <link href="2.css" rel="stylesheet"> </head> <body> <!-- Dial Pad --> <div class="container"> <header class="titlebar"> <h1>Easy UC</h1> <a class="closer">x</a> </header> <div class="home"> <header class="display"> <p class="number">82<span class="cursor">_</span><span class="suggest">70</span></p> <p class="home icon" data-icon="⌂">7508</p> <p class="forward icon" data-icon="s">010-9085-9421</p> <p class="status">Phone call</p> </header> <nav class="controls"> <ul class="dialpad"> <li class="top left"><a href="#Phone">1<span></span></a></li> <li class="top"><a href="#Phone">2<span>ABC</span></a></li> <li class="top right"><a href="#Phone">3<span>DEF</span></a></li> <li class="middle left"><a href="#Phone">4<span>GHI</span></a></li> <li class="middle"><a href="#Phone">5<span>JKL</span></a></li> <li class="middle right"><a href="#Phone">6<span>MNO</span></a></li> <li class="middle left"><a href="#Phone">7<span>PQRS</span></a></li> <li class="middle"><a href="#Phone">8<span>TUV</span></a></li> <li class="middle right"><a href="#Phone">9<span>WXYZ</span></a></li> <li class="bottom left"><a href="#Phone">*</a></li> <li class="bottom"><a href="#Phone">0<span>+</span></a></li> <li class="bottom right"><a href="#Phone">#</a></li> </ul> </nav> </div> <footer class="actions"> <a class="button icon" data-icon="d">Cancel</a> <a class="button primary icon" data-icon="▶">Send</a> </footer> <div class="description">대기: 통화중이 아닌 상태에서 패널을 오픈한 경우</div> </div> <!-- Calling --> <div class="container"> <header class="titlebar"> <h1>Easy UC</h1> <a class="closer">x</a> </header> <div class="home"> <header class="display"> <p class="number">8270</p> <p class="home icon" data-icon="⌂">7508</p> <p class="forward icon" data-icon="s">010-9085-9421</p> <p class="status">Calling...</p> </header> <nav class="controls"> <ul class="history"> <li><span>Succeed</span>, 5 min ago (2:41 sec)</li> <li><span>Failed</span>, 2 hour ago</li> <li><span>Failed</span>, 13 hour ago</li> <li><span>Cancelled</span>, 1 day ago</li> <li><span>Succeed</span>, 7 day ago (1:28 sec)</li> <li><span>Succeed</span>, 2 month ago (6:07 sec)</li> <li><span>Failed</span>, 6 month ago</li> <li><span>Succeed</span>, 1 year ago (57 sec)</li> </ul> </nav> <div class="message">Call history</div> </div> <footer class="actions"> <a class="button warning icon" data-icon="⟲">Retry</a> <a class="button danger icon" data-icon="×">End</a> </footer> <div class="description">연결: 연결할 대상의 번호를 입력한 후 통화를 시도하고 있는 상태(재시도 버튼은 통화중 또는 전화를 받지 않는 경우에 동적으로 나타남)</div> </div> <!-- Processing --> <div class="container"> <header class="titlebar"> <h1>Easy UC</h1> <a class="closer">x</a> </header> <div class="home"> <header class="display"> <p class="number" style="font-size: 35px; top: 38px;">02-8270-2983</p> <p class="home icon" data-icon="⌂">7508</p> <p class="users icon" data-icon="u">1</p> <p class="forward icon" data-icon="s">010-9085-9421</p> <p class="status">Connected</p> </header> <nav class="controls"> <ul class="navigation"> <li class="top left"><a class="icon" data-icon="+" href="#Phone">Add call</a></li> <li class="top right"><a href="#Phone" class="icon" data-icon="↩">Transfer</a></li> <li class="bottom left"><a href="#Phone" class="icon" data-icon="⌚">History</a></li> <li class="bottom right"><a href="#Phone" class="icon" data-icon="♫">Pause</a></li> </ul> </nav> <div class="message">00:32</div> </div> <footer class="actions"> <a class="button danger icon" data-icon="×">End</a> </footer> <div class="description">통화: 성공적으로 연결된 상태(통화중에 패널을 오픈한 경우)</div> </div> <!-- Dial Pad --> <div class="container"> <header class="titlebar"> <h1>Easy UC</h1> <a class="closer">x</a> </header> <div class="home"> <header class="display"> <p class="number">4301</p> <p class="home icon" data-icon="⌂">7508</p> <p class="users icon" data-icon="u">1</p> <p class="forward icon" data-icon="s">010-9085-9421</p> <p class="status">Conference call</p> </header> <nav class="controls"> <ul class="dialpad"> <li class="top left"><a href="#Phone">1<span></span></a></li> <li class="top"><a href="#Phone">2<span>ABC</span></a></li> <li class="top right"><a href="#Phone">3<span>DEF</span></a></li> <li class="middle left"><a href="#Phone">4<span>GHI</span></a></li> <li class="middle"><a href="#Phone">5<span>JKL</span></a></li> <li class="middle right"><a href="#Phone">6<span>MNO</span></a></li> <li class="middle left"><a href="#Phone">7<span>PQRS</span></a></li> <li class="middle"><a href="#Phone">8<span>TUV</span></a></li> <li class="middle right"><a href="#Phone">9<span>WXYZ</span></a></li> <li class="bottom left"><a href="#Phone">*</a></li> <li class="bottom"><a href="#Phone">0<span>+</span></a></li> <li class="bottom right"><a href="#Phone">#</a></li> </ul> </nav> </div> <footer class="actions"> <a class="button icon" data-icon="d">Cancel</a> <a class="button primary icon" data-icon="+">Add</a> </footer> <div class="description">추가: 회의 통화를 위한 전화번호 추가 입력</div> </div> <!-- Dial Pad --> <div class="container"> <header class="titlebar"> <h1>Easy UC</h1> <a class="closer">x</a> </header> <div class="home"> <header class="display"> <p class="number">3709</p> <p class="home icon" data-icon="⌂">7508</p> <p class="status">Transfer</p> </header> <nav class="controls"> <ul class="dialpad"> <li class="top left"><a href="#Phone">1<span></span></a></li> <li class="top"><a href="#Phone">2<span>ABC</span></a></li> <li class="top right"><a href="#Phone">3<span>DEF</span></a></li> <li class="middle left"><a href="#Phone">4<span>GHI</span></a></li> <li class="middle"><a href="#Phone">5<span>JKL</span></a></li> <li class="middle right"><a href="#Phone">6<span>MNO</span></a></li> <li class="middle left"><a href="#Phone">7<span>PQRS</span></a></li> <li class="middle"><a href="#Phone">8<span>TUV</span></a></li> <li class="middle right"><a href="#Phone">9<span>WXYZ</span></a></li> <li class="bottom left"><a href="#Phone">*</a></li> <li class="bottom"><a href="#Phone">0<span>+</span></a></li> <li class="bottom right"><a href="#Phone">#</a></li> </ul> </nav> </div> <footer class="actions"> <a class="button icon" data-icon="d">Cancel</a> <a class="button primary icon" data-icon="↩">Transfer</a> </footer> <div class="description">전환: 다른 번호로 착신을 전환하기 위한 번호 입력</div> </div> <!-- Processing --> <div class="container"> <header class="titlebar"> <h1>Easy UC</h1> <a class="closer">x</a> </header> <div class="home"> <header class="display"> <p class="number" style="font-size: 33px; top: 38px;">901082702983</p> <p class="home icon" data-icon="⌂">7508</p> <p class="users icon" data-icon="u">2</p> <p class="status">Connected</p> </header> <nav class="controls"> <ul class="navigation"> <li class="top left"><a class="icon" data-icon="+" href="#Phone">Add call</a></li> <li class="top right"><a href="#Phone" class="icon" data-icon="↩">Transfer</a></li> <li class="bottom left"><a href="#Phone" class="icon" data-icon="⌚">History</a></li> <li class="bottom right pushed"><a href="#Phone" class="icon" data-icon="♫">Unpause</a></li> </ul> </nav> <div class="message">01:24</div> </div> <footer class="actions"> <a class="button danger icon" data-icon="×">End</a> </footer> <div class="description">보류: 통화를 보류한 상태</div> </div> <div class="revision">Rev. 2</div> </body></html>
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,hr,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figure,figcaption,hgroup,menu,footer,header,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0}article,aside,canvas,figure,figure img,figcaption,hgroup,footer,header,nav,section,audio,video{display:block} a img{border:0} ul,ol{list-style:none} body{ font: 13px/1.2 Arial, sans-serif; -webkit-user-select: none; background: -webkit-radial-gradient(black 15%, transparent 16%) 0 0, -webkit-radial-gradient(black 15%, transparent 16%) 8px 8px, -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#282828; background-size:16px 16px; } a {color: #333; text-decoration: none;} @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } @font-face { font-family: fico; src: url('/fonts/fico.eot'); src: url('/fonts/fico.eot?#iefix') format('embedded-opentype'), url('/fonts/fico.ttf') format('truetype'), url('/fonts/fico.svg#Fico') format('svg'); } .icon:before { content: attr(data-icon); font-family: fico; margin-right: 2px; } .container { float: left; width: 240px; height: 480px; margin: 20px 0 70px 20px; border: 1px solid #333; background: #fff; position: relative; border-radius: 8px; box-shadow: 5px 5px 20px rgba(0,0,0,.5); } .titlebar { height: 26px; border-radius: 6px 6px 0 0; color: #222; line-height: 26px; border-bottom: 1px solid #aaa; background-color: #D8D8D8; background-image: -webkit-linear-gradient(top, #F4F4F4, #D8D8D8); background-image: linear-gradient(top, #F4F4F4, #D8D8D8); } .titlebar h1 { float: left; font-size: 11px; margin-left: 10px; } .titlebar .closer { float: right; font-size: 12px; margin-right: 6px; margin-top: 5px; background: #666; line-height: 12px; padding: 2px 5px; border-radius: 4px; color: #eee; } .display { height: 120px; border-bottom: 1px solid #aaa; background: #fff; position: relative; overflow: hidden; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(27,168,224,0.1)), color-stop(50%,rgba(27,168,224,.4)), color-stop(50%,rgba(27,168,224,.6)), color-stop(100%,rgba(27,168,224,.2))); } .display p { position: absolute; } .display .number { font-size: 70px; top: 18px; left: 10px; } .display .number .suggest { opacity: 0.5; } .display .number .cursor { position: absolute; display: block; font-size: 63px; font-weight: bold; top: -5px; left: 80px; -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0); -webkit-animation-duration: 1s; } .display .home { font-size: 12px; bottom: 10px; right: 10px; opacity: 0.7; } .display .forward { font-size: 12px; bottom: 10px; right: 60px; opacity: 0.7; } .display .status { font-size: 13px; top: 8px; left: 10px; } .display .users { font-size: 13px; top: 8px; right: 10px; opacity: 0.7; } .controls { background: #ddd; border-top: 1px solid #eee; height: 282px; overflow: auto; margin: 0; position: relative; display: block; } .controls ul { border-radius: 6px; width: 220px; margin: 10px; } .controls li { border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; } .controls .top { border-top: 1px solid #aaa; background-image: -webkit-linear-gradient(top, #F4F4F4, #D8D8D8); } .controls .middle { border-top: 1px solid #eee; background: #D8D8D8; } .controls .bottom { border-top: 1px solid #eee; background-image: -webkit-linear-gradient(top, #D8D8D8, #bbb); } .controls .right { border-right: 1px solid #aaa; } .controls .top.left { border-radius: 8px 0 0 0; } .controls .top.right { border-radius: 0 8px 0 0; } .controls .bottom.left { border-radius: 0 0 0 8px; } .controls .bottom.right { border-radius: 0 0 8px 0; } .controls .pushed { background-image: -webkit-linear-gradient(top, #08C, #05C); border-top-color: #abf; } .controls .pushed a { color: #eee; } .dialpad li { height: 52px; padding-top: 8px; font-size: 24px; font-weight: bold; float: left; width: 72px; text-align: center; } .dialpad li span { display: block; font-size: 12px; color: #666; } .history { background: #fff; border: 1px solid #aaa; overflow: auto; height: 210px; padding-top: 8px; box-shadow: inset 0 2px 3px rgba(0,0,0,0.3), 0 1px 1px rgba(255,255,255,0.3); } .history li { height: 26px; line-height: 26px; text-indent: 10px; border: none; } .navigation li { height: 108px; position: relative; line-height: 157px; overflow: hidden; float: left; width: 108px; text-align: center; } .navigation .icon:before { display: block !important; position: absolute; top: -36px; left: 34px; font-size: 38px; margin: 0; } .message { font-size: 20px; width: 100%; position: absolute; bottom: 70px; text-align: center; color: #666; } .actions { position: absolute; bottom: 0; width: 230px; height: 60px; border-top: 1px solid #aaa; background: #ccc; padding-right: 10px; border-radius: 0 0 4px 5px; text-align: right; } .button:before { margin-right: 8px; } .button { margin: 10px 0 0 5px; padding: 4px 12px; height: 28px; line-height: 28px; display: inline-block; font-size: 14px; color: #333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; cursor: pointer; background-color: whiteSmoke; background-image: -ms-linear-gradient(top, white, #E6E6E6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#E6E6E6)); background-image: -webkit-linear-gradient(top, white, #E6E6E6); background-image: -o-linear-gradient(top, white, #E6E6E6); background-image: linear-gradient(top, white, #E6E6E6); background-image: -moz-linear-gradient(top, white, #E6E6E6); background-repeat: repeat-x; border: 1px solid #CCC; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-bottom-color: #B3B3B3; border-radius: 4px; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } .button.primary { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #fff; background-color: #0074CC; background-image: -webkit-linear-gradient(top, #08C, #05C); background-image: linear-gradient(top, #08C, #05C); background-repeat: repeat-x; border-color: #05C #05C #003580; } .button.warning { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #fff; background-color: #FAA732; background-image: -webkit-linear-gradient(top, #FBB450, #F89406); background-repeat: repeat-x; border-color: #F89406 #F89406 #AD6704; } .button.danger { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #fff; background-color: #DA4F49; background-image: -webkit-linear-gradient(top, #EE5F5B, #BD362F); background-image: linear-gradient(top, #EE5F5B, #BD362F); background-repeat: repeat-x; border-color: #BD362F #BD362F #802420; } .description { position: absolute; top: 500px; color: #fff; left: 10px; right: 10px; } .revision { position: absolute; bottom: 20px; right: 20px; color: #aaa; }
Pop out
Help
About
×
×