-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (81 loc) · 4.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>SimplCalc - Simplifying Your Calculations</title>
<meta name="title" content="SimplCalc - Simplifying Your Calculations">
<meta name="description" content="SimplCalc is a simple yet powerful calculator designed to streamline your calculations. Try SimplCalc for easy and efficient math operations.">
<meta name="keywords" content="SimplCalc, calculator, simple calculator, math, arithmetic, calculations">
<meta name="author" content="Vijay Singh">
<!-- Open Graph Meta Tags / Facebook -->
<meta property="og:title" content="SimplCalc - Simplifying Your Calculations">
<meta property="og:description" content="SimplCalc is a simple yet powerful calculator designed to streamline your calculations. Try SimplCalc for easy and efficient math operations.">
<meta property="og:image" content="assets/images/banner.png">
<meta property="og:url" content="/">
<meta property="og:type" content="website">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SimplCalc - Simplifying Your Calculations">
<meta name="twitter:description" content="SimplCalc is a simple yet powerful calculator designed to streamline your calculations. Try SimplCalc for easy and efficient math operations.">
<meta name="twitter:image" content="assets/images/banner.png">
<!-- Favicon -->
<link rel="icon" href="assets/images/logo.png" type="image/x-icon">
<!-- Google Fonts: Archivo Black + Montserrat -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap">
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Preload Important resources -->
<link rel="preload" href="assets/css/style.css" as="style" />
</head>
<body>
<section class="main">
<h1 class="logo">Simpl<span>Calc</span></h1>
<div class="container">
<div class="calculator">
<div class="input-box"><input id="value" value="" placeholder="0"></div>
<div class="options-container">
<div class="row">
<button class="option clear-btn" value="C">C</button>
<button class="option primary-color" value="%">%</button>
<button class="option primary-color" value="/">/</button>
<button class="option primary-color" value="X"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="green" class="bi bi-x-square" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
</svg></button>
</div>
<div class="row">
<button class="option" value="7">7</button>
<button class="option" value="8">8</button>
<button class="option" value="9">9</button>
<button class="option primary-color" value="*">*</button>
</div>
<div class="row">
<button class="option" value="4">4</button>
<button class="option" value="5">5</button>
<button class="option" value="6">6</button>
<button class="option primary-color" value="-">-</button>
</div>
<div class="row">
<button class="option" value="1">1</button>
<button class="option" value="2">2</button>
<button class="option" value="3">3</button>
<button class="option primary-color" value="+">+</button>
</div>
<div class="row">
<button class="option" value="+/-" disabled>+/-</button>
<button class="option" value="0">0</button>
<button class="option" value=".">.</button>
<button class="option primary-bg" id="calculateBtn" value="=">=</button>
</div>
</div>
</div>
</div>
</section>
<!-- Scripts -->
<script src="assets/js/script.js"></script>
</body>
</html>