<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SmartCalc – Premium Calculator App</title>
<style>
/* ===== RESET & BASE ===== */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f9fafb;
color: #1c1c1e;
line-height: 1.6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
overflow-x: hidden;
}
/* ===== HEADER ===== */
header {
width: 100%;
background: #ffffffcc;
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.logo {
font-weight: 700;
font-size: 1.5rem;
color: #0071e3;
letter-spacing: 0.5px;
}
/* ===== HERO ===== */
.hero {
text-align: center;
margin: 3rem auto;
padding: 0 1rem;
max-width: 800px;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.1rem;
color: #555;
margin-bottom: 2rem;
}
.hero button {
background-color: #0071e3;
color: #fff;
border: none;
padding: 0.8rem 1.8rem;
border-radius: 1.5rem;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
}
.hero button:hover {
background-color: #005bb5;
}
/* ===== CALCULATOR ===== */
.calculator {
background: #fff;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
border-radius: 1.5rem;
width: 320px;
padding: 1.5rem;
margin: 2rem auto 4rem;
}
.display {
width: 100%;
height: 60px;
background: #f3f4f6;
border-radius: 0.75rem;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 1rem;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
overflow-x: auto;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
.btn {
background: #e5e7eb;
border: none;
padding: 1rem;
font-size: 1.1rem;
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.2s;
}
.btn:hover {
background: #d1d5db;
}
.[Link] {
background: #0071e3;
color: #fff;
}
.[Link]:hover {
background: #005bb5;
}
/* ===== PRICING ===== */
.pricing {
width: 100%;
padding: 4rem 1rem;
background: #f0f4f8;
text-align: center;
}
.pricing h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
}
.pricing p {
color: #555;
margin-bottom: 2rem;
}
.plans {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.plan {
background: #fff;
padding: 2rem;
border-radius: 1.5rem;
width: 280px;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
transition: transform 0.3s;
}
.plan:hover {
transform: translateY(-8px);
}
.plan h3 {
margin-bottom: 0.5rem;
color: #0071e3;
}
.plan .price {
font-size: 2rem;
font-weight: 700;
margin: 1rem 0;
}
.plan ul {
list-style: none;
text-align: left;
margin: 1rem 0;
}
.plan li {
margin: 0.5rem 0;
}
.plan button {
background-color: #0071e3;
color: #fff;
border: none;
padding: 0.8rem 1.8rem;
border-radius: 1.5rem;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
}
.plan button:hover {
background-color: #005bb5;
}
/* ===== FOOTER ===== */
footer {
text-align: center;
padding: 2rem;
font-size: 0.9rem;
color: #666;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.plans {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<header>
<div class="logo">SmartCalc</div>
</header>
<section class="hero">
<h1>Your Everyday Calculator, Reimagined.</h1>
<p>A simple, smart, and elegant calculator designed for your daily use — fast, accurate, and
beautiful.</p>
<button
onclick="[Link]('#calculator').scrollIntoView({behavior:'smooth'})">Try
Now</button>
</section>
<section id="calculator" class="calculator">
<div id="display" class="display">0</div>
<div class="buttons">
<button class="btn" onclick="clearDisplay()">C</button>
<button class="btn" onclick="deleteChar()">⌫</button>
<button class="btn op" onclick="appendOperator('%')">%</button>
<button class="btn op" onclick="appendOperator('/')">÷</button>
<button class="btn" onclick="appendNumber('7')">7</button>
<button class="btn" onclick="appendNumber('8')">8</button>
<button class="btn" onclick="appendNumber('9')">9</button>
<button class="btn op" onclick="appendOperator('*')">×</button>
<button class="btn" onclick="appendNumber('4')">4</button>
<button class="btn" onclick="appendNumber('5')">5</button>
<button class="btn" onclick="appendNumber('6')">6</button>
<button class="btn op" onclick="appendOperator('-')">−</button>
<button class="btn" onclick="appendNumber('1')">1</button>
<button class="btn" onclick="appendNumber('2')">2</button>
<button class="btn" onclick="appendNumber('3')">3</button>
<button class="btn op" onclick="appendOperator('+')">+</button>
<button class="btn" onclick="appendNumber('0')">0</button>
<button class="btn" onclick="appendNumber('.')">.</button>
<button class="btn op" style="grid-column: span 2;" onclick="calculateResult()">=</button>
</div>
</section>
<section id="pricing" class="pricing">
<h2>Get SmartCalc Premium</h2>
<p>Unlock advanced features and an ad-free experience with our simple plans.</p>
<div class="plans">
<div class="plan">
<h3>Monthly Plan</h3>
<p class="price">$2.99<span>/month</span></p>
<ul>
<li>✔ Ad-free experience</li>
<li>✔ Premium themes</li>
<li>✔ Priority updates</li>
</ul>
<button>Subscribe</button>
</div>
<div class="plan">
<h3>Yearly Plan</h3>
<p class="price">$19.99<span>/year</span></p>
<ul>
<li>✔ Everything in Monthly</li>
<li>✔ Save 45%</li>
<li>✔ VIP support</li>
</ul>
<button>Buy Now</button>
</div>
</div>
</section>
<footer>
© 2025 SmartCalc. All rights reserved.
</footer>
<script>
let display = [Link]('display');
let currentInput = '0';
function updateDisplay() {
[Link] = currentInput;
}
function appendNumber(num) {
if (currentInput === '0') currentInput = '';
currentInput += num;
updateDisplay();
}
function appendOperator(op) {
currentInput += ' ' + op + ' ';
updateDisplay();
}
function clearDisplay() {
currentInput = '0';
updateDisplay();
}
function deleteChar() {
currentInput = [Link]().slice(0, -1) || '0';
updateDisplay();
}
function calculateResult() {
try {
currentInput = eval([Link]('÷', '/').replace('×', '*')).toString();
} catch {
currentInput = 'Error';
}
updateDisplay();
}
</script>
</body>
</html>