/static/pages/canvas.html

http://n23.googlecode.com/ · HTML · 114 lines · 106 code · 2 blank · 6 comment · 0 complexity · 6277113812d955f2132a1ee729e326d3 MD5 · raw file

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. /*
  5. These styles are customizable.
  6. Provide .canvas-gadget (the div that holds the canvas mode gadget)
  7. at least 500px width so that the gadget has sufficient screen real estate
  8. */
  9. body {
  10. margin: 0;
  11. font-family:arial, sans-serif;
  12. text-align:center;
  13. }
  14. .container {
  15. width:652px;
  16. margin:0 auto;
  17. text-align:left;
  18. }
  19. .fc-sign-in-header {
  20. text-align:left;
  21. font-size: 13px;
  22. padding:3px 10px;
  23. border-bottom:1px solid #000000;
  24. }
  25. .signin {
  26. text-align:left;
  27. float:right;
  28. font-size: 13px;
  29. height: 32px;
  30. }
  31. .go-back {
  32. text-align:left;
  33. margin:5px auto 15px auto;
  34. }
  35. .go-back a, .go-back a:visited {
  36. font-weight:bold;
  37. }
  38. .canvas-gadget {
  39. text-align:left;
  40. width:650px; /* ALLOW AT LEAST 500px WIDTH*/
  41. margin:10px auto 10px auto;
  42. border:1px solid #cccccc;
  43. }
  44. .site-header {
  45. margin-top: 10px;
  46. }
  47. .section-title {
  48. font-size: 2em;
  49. }
  50. .clear {
  51. clear:both;
  52. font-size:1px;
  53. height:1px;
  54. line-height:0;
  55. margin:0;
  56. padding:0;
  57. }
  58. </style>
  59. <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
  60. </head>
  61. <body>
  62. <div class="container">
  63. <div class="fc-sign-in-header">
  64. <!--REQUIRED SO VISITORS CAN SIGN IN-->
  65. <div class="signin" id="gadget-signin"></div>
  66. <script type="text/javascript">
  67. var skin = {};
  68. skin['BORDER_COLOR'] = '#cccccc';
  69. skin['ENDCAP_BG_COLOR'] = '#e0ecff';
  70. skin['ENDCAP_TEXT_COLOR'] = '#333333';
  71. skin['ENDCAP_LINK_COLOR'] = '#0000cc';
  72. skin['ALTERNATE_BG_COLOR'] = '#ffffff';
  73. skin['CONTENT_BG_COLOR'] = '#ffffff';
  74. skin['CONTENT_LINK_COLOR'] = '#0000cc';
  75. skin['CONTENT_TEXT_COLOR'] = '#333333';
  76. skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
  77. skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
  78. skin['CONTENT_HEADLINE_COLOR'] = '#333333';
  79. skin['ALIGNMENT'] = 'right';
  80. google.friendconnect.container.renderCanvasSignInGadget({'id': 'gadget-signin'}, skin);
  81. </script>
  82. <!--END REQUIRED-->
  83. <div class="clear"></div>
  84. </div>
  85. <div class="site-header"><span class="section-title">Site Name</span></div>
  86. <div class="go-back">
  87. <!--REQUIRED SO VISITORS CAN RETURN TO REFERRING PAGE-->
  88. <a href="javascript:google.friendconnect.container.goBackToSite();">
  89. &lsaquo;&lsaquo; Return home</a>
  90. <!--END REQUIRED-->
  91. </div>
  92. <!-- REQUIRED - THIS IS WHERE THE GADGET IS PRESENTED. ALLOW AT LEAST 500px WIDTH -->
  93. <div id="gadget-canvas" class="canvas-gadget"></div>
  94. <script type="text/javascript">
  95. var skin = {};
  96. skin['BORDER_COLOR'] = '#cccccc';
  97. skin['ENDCAP_BG_COLOR'] = '#e0ecff';
  98. skin['ENDCAP_TEXT_COLOR'] = '#333333';
  99. skin['ENDCAP_LINK_COLOR'] = '#0000cc';
  100. skin['ALTERNATE_BG_COLOR'] = '#ffffff';
  101. skin['CONTENT_BG_COLOR'] = '#ffffff';
  102. skin['CONTENT_LINK_COLOR'] = '#0000cc';
  103. skin['CONTENT_TEXT_COLOR'] = '#333333';
  104. skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
  105. skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
  106. skin['CONTENT_HEADLINE_COLOR'] = '#333333';
  107. google.friendconnect.container.renderUrlCanvasGadget({'id': 'gadget-canvas'}, skin);
  108. </script>
  109. <!--END REQUIRED-->
  110. </div>
  111. </body>
  112. </html>