/public/static/skill_edit_page/skill_edit_page.html

https://github.com/4pcbr/fb_gh · HTML · 124 lines · 124 code · 0 blank · 0 comment · 0 complexity · 54f6fc8499ddd1b1e25b805d1b4d04eb MD5 · raw file 

    

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. 

  2.         "http://www.w3.org/TR/html4/loose.dtd">
    3. 

  3. <html>
    4. 

  4. <head>
    5. 

  5.     <title>Edit your skill and interests </title>
    6. 

  6.     <link type="text/css" rel="stylesheet" media="all" href="skill_edit_page.css" />
    7. 

  7.     <link type="text/css" rel="stylesheet" media="all" href="../form_input.css" />
    8. 

  8.     <link type="text/css" rel="stylesheet" media="all" href="../global.css" />
    9. 

  9.     <link type="text/css" rel="stylesheet" media="all" href="../../widgets/skill_level_edit_widget/skill_level_widget.css" />
    10. 

  10.     <link type="text/css" rel="stylesheet" media="all" href="../side_libs/jquery.autocomplete.css"/>
    11. 

  11.     <script type="text/javascript" src="../../widgets/skill_level_edit_widget/skill_level_widget.js"></script>
    12. 

  12.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    13. 

  13.     <script type="text/javascript" src="../side_libs/jquery.tools.min.js"></script>
    14. 

  14.     <script type="text/javascript" src="../side_libs/jquery.center.js"></script>
    15. 

  15.     <script type="text/javascript" src="../side_libs/jquery.autocomplete.pack.js"></script>
    16. 

  16.     <script type="text/javascript">
    17. 

  17.         $(function(){
    18. 

  18.             $('#name-container').css('width', $('#name').width() + $('#avatar-container').width() + $('#processing-indicator').width() + 10)
    19. 

  19.             $('#name-container').center({horizontal:true, vertical:false, position:'relative'})
    20. 

  20.             //init skill widgets
    21. 

  21.             $('input.skill[type=hidden]').each(function(){
    22. 

  22.                 initSkillLevelWidget($(this),{value:2})
    23. 

  23.             })
    24. 

  24.         })
    25. 

  25.     </script>
    26. 

  26.     <script type="text/javascript" src="skill_edit_page.js"></script>
    27. 

  27. </head>
    28. 

  28. <body>
    29. 

  29. <div id='main-container' class='main-container'>
    30. 

  30.     <div id='name-container'>
    31. 

  31.          <div id='avatar-container'><img src='../img/comix.png' alt='Your picture'></div>
    32. 

  32.          <h1 id='name'><a id='username-link'>$USERNAME% </a></h1>
    33. 

  33.          <div id='processing-indicator'></div>
    34. 

  34.     </div>
    35. 

  35.     <div id='interests-container' class='items-container'>
    36. 

  36.         <div id='interest-label' class='items-container-label'>Interests: </div>
    37. 

  37.         <a id='add-interest-button' class='items-container-add-button '> + Add interest </a>
    38. 

  38.         <ul id='interests-list'>
    39. 

  39.             <input type='hidden' id='interests' value=''>
    40. 

  40.             <li class='interest'><span><a class='interest-link' href="#">Django</a></span><div class='remove-image-container'>
    41. 

  41.                     <img class='remove-image' src='../img/delete.png' alt='x'>
    42. 

  42.                 </div>
    43. 

  43.             </li>
    44. 

  44.             <li class='interest'><span><a class='interest-link' href="#">Ruby</a></span><div class='remove-image-container'>
    45. 

  45.                     <img class='remove-image' src='../img/delete.png' alt='x'>
    46. 

  46.                 </div>
    47. 

  47.             </li>
    48. 

  48.             <li class='interest'><span><a class='interest-link' href="#">Ruby on rails</a></span><div class='remove-image-container'>
    49. 

  49.                     <img class='remove-image' src='../img/delete.png' alt='x'>
    50. 

  50.                 </div>
    51. 

  51.             </li>
    52. 

  52.             <li class='interest'><span><a class='interest-link' href="#">php</a></span><div class='remove-image-container'>
    53. 

  53.                         <img class='remove-image' src='../img/delete.png' alt='x'>
    54. 

  54.                     </div>
    55. 

  55.                 </li>
    56. 

  56.             <li class='interest'><span><a class='interest-link' href="#">C#</a></span><div class='remove-image-container'>
    57. 

  57.                         <img class='remove-image' src='../img/delete.png' alt='x'>
    58. 

  58.                     </div>
    59. 

  59.                 </li>
    60. 

  60.             <li class='interest'><span><a class='interest-link' href="#">Silverlight</a></span><div class='remove-image-container'>
    61. 

  61.                         <img class='remove-image' src='../img/delete.png' alt='x'>
    62. 

  62.                     </div>
    63. 

  63.                 </li>
    64. 

  64.             <li class='interest'><span><a class='interest-link' href="#">Javascript</a></span><div class='remove-image-container'>
    65. 

  65.                         <img class='remove-image' src='../img/delete.png' alt='x'>
    66. 

  66.                     </div>
    67. 

  67.             </li>
    68. 

  68.             <li class='interest'><span><a class='interest-link' href="#">Python</a></span><div class='remove-image-container'>
    69. 

  69.                         <img class='remove-image' src='../img/delete.png' alt='x'>
    70. 

  70.                     </div>
    71. 

  71.                 </li>
    72. 

  72.             <li class='interest'><span><a class='interest-link' href="#">C</a></span><div class='remove-image-container'>
    73. 

  73.                         <img class='remove-image' src='../img/delete.png' alt='x'>
    74. 

  74.                     </div>
    75. 

  75.                 </li>
    76. 

  76.             <li class='interest'><span><a class='interest-link' href="#">C++</a></span><div class='remove-image-container'>
    77. 

  77.                     <img class='remove-image' src='../img/delete.png' alt='x'>
    78. 

  78.                 </div>
    79. 

  79.             </li>
    80. 

  80.             <li class='interest'><span><a class='interest-link' href="#">brainfuck</a></span><div class='remove-image-container'>
    81. 

  81.                     <img class='remove-image' src='../img/delete.png' alt='x'>
    82. 

  82.                 </div>
    83. 

  83.             </li>
    84. 

  84.         </ul>
    85. 

  85.         </div>
    86. 

  86.     <div id='skill-container' class='items-container'>
    87. 

  87.         <div id='skills-label' class='items-container-label'>Skills: </div>
    88. 

  88.         <a id='add-skill-button' class='items-container-add-button'> + Add skill</a>
    89. 

  89.         <div id='skill-list'>
    90. 

  90.             <input text='JavaScript' name='javascript' type='hidden'  class='skill'>
    91. 

  91.             <input text='Ruby on rails' name='rubyonrails' type='hidden'  class='skill'>
    92. 

  92.             <input text ='C++' name='cplusplus' type='hidden'  class='skill'>
    93. 

  93.             <input text='C' type='hidden' name ='c'  class='skill'>
    94. 

  94.             <input text='Python' type='hidden' name='python'  class='skill'>
    95. 

  95.         </div>
    96. 

  96.     </div>
    97. 

  97.     <span id='my-projects-container' class='button-green'><a id='my-projects' href="#">My projects</a></span>
    98. 

  98.     <div id='interest-input-popup' class='form-popup'>
    99. 

  99.         <form action="" id='add-interest-form'>
    100. 

  100.             <label for="interest-select">Enter your interest</label>
    101. 

  101.             <input id='interest-select' type="text" autocomplete="off">
    102. 

  102.             <input id='interest-val' type=hidden>
    103. 

  103.             <div id='add-interest-buttons' class='button-box'>
    104. 

  104.                 <span id='save-interest-button' class='button-confirm button-green' ><a href="#" id='save-new-interest-link'>Save</a></span>
    105. 

  105.                 <span>or</span>
    106. 

  106.                 <span id='cancel-interest-button' class='button-cancel' ><a href="#" id='cancel-new-interest-link' >cancel</a></span>
    107. 

  107.             </div>
    108. 

  108.         </form>
    109. 

  109.     </div>
    110. 

  110.     <div id='skill-input-popup' class='form-popup'>
    111. 

  111.         <form action="" id='add-skill-form'>
    112. 

  112.             <label for="skill-select">Enter your skill</label>
    113. 

  113.             <input id='skill-select' type="text" autocomplete="off">
    114. 

  114.             <input id='skill-val' type=hidden>
    115. 

  115.             <div id='add-skill-buttons' class='button-box'>
    116. 

  116.                 <span id='save-skill-button' class='button-confirm button-green' ><a href="#" id='save-new-skill-link'>Save</a></span>
    117. 

  117.                 <span>or</span>
    118. 

  118.                 <span id='cancel-skill-button' class='button-cancel' ><a href="#" id='cancel-new-skill-link' >cancel</a></span>
    119. 

  119.             </div>
    120. 

  120.         </form>
    121. 

  121.     </div>
    122. 

  122. </div>
    123. 

  123. </body>
    124. 

  124. </html>
    125.