sangoisanga/enhance_1.md

Front Template

<div class="metadata">Book 1 — Card No.: {{No}}</div>

{{#Image}}<div class="image-wrap">{{Image}}</div>{{/Image}}

{{#Suggestion}}
<div class="suggestion">{{Suggestion}}</div>
{{/Suggestion}}

<div class="cloze-container">
    {{cloze:Explanation}}
</div>

{{#Short Vietnamese}}
<div class="vn-hint">{{Short Vietnamese}}</div>
{{/Short Vietnamese}}

<div class="cloze-container keyword-cloze">
    {{cloze:Keyword}}
</div>

<div class="type-area">
    {{type:cloze:Explanation}}
</div>

Back Template

<div class="metadata">Book 1 — Card No.: {{No}}</div>

<div class="type-result">
    {{type:cloze:Explanation}}
</div>

{{#Image}}<div class="image-wrap">{{Image}}</div>{{/Image}}

<div class="cloze-container">
    {{cloze:Explanation}}
</div>

<div class="cloze-container keyword-cloze">
    {{cloze:Keyword}}
</div>

<div class="answer-box">
    <div class="keyword-main">{{Keyword}}</div>
    {{#Transcription}}<div class="transcription">[{{Transcription}}]</div>{{/Transcription}}
</div>

<hr id="answer-divider">

<div class="audio-grid">
    <div class="audio-item"><span>Keyword</span> {{Keyword_Sound}}</div>
    <div class="audio-item"><span>Meaning</span> {{Meaning_Sound}}</div>
    <div class="audio-item"><span>Example</span> {{Example_Sound}}</div>
</div>

<div class="translation-container">
    <div class="vn-full">{{Full Vietnamese}}</div>
</div>

Styling

@import url("_4000.css");

/* Main Card Style */
.card {
  font-family: "Segoe UI", Arial, sans-serif;
  text-align: center;
  color: #333;
  background-color: #f9f9f9;
  line-height: 1.6;
  padding: 15px; /* Reduced for better mobile fit */
}

/* Metadata (Card Number) */
.metadata {
  font-size: 11px;
  color: #888;
  margin-bottom: 10px;
  text-align: left;
}

/* Cloze & Text Styling - ENFORCED VISIBILITY */
.cloze {
  font-weight: bold !important;
  color: #2196F3 !important; /* Bright Blue */
}

.cloze-container {
  font-size: 22px;
  margin: 10px 0;
  text-align: left;
  display: block !important;
}

.suggestion {
  color: #e91e63;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
}

.keyword-cloze {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    text-align: center; /* Centers the keyword for better focus */
    margin-top: 20px;
    border-top: 1px dashed #ccc;
    padding-top: 10px;
}

/* Image Handling */
.image-wrap img {
  max-width: 100%;
  max-height: 250px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Typing Area & Comparison Box */
#typeans, code#typeans {
  font-family: "Courier New", monospace;
  font-size: 20px !important;
  padding: 10px;
  border-radius: 10px;
  margin: 10px auto;
  display: block;
}

.typeGood { background-color: #c8e6c9; color: #2e7d32; font-weight: bold; }
.typeBad { background-color: #ffcdd2; color: #c62828; font-weight: bold; text-decoration: line-through; }
.typeMissed { background-color: #fff9c4; color: #555; }

/* Answer Layout */
.keyword-main {
  font-size: 28px;
  font-weight: bold;
  color: #000;
}

.transcription {
  font-size: 20px;
  color: #555;
  font-family: "Lucida Sans Unicode", sans-serif;
}

.audio-grid {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 15px 0;
  font-size: 14px;
  color: #666;
}

.audio-item span {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}

/* Vietnamese Translations - MOBILE OPTIMIZED */
.vn-hint {
  color: #1976D2;
  font-size: 18px;
  text-align: left;
  border-left: 3px solid #1976D2;
  padding-left: 10px;
  margin-bottom: 10px;
}

.vn-full {
  margin-top: 15px;
  padding: 12px;
  background: #eee;
  border-radius: 8px;
  font-size: 18px;
  text-align: left;
}

/* ANDROID & MOBILE PADDING FIX */
.mobile .vn-full, .android .vn-full {
  margin-top: 8px !important;
  padding: 8px 12px !important; /* Fixed excessive padding */
  font-size: 16px;
  line-height: 1.3;
}

.mobile .vn-full ul, .android .vn-full ul {
  margin: 0;
  padding-left: 20px;
}

.mobile .vn-full li, .android .vn-full li {
  margin-bottom: 4px;
}

/* Dark Mode Adjustments */
.nightMode .card { background-color: #2c2c2c; color: #ddd; }
.nightMode .cloze-container { color: #ddd; }
.nightMode .keyword-main { color: #fff; }
.nightMode .vn-full { background: #3d3d3d; color: #eee; }
.nightMode .metadata { color: #aaa; }

/* Styling specific to Card 2 (Listening) */
.card2 { background-color: #e3f2fd; }
.card2 .audio-main .replay-button svg { width: 80px; height: 80px; }
.nightMode.card2 { background-color: #1a237e; }/* Main Card Style */
.card {
  font-family: "Segoe UI", Arial, sans-serif;
  text-align: center;
  color: #333;
  background-color: #f9f9f9;
  line-height: 1.6;
  padding: 20px;
}

/* Metadata (Card Number) */
.metadata {
  font-size: 12px;
  color: #888;
  margin-bottom: 15px;
  text-align: left;
}

/* Cloze & Text Styling */
.cloze {
  font-weight: bold;
  color: #2196F3; /* Bright Blue */
}

.cloze-container {
  font-size: 22px;
  margin: 15px 0;
  text-align: left;
}

.suggestion {
  color: #e91e63; /* Deep Pink/Red */
  font-size: 24px;
  font-weight: bold;
  text-align: left;
}

/* Image Handling */
.image-wrap img {
  max-width: 100%;
  max-height: 250px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Typing Area */
#typeans {
  font-size: 20px !important;
  padding: 10px;
  border-radius: 10px;
}
.typeGood { background-color: #c8e6c9; color: #2e7d32; }
.typeBad { background-color: #ffcdd2; color: #c62828; }
.typeMissed { background-color: #fff9c4; }

/* Answer Layout */
.keyword-main {
  font-size: 28px;
  font-weight: bold;
  color: #000;
}

.transcription {
  font-size: 20px;
  color: #555;
  font-family: "Lucida Sans Unicode", sans-serif;
}

.audio-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 15px 0;
  font-size: 14px;
  color: #666;
}

.audio-item span {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}

/* Vietnamese Translations */
.vn-hint {
  color: #1976D2;
  font-size: 18px;
  text-align: left;
  border-left: 3px solid #1976D2;
  padding-left: 10px;
}

.vn-full {
  margin-top: 20px;
  padding: 15px;
  background: #eee;
  border-radius: 8px;
  font-size: 18px;
  text-align: left;
}

/* Specific adjustments for Android and iPhone */
.mobile .vn-full, .android .vn-full {
  margin-top: 8px;      /* Reduced from 20px */
  padding: 6px 12px;    /* Thinner top/bottom, keeps sides comfortable */
  font-size: 16px;      /* Slightly smaller to fit more text */
  line-height: 1.3;     /* Tighter spacing between lines */
}

/* Remove extra spacing if you use lists (bullets) inside the field */
.mobile .vn-full ul, .android .vn-full ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;   /* Moves bullets closer to the left edge */
}

.mobile .vn-full li, .android .vn-full li {
  margin-bottom: 4px;   /* Reduces gap between bullet points */
}

/* Dark Mode Adjustments */
.nightMode .card { background-color: #2c2c2c; color: #ddd; }
.nightMode .cloze-container { color: #ddd; }
.nightMode .keyword-main { color: #fff; }
.nightMode .vn-full { background: #3d3d3d; color: #eee; }
.nightMode .metadata { color: #aaa; }

/* Styling specific to Card 2 */
.card2 {
    background-color: #e3f2fd; /* Light blue background for listening mode */
}

/* Make the Play button bigger on the front of Card 2 */
.card2 .audio-main .replay-button svg {
    width: 80px;
    height: 80px;
}

.nightMode.card2 {
    background-color: #1a237e; /* Deep blue for dark mode */
}

Front Template

<div class="metadata">Book 1 — Card No.: {{No}}</div>

{{#Image}}<div class="image-wrap">{{Image}}</div>{{/Image}}

{{#Suggestion}}
<div class="blur-reveal" onclick="this.classList.toggle('revealed')">
    <div class="suggestion">{{Suggestion}}</div>
</div>
{{/Suggestion}}

<div class="cloze-container">
    {{cloze:Explanation}}
</div>

{{#Short Vietnamese}}
<div class="blur-reveal" onclick="this.classList.toggle('revealed')">
    <div class="vn-hint">{{Short Vietnamese}}</div>
</div>
{{/Short Vietnamese}}

<div class="cloze-container keyword-cloze">
    {{cloze:Keyword}}
</div>

<div class="type-area">
    {{type:cloze:Explanation}}
</div>

Back Template

<div class="metadata">Book 1 — Card No.: {{No}}</div>

<div class="type-result">
    {{type:cloze:Explanation}}
</div>

{{#Image}}<div class="image-wrap">{{Image}}</div>{{/Image}}

<div class="cloze-container">
    {{cloze:Explanation}}
</div>

<div class="cloze-container keyword-cloze">
    {{cloze:Keyword}}
</div>

<div class="answer-box">
    <div class="keyword-main">{{Keyword}}</div>
    {{#Transcription}}<div class="transcription">[{{Transcription}}]</div>{{/Transcription}}
</div>

<hr id="answer-divider">

<div class="audio-grid">
    <div class="audio-item"><span>Keyword</span> {{Keyword_Sound}}</div>
    <div class="audio-item"><span>Meaning</span> {{Meaning_Sound}}</div>
    <div class="audio-item"><span>Example</span> {{Example_Sound}}</div>
</div>

<div class="translation-container revealed">
    <div class="vn-full">{{Full Vietnamese}}</div>
</div>

Styling

@import url("_4000.css");

Styling

/*
@import url("_4000.css");
*/


/* --- Global Card Style --- */
.card {
  font-family: "Segoe UI", Arial, sans-serif;
  text-align: center;
  color: #333;
  background-color: #f9f9f9;
  line-height: 1.6;
  padding: 15px; 
}

/* Metadata */
.metadata {
  font-size: 11px;
  color: #888;
  margin-bottom: 10px;
  text-align: left;
}

/* --- Cloze & Text Visibility --- */
.cloze {
  font-weight: bold !important;
  color: #2196F3 !important;
}

.cloze-container {
  font-size: 22px;
  margin: 10px 0;
  text-align: left;
}

.keyword-cloze {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-top: 20px;
  border-top: 1px dashed #ccc;
  padding-top: 10px;
}

.suggestion {
  color: #e91e63;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
}

/* --- Blur-to-Reveal Logic --- */
.blur-reveal {
  filter: blur(12px); /* Slightly stronger blur for letter-hints */
  transition: filter 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
  opacity: 0.4;
  margin-bottom: 10px;
}

/* Ensure blurred text doesn't wrap oddly */
.blur-reveal .suggestion, .blur-reveal .vn-hint {
  display: inline-block;
  pointer-events: none; /* Tap goes to the parent container */
}

/* The "Revealed" state (on Tap or on Back Card) */
.blur-reveal.revealed, 
.revealed .suggestion, 
.revealed .vn-hint,
.revealed .vn-full {
  filter: blur(0px) !important;
  opacity: 1 !important;
}

/* Extra styling for the Suggestion text when blurred */
.suggestion {
  color: #e91e63;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
}


/* --- Image Handling --- */
.image-wrap img {
  max-width: 100%;
  max-height: 250px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* --- Typing & Result Box --- */
#typeans, code#typeans {
  font-family: "Courier New", monospace;
  font-size: 20px !important;
  padding: 10px;
  border-radius: 10px;
  margin: 10px auto;
  display: block;
}

.typeGood { background-color: #c8e6c9; color: #2e7d32; font-weight: bold; }
.typeBad { background-color: #ffcdd2; color: #c62828; font-weight: bold; text-decoration: line-through; }
.typeMissed { background-color: #fff9c4; }

/* --- Answer Layout & Audio --- */
.keyword-main { font-size: 28px; font-weight: bold; color: #000; }
.transcription { font-size: 20px; color: #555; }

.audio-grid {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 15px 0;
  font-size: 14px;
}

.audio-item span { display: block; font-weight: bold; margin-bottom: 4px; }

/* --- Vietnamese & Mobile Fixes --- */
.vn-hint {
  color: #1976D2;
  font-size: 18px;
  text-align: left;
  border-left: 3px solid #1976D2;
  padding-left: 10px;
  margin-bottom: 10px;
}

.vn-full {
  margin-top: 15px;
  padding: 12px;
  background: #eee;
  border-radius: 8px;
  font-size: 18px;
  text-align: left;
}

/* ANDROID PADDING FIX: Specific overrides for AnkiDroid */
.mobile .vn-full, .android .vn-full {
  margin-top: 8px !important;
  padding: 8px 12px !important; 
  font-size: 16px;
  line-height: 1.3;
}

/* --- Night Mode --- */
.nightMode .card { background-color: #2c2c2c; color: #ddd; }
.nightMode .keyword-main { color: #fff; }
.nightMode .vn-full { background: #3d3d3d; color: #eee; }
.nightMode .keyword-cloze { border-top-color: #444; color: #bbb; }

/* --- Card 2 (Listening) Specifics --- */
.card2 { background-color: #e3f2fd; }
.card2 .audio-main .replay-button svg { width: 80px; height: 80px; }
.nightMode.card2 { background-color: #1a237e; }

Front Template

<div style='font-family: Arial; font-size: 14px;color:blue;text-align: left;'>Book 2 - Card No.: {{№}}</div><br>

<div style='text-align: center;'>{{IMG}}</div><br>

<div style='font-family: Arial; font-size: 24px;color:red;text-align: left;'>{{Suggestion}}</div><br/>


<div style='font-family: Arial; font-size: 20px;text-align: left;'>{{cloze:Explanation}}</div><br>

<div style='font-family: Arial; font-size: 22px;color:blue;text-align: left;'>{{Short Vietnamese}}</div>

<div style='font-family: Arial; font-size: 22px;text-align: left;'>{{type:cloze:Explanation}}

Back Template

 <div style='font-family: Arial; font-size: 14px;color:blue;text-align: left;'>Book 2 - Card No.: {{№}}</div>

<div style='font-family: Arial; font-size: 24px;text-align: center;'>{{type:cloze:Keyword}}</div>

<div style='font-family: Arial; font-size: 24px;color:blue;text-align:center;'>{{Transcription}}</div>

<div style='font-family: Arial; font-size: 22px;text-align: left;'> {{cloze:Explanation}}</div><br>

<div style='text-align: center;'>{{IMG}}</div>

<div style='font-family: Arial; font-size: 21px;color:black;text-align:cente;'>{{Transcription}}</div>
<div style='font-family: Arial; font-size: 24px;color:blue;text-align:cente;'>{{Short Vietnamese}}</div>

<div style='font-family: Arial; font-size: 18px;color:black;text-align: left'>Keyword{{Sound}}<div>
<div style='font-family: Arial; font-size: 18px;color:black;text-align: left'>Meaning{{Meaning}}<div>
<div style='font-family: Arial; font-size: 18px;color:black;text-align: left'>Example{{Example}}<div>

<div style='font-family: Arial; font-size: 20px;text-align: left;'>{{Full Vietnamese}}<div>

Styling

.card {
 font-family: arial; line-height: 1.5em;
 font-size: 20px;
 color: black;
text-align: center;
 background-color: white;
}
.cloze {
 font-weight: bold;
 color: blue;
}

#typeans {
 padding-top: 0.5em;
 text-align: center;
 max-width: 300px;
}
input#typeans {
 border-radius: 19px
}
.Translation {
 font-family: Lucida Sans Unicode;
 color: gray;
 padding-top: 0.5em;
}

}
div span {
 max-width: 900px;
 display: inline-block;
 text-align:left;
}

.English {
 padding: 1em;
}
.English IMG {
 float:left;
}


.card {color: black; background-color: #f3f3f3;}
#typeans span {background-color: #f3f3f3;}
.typeBad {color: #dc322f;font-weight:bold;font-size: 23px;}
.typeMissed, .typePass {  color: #268bd2;font-weight:bold;font-size: 23px;}
.typeGood{color: #2ed85a;font-weight:bold;} 

.ankiru{
 position: absolute;
 top: 7px;
 right: 27px;
 background: url('_ankiru.png') top right no-repeat;
 display: block;
 width:135px;
 height:32px;
}



.Deck {
 position: absolute; top: 7px; left: 0px; width: 100%;
}
#Deck {
 font-size: 8pt;  vertical-align: top; line-height: 10pt;
}

.Vietnamese {
border-radius:10px;
line-height:1.4em;
font-family:tahoma;
font-size:16px;
}

sangoisanga/enhance_1.md

Select an option

No results found

Select an option

No results found

Front Template

Back Template

Styling

Front Template

Back Template

Styling

Styling

Front Template

Back Template

Styling