My Story
This is your About page. This space is a great opportunity to give a full background on who you are, what you do and what your site has to offer. Your users are genuinely interested in learning more about you, so don’t be afraid to share personal anecdotes to create a more friendly quality. Every website has a story, and your visitors want to hear yours. This space is a great opportunity to provide any personal details you want to share with your followers. Include interesting anecdotes and facts to keep readers engaged. Double click on the text box to start editing your content and make sure to add all the relevant details you want site visitors to know. If you’re a business, talk about how you started and share your professional journey. Explain your core values, your commitment to customers and how you stand out from the crowd. Add a photo, gallery or video for even more engagement.
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vücut Şekli Hesaplayıcı</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #fff; color: #1a1a1a; padding: 24px 20px; max-width: 600px; margin: 0 auto; } h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; } .subtitle { font-size: 14px; color: #666; margin-bottom: 28px; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; } .field { display: flex; flex-direction: column; gap: 6px; } .field-full { grid-column: span 2; } label { font-size: 13px; color: #555; font-weight: 500; } .hint { font-size: 11px; color: #aaa; margin-top: 2px; line-height: 1.4; } .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap input { width: 100%; padding: 10px 44px 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; outline: none; transition: border-color 0.15s; color: #1a1a1a; background: #fff; } .input-wrap input:focus { border-color: #7F77DD; } .unit { position: absolute; right: 13px; font-size: 13px; color: #aaa; pointer-events: none; } .btn { width: 100%; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer; background: #1a1a1a; color: #fff; border: none; border-radius: 8px; margin-bottom: 24px; transition: background 0.15s; } .btn:hover { background: #333; } .result { display: none; } .result.show { display: block; } .shape-card { border: 1px solid #eee; border-radius: 14px; padding: 20px; margin-bottom: 14px; background: #fff; } .shape-header { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .shape-icon { width: 60px; height: 76px; flex-shrink: 0; } .shape-name { font-size: 20px; font-weight: 600; color: #1a1a1a; } .shape-sub { font-size: 13px; color: #888; margin-top: 3px; } .shape-desc { font-size: 14px; color: #555; line-height: 1.65; margin-bottom: 16px; } .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; } .metrics2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .metric { background: #f6f6f6; border-radius: 8px; padding: 10px 12px; } .metric-label { font-size: 10px; color: #999; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; } .metric-val { font-size: 16px; font-weight: 600; color: #1a1a1a; } .source-tag { font-size: 11px; color: #bbb; margin-top: 12px; } .tips-card { background: #f9f9f9; border-radius: 14px; padding: 18px 20px; } .tips-title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; } .tip { font-size: 13px; color: #555; padding: 7px 0; border-bottom: 1px solid #eee; line-height: 1.5; } .tip:last-child { border-bottom: none; padding-bottom: 0; } .tip::before { content: "→ "; color: #aaa; } .err { color: #c0392b; font-size: 13px; margin-top: -12px; margin-bottom: 14px; display: none; } .err.show { display: block; } </style> </head> <body> <h1>Vücut Şekli Hesaplayıcı</h1> <p class="subtitle">Ölçümlerinizi girerek vücut tipinizi öğrenin</p> <div class="grid"> <div class="field"> <label for="shoulder">Omuz <span style="font-weight:400;color:#aaa">(önerilen)</span></label> <div class="input-wrap"> <input type="number" id="shoulder" placeholder="103" min="50" max="200"> <span class="unit">cm</span> </div> <span class="hint">En geniş nokta</span> </div> <div class="field"> <label for="bust">Göğüs</label> <div class="input-wrap"> <input type="number" id="bust" placeholder="96" min="50" max="200"> <span class="unit">cm</span> </div> <span class="hint">En dolgun nokta</span> </div> <div class="field"> <label for="waist">Bel</label> <div class="input-wrap"> <input type="number" id="waist" placeholder="75" min="40" max="200"> <span class="unit">cm</span> </div> <span class="hint">En ince nokta</span> </div> <div class="field"> <label for="highhip">Üst kalça <span style="font-weight:400;color:#aaa">(isteğe bağlı)</span></label> <div class="input-wrap"> <input type="number" id="highhip" placeholder="88" min="40" max="200"> <span class="unit">cm</span> </div> <span class="hint">Belten ~18cm aşağısı</span> </div> <div class="field field-full"> <label for="hip">Kalça</label> <div class="input-wrap"> <input type="number" id="hip" placeholder="103" min="50" max="200"> <span class="unit">cm</span> </div> <span class="hint">En geniş nokta</span> </div> </div> <p class="err" id="err">Lütfen göğüs, bel ve kalça ölçümlerinizi girin.</p> <button class="btn" onclick="calculate()">Vücut şeklimi hesapla</button> <div class="result" id="result"> <div class="shape-card"> <div class="shape-header"> <svg class="shape-icon" id="shape-svg" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg"></svg> <div> <div class="shape-name" id="shape-name"></div> <div class="shape-sub" id="shape-sub"></div> </div> </div> <p class="shape-desc" id="shape-desc"></p> <div class="metrics"> <div class="metric"><div class="metric-label">Kalça − Göğüs</div><div class="metric-val" id="m1"></div></div> <div class="metric"><div class="metric-label">Göğüs − Bel</div><div class="metric-val" id="m2"></div></div> <div class="metric"><div class="metric-label">Kalça − Bel</div><div class="metric-val" id="m3"></div></div> </div> <div class="metrics2" id="extra-metrics"></div> <p class="source-tag">FFIT yöntemi (Simmons, Istook & Devarajan, NC State Üniv. 2004) + omuz kriteri</p> </div> <div class="tips-card"> <div class="tips-title">✦ Stil önerileri</div> <div id="tips"></div> </div> </div> <script> var shapes = { hourglass: { name: "Kum saati", sub: "Dengeli & orantılı", desc: "Omuz ve kalça simetrik, bel belirgin şekilde ince. Göğüs ölçüsü omuz genişliğini tam yansıtmasa bile bu denge kum saati silüetini tanımlar.", tips: ["Bedeni saran, beli vurgulayan her kıyafet yakışır","Wrap elbiseler ve yüksek belli pantolonlar idealdir","Neredeyse her silüeti rahatlıkla giyebilirsiniz"], color: "#7F77DD", svg: '<path d="M20 4 Q32 4 44 10 Q38 26 32 34 Q38 42 44 58 Q32 64 20 64 Q26 42 32 34 Q26 26 20 10 Z" fill="#7F77DD" opacity="0.18" stroke="#7F77DD" stroke-width="1.5"/>' }, bottom_hourglass: { name: "Alt kum saati", sub: "Kalça hafif belirgin", desc: "Kalçanız göğsünüzden 9–25cm daha geniş ama bel hattı belirgin. Kum saatine yakın, alt vücut biraz daha dolgun.", tips: ["A-line ve fit-flare elbiseler mükemmel oturur","Yüksek belli kıyafetler bel hattını güzel vurgular","Üstte hafif hacim dengeyi tamamlar"], color: "#7F77DD", svg: '<path d="M22 4 Q32 4 42 9 Q37 24 32 32 Q38 42 46 58 Q32 66 18 58 Q26 42 32 32 Q27 24 22 9 Z" fill="#7F77DD" opacity="0.18" stroke="#7F77DD" stroke-width="1.5"/>' }, top_hourglass: { name: "Üst kum saati", sub: "Göğüs hafif belirgin", desc: "Göğsünüz kalçanızdan 2.5–25cm daha geniş ve bel hattı belirgin. Kum saatine yakın, üst vücut biraz daha dolgun.", tips: ["Düz veya hafif genişleyen alt giysi dengeyi sağlar","Koyu renkli üstler görsel denge yaratır","Yüksek belli kıyafetler oranı güzelleştirir"], color: "#534AB7", svg: '<path d="M18 4 Q32 4 46 10 Q37 24 32 32 Q37 40 42 58 Q32 64 22 58 Q27 40 32 32 Q27 24 18 10 Z" fill="#534AB7" opacity="0.18" stroke="#534AB7" stroke-width="1.5"/>' }, spoon: { name: "Kaşık", sub: "Belirgin üst kalça farkı", desc: "Kalçanız göğsünüzden > 5.1cm geniş, bel-kalça farkı belirgin ve üst kalça/bel oranı ≥ 1.193. Bu oran kaşık tipinin ayırt edici göstergesi.", tips: ["Yüksek belli kıyafetler bel hattını güzel tanımlar","Fit-and-flare kesimler vücut formunuza çok yakışır","Omuzları vurgulayan üstlerle denge kurabilirsiniz"], color: "#BA7517", svg: '<ellipse cx="32" cy="15" rx="11" ry="9" fill="#BA7517" opacity="0.18" stroke="#BA7517" stroke-width="1.5"/><ellipse cx="32" cy="54" rx="20" ry="18" fill="#BA7517" opacity="0.18" stroke="#BA7517" stroke-width="1.5"/><line x1="29" y1="23" x2="28" y2="37" stroke="#BA7517" stroke-width="1.5" opacity="0.4"/><line x1="35" y1="23" x2="36" y2="37" stroke="#BA7517" stroke-width="1.5" opacity="0.4"/>' }, triangle: { name: "Armut (üçgen)", sub: "Alt vücut belirgin", desc: "Kalçanız göğsünüzden ≥ 9.1cm geniş, bel-kalça farkı 22.9cm'den az ve omuz-kalça dengesi yok. Alt vücut ağırlıklı siluet.", tips: ["Parlak renkli ve desenli üstlerle denge kurun","A-line etekler ve geniş paça pantolonlar yakışır","Kalçayı minimize için koyu alt giysi tercih edin"], color: "#1D9E75", svg: '<ellipse cx="32" cy="13" rx="11" ry="9" fill="#1D9E75" opacity="0.18" stroke="#1D9E75" stroke-width="1.5"/><path d="M21 21 Q19 38 13 56 Q22 68 42 68 Q50 56 43 38 Q43 21 43 21 Z" fill="#1D9E75" opacity="0.18" stroke="#1D9E75" stroke-width="1.5"/>' }, inverted_triangle: { name: "Ters üçgen", sub: "Üst vücut & omuz belirgin", desc: "Göğsünüz veya omuzlarınız kalçanızdan belirgin şekilde geniş. Üst vücut ağırlıklı atletik siluet.", tips: ["A-line etekler ve geniş paça pantolonlar denge sağlar","Alt bedene desen ve hacim katın","Omuzları vurgulayan kıyafetlerden kaçının"], color: "#D4537E", svg: '<path d="M8 10 L56 10 L44 54 Q32 70 20 54 Z" fill="#D4537E" opacity="0.18" stroke="#D4537E" stroke-width="1.5"/>' }, rectangle: { name: "Dikdörtgen", sub: "Düz & atletik", desc: "Göğüs, bel ve kalça ölçüleri birbirine yakın, bel hattı belirgin değil. Düz ve atletik bir siluet. Kadınların yaklaşık %46'sı bu gruptadır.", tips: ["Beli vurgulayan kemer ve aksesuarlar kullanın","Fırfır, drape ve doku ile form yaratabilirsiniz","Crop üstler ve yüksek belli kıyafetler çok yakışır"], color: "#378ADD", svg: '<rect x="16" y="6" width="32" height="64" rx="6" fill="#378ADD" opacity="0.18" stroke="#378ADD" stroke-width="1.5"/>' } }; function calculate() { var bust = parseFloat(document.getElementById('bust').value); var waist = parseFloat(document.getElementById('waist').value); var hip = parseFloat(document.getElementById('hip').value); var highhip = parseFloat(document.getElementById('highhip').value); var shoulder = parseFloat(document.getElementById('shoulder').value); var err = document.getElementById('err'); if (!bust || !waist || !hip) { err.classList.add('show'); return; } err.classList.remove('show'); var hMinusB = hip - bust; var bMinusH = bust - hip; var bMinusW = bust - waist; var hMinusW = hip - waist; var hhWRatio = highhip ? highhip / waist : null; var waistDefined = (bMinusW >= 22.9 || hMinusW >= 25.4); var type; if (bMinusH >= 9.1 && bMinusW < 22.9) { type = 'inverted_triangle'; } else if (shoulder && (shoulder - hip) >= hip * 0.10 && bMinusH < 9.1) { type = 'inverted_triangle'; } else if (Math.abs(hMinusB) <= 2.5 && waistDefined) { type = 'hourglass'; } else if (shoulder && Math.abs(shoulder - hip) <= 5 && waistDefined) { type = 'hourglass'; } else if (hMinusB >= 9.1 && hMinusW >= 22.9 && hhWRatio !== null && hhWRatio < 1.193) { type = 'bottom_hourglass'; } else if (bMinusH > 2.5 && bMinusH < 25.4 && bMinusW >= 22.9) { type = 'top_hourglass'; } else if (hMinusB > 5.1 && hMinusW >= 17.8 && hhWRatio !== null && hhWRatio >= 1.193) { type = 'spoon'; } else if (hMinusB >= 9.1 && hMinusW < 22.9) { type = 'triangle'; } else { type = 'rectangle'; } var s = shapes[type]; document.getElementById('shape-svg').innerHTML = s.svg; document.getElementById('shape-name').textContent = s.name; document.getElementById('shape-sub').textContent = s.sub; document.getElementById('shape-desc').textContent = s.desc; document.getElementById('m1').textContent = hMinusB.toFixed(1) + ' cm'; document.getElementById('m2').textContent = bMinusW.toFixed(1) + ' cm'; document.getElementById('m3').textContent = hMinusW.toFixed(1) + ' cm'; var extra = ''; if (hhWRatio !== null) { extra += '<div class="metric"><div class="metric-label">Üst kalça / Bel</div><div class="metric-val">' + hhWRatio.toFixed(3) + '</div></div>'; } if (shoulder) { extra += '<div class="metric"><div class="metric-label">Omuz − Kalça</div><div class="metric-val">' + (shoulder - hip).toFixed(1) + ' cm</div></div>'; } document.getElementById('extra-metrics').innerHTML = extra; document.getElementById('tips').innerHTML = s.tips.map(function(t){ return '<div class="tip">' + t + '</div>'; }).join(''); var r = document.getElementById('result'); r.classList.add('show'); r.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } </script> </body> </html>
Contact
I'm always looking for new and exciting opportunities. Let's connect.
123-456-7890