an experience
<!-- أداة اختيار الماتشا المناسبة (تصميم موماتشا + النتيجة تعمل فعليًا) -->
<style>
#moMatchaTool {
max-width: 600px;
margin: 30px auto;
background: #F9F9F9;
border-radius: 20px;
padding: 25px 30px;
font-family: 'Expo Arabic', sans-serif !important;
direction: rtl;
color: #333;
text-align: right;
}
#moMatchaTool h2 {
text-align: center;
color: #3C9870;
font-size: 1.4rem;
margin-bottom: 15px;
font-weight: 600;
}
#moMatchaTool label {
display: block;
margin-top: 18px;
font-weight: 600;
color: #222;
}
#moMatchaTool select {
width: 100%;
padding: 10px;
margin-top: 6px;
border-radius: 12px;
border: none;
font-size: 1rem;
background: #fff;
box-shadow: 0 0 0 1px #eee inset;
color: #333;
}
#moMatchaTool button {
display: block;
margin: 25px auto 0;
padding: 12px 25px;
background: #3C9870;
color: #fff;
border: none;
border-radius: 10px;
font-size: 1.05rem;
cursor: pointer;
}
#moMatchaTool button:hover {
background-color: #2e7a58;
}
#moMatchaTool .result {
text-align: center;
font-size: 1.05rem;
font-weight: 600;
margin-top: 22px;
color: #222;
line-height: 1.8;
}
#moMatchaTool .highlight { color: #3C9870; }
</style>
<!-- نضع السكربت خارج الـ div -->ماتشا هيكاري بجميع أنواعها.";
}
else if ((drink === "كلاهما" || drink === "مويه") &&
(taste === "متوسط" || taste === "خفيف") && addons === "لاشي") {
message = "أنسب منتج لك هو ماتشا كيوامي أو ماتشا تاكومي.";
}
else if (drink === "حليب" && addons === "نكهة") {
message = "أنسب منتج لك هو هيكاري فانليا.";
}
else if (drink === "حليب" && addons === "سكر") {
message = "أنسب منتج لك هو ماتشا سريعة التحضير.";
}
else {
message = "ما لقينا تطابق دقيق، لكن جرب ماتشا هيكاري فهي خيار متوازن.";
}
result.style.color = "#222";
result = message;
});
});
<!-- نهاية الأداة -->