feat: init

good-gis · Jun 15, 2024 · 8655f9c · 8655f9c
commit 8655f9c
Show file tree

Hide file tree

Showing 9 changed files with 240 additions and 0 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/Progress Steps.iml b/.idea/Progress Steps.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/README.md b/README.md
@@ -0,0 +1,43 @@
+# Progress Steps Project
+
+Welcome to the Progress Steps Project! This project demonstrates the creation of progress steps using CSS, HTML, and JavaScript. Progress steps are commonly seen in multi-level forms, shopping carts, and similar applications.
+
+![Progress Steps](https://example.com/progress-steps.png)
+
+## Features
+
+- **CSS Styling**: Elegant and responsive design.
+- **HTML Structure**: Semantic and accessible markup.
+- **JavaScript Functionality**: Interactive steps with progress bar.
+
+## Installation
+
+To get started, simply clone the repository and open the `index.html` file in your browser.
+
+```bash
+git clone https://github.com/yourusername/progress-steps.git
+cd progress-steps
+open index.html
+```
+
+## Usage
+
+Modify the HTML, CSS, and JavaScript files to fit your needs. The basic structure includes:
+
+- `index.html`: The main HTML file containing the structure of the progress steps.
+- `styles.css`: The CSS file for styling the progress steps.
+- `scripts.js`: The JavaScript file for adding interactivity to the progress steps.
+
+## Code Structure
+
+Here's an overview of the project structure:
+
+```
+progress-steps/
+│
+├── index.html
+├── styles.css
+└── scripts.js
+```
+
+This project is a great starting point for implementing progress steps in your web applications. Enjoy building! 😄
diff --git a/demo/img.png b/demo/img.png
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+    <title>Progress Steps</title>
+</head>
+<body>
+    <div class="container">
+        <div class="progress-container">
+            <div class="progress" id="progress"></div>
+            <div class="circle active">1</div>
+            <div class="circle">2</div>
+            <div class="circle">3</div>
+            <div class="circle">4</div>
+        </div>
+
+        <button class="btn" id="prev" disabled>Prev</button>
+        <button class="btn" id="next">Next</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
+
diff --git a/script.js b/script.js
@@ -0,0 +1,41 @@
+const progress = document.getElementById('progress');
+const prev = document.getElementById('prev');
+const next = document.getElementById('next');
+const circles = document.querySelectorAll('.circle');
+
+let currentActive = 1;
+
+next.addEventListener('click', () => {
+    currentActive++;
+    if (currentActive > circles.length) {
+        currentActive = circles.length;
+    }
+
+    update();
+});
+
+prev.addEventListener('click', () => {
+    currentActive--;
+    if (currentActive < 1) {
+        currentActive = 1;
+    }
+
+    update();
+});
+
+
+function update() {
+    circles.forEach((circle, index) => {
+        if (index < currentActive) {
+            circle.classList.add('active')
+        } else {
+            circle.classList.remove('active')
+        }
+    });
+
+    const actives = document.querySelectorAll('.active');
+    progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 99.9 + '%';
+
+    prev.disabled = currentActive === 1;
+    next.disabled = currentActive === circles.length;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,99 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400&display=swap');
+
+* {
+    box-sizing: border-box;
+}
+
+:root {
+    --line-border-fill: #6600ff;
+    --line-border-empty: rgba(102, 0, 255, 0.09);
+}
+
+body {
+    background-color: #ffffff;
+    font-family: 'Fira Sans', 'sans-serif';
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    overflow: hidden;
+    margin: 0;
+}
+
+.container {
+    text-align: center;
+}
+
+.progress-container {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    margin-bottom: 30px;
+    max-width: 100%;
+    width: 350px;
+}
+
+.progress-container::before {
+    content: '';
+    background-color: var(--line-border-empty);
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 4px;
+    width: 100%;
+    transform: translateY(-50%);
+    z-index: -1;
+}
+
+.progress {
+    background-color: var(--line-border-fill);
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 4px;
+    width: 0;
+    transform: translateY(-50%);
+    z-index: -1;
+    transition: 0.4s ease;
+}
+
+.circle {
+    background-color: #fff;
+    color: #999;
+    border-radius: 50%;
+    height: 30px;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 3px solid var(--line-border-empty);
+    transition: 0.4s ease;
+}
+
+.circle.active {
+    border-color: var(--line-border-fill);
+}
+
+.btn {
+    background-color: var(--line-border-fill);
+    color: #fff;
+    border: 0;
+    border-radius: 6px;
+    cursor: pointer;
+    padding: 8px 30px;
+    margin: 5px;
+    font-size: 14px;
+}
+
+.btn:active {
+    transform: scale(0.98);
+}
+
+.btn:focus {
+    outline: 0;
+}
+
+.btn:disabled {
+    background-color: var(--line-border-empty);
+    cursor: not-allowed;
+}