API tools faq
paste
dmilosavleski

6 - 1

dmilosavleski
Dec 25th, 2017
37
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Прва задача</title>
  6. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  8. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  9.  
  10. <style>
  11. * {
  12. font-family: Verdana;
  13. }
  14. h1{
  15. margin-top: 0px !important;
  16. }
  17. input {
  18. display: block;
  19. margin-bottom: 10px;
  20. }
  21.  
  22. .wizard_tab{
  23. border: solid 1px black;
  24. padding: 20px;
  25. }
  26.  
  27. .content {
  28. width: 100%;
  29. height: auto;
  30. min-height: 100px;
  31. display: block;
  32. margin-bottom: 10px;
  33. background: #A9F5BC;
  34. }
  35.  
  36. .container {
  37. width: 400px;
  38. height: 400px;
  39. padding: 20px;
  40. /*overflow: scroll;*/
  41. }
  42.  
  43. .navbar, .buttons {
  44. width: 400px;
  45. padding: 20px;
  46. background: #A9D0F5;
  47. }
  48.  
  49. .navbar, .buttons, #sent_items, #done_end{
  50. display: none;
  51. }
  52.  
  53. .buttons {
  54. text-align: center;
  55. }
  56.  
  57. .buttons button {
  58. width: 180px !important;
  59. }
  60. #sent_items {
  61. height: 100%;
  62. /*overflow: scroll;*/
  63.  
  64. }
  65. .nav {
  66. /*position: relative;*/
  67. vertical-align: top;
  68. width: auto;
  69. height: 40px;
  70. padding: 8px;
  71. font-size: 22px;
  72. color: white;
  73. text-align: center;
  74. margin-right: 10px !important;
  75. background: #0174DF;
  76. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  77. border: 0;
  78. border-bottom: 2px solid #e2b607;
  79. -webkit-box-shadow: inset 0 -2px #e2b607;
  80. box-shadow: inset 0 -2px #e2b607;
  81.  
  82. }
  83.  
  84. .button {
  85. position: relative;
  86. vertical-align: top;
  87. width: auto;
  88. height: 40px;
  89. padding: 8px;
  90. font-size: 22px;
  91. color: white;
  92. text-align: center;
  93. text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  94. background: #f1c40f;
  95. border: 0;
  96. border-bottom: 2px solid #e2b607;
  97. cursor: pointer;
  98. -webkit-box-shadow: inset 0 -2px #e2b607;
  99. box-shadow: inset 0 -2px #e2b607;
  100.  
  101. }
  102. #send{
  103. background: #64CB42;
  104. border-bottom: 2px solid #045FB4;
  105. -webkit-box-shadow: inset 0 -2px #45862F;
  106. box-shadow: inset 0 -2px #45862F;
  107. }
  108.  
  109. .dialog{
  110. padding: 5px !important;
  111. min-width: 330px !important;
  112.  
  113. }
  114. #content{
  115. min-height: 100px;
  116. width: 290px !important;
  117. max-width: 290px !important;
  118. margin: 5px;
  119.  
  120. }
  121.  
  122.  
  123. #error, #error2{
  124. color: red;
  125. display:none ;
  126. margin-bottom: 5px !important;
  127. }
  128.  
  129. #sent, #email, #done {
  130.  
  131. border-bottom: 2px solid #045FB4;
  132. -webkit-box-shadow: inset 0 -2px #045FB4;
  133. box-shadow: inset 0 -2px #045FB4;
  134. margin-right: 10px;
  135. }
  136. #done_end {
  137. text-align: center;
  138. vertical-align: middle;
  139. }
  140.  
  141. .passed {
  142. background: #BDBDBD;
  143. }
  144.  
  145. .active {
  146. background: #FF8000;
  147. }
  148.  
  149. .pending {
  150. background: #81DAF5;
  151. }
  152.  
  153.  
  154. #feedback { font-size: 1.4em; }
  155. #selectable .ui-selecting { background: #FECA40; }
  156. #selectable .ui-selected { background: #F39814; color: white; }
  157. #selectable { list-style-type: none; margin: 0; padding: 0; min-width: 200px !important; overflow: scroll; }
  158. #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: auto; min-width: 200px !important; }
  159.  
  160. </style>
  161. <script>
  162. var password = "";
  163.  
  164. function isValid(pass){
  165. return (pass.length >= 6 && !/^[a-zA-Z0-9- ]*$/.test(pass));
  166. }
  167.  
  168. $(document).ready(function(){
  169. $(".password_insert").dialog({
  170. modal:true,
  171. closeOnEscape: false,
  172. open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();},
  173. buttons: {
  174. Ok: function() {
  175. password = $("#ins_pass").val();
  176. if(password == $("#rep_pass").val() && isValid(password)) {
  177. $(this).dialog("close");
  178. }
  179. else{
  180. $("#error").show();
  181. }
  182. }
  183. }
  184. });
  185.  
  186. $(".password_prompt").dialog({
  187. autoOpen: false,
  188. modal:true,
  189. closeOnEscape: false,
  190. open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();},
  191. buttons: {
  192. Ok: function() {
  193. if(password == $("#pass").val()){
  194. $(".content").text($("#content").val());
  195. $("#pass").val("");
  196. $(this).dialog("close");
  197. }
  198. else{
  199. $("#error2").show();
  200. }
  201. }
  202. }
  203. });
  204.  
  205. $(".dialog").dialog({
  206. autoOpen: false,
  207. minWidth: 330,
  208. open: function(){
  209. $("#to_transfer").text("To: " + $("#to").val());
  210. $("#subject_transfer").text("Subject: " + $("#subject").val());
  211. $("#cc_transfer").text("Cc: " + $("#cc").val());
  212. }
  213. });
  214.  
  215. $("#clear").click(function(){
  216. $("#content").val("");
  217. });
  218.  
  219. $("#send").click(function(){
  220. $("#content").val("");
  221. $(".content").text("");
  222. $("#to").val("");
  223. $("#subject").val("")
  224. $("#cc").val("")
  225. });
  226.  
  227. $("#insert").click(function(){
  228. $(".dialog").dialog("close");
  229. $(".password_prompt").dialog('open');
  230. });
  231.  
  232. $("#insert2").click(function(){
  233. $(".dialog").dialog("open");
  234. });
  235. });
  236. </script>
  237. </head>
  238.  
  239. <body>
  240.  
  241. <div class="navbar">
  242. <span class="nav active" id="email">Email</span>
  243. <span class="nav" id="sent">Sent</span>
  244. <span class="nav" id="done">Done</span>
  245. </div>
  246. <div class="container">
  247.  
  248. <div class="wizard_tab" id="compose_message">
  249.  
  250. <h1><b>New message:</b></h1>
  251. <span>To:</span> <input type="text" name="to" id="to"/>
  252. <span>Cc:</span> <input type="text" name="cc" id="cc"/>
  253. <span>Subject:</span> <input type="text" name="subject" id="subject"/>
  254. <span>Content:</span><span class="content"></span>
  255. <button class="button" id="insert2">Insert</button>
  256. <button class="button" id="send" >Send</button>
  257.  
  258. <div class="dialog" title="Message Content">
  259. <span id="to_transfer"></span></br>
  260. <span id="subject_transfer"></span></br>
  261. <span id="cc_transfer"></span></br></br>
  262. <span>Content:</span></br>
  263. <textarea cols="25" rows="7" type="text" id="content" ></textarea></br>
  264. <button id="insert">Insert</button>
  265. <button id="clear">Clear</button>
  266. </div>
  267.  
  268. <div class="password_prompt" title="Password">
  269. <span id="error2"><b>Password error!</b><br></span>
  270. <span>Password: </span></br>
  271. <input type="password" id="pass"/>
  272. </div>
  273.  
  274. <div class="password_insert" title="Set your password">
  275. <span id="error"><b>Passwords error!</b><br></span>
  276. <span>New Password: </span></br>
  277. <input type="password" id="ins_pass"/>
  278. <span>Repeat Password: </span></br>
  279. <input type="password" id="rep_pass"/>
  280. </div>
  281.  
  282. </div>
  283.  
  284. <div class="wizard_tab" id="sent_items">
  285.  
  286. <h1><b>Sent Items:</b></h1>
  287. <ol id="selectable">
  288.  
  289. <li class="ui-widget-content"><span>To: somebody@whocares.com </span><div><span>Subject: LAB 06</span></div></li>
  290. </ol>
  291.  
  292. <button class="button" id="delete">Delete</button>
  293. </div>
  294.  
  295. <div class="wizard_tab" id="done_end">
  296. <h1>DONE</h1>
  297. </div>
  298. </div>
  299.  
  300. <div class="buttons">
  301. <button class="button" id="previos">Previous</button>
  302. <button class="button" id="next">Next</button>
  303. </div>
  304.  
  305. </body>
  306.  
  307. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!