webkell/accounts.html

   1
   2 <html style="width: 97%;" >
   3   <head>
   4
   5
   6         <link type="text/css" href="css/ui.all.css" rel="stylesheet" />
   7         <link type="text/css" href="css/ui.base.css" rel="stylesheet" /> <!--   remove the vertical tab images -->
   8         <link type="text/css" href="css/ui.tabs.css" rel="stylesheet" />
   9
  10         <link type="text/css" href="css/site.css" rel="stylesheet" />
  11
  12         <link type="text/css" href="css/main.css" rel="stylesheet" />
  13         <link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
  14         <style type="text/css">
  15
  16                 /*.ui-widget-content {
  17                         background: none;
  18                         border: none;
  19                 }
  20                 */
  21                 .ui-widget-header {
  22                         -moz-background-clip:border;
  23                         -moz-background-inline-policy:continuous;
  24                         -moz-background-origin:padding;
  25                         background: none;
  26                         border: none;
  27
  28                 }
  29
  30                         .twindow {
  31                                 width: 100%;
  32                                 height: 300px;
  33
  34                                 border-style:solid;
  35                                 border-width:1px;
  36                                 resize: both;
  37
  38                                 /* position: relative;
  39                                 top: 30px;
  40                                 left: 20%;
  41                                 */
  42                                 float: left;
  43
  44                                 -moz-border-radius: 5px;
  45                                 -webkit-border-radius: 5px;
  46
  47                         }
  48                         .grid_list {
  49
  50                                 width: 95%;
  51                                 height: 71%;
  52                                 float: left;
  53                                 border-style:solid;
  54                                 border-width:1px;
  55                                 resize: both;
  56                                 # overflow: auto;
  57                                 position: relative;
  58
  59                                 margin-left: 2.25%;
  60                                 margin-top: 3%;
  61                                 margin-bottom: 2%;
  62
  63
  64                         }
  65
  66                         .column_headers {
  67
  68                                 float:left;
  69                                 margin: 0px 53px;
  70                                 horizontal-align: middle;
  71
  72                         }
  73
  74         </style>
  75
  76
  77         <script type="text/javascript" src="javascript/jquery-1.3.2.js" ></script>
  78         <script type="text/javascript" src="javascript/jquery-ui-1.7.2.custom.min.js" ></script>
  79         <!-- <script type="text/javascript" src="javascript/jquery-ui-1.7.2.custom.js" ></script>
  80         -->
  81
  82         <script type="text/javascript" src="javascript/effects.core.js" ></script>
  83         <script type="text/javascript" src="javascript/effects.slide.js" ></script>
  84
  85
  86         <script type="text/javascript" src="javascript/bkeeping.js"></script>
  87     <script type="text/javascript">
  88
  89
  90         var localbkeeping = {
  91
  92                         _a_open: true,
  93                         toggleAccountsOpen: function() {
  94
  95                 var newleft = -30;
  96                 var journalLeft = -30 + 416;
  97
  98                         if (localbkeeping._a_open) {
  99
 100                         localbkeeping._a_open = false;
 101                         newleft = newleft - 381;
 102                         journalLeft = journalLeft - 380;
 103                 }
 104                 else {
 105                                 localbkeeping._a_open = true;
 106                 }
 107
 108                 newleft = newleft + "px";
 109                 journalLeft = journalLeft + "px";
 110
 111
 112                         var adjustJournals = function() {
 113                                         $("#centre-nav").animate({ left: journalLeft }, { duration: 100, easing: "swing", complete: function(){}, queue: false });
 114                                 }
 115                                 $("#left-nav").animate({ left: newleft }, { duration: 750, easing: "swing", complete: adjustJournals, queue: false });
 116
 117                 }
 118
 119         };
 120
 121                 $(document).ready(function(){
 122
 123                         // 2. vertical tabs - http://jsbin.com/iqupu
 124
 125                         // see also:
 126                         //              http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml
 127                         //              http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs
 128                         //              http://www.good.is
 129                         //              http://www.csstea.com/css-gallery-news-and-resources/264-120-excellent-examples-of-css-horizantal-menu.html
 130                         //
 131                         //              web developers - http://adaptd.com , http://lukelarsen.com , http://www.atlanticbt.com
 132
 133                         $(function() {
 134                                 $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
 135                                 $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-right');
 136                         });
 137
 138
 139                         var newleft = "-30px";
 140                         $("#left-nav").animate({ left: newleft }, { duration: 50, easing: "swing", complete: function(){}, queue: false });
 141
 142
 143                         var journalLeft = "385px";
 144             $("#centre-nav").animate({ left: journalLeft }, { duration: 100, easing: "swing", complete: function(){}, queue: false });
 145
 146             page_loader();
 147
 148                 });
 149
 150
 151                 function page_loader() {
 152
 153
 154                         $("#modal_screen").css("opacity", 0.5);
 155
 156
 157                         //** list accounts and journals
 158                         new bkeeping.ListCommand("accounts", bkeeping.displayAccounts).run();
 159                         new bkeeping.ListCommand("journals", bkeeping.displayJournals).run();
 160
 161
 162                         //** get default currency
 163                         new bkeeping.LoadCommand("profileDetail", bkeeping.setDefaultCurrency).run();
 164
 165                         bkeeping.ROOT_URL = document.referrer;
 166                 }
 167
 168     </script>
 169
 170
 171
 172   </head>
 173   <body>
 174
 175
 176         <div style="position: relative; top: 15px; left: 30px; width: 70%; margin-bottom: 30px; " class="title" id="title">
 177                 bkeeping
 178                 <xx class="subheader">Your solution to simple
 179                         <xx style="color: rgb(0, 0, 0);">online bookkeeping</xx>
 180                 </xx>
 181
 182                 <button
 183                         class="buttons"
 184                         style="font-size: 13.2px; font-style: normal; font-family: Verdana,Arial,sans-serif; float: right;"
 185                         onclick="bkeeping.logout();" >LOGOUT</button>
 186
 187         </div>
 188
 189
 190         <div class="demo">
 191         <div id="tabs" style="background: none; border: none;" >
 192
 193                 <ul>
 194                         <li><a href="#tabs-1">Books</a></li>
 195                         <li><a href="#tabs-2">User Profile</a></li>
 196                         <li><a href="#tabs-3">Forums</a></li>
 197                 </ul>
 198
 199
 200                 <!-- TAB 1 -->
 201                 <div id="tabs-1" style="height: 440px; width: 83%; float: left; position: relative;" >
 202
 203                      <div class="accounts-wrapper" id="left-nav" >
 204                                 <div class="accounts-pane" style="width: 343px; height: 419px; left: 3px;" >
 205
 206                                         <div id="accounts_ui" class="cell_content">
 207
 208                                                 <div class="cell_header" style="border: 0 none white; margin-left: 3px; width: 328px; margin-top: 3px; left: 6px; " >
 209                                                         <h3>Accounts</h3>
 210                                                         <div id="add_account_div" class="adder_plus" title="Add account" alt="Add account" onclick="bkeeping.addAccount();">+</div>
 211                                                 </div>
 212                                                 <div id="accounts_content" class="cell_window" style="border: 0 none white; width: 328px; left: 6px; " >
 213                                                         <div id="accounts_content_list" class="ac_list">
 214                                                                 <div id="acl_header" class="form_header_row row">
 215                                                                         <div id="acl_header_edit" class="edit_column left_column">
 216
 217                                                                         </div>
 218                                                                         <div id="acl_header_name" class="name_column left_column" style="margin-left: 20px;" >
 219                                                                                 Name
 220                                                                         </div>
 221                                                                         <div id="acl_header_category" class="category_column left_column" style="margin-left: 40px;" >
 222                                                                                 Category
 223                                                                         </div>
 224                                                                         <!-- <div id="acl_header_balance" class="balance_column left_column">
 225                                                                                 Balance
 226                                                                         </div>
 227                                                                         -->
 228                                                                         <div id="acl_header_delete" class="delete_column left_column">
 229
 230                                                                         </div>
 231                                                                 </div>
 232                                                                 <div id="acl_rows" class="acl_rows rows">
 233                                                                 </div>
 234                                                         </div>
 235                                                 </div>
 236
 237                                         </div>
 238
 239
 240                                 </div>
 241                                 <div class="handle" onclick="localbkeeping.toggleAccountsOpen();" style="left: 3px; z-index:1050; " ></div>
 242                      </div>
 243                      <div class="journals-pane" id="centre-nav" style="top: 10px; height: 430px; left: 0px;" >
 244
 245
 246                                                 <div class="cell_header" style="border: 0 none white;" >
 247                                                         <h3>Journals</h3>
 248                                                         <div onclick="bkeeping.addJournal();" alt="Add journal" title="Add journal" class="adder_plus" id="add_journal_div">+</div>
 249                                                 </div>
 250                                                 <div class="cell_window" id="journals_content" style="border: 0 none white; height: auto; width: 93%;" >
 251
 252                                                         <div class="ac_list" id="journals_content_list">
 253
 254                                                                 <div class="form_header_row row" id="js_header">
 255                                                                         <div class="edit_column left_column" id="js_header_edit">
 256
 257                                                                         </div>
 258                                                                         <div class="large_name_column left_column" id="js_header_name">
 259                                                                                 Name
 260                                                                         </div>
 261                                                                         <div class="delete_column left_column" id="js_header_delete">
 262
 263                                                                         </div>
 264                                                                 </div>
 265
 266                                                                 <div class="js_rows rows" id="js_rows">
 267
 268                                                                 </div>
 269
 270
 271                                                         </div>
 272                                                 </div>
 273
 274                                                 <!-- this is needed to keep the width dynamically changing with the accounts panel -->
 275                                         <p style="visibility: hidden;" >lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
 276
 277                      </div>
 278
 279
 280
 281         <!-- ================================================   -->
 282         <!--                            JOURNAL UI Template                             -->
 283         <!-- ================================================   -->
 284         <div id="journal_ui"
 285                 style=" color: #000000;
 286                                 z-index:1000;
 287                                 opacity: 1;
 288                                 filter: alpha(opacity=40);
 289                                 background-color:rgba(255, 255, 255, 1);
 290                                 width: 676.25px;
 291                                 height: 302.5px;
 292                                 " >
 293
 294                 <div class="twindow" >
 295
 296
 297                 <!-- HEADERs -->
 298                 <div style="width: 95%; margin: 2.25% 10px 0; overflow: auto; font-family:arial,sans-serif; font-weight:bold;" >
 299                         <div style="float: left; position:relative; text-align:left; left: 10px; " >
 300
 301                         Journal: <span id="_journal_id">${jname}</span>
 302
 303                         </div>
 304                         <div style="position: absolute; right: 10px; overflow: visible; " alt="Add entry" onclick="bkeeping.addEntry();" >+</div>
 305                 </div>
 306
 307
 308                 <!-- MAIN GRID -->
 309                 <div class="grid_list" >
 310                         <div style="
 311                                 float: left;
 312                                 width: 98%;
 313                                 border: 1px solid rgb(0, 0, 0);
 314                                 padding: 5px;
 315                                 background-color: rgb(204, 204, 204);
 316                                 height: auto;
 317                                 text-align: center;
 318                                 overflow: none;
 319                                 "
 320                                 >
 321                                 <div class="column_headers" >&nbsp;</div>
 322                                 <div class="column_headers" >Date</div>
 323                                 <div class="column_headers" >Entry</div>
 324                                 <div class="column_headers" >Balance</div>
 325                                 <div class="column_headers" >&nbsp;</div>
 326
 327                         </div>
 328
 329                         <div id="j_rows" style="overflow: auto; clear: both; height: 78%; " >
 330                         </div>
 331                 </div>
 332
 333
 334                 <!--    BUTTONs  -->
 335                 <div style="width: 95%; margin-left:2.25%; overflow: auto; bottom: 2%;" >
 336
 337                         <button         class="buttons"
 338                                                 style="margin: 0px 280px;"
 339                                                 onclick='$("#journal_ui").css("display", "none");' >
 340                                         CLOSE
 341                         </button>
 342
 343                 </div>
 344
 345
 346                 </div>
 347         </div>
 348
 349
 350
 351         <!-- ================================================   -->
 352         <!--                            ENTRY UI Template                                       -->
 353         <!-- ================================================   -->
 354         <div id="entry_ui"
 355                 style=" color: #000000;
 356                                 display: none;
 357                                 position:absolute;
 358                                 top:10px;
 359                                 left:446px;
 360                                 z-index:1000;
 361                                 opacity: 1;
 362                                 filter: alpha(opacity=40);
 363                                 background-color:rgba(255, 255, 255, 1);
 364                                 width: 682.417px;
 365                                 height: 302.5px;
 366                                 " >
 367
 368                 <div class="twindow" >
 369
 370
 371                 <!-- HEADERs -->
 372                 <div style="width: 95%; margin: 2.25% 10px 0; overflow: auto; font-family:arial,sans-serif; font-weight:bold;" >
 373                         <div style="float: left; position:relative; text-align:left; left: 10px; " >
 374                                 Entry: <span id="_journalentry_id">${jname}</span>
 375                         </div>
 376                         <div style="position: absolute; right: 10px; overflow: visible; alt="Add entry" onclick="bkeeping.addEditEntryPart(null);" >+</div>
 377                 </div>
 378
 379
 380                 <!-- MAIN GRID -->
 381                 <div class="grid_list" >
 382                         <div style="
 383                                 float: left;
 384                                 width: 98%;
 385                                 border: 1px solid rgb(0, 0, 0);
 386                                 padding: 5px;
 387                                 background-color: rgb(204, 204, 204);
 388                                 height: auto;
 389                                 text-align: center;
 390                                 overflow: none;
 391                                 "
 392                                 >
 393
 394                                 <div class="column_headers" >&nbsp;</div>
 395
 396                                 <div style="height:12px;" >
 397
 398                                         <div style="height:14px; width:30%; text-align: center; float: left; ">
 399                                                 Debit
 400                                         </div>
 401                                         <div style="height:14px; width:30%; text-align: center; float: left; ">
 402                                                 Credit
 403                                         </div>
 404                                 </div>
 405
 406
 407                                 <div style="text-align: center; float: left; width: 60%;" >
 408
 409                                                                         <div style="width:25%; text-align: center; float: left; ">
 410                                                                                 Account
 411                                                                         </div>
 412                                                                         <div style="width:25%; text-align: center; float: left; ">
 413                                                                                 Amount
 414                                                                         </div>
 415                                                                         <div style="width:25%; text-align: center; float: left; ">
 416                                                                                 Account
 417                                                                         </div>
 418                                                                         <div style="width:25%; text-align: center; float: left; ">
 419                                                                                 Amount
 420                                                                         </div>
 421                                 </div>
 422
 423                                 <div class="column_headers" >&nbsp;</div>
 424
 425                         </div>
 426
 427                         <div id="jentry_rows" style="overflow: auto; clear: both; height: 81%; " >
 428                         </div>
 429                 </div>
 430
 431
 432                 <!--    BUTTONs  -->
 433                 <div style="width: 95%; margin-left:2.25%; overflow: auto; bottom: 2%;" >
 434
 435                         <button class="buttons" style="margin: 0px 40px 0px 220px; " onclick="bkeeping.saveEntry( '${entryid}' )" >SAVE</button>
 436                         <button class="buttons" style="margin: 0px 200px 0px 40px; " onclick='$("#entry_ui").css("display", "none");' >CANCEL</button>
 437
 438                 </div>
 439
 440
 441                 </div>
 442         </div>
 443
 444
 445
 446                 </div>
 447
 448
 449                 <!-- TAB 2 -->
 450                 <div id="tabs-2"
 451                         style="float: left; height: 440px; width: 88%; " >
 452
 453                         <div
 454                                 style="width: 100%; height: 419px; left: -20px;"
 455                                 class="accounts-pane">
 456
 457                                 <div class="cell_content" id="accounts_ui">
 458
 459                                         <div
 460                                                 style="border: 0pt none white; margin-left: 3px; width: 328px; margin-top: 3px; top: 25px;"
 461                                                 class="cell_header">
 462                                                 <h3>User Profile </h3>
 463
 464                                                 <br/><br/>
 465                                                 <xx class="subheader" style="font-size: 1em; color: rgb(104, 104, 104); top: 25px; left: 25px; position: relative;">Coming Soon</xx>
 466                                         </div>
 467
 468                                 </div>
 469
 470
 471                         </div>
 472
 473
 474                         <!-- <div class="register" style="background-color:white; border-color:#E0E0E0; border-style:solid; " >
 475                                 <p class="signuptitle">
 476                                         User Profile
 477                                 </p>
 478                                 <table>
 479                                         <tbody><tr>
 480                                                 <td style=" color:#222222; text-decoration:none; font-family:arial,sans-serif; font-size: 13.2px; ">Username</td><td><input style="margin: 0px 7px;" name="password" id="username" value="" disabled="disabled" ></td>
 481                                         </tr>
 482                                         <tr>
 483                                                 <td style=" color:#222222; text-decoration:none; font-family:arial,sans-serif; font-size: 13.2px; ">Password</td><td><input type="password" style="margin: 0px 7px;" name="password" id="password" value=""></td>
 484                                         </tr>
 485                                         <tr>
 486                                                 <td style=" color:#222222; text-decoration:none; font-family:arial,sans-serif; font-size: 13.2px; ">First Name</td><td><input type="text" style="margin: 0px 7px;" name="firstname" id="firstname" value=""></td>
 487                                         </tr>
 488                                         <tr>
 489                                                 <td style=" color:#222222; text-decoration:none; font-family:arial,sans-serif; font-size: 13.2px; ">Last Name</td><td><input type="text" style="margin: 0px 7px;" name="lastname" id="lastname" value=""></td>
 490                                         </tr>
 491                                         <tr>
 492                                                 <td style=" color:#222222; text-decoration:none; font-family:arial,sans-serif; font-size: 13.2px; ">Email</td><td><input type="text" style="margin: 0px 7px;" name="email" id="email" value=""></td>
 493                                         </tr>
 494                                         <tr>
 495                                                 <td style=" color:#222222; text-decoration:none; font-family:arial,sans-serif; font-size: 13.2px; ">Country</td>
 496                                                 <td>
 497                                                         <select style="margin: 0px 7px;" name="country" id="country">
 498                                                                 <option>United States</option>
 499                                                                 <option>Canada</option>
 500                                                         </select>
 501                                                 </td>
 502                                         </tr>
 503                                         <tr>
 504                                                 <td style=" color:#222222; text-decoration:none; font-family:arial,sans-serif; font-size: 13.2px; ">Currency</td>
 505                                                 <td>
 506                                                         <select style="margin: 0px 7px;" name="currency" id="currency">
 507                                                                 <option>USD</option>
 508                                                                 <option>CDN</option>
 509                                                         </select>
 510                                                 </td>
 511                                         </tr>
 512                                         <tr>
 513                                                 <td>
 514                                                 </td><td>
 515
 516                                                         <button onclick="javascript:bkeeping.register();" style="font-size: 13.2px;" class="buttons">SAVE</button>
 517
 518                                                 </td>
 519                                         </tr>
 520                                         </tbody>
 521                                 </table>
 522                         </div>
 523                         -->
 524
 525                 </div>
 526
 527
 528                 <!-- TAB 3 -->
 529                 <div id="tabs-3" style="float: left; height: 440px; width: 88%; " >
 530
 531
 532                         <div
 533                                 style="width: 100%; height: 419px; left: -20px;"
 534                                 class="accounts-pane">
 535
 536                                 <div class="cell_content" id="accounts_ui">
 537
 538                                         <div
 539                                                 style="border: 0pt none white; margin-left: 3px; width: 328px; margin-top: 3px; top: 25px;"
 540                                                 class="cell_header">
 541                                                 <h3>Forums </h3>
 542
 543                                                 <br/><br/>
 544                                                 <xx class="subheader" style="font-size: 1em; color: rgb(104, 104, 104); top: 25px; left: 25px; position: relative;">Coming Soon</xx>
 545                                         </div>
 546
 547                                 </div>
 548
 549
 550                         </div>
 551
 552                         <!-- Look into embedding Zoho forums:
 553                                 - http://gadgets.zoho.com/zc/index.do
 554                                 - http://ejohn.org/blog/google-groups-is-dead/
 555                                 - http://forum.jquery.com/#AllForums
 556                         -->
 557
 558                         <!-- <h2>Content heading 3</h2>
 559                         <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
 560
 561                         <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
 562                         -->
 563
 564                 </div>
 565
 566
 567         </div>
 568         </div>
 569
 570
 571         <div id="modal_screen" class="modal screen">
 572                 &nbsp;
 573         </div>
 574
 575         <div class="footer">
 576                 <p class="legal">
 577                         2008-2009 bkeeping Software, Inc. | All Rights Reserved
 578                 </p>
 579         </div>
 580
 581
 582   </body>
 583 </html>
 584
 585