From fae5043c0ecd85a8b9715079058e5ca8565384e2 Mon Sep 17 00:00:00 2001 From: vimore03 <115154094+vimore03@users.noreply.github.com> Date: Mon, 23 Dec 2024 23:23:06 +0530 Subject: [PATCH] Add files via upload Cyclomatic complexity calculator --- index.html | 6136 +--------------------------------------------------- script.js | 481 ++-- style.css | 2325 +------------------- 3 files changed, 315 insertions(+), 8627 deletions(-) diff --git a/index.html b/index.html index 29e1ad9d9..dbfd783cd 100644 --- a/index.html +++ b/index.html @@ -1,6071 +1,65 @@ - - - - - - - - - - - - - - - - - - CalcDiverse - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
- -
- - -
- -
- - - -
-
-
- -

CalcDiverse

-

All calculators, spot in a single place!!

-

- CalcDiverse is a customized collection of calculators for various aspects of mathematics. Individuals with basic web development knowledge can create distinctive calculators and submit pull requests. -

- - - -
-
- - - -
- - - -
-
-

2D Distance Calculator

-

Calculates the distance between two points on a 2D plane.

- -
-
-
-
-

2D Shapes Calculator

-

Calculates the area and perimeter of different useful 2D shapes.

- -
-
-
-
-

3D Distance Calculator

-

Calculates the distance between 2 points in a 3D space.

- -
-
-
-
-

3D Shapes Calculator

-

Calculates the volume and surface area of different important and useful 3D shapes.

- -
-
-
-
-

3D Surface Plotter Calculator

-

Plots the 3D surfaces for the given functions.

- -
-
-
-
-

4 Band Resistance Calculator

-

Calculate the theoretical resistance of a 4-band resistor.

- -
-
-
-
-

5 Band Resistance Calculator

-

Calculate the theoretical resistance of a 5-band resistor.

- -
-
-
-
-

6 Band Resistance Calculator

-

Calculate the theoretical resistance of a 6-band resistor.

- -
-
-
-
-

AC/DC Power Calculator

-

Converts power values between AC and DC.

- -
-
-
-
-

ASCII Value Calculator

-

Calculates the ASCII value of any character.

- -
-
-
-
-

Abundant Number Calculator

-

Checks for a number to be abundant or not.

- -
-
-
-
-

Acoustic Impedance Calculator

-

Calculates the acoustic impedance by taking the density & speed of sound as input.

- -
-
-
-
-

Age Calculator

-

Calculates the person's age by taking in the date of birth as input.

- -
-
-
-
-

Air Fuel Ratio Calculator

-

Calculates the mass of air to fuel ratio (AFR) for any fuel.

- -
-
-
-
-

Air Quality Index Calculator

-

Calculates the level of the air quality using AQI index as input.

- -
-
-
-
-

Amortization Calculator

-

Calculates the monthly payments and generates an Amortization schedule for loans.

- -
-
-
-
-

Anagram Calculator

-

Calculator which checks whether the two words are Anagram or not.

- -
-
-
-
-

Angle Between Two Lines Calculator

-

Calculates an angle between the two lines.

- -
-
-
-
-

Annulus Calculator

-

Calculates the area of the circle with inner and outer radius.

- -
-
-
-
-

Antilog Calculator

-

Calculates the antilog of any given number taken over any base.

- -
-
-
-
-

Arithmetic Geometric Progression Calculator

-

Calculates nth Term and sum of n Terms of the Arithmetic Geometric Sequence.

- -
-
-
-
-

Arithmetic Progression Calculator

-

Calculates nth Term, arithmetic mean and sum of n Terms present in an Arithmetic Sequence.

- -
-
-
-
-

Armstrong Number Calculator

-

Computes all the Armstrong Numbers for the specified Number of digits.

- -
-
-
-
-

Arrhenius Equation Calculator

-

Calculates important parameters of chemical kinetics.

- -
-
-
-
-

Aspect Ratio Calculator

-

Calculates the aspect ratio of the specified height and width.

- -
-
-
-
-

Astrological Age Calculator

-

Calculates the age on different planets as selected by the user.

- -
-
-
-
-

Atomic Composition Calculator

-

Calculates the number of protons, neutrons, and electrons in an atom.

- -
-
-
-
-

Automorphic Number Calculator

-

Checks if a number is an automorphic number or not.

- -
-
-
-
-

Averages Calculator

-

Calculates the arithmetic, geometric, and harmonic means.

- -
-
-
-
-

BMI Calculator

-

Calculates the Body Mass Index of a person using Height & Weight.

- -
-
-
-
-

BMR Calculator

-

Calculates the Basal Metabolic Rate of a person using height, weight & age.

- -
-
-
-
-

BSA Calculator

-

Calculates the Body Surface Area with personalized health tips and data persistence.

- -
-
-
-
-

Banker's Algorithm Calculator

-

Calculate the safety sequence for resource allocation.

- -
-
-
-
-

Base Change Calculator

-

Converts a number between different bases.

- -
-
-
-
-

Basic Calculator

-

Basic old school calculator for simple calculations

- -
-
-
-
-

Basic Physics Calculator

-

Easily calculates the basic physics quantities.

- -
-
-
-
-

Battery Life Calculator

-

Estimates battery life based on capacity and average load current.

- -
-
-
-
-

Bayes Theorem Calculator

-

Calculates the probability of an event A given that event B has occurred.

- -
-
-
-
-

Beta Function Calculator

-

Calculate the ß value of two numbers in a single click!

- -
-
-
-
-

Bill Split Calculator

-

Effortlessly split bills with our calculator. Simplify expense sharing now!

- -
-
-
-
-

Binary Calculator

-

Calculates results of different binary operations based on inputs.

- -
-
-
-
-

Binomial Distribution Calculator

-

Calculates the value of the probability mass function and probability distribution function.

- -
-
-
-
-

Binomial Expansion Calculator

-

Calculates and display the binomial expansion of given coefficients a, b, and power n.

- -
-
-
-
-

Bitwise Calculator

-

Calculates results of different bitwise operations based on inputs.

- -
-
-
-
-

Black Hole Number Calculator

-

Given any number, it reaches to Four.

- -
-
-
-
-

Blood Alcohol Content Calculator

-

Calculates the BAC based on the entered input values.

- -
-
-
-
-

Blood Pressure Calculator

-

Calculates the blood pressure based on the systolic and diastolic values.

- -
-
-
-
-

Blood Sugar Calculator

-

Calculates the range of blood sugar levels in the body based on age and medical test results.

- -
-
-
-
-

Body Fat Percentage Calculator

-

Calculates the body fat percentage of a person using neck, waist, weight & height.

- -
-
-
-
-

Body Shape Calculator

-

Calculates body shape using waist, bust, and hip measurements, and also suggests styles.

- -
-
-
-
-

Book Reading Time Calculator

-

Calculates the time required to finish reading a book.

- -
-
-
-
-

Budget Tracker Calculator

-

Calculates the budget based on the income and expenditure.

- -
-
-
-
-

Bouncy Number Calculator

-

Check the number is bouncy or not and finds bouncy numbers in a range.

- -
-
-
-
-

Boyle Temperature Calculator

-

Calculates the Boyle temperature using constants a and b.

- -
-
-
-
-

Buoyancy Calculator

-

Calculates the buoyant force on an object submerged in a fluid.

- -
-
-
-
-

Buzz Number Calculator

-

Checks for a number to be a buzz number or not.

- -
-
-
-
-

CAGR Calculator

-

Calculates the Compound Annual Growth Rate of an investment over a specified period.

- -
-
-
-
-

CGPA Percentage Calculator

-

Converts CGPA to percentage and vice-versa.

- -
-
-
-
-

CGS FPS MKS Calculator

-

Calculator that converts inputs between CGS, FPS, and MKS unit systems for various physical quantities.

- -
-
-
-
-

CO2 Emissions Calculator

-

Calculates the carbon footprint from various modes of transport.

- -
-
-
-
-

CPU Scheduling Calculator

-

Calculates the wait time and turnaround time for various CPU scheduling algorithms.

- -
-
-
-
-

CSS Unit Calculator

-

Converts various css units.

- -
-
-
-
-

Caesar Cipher Encryption Calculator

-

Encrypts the given plaintext into cipher text using a technique called Caesar Cipher.

- -
-
-
-
-

Calorie Burnt Calculator

-

Calculates the amount of calories burnt from particular exercise.

- -
-
-
-
-

Calorie Consumed Calculator

-

Calculates daily calorie consumed based on given inputs.

- -
-
-
-
-

Calorie Intake Calculator

-

Calculates daily calorie intake based on given inputs.

- -
-
-
-
-

Capacitance Calculator

-

Calculates the capacitance in a parallel plate capacitor.

- -
-
-
-
-

Capacitor Conversion Calculator

-

Converts capacitor values between different units.

- -
-
-
-
-

Carbon Footprint Calculator

-

Calculates an individual's carbon footprint based on some input parameters.

- -
-
-
-
-

Cat Quality Of Life Calculator

-

Calculates your beloved cat's life quality according to standard parameters.

- -
-
-
-
-

Catalan Number Calculator

-

Calculates the nth Catalan Number with the value of n entered by the user.

- -
-
-
-
-

Catenary Curve Calculator

-

Calculate and visualize the catenary curve based on user inputs.

- -
-
-
-
-

Centripetal Force Calculator

-

Calculates Centripetal force and acceleration.

- -
-
-
-
-

Centroid Of A Triangle Calculator

-

Calculates the centroid of a triangle by taking the coordinates.

- -
-
-
-
-

Chi-Square Calculator

-

Calculates the Chi-Square value of the data.

- -
-
-
-
-

Chinese Zodiac Calculator

-

Calculates the Chinese zodiac sign of the user by taking the year of birth as input.

- -
-
-
-
-

Circular Motion Calculator

-

Calculates Centripetal Acceleration, Angular Frequency, Period and Frequency.

- -
-
-
-
-

Circular Prime Calculator

-

Checks if a number is circular prime and finds circular prime numbers in a range.

- -
-
-
-
-

Click Through Rate Calculator

-

Calculates the CTR of an ad or link in driving users to click on it.

- -
-
-
-
-

Clock Hands Angle Calculator

-

Calculates the angle between the hour and minute hands for a specified time.

- -
-
-
-
-

Clothing Size Calculator

-

Inter-converts clothing sizes from one country to another, the international size, and the exact measurements for each size.

- -
-
-
-
-

Color Code Calculator

-

Interconverts color codes among RGB, RGBA, HEX (Hexadecimal), HSL, HSV and CMYK

- -
-
-
-
-

Complement Calculator

-

Calculates the nth complement of a given number in a specified base.

- -
-
-
-
-

Complex Number Calculator

-

Performs mathematical operations on complex numbers.

- -
-
-
-
-

Complex Seismographic Impact Calculator

-

Estimates the impact of an earthquake based on some parameters.

- -
-
-
-
-

Compound Interest Calculator

-

Takes Principal amount, time in years, interest rate and Gives compound interest

- -
-
-
-
-

Conductivity And Resistivity Calculator

-

Calculates the Conductivity & Resistivity.

- -
-
-
-
-

Confusion Matrix Calculator

-

Calculates Accuracy, Precision, Recall, and F1 Score for classification models in machine learning.

- -
-
-
-
-

Cosine Formula Calculator

-

Calculates the angle of the triangle using cosine formula.

- -
-
-
-
-

Cost Of Living Calculator

-

Calculates what your current salary would look like in another city.

- -
-
-
-
-

Credit Card Payoff Calculator

-

Calculates the time in which you can payoff your Credits.

- -
-
-
-
-

Cricket Calculator

-

Calculates various cricket related terms.

- -
-
-
-
-

Critical Point Calculator

-

Calculates the critical point of ideal gases based on a and b.

- -
-
-
-
-

Crop Yield Calculator

-

Estimates the amount of crop that will be harvested per unit area.

- -
-
-
-
-

Cross Product Calculator

-

Calculates the cross-product of two 3D vectors and finds the angle between them.

- -
-
-
-
-

Cryptocurrency Calculator

-

Calculates the converted price of various cryptocurrencies to different fiat currencies.

- -
-
-
-
-

Cuban Prime Calculator

-

Checks if a number is cuban prime or not and finds cuban prime numbers in a range.

- -
-
-
-
-

Cube Root Calculator

-

Calculates cube root of any number.

- -
-
-
-
-

Cubic Equation Calculator

-

solves cubic equations, providing real or complex solutions

- -
-
-
-
-

Currency Calculator

-

Converts the value of one Currency unit into another Currency unit.

- -
-
-
-
-

Curve Fitting Calculator

-

Plots the curve fitting for linear, quadratic, cubic, and exponential curves.

- -
-
-
-
-

Cut Off Calculator

-

Calculates the Engineering / Medical cutoff for students.

- -
-
-
-
-

DTI Ratio Calculator

-

Calculates your debt-to-income ratio, to help in managing your financial health.

- -
-
-
-
-

Data Size Calculator

-

Converts input data size to other data sizes instantly.

- -
-
-
-
-

Date Time Calculator

-

Calculates Date & Time of the specific period.

- -
-
-
-
-

Day From The Date Calculator

-

Calculates the day for the specified date.

- -
-
-
-
-

Days Until Deadline Calculator

-

Calculates the number of days remaining until a selected date.

- -
-
-
-
-

Debt Payoff Calculator

-

Effortlessly plan and manage your debt repayment with our easy-to-use Debt Payoff Calculator.

- -
-
-
-
-

Decimal Roman Calculator

-

Converts the decimal number to roman number and vice-versa.

- -
-
-
-
-

Decimal String Calculator

-

Converts strings to decimal numbers and vice-versa.

- -
-
-
-
-

Definite Integral Calculator

-

Evaluates integral of mathematical functions with definite limits.

- -
-
-
-
-

Degree Radian Calculator

-

Converts the Degree into Radian and vice-versa.

- -
-
-
-
-

Depth Of Field Calculator

-

Calculator that helps photographers determine the depth of field based on some factors.

- -
-
-
-
-

Determinant Calculator

-

Calculates the determinant of the matrix with the given size.

- -
-
-
-
-

Differential Calculator

-

Evaluates derivatives and mathematical functions.

- -
-
-
-
-

Digital Detox Calculator

-

Calculates the amount of time we spend on digital devices and suggests a plan for a balanced digital detox.

- -
-
-
-
-

Disarium Number Calculator

-

Checks the number is disarium or not and finds disarium numbers in a range.

- -
-
-
-
-

Discount Calculator

-

Unlock Savings with Precision: Your Ultimate Discount Calculator.

- -
-
-
-
-

Discriminant Calculator

-

Calculates the discriminant of a quadratic equation.

- -
-
-
-
-

Dividend Yield Calculator

-

Calculates the dividend yield percentage based on the current market price.

- -
-
-
-
-

Dora Calculator

-

Calculates the distance whether Dora can view the object.

- -
-
-
-
-

Download Time Calculator

-

Calculates the required time for downloading as per different system configurations.

- -
-
-
-
-

Dream Journal Calculator

-

Analyzes dream entries to visualize key themes, emotions, and sentiments.

- -
-
-
-
-

Dudeney Number Calculator

-

Checks if an entered number is Dudeney or not.

- -
-
-
-
-

EBITDA Calculator

-

Calculates EBITDA, and visualizes cost breakdown with a responsive doughnut chart.

- -
-
-
-
-

EMI Calculator

-

Calculates The EMI based on loan amount, interest rate and tenure.

- -
-
-
-
-

EPF Calculator

-

Estimates Employee Provident Fund savings from salary, age, contribution rate, salary increase, and interest rate.

- -
-
-
-
-

Earthquake Impact Calculator

-

Estimates the potential impact of an earthquake.

- -
-
-
-
-

Echo Time Calculator

-

Calculates the time taken for a sound wave to travel to a surface and return as an echo.

- -
-
-
-
-

Eigenvalues And Eigenvectors Calculator

-

Calculates the eigenvalues and eigenvectors of a square matrix for various applications.

- -
-
-
-
-

Electric Power Calculator

-

Calculates electric power based on user-supplied voltage in Volts and current in Ampere.

- -
-
-
-
-

Electric Vehicle Savings Calculator

-

Calculates savings from using an electric vehicle VS a gasoline vehicle.

- -
-
-
-
-

Electricity Bill Calculator

-

Calculates electricity costs based on user-supplied units, time, and cost parameters.

- -
-
-
-
-

Electronegativity Calculator

-

Calculates the Electronegativity difference between elements.

- -
-
-
-
-

Electrostatic Force Calculator

-

Calculates the Electrostatic Force between two point charges.

- -
-
-
-
-

Ellipse And Hyperbola Calculator

-

Calculates Area and Perimeter for Ellipse and Hyperbola.

- -
-
-
-
-

Elliptic Curve Calculator

-

Calculates points on the curve, addition, negation, and scalar multiplication of points.

- -
-
-
-
-

Emirp Number Calculator

-

Calculates if a number is an emirp number and finds all emirp numbers within a given range.

- -
-
-
-
-

Endothermic Reaction Calculator

-

Computes the energy absorbed during a reaction based on various parameters.

- -
-
-
-
-

Energy Consumption Calculator

-

Calculates the amount of electricity used by a household or business over a specified time.

- -
-
-
-
-

Entropy Calculator

-

Calculates the entropy from probabilities.

- -
-
-
-
-

Environmental Calculator

-

Estimates the annual energy and water consumption.

- -
-
-
-
-

Equivalent Resistance Calculator

-

Calculates the Equivalent Resistance of the Series and Parallel Configuration.

- -
-
-
-
-

Euclidean Algorithm Calculator

-

Calculates the Greatest Common Divisor (GCD) and the Least Common Multiple (LCM).

- -
-
-
-
-

Event Budget Planner Calculator

-

Calculates the plan, tracks, and visualizes the event expenses.

- -
-
-
-
-

Expenditure And Savings Calculator

-

Calculates the Savings from your income and expenditure.

- -
-
-
-
-

Exponent Calculator

-

Takes two numbers X and Y and then calculate XY.

- -
-
-
-
-

Exponential Decay Calculator

-

Computes the remaining amount of a substance after a given period using the exponential decay formula.

- -
-
-
-
-

Eye Power Calculator

-

Calculates the Diopter value and Focal length.

- -
-
-
-
-

FD Calculator

-

Calculates the maturity amount and interest on fixed deposits.

- -
-
-
-
-

Factorial Calculator

-

Calculates the factorial of any large number instantly.

- -
-
-
-
-

Falling Object Calculator

-

Calculates the time and speed of a free-falling object under gravity.

- -
-
-
-
-

Fascinating Number Calculator

-

Checks if a given number is fascinating or not.

- -
-
-
-
-

Fibonacci Calculator

-

Calculates the Nth number from Fibonacci Sequence.

- -
-
-
-
-

Finance Calculator

-

Calculates the future value of investments and monthly loan payments.

- -
-
-
-
-

Force Calculator

-

Calculates the force by taking mass and acceleration.

- -
-
-
-
-

Fractal Generator Calculator

-

Displays images based on complex mathematical calculations of fractal objects.

- -
-
-
-
-

Fraction Calculator

-

Performs the basic arithmetic operations of mathematics on fractions.

- -
-
-
-
-

Frames Timecode Calculator

-

Converts frames to timecode and vice versa in a recorded video.

- -
-
-
-
-

Free Fall Calculator

-

Calculates the time and final velocity of object in free fall.

- -
-
-
-
-

Freelance Rate Calculator

-

Calculator to help freelancers determine optimal hourly or project rates based on various factors.

- -
-
-
-
-

Frequency Calculator

-

Calculator that helps to calculate the frequency.

- -
-
-
-
-

Friction Calculator

-

Calculates the friction force between an object and the ground.

- -
-
-
-
-

Fuel Cost Calculator

-

Calculates the cost of fuel based on fuel efficiency and distance travelled.

- -
-
-
-
-

Fuel Efficiency Calculator

-

Calculates the efficiency of a vehicle.

- -
-
-
-
-

GCD Calculator

-

Calculates Greatest Common Divisor of Two values or multiple values.

- -
-
-
-
-

GDP Calculator

-

Calculates the gross domestic product using the expenditure approach.

- -
-
-
-
-

GPA Calculator

-

Calculates SGPA and CGPA on the basis of credits and grades.

- -
-
-
-
-

GST Calculator

-

Calculates the Goods and Service tax of any product in rupees and dollars.

- -
-
-
-
-

Gamified Calculator

-

Calculator that turns math problems into a game.

- -
-
-
-
-

Garden Planning Calculator

-

Calculator that helps you plan your garden.

- -
-
-
-
-

Gauss-Jordan Elimination Calculator

-

Calculator that finds solution to system of linear equations using Gauss-Jordan Elimination method.

- -
-
-
-
-

Gauss Law Calculator

-

Calculates the electric flux through a closed surface due to an enclosed electric charge.

- -
-
-
-
-

General Root Calculator

-

Calculates the nth root of a given number upto n precision.

- -
-
-
-
-

Geodesic Distance Calculator

-

Calculate the geodesic distance between two points on an ellipsoid.

- -
-
-
-
-

Geometric Progression Calculator

-

Calculates nth Term, geometric mean and sum of n Terms present in an Geometric Sequence.

- -
-
-
-
-

Grade Calculator

-

Calculates the grade based on marks entered.

- -
-
-
-
-

Graphing Calculator

-

Calculator which includes a graphical display to visualize functions.

- -
-
-
-
-

Gratitude Journal Calculator

-

Calculates the daily gratitude points in a concise format.

- -
-
-
-
-

Gravitational Force Calculator

-

Calculates the Gravitational Force between two masses.

- -
-
-
-
-

Hailstone Series Calculator

-

Calculates a Hailstone series by repeatedly dividing by 2 if even or multiplying by 3 and adding 1 if odd.

- -
-
-
-
-

Happy Number Calculator

-

Check if a number is Happy or not and finds happy number in a range.

- -
-
-
-
-

Harmonic Progression Calculator

-

Calculates the nth term, sum of first n terms and harmonic mean of Harmonic Progression series.

- -
-
-
-
-

Hashing Message Calculator

-

Calculates the hash for your message from one of the widely used hashing algorithms.

- -
-
-
-
-

Health Risk Assessment Calculator

-

Calculates the health risk level as per predefined criteria.

- -
-
-
-
-

Heart Rate Calculator

-

Calculates the heart rate monitors.

- -
-
-
-
-

Heat Capacity Calculator

-

calculates the heat capacity of substances.

- -
-
-
-
-

Heat Index Calculator

-

Calculates the heat index based on the temperature and humidity values.

- -
-
-
-
-

Heat Transfer Calculator

-

Calculates the heat transferred from one region to another based on several input parameters.

- -
-
-
-
-

Height Calculator

-

Converts the height between various units.

- -
-
-
-
-

Hexadecimal Calculator

-

Performs arithmetic operations on hexadecimal numbers.

- -
-
-
-
-

Home Renovation Budget Calculator

-

Calculates total budget for home renovation.

- -
-
-
-
-

Home Security Cost Calculator

-

Calculates the cost of your home security.

- -
-
-
-
-

Hookes Law Calculator

-

Calculates the Spring Force, displacement or Force constant by inputting any two fields.

- -
-
-
-
-

Horsepower Calculator

-

Calculates the horsepower using force and velocity.

- -
-
-
-
-

IQR Calculator

-

Calculates the spread of the middle 50% of a dataset using the interquartile range.

- -
-
-
-
-

IT Income Tax Calculator

-

Computes the income tax based on your gross salary, deductions, and applicable tax rebate.

- -
-
-
-
-

Ideal Gas Law Calculator

-

Calculates pressure, volume, temperature, and moles based on other inputs.

- -
-
-
-
-

Image Resolution Calculator

-

Calculates the resolution in megapixels based on user input dimensions.

- -
-
-
-
-

Income Tax Calculator

-

Calculates tax liability based on user input annual income.

- -
-
-
-
-

Inductance Calculator

-

Calculates the inductance of a coil.

- -
-
-
-
-

Infix Prefix Postfix Calculator

-

Converts between infix, prefix and postfix expressions.

- -
-
-
-
-

Inflation Calculator

-

Provides the graphical representation and expected inflation of money.

- -
-
-
-
-

Intelligence Calculator

-

Shows the intelligence using his/her IQ.

- -
-
-
-
-

Interplanetary Weight Calculator

-

Calculates the weight of an object on different planets.

- -
-
-
-
-

Inverse Function Calculator

-

Calculates the inverse of a provided function.

- -
-
-
-
-

Investment Risk Tolerance Calculator

-

Calculates the risk in Investment on the basis of some input parameters.

- -
-
-
-
-

Isogram Calculator

-

Checks whether a string is an isogram or not.

- -
-
-
-
-

Isomorphic String Calculator

-

Checks whether the two entered strings are isomorphic or not.

- -
-
-
-
-

Kaprekar Number Calculator

-

Checks whether the number is Kaprekar Number or not.

- -
-
-
-
-

Kinematics Calculator

-

Computes and visualizes 1D, 2D, and 3D motion with velocity-time graphs.

- -
-
-
-
-

Kinetic And Potential Energy Calculator

-

Calculates the kinetic and potential energy.

- -
-
-
-
-

LCM Calculator

-

Calculates LCM of multiple numbers.

- -
-
-
-
-

Laser Linewidth And Bandwidth Calculator

-

Calculates the linewidth and bandwidth of a laser.

- -
-
-
-
-

Lattice Energy Calculator

-

Computes the lattice energy of ionic compounds based on ion charges and their separation distance.

- -
-
-
-
-

Leap Year Calculator

-

Checks whether the entered year is a leap year or not.

- -
-
-
-
-

Lease Calculator

-

Calculates the lease payments that needs to be paid.

- -
-
-
-
-

Least Squares Regression Calculator

-

Fits a linear model to data points, providing regression statistics and visual analysis.

- -
-
-
-
-

Length Calculator

-

Calculates the length conversion between two specified units.

- -
-
-
-
-

Life Insurance Needs Calculator

-

Calculates the amount we need in Life Insurance.

- -
-
-
-
-

Linear Equation Calculator

-

Calculates values of variables from linear equation in two variables.

- -
-
-
-
-

Linear Regression Calculator

-

Calculates display the slope, intercept, and a plot of the data points with the regression line.

- -
-
-
-
-

Loan Amount Calculator

-

Calculator that calculates the amount of money to pay as compound interest.

- -
-
-
-
-

Loan Comparison Calculator

-

Calculates and compares loan options to help users find the best one.

- -
-
-
-
-

Loan Repayment Date Calculator

-

Calculates the due date of the ongoing loan.

- -
-
-
-
-

Logarithm Calculator

-

Calculates the log of the given number to any base.

- -
-
-
-
-

Logical Micro Operations Calculator

-

Solves logical micro-operations of computer architecture.

- -
-
-
-
-

Lorentz Force Calculator

-

Calculates the Force on a moving charge in a magnetic field.

- -
-
-
-
-

Lottery Odds Calculator

-

Calculates the chances of winning the lottery.

- -
-
-
-
-

Love Calculator

-

Calculates a percentage score of love compatibility based on names or birthdates (mostly for fun).

- -
-
-
-
-

Luminous Flux Calculator

-

Calculates the luminous flux in lumens based on the input luminous intensity and angle.

- -
-
-
-
-

Macro Calculator

-

Helps users determine their daily macronutrient needs based on various parameters.

- -
-
-
-
-

Macro Nutrient Calculator

-

Calculates an individual's daily macronutrient needs based on personal fitness goals and activity levels.

- -
-
-
-
-

Magic Number Calculator

-

Calculates if a number is a magic number and finds all magic numbers within a given range.

- -
-
-
-
-

Marks Percentage Calculator

-

Calculate the percentage of total marks from all subjects.

- -
-
-
-
-

Mass Calculator

-

Calculates the Mass conversion between two specified units.

- -
-
-
-
-

Mass Spring Calculator

-

Calculates the various properties of a mass-spring system.

- -
-
-
-
-

Matrix Calculator

-

Your key to matrix operations!

- -
-
-
-
-

Meal Calorie Calculator

-

Calculates the total calorie count for the entire meal.

- -
-
-
-
-

Mersenne Prime Calculator

-

Checks if a number is a Mersenne prime and finds all Mersenne prime numbers within a given range.

- -
-
-
-
-

Midpoint Calculator

-

Calculates the midpoint of the x-axis and y-axis.

- -
-
-
-
-

Military Time Calculator

-

Converts between standard 12-hour time format and military 24-hour time format.

- -
-
-
-
-

Mirror Equation Calculator

-

Calculates the focal length of the convex and concave mirror.

- -
-
-
-
-

Mobility Calculator

-

Calculates the mobility of an electric field.

- -
-
-
-
-

Molality Calculator

-

Calculates the mass of a compound needed to achieve a desired molality in a solution.

- -
-
-
-
-

Molarity Calculator

-

Calculates the mass of a compound needed to achieve a desired molarity in a solution.

- -
-
-
-
-

Molecular Weight Calculator

-

Computes the total atomic weights of elements in a given chemical formula.

- -
-
-
-
-

Momentum Calculator

-

Calculates the momentum of the body using its mass and velocity.

- -
-
-
-
-

Momentum With Time Calculator

-

Calculates the momentum of the body using its force and time.

- -
-
-
-
-

Money Counter Calculator

-

Calculates total money in Rs and provides currency conversion.

- -
-
-
-
-

Mortgage Refinance Calculator

-

It allows users to compare old and new loan terms by inputting relevant information.

- -
-
-
-
-

Multiplication Table Calculator

-

Calculates the multiplication table of any number.

- - -
-
-
-
-

NPV Calculator

-

Calculates the Net Present Value based on initial investment, the discount rate, and the yearly cash flows.

- -
-
-
-
-

Narcissistic Number Calculator

-

Checks if a number is a narcissistic number or not.

- -
-
-
-
-

Neon Number Calculator

-

Checks if a number is a neon number or not and finds neon numbers in a range.

- -
-
-
-
-

Net Promoter Score Calculator

-

Calculates the NPS based on user-provided ratings.

- -
-
-
-
-

Net Salary Calculator

-

Calculates the actual take-home pay from your Cost to Company (CTC).

- -
-
-
-
-

Net Worth Calculator

-

Calculates the net worth by taking our assets and liabilities.

- -
-
-
-
-

Next Birthday Calculator

-

Calculates the days remaining until the next birthday.

- -
-
-
-
-

Niven Number Calculator

-

Checks whether the given number is niven or not.

- -
-
-
-
-

Normality Calculator

-

Calculates the mass of a compound needed to achieve a desired normality in a solution.

- -
-
-
-
-

Number Of Days Calculator

-

Calculates the number of days between two specified dates.

- -
-
-
-
-

Number System Calculator

-

Converts binary to decimal, octal, hexadecimal and vice versa.

- -
-
-
-
-

Numerology Calculator

-

Helps users discover core numerology numbers based on the birth date and full name.

- -
-
-
-
-

Nutrition Calculator

-

Calculates the total nutrition values based on user inputs.

- -
-
-
-
-

Nutritional Needs Calculator

-

Calculates the nutrition needs information based on user inputs.

- -
-
-
-
-

OWASP Risk Assessment Calculator

-

Calculator to assess the risk of web vulnerabilities based on OWASP Risk Assessment.

- -
-
-
-
-

Octal Calculator

-

Performs the arithmetic operations on octal numbers.

- -
-
-
-
-

Ohms Law Calculator

-

Calculates voltage, current, resistance, and power in watts for an electrical circuit.

- -
-
-
-
-

Orthocentre Of A Triangle Calculator

-

Calculates the orthocenter from the coordinates of a triangle's vertices.

- -
-
-
-
-

PH Calculator

-

Calculates the pH of either an acid or base solution when given a certain set of parameters.

- -
-
-
-
-

PIN Generator Calculator

-

Generates the random numeric sequences for customizable PIN generation.

- -
-
-
-
-

PPM Calculator

-

Determines the concentration of substances in various solutions measured in parts per million.

- -
-
-
-
-

Pace Calculator

-

Calculates the strength of different activities for athletes.

- -
-
-
-
-

Paint Calculator

-

Calculates how much paint is required to paint given area.

- -
-
-
-
-

Palindrome Calculator

-

Checks if an entered number or string is Palindrome or not.

- -
-
-
-
-

Paper Weight Calculator

-

Determines the weight of paper based on its dimensions, type, and quantity.

- -
-
-
-
-

Partial Derivative Calculator

-

Calculator that solves partial differential equations.

- -
-
-
-
-

Password Strength Calculator

-

Calculates the strength of the Password.

- -
-
-
-
-

Pendulum Calculator

-

Calculates the properties of the pendulum.

- -
-
-
-
-

Percentage Calculator

-

Calculates the value percentage of any given number.

- -
-
-
-
-

Percentage Fraction Calculator

-

Converts given Percentage to Fraction and vice-versa with detailed solution.

- -
-
-
-
-

Perfect Number Calculator

-

Check for a number to be perfect or not.

- -
-
-
-
-

Periodic Table Calculator

-

Provides detailed information about elements in the periodic table.

- -
-
-
-
-

Permutation Combination Calculator

-

Calculates nPr and nCr after taking inputs as n and r.

- -
-
-
-
-

Pet Age Calculator

-

Calculates a pet's age in human years.

- -
-
-
-
-

Pet Care Cost Calculator

-

Calculates the lifetime cost of owning a pet.

- -
-
-
-
-

Pipe Flow Calculator

-

Calculates the flow rate through the pipe.

- -
-
-
-
-

Planetary Motion Calculator

-

Calculates various parameters of planetary motion using Kepler's laws.

- -
-
-
-
-

Plant Care Calculator

-

Calculates watering, fertilizing, and repotting schedule of plants based on some parameters.

- -
-
-
-
-

Plant Growth Calculator

-

Calculates the average growth rate for your plants based on various parameters.

- -
-
-
-
-

Plant Watering Calculator

-

Calculates the amount of water needed for your plants based on the plant type, size, soil type, and sunlight exposure.

- -
-
-
-
-

Polynomial Roots Calculator

-

Calculates the real and imaginary roots of a given polynomial up to degree 2-4.

- -
-
-
-
-

Population Density Calculator

-

Calculates the density of the population in a specific area.

- -
-
-
-
-

Population Prediction Calculator

-

Predicts the future population by taking various inputs from the user.

- -
-
-
-
-

Power Calculator

-

Calculates power between different units.

- -
-
-
-
-

Prayer Time Calculator

-

Calculates the prayer time based on the location.

- -
-
-
-
-

Pregnancy Due Date Calculator

-

Designed to estimate the due date for a pregnant woman based on the first day of her last menstrual period.

- -
-
-
-
-

Pressure Calculator

-

Calculates the Pressure conversion between two specified units.

- -
-
-
-
-

Prime Factorization Calculator

-

Calculates the prime factors of the given number.

- -
-
-
-
-

Prime Number Calculator

-

Checks if a given number is prime or not.

- -
-
-
-
-

Probability Calculator

-

Calculates the Probability of different events.

- -
-
-
-
-

Profit Loss Calculator

-

Calculates the profit or loss in a click.

- -
-
-
-
-

Projectile Motion Calculator

-

Calculates Max Height, Range, Time Of Flight of Projectile.

- -
-
-
-
-

Pronic Number Calculator

-

Checks if a number is pronic and finds pronic numbers in a range.

- -
-
-
-
-

Proportionality Calculator

-

Input three values to compute the fourth, showcasing proportionality..

- -
-
-
-
-

Pythagorean Theorem Calculator

-

Calculates the third side of a right-angled triangle from the other two sides

- -
-
-
-
-

Pythagorean Triples Calculator

-

checks whether the user inputs side lengths form a Pythagorean triplet or not.

- -
-
-
-
-

QR Code Generator Calculator

-

Generates the QR Code according to the given input.

- -
-
-
-
-

Quadratic Equation Calculator

-

Calculates the roots of a quadratic equation.

- -
-
-
-
-

Quotient And Remainder Calculator

-

Calculates the Quotient and Remainder.

- -
-
-
-
-

RD Calculator

-

Computes the maturity and interest for recurring deposits at a given annual rate.

- -
-
-
-
-

ROI Calculator

-

Calculates the return on investment for your invested amount.

- -
-
-
-
-

RPN Calculator

-

Reverse Polish Notation calculator which represents expressions by placeing the operator after the operands.

- -
-
-
-
-

Rainwater Harvesting Calculator

-

Calculates the annual rainwater that can be harvested by the storage tank in liters.

- -
-
-
-
-

Random Letter Calculator

-

Generates randomized English alphabets used in brain teaser activities.

- -
-
-
-
-

Random Number Calculator

-

Generates a random number between 1 and 100.

- -
-
-
-
-

Random Word Calculator

-

Generates random words based on a specified starting letter and the desired number of words.

- -
-
-
-
-

Ratio Calculator

-

Which takes two numbers X and Y and then calculate X / Y.

- -
-
-
-
-

Real Estate Calculator

-

This tool allows users to input property details and obtain essential information for financial planning.

- -
-
-
-
-

Recipe Cost Calculator

-

This tool enables users to input ingredients and quantities to calculate the total cost of a recipe.

- -
-
-
-
-

Recoil Energy Calculator

-

Calculates the recoil energy based on some inputs.

- -
-
-
-
-

Rectangular Polar Calculator

-

Converts Rectangular form into Polar form and vice versa.

- -
-
-
-
-

Relative Humidity Calculator

-

Calculates the humidity value using entered dewpoint and air temperature.

- -
-
-
-
-

Rent Calculator

-

Calculates the overall budget for a rental payment.

- -
-
-
-
-

Restaurant Planning Calculator

-

Calculates the overall budget for starting and running a restaurant.

- -
-
-
-
-

Retirement Calculator

-

Predicts the user retirement savings growth.

- -
-
-
-
-

Roman Numeral Calculator

-

Converts Roman Numeral form into Decimal form.

- -
-
-
-
-

Root Mean Square Calculator

-

Calculates the RMS value of a given set of numbers.

- -
-
-
-
-

Roots Equation Calculator

-

Calculates the polynomial equation for the given roots.

- -
-
-
-
-

Running Pace Calculator

-

Calculate the running Pace/Time/Distance in your desired units.

- -
-
-
-
-

Salary Estimation Calculator

-

Estimates the expected salary based on some parameters.

- -
-
-
-
-

Salary To Hourly Calculator

-

Calculates salary across across various timeframes simultaneously.

- -
-
-
-
-

Sales Tax Calculator

-

Calculates the gross price based on the net price and the tax rate.

- -
-
-
-
-

Savings Calculator

-

Calculates the total amount we can save over a specified period by making monthly deposits at a fixed interest rate.

- -
-
-
-
-

Savings Goal Calculator

-

Determines how much you need to save each month to reach your savings goal.

- -
-
-
-
-

Sentence Counter Calculator

-

Counts the number of sentences in a given text.

- -
-
-
-
-

Set Operations Calculator

-

Calculator that performs the basic set operations between two sets.

- -
-
-
-
-

Shoe Size Calculator

-

Calculator that helps to find the perfect shoe size.

- -
-
-
-
-

Short URL Calculator

-

Calculates the Short URL from Long URL.

- -
-
-
-
-

Shortest Path Calculator

-

Calculates the shortest path between the two nodes.

- -
-
-
-
-

Simple Interest Calculator

-

Calculates the simple interest.

- -
-
-
-
-

Sine Formula Calculator

-

Calculates the angle of the triangle using sine formula.

- -
-
-
-
-

Sleep Calculator

-

Calculates the amount of sleep required based on age and activity level.

- -
-
-
-
-

Sleep Cycle Calculator

-

Calculates optimal bedtimes based on desired wake-up time and the scientific 90-min sleep cycles.

- -
-
-
-
-

Slope Calculator

-

Calculates the slope of the line.

- -
-
-
-
-

Smith Number Calculator

-

Calculator that determines whether a given number is a Smith number or not.

- -
-
-
-
-

Solar Power Saving Calculator

-

Calculates the amount one can save on electricity by installing solar panels.

- -
-
-
-
-

Sound Level Calculator

-

Calculator to combine two sound levels in decibels (dB).

- -
-
-
-
-

Special Number Calculator

-

Checks if a number is a special number or not.

- -
-
-
-
-

Special Number-2 Calculator

-

Checks whether a number is a special number or not.

- -
-
-
-
-

Speed Calculator

-

This tool allows users to convert speeds between different units.

- -
-
-
-
-

Spy Number Calculator

-

Checks if a number is a spy number or not and finds spy numbers up to 5 digits.

- -
-
-
-
-

Square And Cube Calculator

-

Calculates square and cube of a number.

- -
-
-
-
-

Square Root Calculator

-

Calculates the square root of a number instantly.

- -
-
-
-
-

Statistics Calculator

-

Calculates Maximum, minimum, mean, median, mode, etc.

- -
-
-
-
-

Stock Profit Calculator

-

Calculates the profits in stocks by entering some parameters.

- -
-
-
-
-

Stress Strain Calculator

-

Computes stress and strain using force, area, and length inputs.

- -
-
-
-
-

String Pattern Validation Calculator

-

Validates the string patterns with various brackets to ensure every opening has a matching closing.

- -
-
-
-
-

Strong Number Calculator

-

Checks whether a number is a strong number or not.

- -
-
-
-
-

Sudoku Calculator

-

Generates and solves sudoku.

- -
-
-
-
-

Sugar Intake Calculator

-

Calculates the sugar intake from the consumed sugar.

- -
-
-
-
-

Sum Of Digits Calculator

-

Calculates the sum of digits of a given number.

- -
-
-
-
-

Sunlight Hours Calculator

-

Estimates the number of sunlight hours in a day based on the location and the date.

- -
-
-
-
-

Sunrise Sunset Calculator

-

Calculates approximate about when the sun will rise and set at that particular point on the Earth's surface.

- -
-
-
-
-

Surface Tension Calculator

-

Calculates the surface tension for different shapes like a flat object, droplets, and hollow bubbles.

- -
-
-
-
-

Synchronous Speed Calculator

-

Calculates the synchronous speed, frequency, or number of poles for a synchronous monitor.

- -
-
-
-
-

Systematic Investment Plan Calculator

-

Calculator that gives an idea of the returns on their mutual fund investments made through SIP.

- -
-
-
-
-

Systematic Withdrawal Plan Calculator

-

Calculator for SWP managing regular withdrawals from investments to provide steady income.

- -
-
-
-
-

T-Score Calculator

-

Calculates the T-score to test for significant differences between the sample mean and the population mean.

- -
-
-
-
-

TNEA Cut Off Calculator

-

Calculates the Tamil Nadu Engineering Admissions cut-off marks based on various subject marks.

- -
-
-
-
-

Tangent Formula Calculator

-

Calculates the tangent angle of a triangle.

- -
-
-
-
-

Taxi Fare Calculator

-

Calculates the cost of taxi rides based on distance, base fare, and time.

- -
-
-
-
-

Taylor Series Calculator

-

Calculates the Taylor Series expansion of a mathematical function.

- -
-
-
-
-

Temperature Calculator

-

Calculates the Temperature conversion between two specified units.

- -
-
-
-
-

Thala For A Reason Calculator

-

Whatever number you give it will return 7.

- -
-
-
-

Thermal Expansion Calculator

-

Calculates the thermal expansion based on the expansion coefficient and change in temperature

- -
-
-
-
-

Tile Calculator

-

Calculates the number of tiles for the given area.

- -
-
-
-
-

Time Calculator

-

Calculates Hours, Minutes, Seconds for any entered time.

- -
-
-
-
-

Time Complexity Calculator

-

Calculates the time complexity of given programs by the user.

- -
-
-
-
-

Time Zone Calculator

-

Instantly find the time difference anywhere in the world.

- -
-
-
-
-

Tip Calculator

-

Calculates the tip amount and final amount based on tip percentage and amount.

- -
-
-
-
-

Titration Calculator

-

Determines the concentration of an unknown solution by using a solution of known concentration.

- -
-
-
-
-

Torque Calculator

-

Calculates the torque based on force, distance, and angle entered.

- -
-
-
-
-

Travel Budget Calculator

-

Calculates the budget of any trip based on various inputs.

- -
-
-
-
-

Travel Packing Calculator

-

Generates customized packing lists for your trips, provides weather updates, and suggests top tourist places.

- -
-
-
-
-

Triangle Calculator

-

Calculates the different results of a triangle based on input sides.

- -
-
-
-
-

Trigonometric Calculator

-

Calculates trigonometric functions and inverses.

- -
-
-
-
-

Trigonometric Function Graphing Calculator

-

Provides the graph as per the given function like sin, cos, tan, etc.

- -
-
-
-
-

Trisection Point Calculator

-

Calculates the trisection points of a given two points(Line).

- -
-
-
-
-

Twin Prime Number Calculator

-

Calculates the pair of prime numbers that have a difference of 2.

- -
-
-
-
-

Typing Speed Calculator

-

Calculates the typing speed in two different units.

- -
-
-
-
-

UV Index Calculator

-

Calculator that provides real-time UV levels and personalized sun protection advice.

- -
-
-
-
-

Ugly Number Calculator

-

Checks if a number is ugly number or not.

- -
-
-
-
-

Unique Prime Number Calculator

-

Checks if a number is unique prime or not and finds unique prime numbers in a range.

- -
-
-
-
-

Unit Calculator

-

Converts values between different units of measurement.

- -
-
-
-
-

Value Added Tax Calculator

-

Calculates the VAT on products or services.

- -
-
-
-
-

Vector Calculator

-

Calculates the resultant vector, dot product and angle between 2 vectors.

- -
-
-
-
-

Velocity Acceleration Calculator

-

Calculates the velocity and acceleration by taking distance and time.

- -
-
-
-
-

Vowel Consonant Calculator

-

Calculates number of vowels and consonants in a given paragraph.

- -
-
-
-
-

Water Hardness Calculator

-

Determines the hardness of your water supply.

- -
-
-
-
-

Water Intake Calculator

-

Calculate daily water intake based on weight, activity, and weather.

- -
-
-
-
-

Water TDS Calculator

-

Calculates the TDS of the given water sample.

- -
-
-
-
-

Wave And Optics Calculator

-

Calculates wave speed and determines image distance using the lens formula.

- -
-
-
-
-

Wavelength Calculator

-

Calculates the Wavelength of the given speed and frequency of wave.

- -
-
-
-
-

Weather Calculator

-

Calculates wind chill factor, dew point, heat index, reports human thermal comfort and converts temperature.

- -
-
-
-
-

Website Bandwidth Calculator

-

Calculates the bandwidth of a website based on some factors.

- -
-
-
-
-

Wedding Budget Calculator

-

Calculates the total budget of a wedding, including a breakdown of various expenses.

- -
-
-
-
-

Weight Calculator

-

Calculates the weight between different units.

- -
-
-
-
-

Weight On The Moon Calculator

-

Calculates the weight of the object/person on the moon.

- -
-
-
-
-

Word Count Calculator

-

Counts the Total Words, Unique words, Average word length and Exports the data in JSON.

- -
-
-
-
-

Work Calculator

-

Calculates the work done by the Force F in displacement D.

- -
-
-
-
-

Yarn Density Calculator

-

Calculates the linear density of the yarn from unit system to another.

- -
-
-
-
-

Young's Double Slit Experiment Calculator

-

Computes the positions of bright and dark fringes as well as the fringe spacing.

- -
-
-
-
-

Z-Score Calculator

-

Calculates how many standard deviations a data point is from the mean of a dataset.

- -
-
-
-
-

Z-Spray Calculator

-

Determines the amount of spray needed for lawn and garden care.

- -
-
-
-
-

Zener Diode Calculator

-

Determines the correct resistor value for stable voltage regulation in Zener diode circuits.

- -
-
-
-
-

Zodiac Sign Calculator

-

Provides the user's zodiac sign by taking the date of birth as input.

- -
-
- -




-
-

No results found 🙃

-
-
- - - - -
- -
- - - - -
- - - -
- - - - - - - - - - - - - - - + + + + + + Document + + + + + +

Cyclomatic complexity calculator

+
+ + + + + + + + + +
+

Calculation of Cyclomatic calculation using Number of nodes, edges and connected components

+ + + + + + + +

+ + +
+ +
+

Calculation of Cyclomatic calculation using Number of closed regions in the graph

+ + + +

+ + +
+ +
+

Calculation of Cyclomatic calculation using Number of condition nodes

+ + + + Including default case + + + Excluding switch case node + + +

+ + +
+
+ + + diff --git a/script.js b/script.js index c82d1526c..d873d55f1 100644 --- a/script.js +++ b/script.js @@ -1,352 +1,131 @@ -// Progress Bar -const updateProgress = () => { - const { - scrollTop, - scrollHeight - } = document.documentElement; - const scrollPercent = `${(scrollTop/(scrollHeight-window.innerHeight)) * 100}%`; - document.querySelector('#progress-bar').style.setProperty('--progress', scrollPercent); -} -document.addEventListener('scroll', updateProgress); - -// Highlight active section in navigation on scroll -window.addEventListener('scroll', () => { - const sections = document.querySelectorAll('.containers'); - const navLinks = document.querySelectorAll('.nav-links'); - let currentSection = ''; - - sections.forEach(section => { - const sectionTop = section.offsetTop; - if (scrollY >= sectionTop - 50) { - currentSection = section.getAttribute('id'); - } - }); - - navLinks.forEach(link => { - link.setAttribute('id', ''); - if (link.getAttribute('href') === `#${currentSection}`) { - link.setAttribute('id', 'active1'); - console.log(currentSection); - } - }); -}); - -// Toggle mobile menu visibility -const hamburger = document.querySelector(".hamburger"); -const navMenu = document.querySelector(".nav-menu"); - -document.addEventListener("DOMContentLoaded", function () { - setTimeout(function () { - document.querySelector("body").classList.add("loaded"); - }, 500); -}); - -hamburger.addEventListener("click", mobileMenu); - -function mobileMenu() { - hamburger.classList.toggle("active"); - navMenu.classList.toggle("active"); -} - -const navLink = document.querySelectorAll(".nav-link"); -navLink.forEach(n => n.addEventListener("click", closeMenu)); - -function closeMenu() { - hamburger.classList.remove("active"); - navMenu.classList.remove("active"); -} - -// Dark and light mode -const toggleSwitch = document.querySelector('#checkbox'); -const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null; - -if (currentTheme) { - document.documentElement.setAttribute('data-theme', currentTheme); - - if (currentTheme === 'dark') { - toggleSwitch.checked = true; - document.body.classList.add('dark-mode'); - } -} - -toggleSwitch.addEventListener('change', (e) => { - if (e.target.checked) { - document.body.classList.add('dark-mode'); - localStorage.setItem('theme', 'dark'); - } else { - document.body.classList.remove('dark-mode'); - localStorage.setItem('theme', 'light'); - } -}); - -// Google Translate -function googleTranslateElementInit() { - new google.translate.TranslateElement({ - pageLanguage: 'en' - }, - 'google_translate_element' - ); -} - -// Hide or show scroll progress indicator -let calcScrollValue = () => { - let scrollProg = document.getElementById("progress"); - let pos = document.documentElement.scrollTop; - let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; - let scrollValue = Math.round((pos * 100) / calcHeight); - - if (pos > 100) { - scrollProg.style.display = "grid"; - } else { - scrollProg.style.display = "none"; - } - - scrollProg.addEventListener("click", () => { - document.documentElement.scrollTop = 0; - }); - - scrollProg.style.background = `conic-gradient(#0063ba ${scrollValue}%, #d499de ${scrollValue}%)`; -}; - -window.addEventListener('scroll', function () { - var scrollToTopButton = document.getElementById('progress'); - if (window.pageYOffset > 200) { - scrollToTopButton.style.display = 'block'; - } else { - scrollToTopButton.style.display = 'none'; - } -}); - -window.onscroll = calcScrollValue; -window.onload = calcScrollValue; - -// Pagination functionality for calculators -const input = document.getElementById('calculatorSearch'); -const paginationControls = document.getElementById('pagination-controls'); -let calculators = document.querySelectorAll('.container .box'); -let h2TextContents = []; - -calculators.forEach(calculator => { - let h2Element = calculator.querySelector('h2'); - if (h2Element) { - h2TextContents.push(h2Element.textContent); - } -}); - -// Show page based on current page number -const itemsPerPage = 10; -let currentPage = 1; - -function showPage(page) { - const boxes = document.querySelectorAll('.container .box'); - const totalPages = Math.ceil(boxes.length / itemsPerPage); - currentPage = Math.max(1, Math.min(page, totalPages)); - - boxes.forEach((box, index) => { - box.style.display = (index >= (currentPage - 1) * itemsPerPage && index < currentPage * itemsPerPage) ? 'block' : 'none'; - }); - - document.getElementById('page-info').innerText = `Page ${currentPage} of ${totalPages}`; - - document.getElementById('prev').style.display = totalPages > 1 ? 'inline' : 'none'; - document.getElementById('next').style.display = totalPages > 1 ? 'inline' : 'none'; -} - -function changePage(direction) { - showPage(currentPage + direction); -} - -// Filter calculators based on search input -function filterCalculators() { - var input, filter, calculators, i; - input = document.getElementById('calculatorSearch'); - filter = input.value.toUpperCase(); - calculators = document.querySelectorAll('.container .box'); - var noResults = document.getElementById('noResults'); - var paginationControls = document.getElementById('pagination-controls'); - var hasResults = false; - - for (i = 0; i < calculators.length; i++) { - var calculator = calculators[i]; - var h2 = calculator.querySelector('h2'); - var h3 = calculator.querySelector('h3'); - var calculatorName = h2.textContent || h2.innerText; - var calculatorDescription = h3.textContent || h3.innerText; - - if ((calculatorName.toUpperCase().indexOf(filter) > -1) || (calculatorDescription.toUpperCase().indexOf(filter) > -1)) { - calculator.style.display = "flex"; - hasResults = true; - } else { - calculator.style.display = "none"; - } - } - - if (hasResults) { - noResults.style.display = 'none'; - paginationControls.style.display = 'none'; // Hide pagination controls during search - } else { - noResults.style.display = 'block'; - paginationControls.style.display = 'none'; // Hide pagination controls if no results - } - - if (filter === "") { - paginationControls.style.display = 'flex'; // Show pagination controls when search input is cleared - showPage(currentPage); // Reset pagination - } -} - -document.addEventListener('DOMContentLoaded', function () { - document.getElementById('noResults').style.display = 'none'; - showPage(currentPage); -}); - -var input1 = document.getElementById('calculatorSearch'); -input1.addEventListener('input', (e) => { - const searchTerm = e.target.value.toLowerCase(); - let hasResults = false; - - calculators.forEach(calculator => { - const h2 = calculator.querySelector('h2'); - const h3 = calculator.querySelector('h3'); - const h2Text = h2 ? h2.textContent.toLowerCase() : ''; - const h3Text = h3 ? h3.textContent.toLowerCase() : ''; - - if (h2Text.includes(searchTerm) || h3Text.includes(searchTerm)) { - calculator.style.display = 'flex'; - hasResults = true; - } else { - calculator.style.display = 'none'; - } - }); - - // Show or hide pagination controls based on search input - if (hasResults) { - noResults.style.display = 'none'; - paginationControls.style.display = 'none'; // Hide pagination controls during search - } else { - noResults.style.display = 'block'; - paginationControls.style.display = 'none'; // Hide pagination controls if no results - } - - if (searchTerm.length === 0) { - paginationControls.style.display = 'flex'; // Show pagination controls when search input is cleared - showPage(currentPage); // Reset pagination - } -}); - -// Display search results in a dropdown list -let search_input_container = document.querySelector('.search-input-container'); -let calculatorSearch = document.getElementById('calculatorSearch'); - -input.addEventListener('input', (e) => { - let searchResultsContainer = document.getElementById('searchResults_Container') || false; - if (searchResultsContainer) { - search_input_container.removeChild(searchResultsContainer); - } - - searchResultsContainer = document.createElement('div'); - let div = document.createElement('div'); - searchResultsContainer.setAttribute('id', 'searchResults_Container'); - - let filtered = h2TextContents.filter(ele => { - const searchTerm = e.target.value.toLowerCase(); - const elementText = ele.toLowerCase(); - return elementText.includes(searchTerm); - }); - - if (filtered && e.target.value.length > 0) { - filtered.forEach((item, index) => { - let p = document.createElement('p'); - p.textContent = item; - p.setAttribute('key', index); - div.appendChild(p); - p.addEventListener('click', () => { - calculatorSearch.value = item; - searchResultsContainer.removeChild(div); - }); - }); - searchResultsContainer.appendChild(div); - search_input_container.appendChild(searchResultsContainer); - } - - if (e.target.value.length === 0) { - searchResultsContainer.removeChild(div); - } -}); - -// Voice command feature in search bar -const searchBar = document.querySelector("#searchBar"); -const searchBarInput = searchBar.querySelector("input"); -const pagination = document.getElementById("pagination-controls"); - -// The speech recognition interface lives on the browser’s window object -const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; - -if (SpeechRecognition) { - console.log("Your Browser supports speech Recognition"); - - const recognition = new SpeechRecognition(); - recognition.continuous = true; - - searchBar.insertAdjacentHTML("beforeend", ''); - - const micBtn = searchBar.querySelector("button"); - const micIcon = micBtn.firstElementChild; - - micBtn.addEventListener("click", micBtnClick); - - function micBtnClick() { - if (micIcon.classList.contains("fa-microphone")) { // Start Voice Recognition - recognition.start(); // First time you have to allow access to mic! - } else { - recognition.stop(); - } - } - - recognition.addEventListener("start", startSpeechRecognition); - function startSpeechRecognition() { - micIcon.classList.remove("fa-microphone"); - micIcon.classList.add("fa-microphone-slash"); - searchBarInput.focus(); - console.log("Voice activated, SPEAK"); - } - - recognition.addEventListener("end", endSpeechRecognition); - function endSpeechRecognition() { - micIcon.classList.remove("fa-microphone-slash"); - micIcon.classList.add("fa-microphone"); - searchBarInput.focus(); - console.log("Speech recognition service disconnected"); - } - - recognition.addEventListener("result", resultOfSpeechRecognition); - function resultOfSpeechRecognition(event) { - const current = event.resultIndex; - const transcript = event.results[current][0].transcript; - const newTranscript = transcript.endsWith('.') ? transcript.slice(0, -1) : transcript; - console.log(newTranscript); - searchBarInput.value = newTranscript; - filterCalculators(); - } -} else { - info.textContent = "Your Browser does not support Speech Recognition"; -} - -// Validate input for name fields -function validateName(inputId) { - let input = document.getElementById(inputId); - let value = input.value; - let regex = /^[A-Za-z ]+$/; - - if (!regex.test(value)) { - alert("Please enter only characters in the name field."); - input.value = value.replace(/[^A-Za-z ]/g, ''); // Remove any non-alphabetic characters - } -} - -function scrollToSearch() { - const searchBar = document.getElementById('searchBar'); - searchBar.scrollIntoView({ - behavior: "smooth" - }); +// Method 1 +// Calculation of Cyclomatic calculation using Number of nodes, edges and connected components + +function method1() +{ + let components = document.getElementById("components").value.trim(); + let nodes = document.getElementById("nodes").value; + let edges = document.getElementById("edges").value; + if( components == '' || edges == '' || nodes ==''){ + let output1 = "All fields are mandatory"; + document.getElementById("output1").innerHTML = output1; + } + else if(components< 0 || nodes<0 || edges<0){ + let output1 = "Enter only positive numbers"; + document.getElementById("output1").innerHTML = output1; + } + else{ + components = parseInt(components); + nodes = parseInt(nodes); + edges = parseInt(edges); + let output1 = edges-nodes+(2*components); + document.getElementById("output1").innerHTML = output1; + + } + } + +// clear input for method1 +function clearInputs1() { + const inputs = document.querySelectorAll('.clearable1'); + inputs.forEach(input => input.value = ''); + const output = document.getElementById("output1"); + output.innerHTML = ''; +} + + +// Method 2 +// Calculation of Cyclomatic calculation using Number of closed regions in the graph + +function method2() +{ + let region_number = document.getElementById("regions").value; + if(region_number == ''){ + let output2 = "All fields mandatory"; + document.getElementById("output2").innerHTML = output2; + } + else if(region_number < 0){ + let output2 = "Enter only positive numbers"; + document.getElementById("output2").innerHTML = output2; + } + else{ + region_number = parseInt(region_number); + let output2 = region_number+1; + document.getElementById("output2").innerHTML = output2; + + } + } + +// clear input for method2 +function clearInputs2() { + const inputs = document.querySelectorAll('.clearable2'); + inputs.forEach(input => input.value = ''); + const output = document.getElementById("output2"); + output.innerHTML = ''; +} + + +// Method 3 +// Calculation of Cyclomatic calculation using Number of condition nodes +function method3(){ + let choice = document.getElementById("switch-case").value.trim(); + let res = choice.toLowerCase(); + if (res == "yes"){ + let casecount = document.getElementById("case-count").value; + let nodecount = document.getElementById("node-count").value; + if (casecount == '' || nodecount == ''){ + let output3 = "All values are mandatory"; + document.getElementById("output3").innerHTML = output3; + } + else if(casecount <0 || nodecount < 0){ + let output3 = "Enter only positive numbers"; + document.getElementById("output3").innerHTML = output3; + } + else{ + nodecount = parseInt(nodecount); + casecount = parseInt(casecount); + let output3 = nodecount + (casecount-1) + 1; + document.getElementById("output3").innerHTML = output3; + } + } + else if (res=="no"){ + let nodecount = document.getElementById("node-count").value; + if(nodecount == ''){ + let output3 = "All values are mandatory"; + document.getElementById("output3").innerHTML = output3; + } + else if(nodecount<0){ + let output3 = "Enter only positive numbers"; + document.getElementById("output3").innerHTML = output3; + } + else{ + nodecount = parseInt(nodecount); + let output3 = nodecount + 1; + document.getElementById("output3").innerHTML = output3; + } + + } + +} + +// Function to hide input field when switch case condition is false in Method 3 +function checkSwitchCase(){ + var choice = document.getElementById("switch-case").value.trim(); + let res = choice.toLowerCase(); + if (res == "yes" || res == 'y'){ + document.getElementById("case-count").style.display="block"; + document.getElementById("case-count-text").style.display="block"; + } + else{ + document.getElementById("case-count").style.display="none"; + document.getElementById("case-count-text").style.display="none"; + document.getElementById("note").style.display="none"; + } +} + +// clear input for method3 +function clearInputs3() { + const inputs = document.querySelectorAll('.clearable3'); + inputs.forEach(input => input.value = ''); + const output = document.getElementById("output3"); + output.innerHTML = ''; } \ No newline at end of file diff --git a/style.css b/style.css index 53065a42c..e21e04268 100644 --- a/style.css +++ b/style.css @@ -1,2206 +1,121 @@ -@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap"); - -:root { - --primary: #ff1b82; - --secondary: #f4eff0; - --ternary: #1327ff; - --light: #f7f26c; - --dark: #f50414; - --track: rgb(111, 111, 139) -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -/* Scrollbar Css */ - -::-webkit-scrollbar { - width: 10px; -} - -::-webkit-scrollbar-track { - background: var(--track); -} - -::-webkit-scrollbar-thumb { - background: var(--light); - border-radius: 25px; -} - -/* Dark and light mode Css*/ - -.theme-switch-wrapper { - display: flex; - align-items: center; -} - -.theme-switch { - display: inline-block; - height: 34px; - position: relative; - width: 60px; -} - -.theme-switch input { - display: none; -} - -.slider { - background-color: #ccc; - bottom: 0; - cursor: pointer; - left: 0; - position: absolute; - right: 0; - top: 0; - transition: 0.4s; -} - -.slider:before { - background-color: #fff; - bottom: 4px; - content: ""; - height: 26px; - left: 4px; - position: absolute; - transition: 0.4s; - width: 26px; -} - -input:checked+.slider { - background-color: #f493cf; -} - -input:checked+.slider:before { - transform: translateX(26px); -} - -.slider.round { - border-radius: 34px; -} - -.slider.round:before { - border-radius: 50%; -} - -/* Light Mode */ -.light-mode { - background-color: #ffffff; - color: #000000; - background-image: url(./assets/images/background.jpg); -} - -/* Dark Mode */ -.dark-mode { - background-color: #121212; - color: #ffffff; - background-image: url(./assets/images/light.jpg); -} - -.dark-mode .navbar { - background-color: #f493cf; - box-shadow: 0 20px 16px 0 rgba(240, 161, 227, 0.37); -} - -.dark-mode #progress-bar { - background: linear-gradient(45deg, rgb(97, 189, 229), rgb(212, 22, 208)); -} - -.dark-mode .comp-section .compcontainer h3 { - color: #000080; -} - -.dark-mode .paragraph { - color: #000080; -} - -.dark-mode .circle-container { - color: pink; -} - -.dark-mode .circle { - background-color: #b94bcd; -} - -.dark-mode .circle::before { - content: ""; - position: fixed; - width: 50px; - height: 50px; - opacity: 0.2; - transform: translate(-30%, -30%); - border-radius: 50%; -} - -.dark-mode .nav-link:hover { - color: #76076d; - border-top-color: #76076d; - border-bottom-color: #76076d; -} - -.dark-mode #active1 { - color: #76076d; - border-top-color: #76076d; - border-bottom-color: #76076d; -} - -/* Custom Cursor Css */ - -.circle { - z-index: 999999; - width: 20px; - height: 20px; - border-radius: 50%; - pointer-events: none; - animation: colors 5s infinite; - position: fixed; - transform: translate(-50%, -50%); -} - -.circle::before { - content: ""; - position: fixed; - width: 50px; - height: 50px; - opacity: 0.2; - transform: translate(-30%, -30%); - border-radius: 50%; -} - -/* Preloader Css */ - -#loader-wrapper { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1001; -} - -#loader-wrapper .loader-section { - position: fixed; - top: 0; - width: 51%; - height: 100%; - background: #fff; - z-index: 1000; - -webkit-transform: translateX(0); - transform: translateX(0); -} - -#loader-wrapper .loader-section.section-left { - left: 0; -} - -#loader-wrapper .loader-section.section-right { - right: 0; -} - -#loader { - display: block; - position: relative; - left: 50%; - top: 50%; - width: 150px; - height: 150px; - margin: -75px 0 0 -75px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: #3498db; - -webkit-animation: spin 2s linear infinite; - animation: spin 2s linear infinite; - z-index: 99999; -} - -#loader:before { - content: ""; - position: absolute; - top: 5px; - left: 5px; - right: 5px; - bottom: 5px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: #e74c3c; - -webkit-animation: spin 3s linear infinite; - animation: spin 3s linear infinite; -} - -#loader:after { - content: ""; - position: absolute; - top: 15px; - left: 15px; - right: 15px; - bottom: 15px; - border-radius: 50%; - border: 3px solid transparent; - border-top-color: #f9c922; - -webkit-animation: spin 1.5s linear infinite; - animation: spin 1.5s linear infinite; -} - -.loaded #loader-wrapper { - visibility: hidden; - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - -webkit-transition: all 0.3s 1s ease-out; - transition: all 0.3s 1s ease-out; -} - -.loaded #loader-wrapper .loader-section.section-left { - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -} - -.loaded #loader-wrapper .loader-section.section-right { - -webkit-transform: translateX(100%); - transform: translateX(100%); - -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -} - -.loaded #loader { - opacity: 0; - -webkit-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; -} - -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -/* Preloader Css Ends */ - -body { - justify-content: center; - align-items: center; - min-height: 100vh; - background-image: url(./assets/images/background.jpg); - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - font-size: 1.4rem; - transition: background-color 0.3s, color 0.3s, background-image 0.3s; -} - -html { - font-size: 62.5%; -} - -body, -html { - font-family: 'Montserrat', sans-serif; - font-weight: 300; - line-height: 1.4; - scroll-behavior: smooth; -} - -#progress-bar { - --progress: 0; - position: fixed; - height: 8px; - width: var(--progress); - background: linear-gradient(45deg, rgb(68, 49, 161), rgb(36, 15, 141)); - z-index: 1000; - border-radius: 4px; -} - -header { - position: sticky; - top: 0; - z-index: 100; -} - -.navbar { - font-family: 'Poppins', sans-serif; - background-color: rgb(9, 5, 40); - margin: 0 auto; - background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(46, 151, 192, 0.8)); - backdrop-filter: blur(50px); - -webkit-backdrop-filter: blur(50px); - box-shadow: 0 20px 16px 0 rgba(0, 0, 0, 0.37); -} - -.navbar a { - text-decoration: none; - font-size: 2rem; - font-weight: 700; - padding: 0.5rem 1rem; - border: 1px solid transparent; - color: var(--secondary); - transition: 0.3s ease-in-out; -} - -.image-logo { - float: left; - align-items: center; - display: flex; -} - -.nav-link:hover { - color: #ff1b82; - border-top-color: #ff1b82; - border-bottom-color: #ff1b82; -} - -nav { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem; -} - -nav ul { - display: flex; - gap: 2rem; - list-style: none; -} - -#active1 { - color: #ff1b82; - border-top-color: #ff1b82; - border-bottom-color: #ff1b82; -} - -.logo { - font-size: 2.3rem; - font-weight: 700; - margin-left: -10px; - font-family: Ubuntu; - color: #ffffff; - transition: color 0.3s ease-in-out; -} - -.logo:hover { - color: #ff1b82; -} - -.hamburger { - display: none; -} - -.bar { - display: block; - width: 25px; - height: 3px; - margin: 5px auto; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - background-color: var(--secondary); -} - -/* Google Translate Css */ - -#google_translate_element { - right: 0; - margin-top: 5px; - margin-right: 5px; - position: absolute; -} - -/* Components Section Css */ - -section { - scroll-margin-top: 50px; - z-index: 100; -} - -.comp-section .compcontainer .logo img { - width: 250px; - margin-bottom: -25px; -} - -.comp-section .compcontainer h1, -.comp-section .compcontainer h3 { - display: flex; - flex-direction: column; - gap: 30px; - z-index: 200; -} - -.comp-section .compcontainer h1 { - font-family: Ubuntu; - text-shadow: 2px 2px 10px var(--light); - margin-top: 16px; -} - -.comp-section .compcontainer h3 { - font-family: 'Poppins', sans-serif; - color: rgb(244 239 240 / 91%); - margin-top: 2rem; - font-weight: 400; - font-size: 2.5rem; -} - -.comp-section .compcontainer a { - margin-top: 50px; -} - -.comp-section .compcontainer .started { - font-size: 20px; - font-weight: 700; - margin-top: 21px; - padding: 15px 50px; - border: none; - outline: none; - color: white; - cursor: pointer; - position: relative; - z-index: 0; - border-radius: 25px; - transition: 0.5s ease-in-out; - background: #fff; - box-shadow: 0 0 0 4px transparent; -} - -.comp-section .compcontainer .started::before { - content: ""; - position: absolute; - top: -2px; - left: -2px; - width: calc(100% + 4px); - height: calc(100% + 4px); - background: linear-gradient(45deg, #FF0000, #FF7300, #00FFD5, #FF00C8, #FF0000); - background-size: 600%; - z-index: -1; - filter: blur(8px); - animation: glowing 20s linear infinite; - border-radius: 27px; - opacity: 1; -} - -@keyframes glowing { - 0% { - background-position: 0 0; - } - - 50% { - background-position: 400% 0; - } - - 100% { - background-position: 0 0; - } -} - -.comp-section .compcontainer .started:hover { - background: linear-gradient(45deg, #FF0000, #FF7300, #00FFD5, #FF00C8, #580d0d); - background-size: 600%; - color: #fff; - box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); - animation: glowing 20s linear infinite; -} - -.comp-section .compcontainer .started:hover::before { - filter: blur(15px); -} - -.comp-section .compcontainer .started:active { - transform: scale(0.95); -} - -.paragraph { - font-size: 2rem; - width: 85%; - text-align: center; - font-weight: 500; - margin: auto; - margin-top: 18px; - padding: 10px; - color: rgb(244 239 240 / 91%); -} - -.comp-section { - display: grid; - color: var(--secondary); - justify-content: center; - align-items: center; - text-align: center; - z-index: 4; -} - -.comp-section h1 { - font-size: 65px; -} - -.comp-section h3 { - font-size: 32px; -} - -.container { - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - padding: 40px 0; -} - -.container .box { - position: relative; - width: 320px; - height: 400px; - display: flex; - justify-content: center; - align-items: center; - margin: 40px 30px; - transition: 0.5s; -} - -.container .box::before { - content: ""; - position: absolute; - top: 0; - left: 50px; - width: 50%; - height: 100%; - background: #d8de07; - border-radius: 8px; - transform: skewX(15deg); - transition: 0.5s; -} - -.container .box::after { - content: ""; - position: absolute; - top: 0; - left: 50px; - width: 50%; - height: 100%; - background: #de652a; - border-radius: 8px; - transform: skewX(15deg); - transition: 0.5s; - filter: blur(30px); - transition: 0.5s; -} - -.container .box:hover:before, -.container .box:hover:after { - transform: skewX(0deg); - left: 20px; - width: calc((100% - 90px)); -} - -.container .box .content h3 { - font-size: 15px; - color: #efe0f1; - margin-top: 20px; - transition: all 0.3s; -} - -.container .box .content button { - all: unset; - width: 100px; - height: 30px; - font-size: 16px; - background: transparent; - border: none; - position: relative; - color: #f0f0f0; - cursor: pointer; - z-index: 1; - padding: 9px 14px; - display: flex; - align-items: center; - justify-content: center; - white-space: nowrap; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; -} - -.container .box .content button::after, -.container .box .content button::before { - content: ''; - position: absolute; - bottom: 0; - right: 0; - z-index: -99999; - transition: all .4s; -} - -.container .box .content button::before { - transform: translate(0%, 0%); - width: 100%; - height: 100%; - background: #28282d; - border-radius: 10px; -} - -.container .box .content button::after { - transform: translate(10px, 10px); - width: 35px; - height: 35px; - background: #ffffff15; - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - border-radius: 50px; -} - -.container .box .content button:hover::before { - transform: translate(5%, 20%); - width: 110%; - height: 110%; -} - -.container .box .content button:hover::after { - border-radius: 10px; - transform: translate(0, 0); - width: 100%; - height: 100%; -} - -.container .box .content button:active::after { - transition: 0s; - transform: translate(0, 5%); -} - -.container .box .content img { - float: right; - cursor: pointer; - height: 36px; - width: 36px; - font-weight: 900; - margin-right: -25px; - border-radius: 20px; - background-color: white; - color: #ffffff; - transition: .5s; - z-index: 3; -} - -.container .box .content img:hover { - color: #fff; - transform: rotateY(180deg); -} - -.container .box .content img:before { - content: ""; - position: absolute; - top: 100%; - left: 0; - width: 100%; - height: 100%; - background: #f00; - transition: .5s; - z-index: 2; -} - -.container .box .content img:hover:before { - top: 0; -} - -.container .box .content img:hover { - background-color: #e1ff00; - border: 1px solid #e1ff00; - box-shadow: 0 0 6px 2px #e1ff00; -} - -.card-footer { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 20px; -} - -.container .box:nth-child(even)::before, -.container .box:nth-child(even)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(odd)::before, -.container .box:nth-child(odd)::after { - background: linear-gradient(315deg, #00ff88, #f200ff); -} - -.container .box:nth-child(2)::before, -.container .box:nth-child(2)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(3)::before, -.container .box:nth-child(3)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(4)::before, -.container .box:nth-child(4)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(5)::before, -.container .box:nth-child(5)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(6)::before, -.container .box:nth-child(6)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(7)::before, -.container .box:nth-child(7)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(8)::before, -.container .box:nth-child(8)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(9)::before, -.container .box:nth-child(9)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(10)::before, -.container .box:nth-child(10)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(11)::before, -.container .box:nth-child(11)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(12)::before, -.container .box:nth-child(12)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(13)::before, -.container .box:nth-child(13)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(14)::before, -.container .box:nth-child(14)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(15)::before, -.container .box:nth-child(15)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(16)::before, -.container .box:nth-child(16)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(17)::before, -.container .box:nth-child(17)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(18)::before, -.container .box:nth-child(18)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(19)::before, -.container .box:nth-child(19)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(20)::before, -.container .box:nth-child(20)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(21)::before, -.container .box:nth-child(21)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(22)::before, -.container .box:nth-child(22)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(23)::before, -.container .box:nth-child(23)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(24)::before, -.container .box:nth-child(24)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(25)::before, -.container .box:nth-child(25)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(26)::before, -.container .box:nth-child(26)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(27)::before, -.container .box:nth-child(27)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(28)::before, -.container .box:nth-child(28)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(29)::before, -.container .box:nth-child(29)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(30)::before, -.container .box:nth-child(30)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(31)::before, -.container .box:nth-child(31)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(32)::before, -.container .box:nth-child(32)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(33)::before, -.container .box:nth-child(33)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(34)::before, -.container .box:nth-child(34)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(35)::before, -.container .box:nth-child(35)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(36)::before, -.container .box:nth-child(36)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(37)::before, -.container .box:nth-child(37)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(38)::before, -.container .box:nth-child(38)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(39)::before, -.container .box:nth-child(39)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(40)::before, -.container .box:nth-child(40)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(41)::before, -.container .box:nth-child(41)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(42)::before, -.container .box:nth-child(42)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(43)::before, -.container .box:nth-child(43)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(44)::before, -.container .box:nth-child(44)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(45)::before, -.container .box:nth-child(45)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(46)::before, -.container .box:nth-child(46)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(47)::before, -.container .box:nth-child(47)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(48)::before, -.container .box:nth-child(48)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(49)::before, -.container .box:nth-child(49)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(50)::before, -.container .box:nth-child(50)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(51)::before, -.container .box:nth-child(51)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(52)::before, -.container .box:nth-child(52)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(53)::before, -.container .box:nth-child(53)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(54)::before, -.container .box:nth-child(54)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(55)::before, -.container .box:nth-child(55)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(56)::before, -.container .box:nth-child(56)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(57)::before, -.container .box:nth-child(57)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(58)::before, -.container .box:nth-child(58)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(59)::before, -.container .box:nth-child(59)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(60)::before, -.container .box:nth-child(60)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(61)::before, -.container .box:nth-child(61)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(62)::before, -.container .box:nth-child(62)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(63)::before, -.container .box:nth-child(63)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(64)::before, -.container .box:nth-child(64)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(65)::before, -.container .box:nth-child(65)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(66)::before, -.container .box:nth-child(66)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(67)::before, -.container .box:nth-child(67)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(68)::before, -.container .box:nth-child(68)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(69)::before, -.container .box:nth-child(69)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(70)::before, -.container .box:nth-child(70)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(71)::before, -.container .box:nth-child(71)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(72)::before, -.container .box:nth-child(72)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(73)::before, -.container .box:nth-child(73)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(74)::before, -.container .box:nth-child(74)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(75)::before, -.container .box:nth-child(75)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(76)::before, -.container .box:nth-child(76)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(77)::before, -.container .box:nth-child(77)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(78)::before, -.container .box:nth-child(78)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(79)::before, -.container .box:nth-child(79)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(80)::before, -.container .box:nth-child(80)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(81)::before, -.container .box:nth-child(81)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(82)::before, -.container .box:nth-child(82)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(83)::before, -.container .box:nth-child(83)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(84)::before, -.container .box:nth-child(84)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(85)::before, -.container .box:nth-child(85)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(86)::before, -.container .box:nth-child(86)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(87)::before, -.container .box:nth-child(87)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(88)::before, -.container .box:nth-child(88)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(89)::before, -.container .box:nth-child(89)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(90)::before, -.container .box:nth-child(90)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(91)::before, -.container .box:nth-child(91)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(92)::before, -.container .box:nth-child(92)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(93)::before, -.container .box:nth-child(93)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(94)::before, -.container .box:nth-child(94)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(95)::before, -.container .box:nth-child(95)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(96)::before, -.container .box:nth-child(96)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(97)::before, -.container .box:nth-child(97)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(98)::before, -.container .box:nth-child(98)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(99)::before, -.container .box:nth-child(99)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(100)::before, -.container .box:nth-child(100)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(101)::before, -.container .box:nth-child(101)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(102)::before, -.container .box:nth-child(102)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(103)::before, -.container .box:nth-child(103)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(104)::before, -.container .box:nth-child(104)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(105)::before, -.container .box:nth-child(105)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(106)::before, -.container .box:nth-child(106)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(107)::before, -.container .box:nth-child(107)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(108)::before, -.container .box:nth-child(108)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(109)::before, -.container .box:nth-child(109)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(110)::before, -.container .box:nth-child(110)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(111)::before, -.container .box:nth-child(111)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(112)::before, -.container .box:nth-child(112)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(113)::before, -.container .box:nth-child(113)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(114)::before, -.container .box:nth-child(114)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(115)::before, -.container .box:nth-child(115)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(116)::before, -.container .box:nth-child(116)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(117)::before, -.container .box:nth-child(117)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(118)::before, -.container .box:nth-child(118)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(119)::before, -.container .box:nth-child(119)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(120)::before, -.container .box:nth-child(120)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(121)::before, -.container .box:nth-child(121)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(122)::before, -.container .box:nth-child(122)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(123)::before, -.container .box:nth-child(123)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(124)::before, -.container .box:nth-child(124)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(125)::before, -.container .box:nth-child(125)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(126)::before, -.container .box:nth-child(126)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(127)::before, -.container .box:nth-child(127)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box:nth-child(128)::before, -.container .box:nth-child(128)::after { - background: linear-gradient(315deg, #03a9f4, #ff0058); -} - -.container .box:nth-child(129)::before, -.container .box:nth-child(129)::after { - background: linear-gradient(315deg, #03ff37, #0300ff); -} - -.container .box:nth-child(130)::before, -.container .box:nth-child(130)::after { - background: linear-gradient(315deg, #2b3427, #0a596a); -} - -.container .box:nth-child(131)::before, -.container .box:nth-child(131)::after { - background: linear-gradient(315deg, #ffbc00, #ff0058); -} - -.container .box:nth-child(132)::before, -.container .box:nth-child(132)::after { - background: linear-gradient(315deg, #1e470c, #00d0ff); -} - -.container .box:nth-child(133)::before, -.container .box:nth-child(133)::after { - background: linear-gradient(315deg, #3a3f38, #6abd1b); -} - -.container .box span { - display: block; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 50; - pointer-events: none; -} - -.container .box span::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 8px; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); - opacity: 0; - transition: 0.5s; - animation: animate 2s ease-in-out infinite; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); -} - -.container .box:hover span::before { - top: -50px; - left: 50px; - width: 100px; - height: 100px; - opacity: 1; -} - -.container .box span::after { - content: ""; - position: absolute; - bottom: 0; - right: 0; - width: 100%; - height: 100%; - border-radius: 8px; - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); - opacity: 0; - transition: 0.5s; - animation: animate 2s ease-in-out infinite; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); - animation-delay: -1s; -} - -.container .box:hover span::after { - bottom: -50px; - right: 50px; - width: 100px; - height: 100px; - opacity: 1; -} - -@keyframes animate { - - 0%, - 100% { - transform: translateY(10px); - } - - 50% { - transform: translateY(-10px); - } -} - -.container .box .content { - position: relative; - left: 0; - padding: 20px 40px; - background: rgba(255, 255, 255, 0.05); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); - border-radius: 8px; - backdrop-filter: blur(10px); - z-index: 1; - transition: 0.5s; - top: 10%; - color: #fff; -} - -.container .box:hover .content { - left: -25px; - padding: 60px 40px; - top: 5px; -} - -.container .box .content h2 { - font-size: 2em; - color: #fff; - margin-bottom: 10px; - text-align: center; -} - -.container .box .content p { - font-size: 1.1em; - margin-bottom: 10px; - line-height: 1.4em; -} - -.container .box .content a { - display: inline-block; - font-size: 1.1em; - color: #f7dafb; - padding: 10px; - border-radius: 4px; - text-decoration: none; - font-weight: 700; - margin-top: 5px; -} - -/* Contributors Styling */ - -.contributors { - margin: 0; - padding: 0; - padding-bottom: 50px; -} - -.contributors h1 { - text-align: center; - color: #cb73d8; - font-size: 4rem; - margin-bottom: 50px; -} - -.contributors h1:hover { - text-decoration: underline; -} - -#contributor { - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -.contributor-card { - width: 65px; - height: 65px; - clip-path: polygon(50% 0%, 91% 25%, 91% 75%, 50% 100%, 9% 75%, 9% 25%); - margin: 5px; - transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; -} - -.contributor-card:hover { - transform: scale(1.35); - opacity: 0.85; -} - -.contributor-card img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.contributor-card:nth-child(4n+1), -.contributor-card:nth-child(4n+3) { - margin-top: -4px; -} - -/* Contributors Styling Ends */ - -/* Progress Bar */ - -#progress { - position: fixed; - bottom: 20px; - right: 10px; - height: 50px; - width: 50px; - z-index: 10; - display: none; - place-items: center; - border-radius: 50%; - transition: opacity 0.3s, background-color 0.3s; - box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255, 255, 255, .2), inset 4px 4px 6px 0 rgba(0, 0, 0, .2); - cursor: pointer; -} - -#progress-value { - display: block; - height: calc(100% - 15px); - width: calc(100% - 15px); - background-color: rgb(104, 98, 232); - background: linear-gradient(90deg, rgb(159, 157, 235) 0%, rgb(212, 153, 222) 39%, rgb(253, 199, 134) 100%); - border-radius: 50%; - display: grid; - place-items: center; - font-size: 26px; - color: black; -} - -/* Pagination Section Css */ - -#pagination-controls { - display: flex; - align-items: center; - justify-content: center; - gap: 15px; - margin: 20px 0; -} - -#pagination-controls button { - background: linear-gradient(145deg, #e0e0e0, #ffffff); - border: none; - border-radius: 30px; - color: #333; - padding: 10px 20px; - font-size: 16px; - font-weight: bold; - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.6); - cursor: pointer; - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - -#pagination-controls button:hover { - transform: translateY(-5px); - box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.7); - background: linear-gradient(145deg, #1196c3, #36b3d5); -} - -#pagination-controls button:active { - transform: translateY(2px); - box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3), -3px -3px 5px rgba(255, 255, 255, 0.7); -} - -#pagination-controls span { - font-size: 16px; - font-weight: bold; - color: #555; -} - -#pagination-controls #page-info { - color: white; - font-size: medium; -} - -#prev:hover { - box-shadow: 2px 2px 5px 0px #682572; - background: linear-gradient(to right, #0575E6, #00F260); -} - -#next:hover { - box-shadow: 2px 2px 5px 0px #682572; - background: linear-gradient(to right, #0575E6, #00F260); -} - -/* Footer Section Css */ - -footer { - font-family: 'Montserrat', sans-serif; - background-color: rgb(9, 5, 40, 0.9); - color: #ccc; - padding: 30px 0; -} - -.footer-container { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-start; - margin: 0 auto; - max-width: 1300px; -} - -.company-info { - font-weight: 600; -} - -.quick-links { - font-weight: 600; -} - -.company-info, -.quick-links, -.send-message { - flex-basis: 27%; -} - -.company-name { - font-size: 24px; - margin-bottom: 10px; -} - -.company-info p { - line-height: 1.8; - text-align: center; -} - -.quick-links h2, -.send-message h2 { - font-size: 18px; - margin-bottom: 10px; -} - -.quick-links ul, -.send-message form { - list-style: none; - padding: 0; - margin: 0; -} - -.quick-links li, -.send-message button { - margin-bottom: 10px; -} - -.quick-links a, -.send-message button { - text-decoration: none; - color: #ccc; -} - -.send-message input[type="email"] { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 4px; -} - -.copyright { - font-weight: bold; - margin-top: 30px; - text-align: center; - padding: 10px 0; - color: #ccc; -} - -.heading { - font-size: 24px; - margin-bottom: 20px; - background: #00F260; - background: -webkit-linear-gradient(to right, #0575E6, #00F260); - background: linear-gradient(to right, #0575E6, #00F260); - background-clip: text; - -webkit-text-fill-color: transparent; -} - -.form-group { - margin-bottom: 15px; -} - -.group1 { - display: flex; - flex-direction: row; - gap: 10px; -} - -.send-message input, -.send-message textarea { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 4px; - box-sizing: border-box; - font-size: 16px; -} - -.send-message textarea { - height: 50px; -} - -.send-message button { - height: 50px; - background: -webkit-linear-gradient(to right, #0575E6, #00F260); - background: linear-gradient(to right, #0575E6, #00F260); - color: white; - padding: 10px 20px; - border: none; - border-radius: 4px; - cursor: pointer; - font-size: 20px; - font-weight: bold; -} - -.heading { - text-align: center; -} - -.footer-ul { - justify-items: center; - align-items: center; - text-align: center; -} - -.footer-ul li a:hover { - color: #00d0ff; -} - -.social { - font-size: 3.5rem; - text-decoration: none; - margin: 0 1rem; - transition: 0.3s ease-in-out; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - gap: 2rem; -} - -.social a i { - transition: transform 0.3s ease-in-out; -} - -/* Pop up effect */ - -.social a:hover i { - transform: translateY(-8px); -} - -.social a { - color: var(--secondary); -} - -.social a.user:hover { - color: #4af3b5; -} - -.social a.message:hover { - color: #73408f; -} - -.social a.linkedin:hover { - color: #1990cb; -} - -.social a.github:hover { - color: #21d061; -} - -.social a.instagram:hover { - color: #d62976; -} - -.social a.facebook:hover { - color: #0026ff; -} - -.social a.twitter:hover { - color: #00fff7; -} - -.social a.discord:hover { - color: #5865F2; -} - -/* Sticky ScrollToTop Button */ - -.scrollToTopContainer { - position: fixed; - bottom: 0; - right: 0; - margin: 0 2rem 2rem 0; - height: fit-content; - width: fit-content; - z-index: 100000; -} - -.scrollToTopButton { - border-radius: 100%; - height: 42px; - width: 42px; - background-color: rgba(255, 255, 255, 0.9); - border: 0; - cursor: pointer; - box-shadow: 0px 0px 10px 1px palevioletred; -} - -.HideElement { - display: none; -} - -.trynow-button { - transition: transform .2s; -} - -.trynow-button:hover { - transform: scale(1.15); -} - -.footer-links { - transition: transform .2s; -} - -.footer-links:hover { - transform: scale(1.1); -} - -/* Search Bar Css */ - -#searchBar { - text-align: center; - border-radius: 14px; - margin: 2rem 2rem 0; - color: white; - width: 100%; -} - -#searchBar h1 { - font-family: Ubuntu; - font-size: 4rem; - text-shadow: 2px 2px 10px var(--light); - margin-top: 16px; -} - -.search-input-container { - margin-left: 8rem; - align-items: center; - display: inline; - position: relative; -} - -#searchResults_Container { - position: absolute; - max-height: 40rem; - background-color: white; - border-radius: 12px; - z-index: 2; - right: 0; - margin-top: 1rem; - left: 0; - color: black; - overflow: scroll; - overflow-x: hidden; - max-width: 60rem; -} - -#searchResults_Container p { - text-align: left; - padding: 1rem; - border-bottom: 0.1rem solid; - font-size: 1.3rem; - font-weight: 600; -} - -#searchBar button { - font-size: 2rem; - background: transparent; - border: 0; - color: white; - margin-left: 5px; - background-color: #ff1b82; - padding: .7rem; - width: 8rem; - border-radius: 5rem; -} - -#searchBar button:hover { - transform: scale(1.02); - background: #ff6984; -} - -#searchBar input { - font-family: 'Poppins', sans-serif; - border: 0; - padding: 1rem; - height: 4rem; - font-size: 2rem; - text-align: center; - border-radius: 2rem; - width: 40rem; - transition: all linear .2s; - font-weight: 600; -} - -#searchBar input:hover { - transform: scale(1.02); - box-shadow: -5px -5px 10px #682572; -} - -/* Media Queries */ - -@media (max-width: 1060px) { - .navbar .nav-link { - font-size: 17px; - } -} - -@media (max-width: 1030px) { - .hero-section { - flex-direction: column; - text-align: center; - width: auto; - height: 80vh; - } - - .navbar .nav-link { - font-size: 16px; - } -} - -@media (max-width: 1000px) { - .navbar .nav-link { - padding-right: 2px; - padding-left: 2px; - } -} - -@media (max-width: 925px) { - .hero-section { - flex-direction: column; - text-align: center; - width: auto; - height: 85vh; - } - - .herocontainer { - border: 1px transparent; - padding-bottom: 10px; - } - - .navbar .nav-link { - font-size: 15px; - padding-left: 0px; - padding-right: 0px; - } -} - -@media (max-width: 800px) { - .navbar .nav-link { - font-size: 14px; - } -} - -@media (max-width: 768px) { - .hero-section { - flex-direction: column; - text-align: center; - width: auto; - height: 95vh; - } - - .herocontainer { - border: 1px transparent; - - padding-bottom: 10px; - } - - #mySearch { - height: 6rem; - width: 50rem; - } - - .comp-section h1 { - font-size: 55px; - } - - .footer-basic>footer>ul>li>a { - font-size: 15px; - } -} - -@media (max-width: 500px) { - .hero-section { - height: 98vh; - } - - .herocontainer { - border: 1px transparent; - padding-bottom: 10px; - } - - #mySearch { - height: 5rem; - width: 30rem; - font-size: 1.6rem; - } -} - -@media only screen and (max-width: 768px) { - .nav-menu { - position: fixed; - height: 100vh; - left: -100%; - top: 0rem; - flex-direction: column; - background-color: rgba(26, 9, 46, 0.9); - width: 100%; - border-radius: 10px; - text-align: center; - padding: auto; - transition: 0.3s; - box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); - transition: 0.5s ease-in-out; - } - - .herocontainer { - padding: 40px; - } - - .herocontainer h1 { - font-size: 400%; - padding-bottom: 40px; - } - - .herocontainer h3 { - font-size: 200%; - padding-bottom: 40px; - } - - .herocontainer p { - font-size: 120%; - text-align: center; - } - - .nav-menu.active { - left: 0; - height: 100vh; - backdrop-filter: blur(7px); - transition: 0.5s ease-in-out; - } - - .nav-item { - margin: 3.5rem 0; - font-size: 20px; - } - - nav li:hover { - border-bottom: 0.4rem var(--secondary-color) solid; - transition: 0.3s ease-in-out; - } - - .hamburger { - display: block; - cursor: pointer; - } - - .hamburger.active .bar:nth-child(2) { - opacity: 0; - } - - .hamburger.active .bar:nth-child(1) { - transform: translateY(8px) rotate(45deg); - } - - .hamburger.active .bar:nth-child(3) { - transform: translateY(-8px) rotate(-45deg); - } -} - -@media (max-width: 650px) { - #searchBar input { - width: 100%; - font-size: 1.5rem; - align-items: center; - display: flex; - } - - #searchBar button { - margin-top: 0.5em; - } -} - -@media (min-width:320px) and (max-width:801px) { - #progress { - bottom: 2px; - height: 40px; - width: 40px; - } - - #progress-value { - height: calc(100%-12px); - width: calc(100%-12px); - font-size: 23px; - } - - .footer-basic .social { - padding-bottom: 15px; - } -} - -@media (max-width: 768px) { - .social { - font-size: 2.5rem; - text-decoration: none; - transition: 0.3s ease-in-out; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - gap: 1.5rem; - } - - .footer-container { - margin: 2px 3px; - } - - .company-info, - .quick-links, - .send-message { - margin-top: 8px; - text-align: center; - flex-basis: 100%; - } +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 26, 110, 0.1); + height: 100vh; + flex-direction: column; + background: linear-gradient(-60deg, #F765A3, #A155B9, #165BAA, #0B1354); + +} +section{ + margin-top: 90px; + max-width: 1000px; + width: 50%; + display: inline; + min-height: 300px; +} + +h1{ + font-weight: bolder; + font-size: 80px; + display: inline-block; + position: fixed; + margin-top: -650px; +} +h2{ + font-size: 30px; + margin-bottom: 20px; +} +input[type="radio"]{ + display: none; +} + +div{ + background-color: #fddfdf; + border-radius: 10px; + overflow: hidden; + padding: 20px 45px; + display: flex; + justify-content: center; + align-items: center; +} +label{ + padding: 10px 45px; + background-color: #F9D1D1; + border-radius: 5px; + color: #000; + cursor: pointer; + font-size: 20px; + transition: .4s; + margin: 10px 0px 5px; +} +.tab-content{ + display: none; + margin: 20px 0; + height: auto; + padding: auto; +} + +.tab-content .label-text{ + font-size: 19px; +} +input[type="radio"]:checked+label{ + background-color: #FFA4B6; + color: #fff; +} +#tab1:checked~#content1, +#tab2:checked~#content2, +#tab3:checked~#content3{ + display: block; +} + +button{ + margin: 15px 0px; + width: 55%; + padding: 10px; + border-radius: 8px; + border: none; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; + align-items: center; + display: block; + cursor: pointer; + font-weight: bold; + background-color: #fff; +} +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +input{ + display: block; + border: none; + line-height: 22px; + padding: 5px; + font-size: 15px; + border-radius: 2px; + width: 80%; + margin: 5px 0; +} + +.tab-content label{ + padding: 0; + font-size: 16px; + background-color: transparent; + display: block; +} + +.note{ + margin-bottom: 5px; + font-size: 15px; +} +span{ + display: block; } \ No newline at end of file