Not a Dictionary · Sentence Card
/* Reset */
.nad-card, .nad-card * {
box-sizing: border-box !important;
margin: 0;
padding: 0;
}
.nad-card {
width: 100% !important;
max-width: 100% !important;
background: #ffffff;
padding: 16px 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #18181b;
}
/* 1. HEADER PHRASE */
.nad-phrase-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px dashed #e4e4e7;
}
.nad-phrase-wrapper.hidden {
display: none !important;
}
.nad-chinese-sentence {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 5px;
width: 100%;
}
.nad-word {
font-size: 1.05rem;
font-weight: 700;
padding: 3px 6px;
border-radius: 6px;
line-height: 1.2;
display: inline-flex;
align-items: center;
}
.nad-punct {
font-size: 1.05rem;
font-weight: 700;
color: #a1a1aa;
padding: 0 1px;
}
/* Word Colors */
.w-1 { background: #fef08a; color: #854d0e; }
.w-2 { background: #e0f2fe; color: #0369a1; }
.w-3 { background: #fce7f3; color: #9d174d; }
.w-4 { background: #dcfce7; color: #15803d; }
.nad-translation {
width: 100%;
background: #f4f4f5;
color: #3f3f46;
font-size: 0.85rem;
font-weight: 500;
padding: 8px 12px;
border-radius: 100px;
text-align: left;
}
/* 2. TABS CONTAINER */
.nad-tabs-container {
width: 100%;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid #f4f4f5;
}
.nad-tab-btn {
background: #f4f4f5;
border: none;
border-radius: 6px;
font-weight: 800;
text-transform: uppercase;
color: #71717a;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.nad-tab-btn.active {
background: #ffe043;
color: #09090b;
}
/* DESKTOP Grid — 3 columns */
@media (min-width: 641px) {
.nad-tabs-container {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.nad-tab-btn {
padding: 10px 4px;
font-size: 0.72rem;
letter-spacing: -0.2px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* MOBILE Scroll */
@media (max-width: 640px) {
.nad-card {
padding: 10px 4px !important;
}
.nad-tabs-container {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
gap: 5px;
scrollbar-width: none;
padding-left: 2px;
padding-right: 2px;
}
.nad-tabs-container::-webkit-scrollbar {
display: none;
}
.nad-tab-btn {
padding: 7px 10px;
font-size: 0.7rem;
white-space: nowrap !important;
flex-shrink: 0 !important;
touch-action: pan-x;
}
.nad-highlight-box {
padding: 10px 8px;
}
}
/* 3. TAB PANELS */
.nad-tab-panel {
display: none;
width: 100%;
}
.nad-tab-panel.active {
display: block;
}
/* BREAKDOWN: Flow Grid */
.nad-breakdown-flow {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
width: 100%;
}
.nad-b-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 8px;
font-size: 0.95rem;
cursor: pointer;
user-select: none;
}
.nad-b-chip .b-zh { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.nad-b-chip .b-py { font-size: 0.75rem; background: #ffffff; padding: 2px 6px; border-radius: 100px; font-weight: 600; opacity: 0.9; }
.nad-b-chip .b-gl { font-size: 0.78rem; font-weight: 500; opacity: 0.85; }
.nad-b-chip .b-audio { font-size: 0.8rem; opacity: 0.4; margin-left: 2px; }
/* TEXT CONTENT LAYOUTS */
.nad-text-block {
font-size: 0.92rem;
line-height: 1.6;
color: #27272a;
}
.nad-text-block p {
margin-bottom: 10px;
}
.nad-highlight-box {
background: #fafafa;
border: 1px solid #f4f4f5;
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
}
.nad-box-title {
font-size: 0.95rem;
font-weight: 700;
color: #09090b;
margin-bottom: 4px;
}
.nad-inline-chip {
background: #ffe043;
color: #09090b;
font-weight: 700;
padding: 1px 5px;
border-radius: 4px;
font-size: 0.85rem;
}
/* BUILD IT */
.nad-quiz-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.nad-quiz-hint {
background: #fcfcfc;
border: 1px solid #f4f4f5;
border-radius: 6px;
padding: 8px 10px;
width: 100%;
}
.nad-quiz-title {
font-size: 0.6rem;
font-weight: 800;
color: #71717a;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nad-quiz-instruction {
font-size: 0.85rem;
font-weight: 500;
color: #52525b;
margin-top: 2px;
}
.nad-quiz-box {
min-height: 70px;
background: #fafafa;
border: 2px dashed #e4e4e7;
border-radius: 10px;
padding: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-content: flex-start;
width: 100%;
transition: all 0.2s ease;
}
.nad-quiz-box.state-error {
background: #fff5f5 !important;
border-color: #f87171 !important;
}
.nad-quiz-box.state-success {
background: #f0fdf4 !important;
border-color: #4ade80 !important;
}
.nad-quiz-pool {
display: flex;
flex-wrap: wrap;
gap: 6px;
width: 100%;
min-height: 36px;
}
.nad-quiz-chip {
background: #ffffff;
border: 1px solid #e4e4e7;
padding: 4px 8px;
border-radius: 6px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
user-select: none;
width: auto;
min-width: 44px;
}
.nad-quiz-chip .czh { font-size: 0.95rem; font-weight: 700; color: #09090b; line-height: 1.1; }
.nad-quiz-chip .cpy { font-size: 0.62rem; color: #71717a; margin-top: 1px; white-space: nowrap; }
.nad-quiz-actions {
display: flex;
gap: 6px;
align-items: center;
margin-top: 2px;
}
.nad-btn-check {
background: #ffe043;
color: #09090b;
padding: 8px 14px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 700;
border: none;
cursor: pointer;
}
.nad-btn-reset {
background: #f4f4f5;
color: #52525b;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
border: none;
cursor: pointer;
}
.nad-quiz-feedback {
font-size: 0.82rem;
font-weight: 600;
margin-top: 2px;
display: none;
}
.nad-quiz-feedback.error { color: #dc2626; display: block; }
.nad-quiz-feedback.success { color: #16a34a; display: block; }
.nad-footer {
margin-top: 16px;
padding-top: 8px;
border-top: 1px solid #f4f4f5;
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
color: #a1a1aa;
text-align: right;
}
化
干戈
为
玉帛
。
Turn weapons into jade and silk. — To turn conflict into peace; to replace war with friendship.
BREAKDOWN
MEANING
BUILD IT
化
huà
to transform / turn into / 转变
🔊
干戈
gān gē
weapons / war / conflict / 武器 / 战争
🔊
为
wéi
into / as / 成为
🔊
玉帛
yù bó
jade and silk / peace and friendship / 玉和丝绸 / 和平友好
🔊
化干戈为玉帛 is a powerful Chinese saying that means “to turn weapons into peace” or “to replace conflict with friendship.”
化 (“TO TRANSFORM”)
化 means to change or transform something from one state to another. It’s the action of making a fundamental shift.
干戈 (“WEAPONS / WAR”)
干 (shield) and 戈 (spear) were ancient weapons. Together, they represent war, fighting, conflict, and hostility . In ancient China, these two words were often used together to mean “military force” or “armed conflict.”
为 (“INTO / AS”)
为 here means “to become” or “to turn into.” It connects the transformation from conflict to peace.
玉帛 (“JADE AND SILK”)
玉 (jade) and 帛 (silk) were precious materials used in ancient China as gifts between rulers, as offerings in ceremonies, and as symbols of friendship, respect, and peaceful relations . They represent the complete opposite of weapons: beauty, value, and harmony.
Where does it come from?
This saying comes from ancient Chinese history, specifically from the Spring and Autumn period (about 2,500 years ago). It was used to describe the ideal of resolving disputes between states through diplomacy and mutual respect, rather than through war. Over time, it became a famous expression representing the highest ideal of conflict resolution.
What does it mean in everyday life?
This phrase is used whenever people choose peace over fighting . It can apply to:
International relations: When two countries end a war and become friends.Personal conflicts: When two people who were angry with each other forgive and make up.Business: When competitors stop fighting and start cooperating.Inner peace: When someone lets go of anger and finds calm.
The deeper message is that conflict is not the only option . Even in the most heated disagreements, there is always a chance to turn things around — to choose understanding over anger, cooperation over competition, and peace over war.
Core Philosophy: True strength is not in winning fights, but in finding ways to turn enemies into friends and conflict into harmony.
📝 BUILD THE SENTENCE
Click the words below in the correct order to form the saying.
Check Answer
Reset
NOT A DICTIONARY
const sentenceData = [
{ zh: "化", py: "huà" },
{ zh: "干戈", py: "gān gē" },
{ zh: "为", py: "wéi" },
{ zh: "玉帛", py: "yù bó" }
];
function playAudio(text) {
if (!('speechSynthesis' in window)) return;
try {
window.speechSynthesis.cancel();
const utt = new SpeechSynthesisUtterance(text);
utt.lang = 'zh-CN';
utt.rate = 0.9;
window.speechSynthesis.speak(utt);
} catch (e) {}
}
function switchNadTab(evt, tabId) {
const card = evt.target.closest('.nad-card');
card.querySelectorAll('.nad-tab-panel').forEach(p => p.classList.remove('active'));
card.querySelectorAll('.nad-tab-btn').forEach(b => b.classList.remove('active'));
card.querySelector('#' + tabId).classList.add('active');
evt.currentTarget.classList.add('active');
const phraseWrapper = card.querySelector('#nadPhraseWrapper');
if (tabId === 'nad-tab-build') {
phraseWrapper.classList.add('hidden');
initNadQuiz();
} else {
phraseWrapper.classList.remove('hidden');
}
}
function initNadQuiz() {
const target = document.getElementById('nadQuizTarget');
const pool = document.getElementById('nadQuizPool');
const feedback = document.getElementById('nadQuizFeedback');
if (!target || !pool) return;
target.innerHTML = '';
pool.innerHTML = '';
target.className = 'nad-quiz-box';
feedback.className = 'nad-quiz-feedback';
feedback.innerHTML = '';
const shuffled = [...sentenceData].sort(() => Math.random() - 0.5);
shuffled.forEach(item => {
const chip = document.createElement('div');
chip.className = 'nad-quiz-chip';
chip.setAttribute('data-zh', item.zh);
chip.innerHTML = `${item.zh}${item.py}`;
chip.onclick = function() {
playAudio(item.zh);
if (chip.parentElement === pool) target.appendChild(chip);
else pool.appendChild(chip);
};
pool.appendChild(chip);
});
}
function checkNadQuiz() {
const target = document.getElementById('nadQuizTarget');
const feedback = document.getElementById('nadQuizFeedback');
const userAns = Array.from(target.children).map(c => c.getAttribute('data-zh')).join('');
const correctAns = sentenceData.map(d => d.zh).join('');
if (userAns === correctAns) {
target.className = 'nad-quiz-box state-success';
feedback.className = 'nad-quiz-feedback success';
feedback.innerHTML = '✓ Correct! 化 → 干戈 → 为 → 玉帛 🎉';
playAudio('化干戈为玉帛');
} else {
target.className = 'nad-quiz-box state-error';
feedback.className = 'nad-quiz-feedback error';
feedback.innerHTML = '✕ Not quite. Try again!';
}
}
