Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Public Pastes
Guest

Untitled

By: a guest on May 25th, 2012  |  syntax: HTML  |  size: 2.63 KB  |  views: 153  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!--This doesn't appear on the card; we just want to steal its content later -->
  2. <div id="image" style="display:none">{{{Sentence-Image}}}</div>
  3.  
  4. <div id="questionContainer">
  5.     <div id="sentenceClozed">{{{Sentence-Clozed}}}</div>
  6.     <div id="sentenceEnglish">{{{Sentence-English}}}</div>
  7.     <div id="hint">{{{Hint}}}</div>
  8. </div>
  9.  
  10. <script>
  11. // Get the image path. Assuming it's a .jpg.
  12. var img = document.getElementById("image");
  13. var start = img.innerHTML.indexOf("src=\"") +5;
  14. var end = img.innerHTML.indexOf(".jpg\"");
  15. var imgPath = img.innerHTML.substring(start, end) + ".jpg";
  16.  
  17. // And make it the background image
  18. document.body.style.backgroundImage='url('+imgPath+')';
  19.  
  20. // Fill in the clozed portion with its English meaning
  21. var eng = "{{{Vocabulary-English}}}"
  22. var cloze = document.getElementById("sentenceClozed");
  23. cloze.innerHTML = cloze.innerHTML.replace(/（　）/, "｢"+eng+"｣");
  24. </script>
  25.  
  26. <style type="text/css">
  27. body
  28. {
  29.   background-color:#000;
  30.   background-size:cover;
  31.   background-repeat:no-repeat;
  32.   background-position: 50% 50%;
  33.   margin:0px;
  34.   padding:0px;
  35.   height:100%;
  36. }
  37.  
  38. /*Question card*/
  39. #questionContainer
  40. {
  41.   padding: 5px;
  42.   border-radius: 8px;
  43.   background-color: rgba(0,0,0,0.7);
  44.   margin-left: 2%;
  45.   margin-right: 2%;
  46. }
  47.  
  48. #sentenceClozed
  49. {
  50.   color: #ed9;
  51.   font-size: 1.3em;
  52. }
  53.  
  54. #sentenceClozed b,
  55. #sentenceClozed [style="font-weight: bold;"],
  56. #sentenceClozed [style="font-weight:600;"]
  57. {
  58.   color: #f0b570;
  59.   background-color: rgba(0,0,0,0.2);
  60.   font-family: monospace;
  61. }
  62.  
  63. #sentenceEnglish
  64. {
  65.   display: inline-block;
  66.   font-size: 1.1em;
  67.   color:#000;
  68.   background-color:#000;
  69.   margin-top: 10px;
  70. }
  71.  
  72. #sentenceEnglish:hover
  73. {
  74.   color: #dfb;
  75. }
  76.  
  77. #hint
  78. {
  79.   color: #fff;
  80.   font-size: 1.3em;
  81.   padding-top:5px;
  82. }
  83.  
  84. #sentenceEnglishAfterAnswer
  85. {
  86.   display: inline-block;
  87.   font-size: 1.1em;
  88.   color: #dfb;
  89.   margin-top: 5px;
  90. }
  91.  
  92. /*Answer card*/
  93. #answerContainer
  94. {
  95.   position: relative;
  96.   border-radius: 8px;
  97.   background-color: rgba(0,0,0,0.7);
  98.   padding: 5px;
  99.   margin-left: 2%;
  100.   margin-right: 2%;
  101. }
  102.  
  103. #vocabFurigana
  104. {
  105.   font-size: 2.3em;
  106.   color: #f90;
  107. }
  108.  
  109. #reading
  110. {
  111.   font-size: 1.5em;
  112.   color: #ed9;
  113.   padding-top:2px;
  114. }
  115.  
  116. #reading b,
  117. #reading [style="font-weight: bold;"],
  118. #reading [style="font-weight:600;"]
  119. {
  120.   color: #f0b570;
  121.   background-color: rgba(0,0,0,0.2);
  122. }
  123.  
  124. /*Audio images for ankidroid*/
  125. #sentenceAudio
  126. {
  127.   position: absolute;
  128.   top: 0.2em;
  129.   left: 0.2em;
  130. }
  131. #sentenceAudio img
  132. {
  133.   width: 50%;
  134. }
  135.  
  136. #vocabAudio
  137. {
  138.   position: absolute;
  139.   top: 0.2em;
  140.   right: 0.2em;
  141. }
  142. #vocabAudio img
  143. {
  144.   width: 50%;
  145. }
  146. </style>
clone this paste RAW Paste Data