From 03da8442dd47fc388a475b5f37acd8db532a38eb Mon Sep 17 00:00:00 2001 From: stasyzar Date: Wed, 11 Jun 2025 23:18:59 +0300 Subject: [PATCH 01/10] Make main window --- .idea/.gitignore | 8 ++ .idea/JS_Template.iml | 9 +++ .idea/misc.xml | 6 ++ .idea/modules.xml | 8 ++ .idea/vcs.xml | 6 ++ index.html | 82 +++++++++++++++++++++ style/style.css | 165 ++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 284 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/JS_Template.iml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/JS_Template.iml b/.idea/JS_Template.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/JS_Template.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..6f29fee --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..8811d7b --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 09c6dc0..26e6abb 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,88 @@ +
+
+

Create Poll

+ +
+
+ + +
+ +
+
What is your favorite programming language?
+
+ JavaScript +
+
+
+ 45% +
+
+ Python +
+
+
+ 45% +
+
+ Java +
+
+
+ 35% +
+
+ C++ +
+
+
+ 3% +
+
150 votes
+
+ +
+
Which social media platform do you use the most?
+
+ Facebook +
+
+
+ 35% +
+
+ Twitter +
+
+
+ 25% +
+
+ Instagram +
+
+
+ 30% +
+
+ LinkedIn +
+
+
+ 10% +
+
180 votes
+
+
\ No newline at end of file diff --git a/style/style.css b/style/style.css index e69de29..7d97e13 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,165 @@ +:root { + --blue--: #4378d8; + --blue--hover: #275cbe; +} + + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background-color: #f5f5f5; + padding: 20px; + line-height: 1.6; +} + +.container { + max-width: 800px; + margin: 0 auto; +} + +.create-poll-header { + background: var(--blue--); + color: white; + padding: 20px; + border-radius: 12px; + margin-bottom: 20px; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 4px 12px rgba(0,0,0,0.25); +} + +.create-poll-btn { + background: var(--blue--); + /*border: none;*/ + border: var(--blue--); + color: white; + padding: 12px 24px; + border-radius: 8px; + cursor: pointer; + font-size: 30px; + font-weight: 500; + transition: all 0.3s ease; +} + +.create-poll-btn:hover { + background: var(--blue--hover); + border: var(--blue--hover); + transform: translateY(-2px); +} + +.search-bar { + background: white; + border-radius: 12px; + border: 2px solid #e0e0e0; + padding: 4px; + margin-bottom: 20px; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + display: flex; + gap: 15px; +} + +.search-input { + flex: 1; + padding: 12px 20px; + border: none; + border-radius: 8px 0 0 8px; + font-size: 25px; + outline: none; + background: transparent; +} + +.search-bar:focus-within { + border-color: var(--blue--); +} + +.category-dropdown { + padding: 12px ; + border: none; + border-radius: 0 8px 8px 0; + font-size: 25px; + background: white; + cursor: pointer; + min-width: 150px; + outline: none; +} + +.poll-card { + background: white; + border-radius: 12px; + border: 2px solid #e0e0e0; + padding: 24px; + margin-bottom: 20px; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.poll-card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(0,0,0,0.15); +} + +.poll-title { + font-size: 25px; + font-weight: 600; + color: #333; + margin-bottom: 20px; +} + +.poll-option { + display: flex; + align-items: center; + margin-bottom: 12px; + cursor: pointer; + padding: 8px; + border-radius: 8px; + transition: background-color 0.3s ease; +} + +.option-label { + font-size: 20px; + font-weight: 500; + color: #333; + width: 120px; + flex-shrink: 0; + text-align: left; +} + +.progress-container { + flex: 1; + margin: 0 20px; + background-color: white; + border-radius: 20px; + height: 8px; + position: relative; + overflow: hidden; +} + +.progress-bar { + height: 100%; + background: linear-gradient(90deg, #4285f4, #5b9bd5); + border-radius: 20px; + transition: width 0.6s ease; + position: relative; +} + +.percentage { + font-size: 20px; + font-weight: 600; + color: black; + min-width: 50px; + text-align: right; +} + +.vote-count { + text-align: right; + color: gray; + font-size: 20px; + margin-top: 15px; + font-weight: 500; +} \ No newline at end of file From a109b15aa2121e219cd3f32e96cc48883a736688 Mon Sep 17 00:00:00 2001 From: stasyzar Date: Wed, 11 Jun 2025 23:53:11 +0300 Subject: [PATCH 02/10] Make create_new_poll window --- create_new_poll.html | 35 ++++++++++++++ style/style.css | 9 ++-- style/style2.css | 112 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 152 insertions(+), 4 deletions(-) create mode 100644 create_new_poll.html create mode 100644 style/style2.css diff --git a/create_new_poll.html b/create_new_poll.html new file mode 100644 index 0000000..fe53692 --- /dev/null +++ b/create_new_poll.html @@ -0,0 +1,35 @@ + + + + + + Create new poll + + + + +
+

Create Poll

+ +
+
+ + +
+ +
+ +
+ + + + +
+ Add option +
+ + +
+
+ + \ No newline at end of file diff --git a/style/style.css b/style/style.css index 7d97e13..44b0ceb 100644 --- a/style/style.css +++ b/style/style.css @@ -1,9 +1,9 @@ :root { --blue--: #4378d8; --blue--hover: #275cbe; + --border_color_white--: #e0e0e0; } - * { margin: 0; padding: 0; @@ -56,7 +56,7 @@ body { .search-bar { background: white; border-radius: 12px; - border: 2px solid #e0e0e0; + border: 2px solid var(--border_color_white--); padding: 4px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); @@ -92,7 +92,7 @@ body { .poll-card { background: white; border-radius: 12px; - border: 2px solid #e0e0e0; + border: 2px solid var(--border_color_white--); padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); @@ -162,4 +162,5 @@ body { font-size: 20px; margin-top: 15px; font-weight: 500; -} \ No newline at end of file +} + diff --git a/style/style2.css b/style/style2.css new file mode 100644 index 0000000..f42d7f0 --- /dev/null +++ b/style/style2.css @@ -0,0 +1,112 @@ +:root { + --blue--: #4378d8; + --blue--hover: #275cbe; + --border_color_white--: #e0e0e0; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background-color: #f0f0f0; + padding: 20px; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.container { + background: white; + border-radius: 12px; + padding: 40px; + width: 100%; + max-width: 500px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + margin-bottom: 40px; + font-size: 2.5rem; + /*color: #333;*/ + /*font-weight: 600;*/ +} + +.form-group { + margin-bottom: 30px; +} + +label { + display: block; + font-size: 25px; + color: #333; + margin-bottom: 12px; + font-weight: 500; +} + +input[type="text"] { + width: 100%; + padding: 16px; + border: 2px solid var(--border_color_white--); + border-radius: 8px; + font-size: 20px; + transition: all 0.3s ease; +} + +input[type="text"]:focus { + outline: none; + border-color: #4285f4; + background-color: white; +} + +.options-container { + display: flex; + flex-direction: column; + gap: 12px; +} + +.option-input { + width: 100%; + padding: 16px; + border: 2px solid #e0e0e0; + border-radius: 8px; + font-size: 20px; + background-color: #fafafa; + transition: all 0.3s ease; +} + +.add-option { + color: var(--blue--); + font-size: 20px; + text-decoration: none; + margin-top: 8px; + display: inline-block; + font-weight: 500; +} + +.add-option:hover { + text-decoration: underline; +} + +.create-btn { + width: 100%; + padding: 16px; + background-color: var(--blue--); + color: white; + border: none; + border-radius: 8px; + font-size: 25px; + font-weight: 500; + cursor: pointer; + margin-top: 10px; + transition: background-color 0.3s ease; +} + +.create-btn:hover { + background-color: var(--blue--hover); +} From db06cb973acd01a466c109521939a9c9bbf5df67 Mon Sep 17 00:00:00 2001 From: stasyzar Date: Thu, 12 Jun 2025 00:11:05 +0300 Subject: [PATCH 03/10] Made Vote window --- style/style3.css | 140 +++++++++++++++++++++++++++++++++++++++++++++++ vote.html | 55 +++++++++++++++++++ 2 files changed, 195 insertions(+) create mode 100644 style/style3.css create mode 100644 vote.html diff --git a/style/style3.css b/style/style3.css new file mode 100644 index 0000000..8caca86 --- /dev/null +++ b/style/style3.css @@ -0,0 +1,140 @@ +:root { + --blue--: #4378d8; + --blue--hover: #275cbe; + --border_color_white--: #e0e0e0; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + background-color: #f0f0f0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 20px; +} + +.poll-container { + background: white; + border-radius: 16px; + padding: 40px; + max-width: 500px; + width: 100%; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + margin-bottom: 40px; + font-size: 2.5rem; + /*color: #333;*/ + /*font-weight: 600;*/ +} + +.question { + font-size: 1.5rem; + text-align: center; + margin-bottom: 40px; +} + +.options { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 40px; +} + +.option { + position: relative; +} + +.option input[type="radio"] { + position: absolute; + opacity: 0; + cursor: pointer; +} + +.option label { + display: flex; + align-items: center; + font-size: 1.25rem; + cursor: pointer; + padding: 15px 20px; + border-radius: 12px; + transition: all 0.3s ease; + border: 2px solid transparent; +} + +.option label:hover { + background-color: #f8f9fa; + border-color: #e9ecef; +} + +.option input[type="radio"]:checked + label { + background-color: #e3f2fd; + border-color: var(--blue--hover); + color: var(--blue--); +} + +.radio-button { + width: 24px; + height: 24px; + border: 2px solid #ccc; + border-radius: 50%; + margin-right: 15px; + position: relative; + transition: all 0.3s ease; +} + +.option input[type="radio"]:checked + label .radio-button { + border-color: var(--blue--hover); + background-color: var(--blue--hover); +} + +.option input[type="radio"]:checked + label .radio-button::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 8px; + height: 8px; + background-color: white; + border-radius: 50%; +} + +.vote-button { + width: 100%; + background-color: var(--blue--); + color: white; + border: none; + border-radius: 12px; + padding: 18px; + font-size: 20px; + font-weight: 500; + cursor: pointer; + transition: all 0.3s ease; +} + +.vote-button:hover { + background-color: var(--blue--hover); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3); +} + +.vote-button:active { + transform: translateY(0); +} + +.vote-button:disabled { + background-color: #ccc; + cursor: not-allowed; + transform: none; + box-shadow: none; +} \ No newline at end of file diff --git a/vote.html b/vote.html new file mode 100644 index 0000000..5712333 --- /dev/null +++ b/vote.html @@ -0,0 +1,55 @@ + + + + + + Vote + + + + +
+
+

Poll Question

+
What is your favorite color?
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+ +
+ + \ No newline at end of file From e0773c7e7cb0918079e24739c2f55e2bdb462225 Mon Sep 17 00:00:00 2001 From: stasyzar Date: Sat, 14 Jun 2025 11:28:35 +0300 Subject: [PATCH 04/10] Male changes in create_new_poll.html --- create_new_poll.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/create_new_poll.html b/create_new_poll.html index fe53692..800fc1d 100644 --- a/create_new_poll.html +++ b/create_new_poll.html @@ -17,6 +17,11 @@

Create Poll

+
+ + +
+
From 50efa06aa00502c0cabf360d5dc847cba51a3785 Mon Sep 17 00:00:00 2001 From: stasyzar Date: Mon, 16 Jun 2025 10:14:00 +0300 Subject: [PATCH 05/10] change popup --- index.html | 228 ++++++++++++++++++++++++++++---------- style/style.css | 278 ++++++++++++++++++++++++++++++++++++++++++++++- style/style2.css | 4 +- style/style3.css | 10 +- vote.html | 2 +- 5 files changed, 456 insertions(+), 66 deletions(-) diff --git a/index.html b/index.html index 26e6abb..def6c17 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,7 @@
-

Create Poll

- + Create Poll
@@ -25,70 +24,187 @@

Create Poll

-
-
What is your favorite programming language?
-
- JavaScript -
-
+
+ +
What is your favorite programming language?
+
+ JavaScript +
+
+
+ 45% +
+
+ Python +
+
+
+ 45% +
+
+ Java +
+
+
+ 35%
- 45% -
-
- Python -
-
+
+ C++ +
+
+
+ 3% +
+
150 votes
+ + + +
Which social media platform do you use the most?
+
+ Facebook +
+
+
+ 35%
- 45% -
-
- Java -
-
+
+ Twitter +
+
+
+ 25%
- 35% -
-
- C++ -
-
+
+ Instagram +
+
+
+ 30% +
+
+ LinkedIn +
+
+
+ 10% +
+
180 votes
+ +
+
+ + + +
-
-
Which social media platform do you use the most?
-
- Facebook -
-
+ + 10%
-
180 votes
+
+
Business
+
180 votes
+
@@ -201,6 +207,7 @@

Create Poll

+ Add option
diff --git a/style/style.css b/style/style.css index 16a71fa..3a89974 100644 --- a/style/style.css +++ b/style/style.css @@ -184,8 +184,21 @@ body { text-align: right; } +.info { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 15px; +} + +.category { + color: gray; + font-size: 20px; + margin-top: 15px; + font-weight: 500; +} + .vote-count { - text-align: right; color: gray; font-size: 20px; margin-top: 15px; diff --git a/style/style2.css b/style/style2.css deleted file mode 100644 index 9afb42f..0000000 --- a/style/style2.css +++ /dev/null @@ -1,114 +0,0 @@ -:root { - --blue--: #4378d8; - --blue--hover: #275cbe; - --border_color_white--: #e0e0e0; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - background-color: #f0f0f0; - padding: 20px; - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; -} - -.container { - background: white; - border-radius: 12px; - padding: 40px; - width: 100%; - max-width: 500px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); - -} - -h1 { - text-align: center; - margin-bottom: 40px; - font-size: 2.5rem; - /*color: #333;*/ - /*font-weight: 600;*/ -} - -.form-group { - margin-bottom: 30px; -} - -label { - display: block; - font-size: 25px; - color: #333; - margin-bottom: 12px; - font-weight: 500; -} - -input[type="text"] { - width: 100%; - padding: 16px; - border: 2px solid var(--border_color_white--); - border-radius: 8px; - font-size: 20px; - transition: all 0.3s ease; -} - -input[type="text"]:focus { - outline: none; - border-color: #4285f4; - background-color: white; -} - -.options-container { - display: flex; - flex-direction: column; - gap: 12px; -} - -.option-input { - width: 100%; - padding: 16px; - border: 2px solid #e0e0e0; - border-radius: 8px; - font-size: 20px; - background-color: #fafafa; - transition: all 0.3s ease; -} - -.add-option { - color: var(--blue--); - font-size: 20px; - text-decoration: none; - margin-top: 8px; - display: inline-block; - font-weight: 500; -} - -.add-option:hover { - text-decoration: underline; -} - -.create-btn { - width: 100%; - padding: 16px; - background-color: var(--blue--); - color: white; - border: none; - border-radius: 8px; - font-size: 25px; - font-weight: 500; - cursor: pointer; - margin-top: 10px; - transition: background-color 0.3s ease; -} - -.create-btn:hover { - background-color: var(--blue--hover); - text-decoration-line: none; -} diff --git a/style/style3.css b/style/style3.css deleted file mode 100644 index baeb7a6..0000000 --- a/style/style3.css +++ /dev/null @@ -1,140 +0,0 @@ -:root { - --blue--: #4378d8; - --blue_hover--: #275cbe; - --border_color_white--: #e0e0e0; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; - background-color: #f0f0f0; - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - padding: 20px; -} - -.poll-container { - background: white; - border-radius: 16px; - padding: 40px; - max-width: 500px; - width: 100%; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); -} - -h1 { - text-align: center; - margin-bottom: 40px; - font-size: 2.5rem; - /*color: #333;*/ - /*font-weight: 600;*/ -} - -.question { - font-size: 1.5rem; - text-align: center; - margin-bottom: 40px; -} - -.options { - display: flex; - flex-direction: column; - gap: 20px; - margin-bottom: 40px; -} - -.option { - position: relative; -} - -.option input[type="radio"] { - position: absolute; - opacity: 0; - cursor: pointer; -} - -.option label { - display: flex; - align-items: center; - font-size: 1.25rem; - cursor: pointer; - padding: 15px 20px; - border-radius: 12px; - transition: all 0.3s ease; - border: 2px solid transparent; -} - -.option label:hover { - background-color: #f8f9fa; - border-color: #e9ecef; -} - -.option input[type="radio"]:checked + label { - background-color: #e3f2fd; - border-color: var(--blue_hover--); - color: var(--blue--); -} - -.radio-button { - width: 24px; - height: 24px; - border: 2px solid #ccc; - border-radius: 50%; - margin-right: 15px; - position: relative; - transition: all 0.3s ease; -} - -.option input[type="radio"]:checked + label .radio-button { - border-color: var(--blue_hover--); - background-color: var(--blue_hover--); -} - -.option input[type="radio"]:checked + label .radio-button::after { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 8px; - height: 8px; - background-color: white; - border-radius: 50%; -} - -.vote-button { - width: 100%; - background-color: var(--blue--); - color: white; - border: none; - border-radius: 12px; - padding: 18px; - font-size: 20px; - font-weight: 500; - cursor: pointer; - transition: all 0.3s ease; -} - -.vote-button:hover { - background-color: var(--blue_hover--); - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3); -} - -.vote-button:active { - transform: translateY(0); -} - -.vote-button:disabled { - background-color: #ccc; - cursor: not-allowed; - transform: none; - box-shadow: none; -} \ No newline at end of file diff --git a/vote.html b/vote.html deleted file mode 100644 index 48f26ce..0000000 --- a/vote.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - Vote - - - - -
-
-

Poll Question

-
What is your favorite color?
- -
-
- - -
- -
- - -
- -
- - -
- -
- - -
-
- - -
- -
- - \ No newline at end of file From 00522d8f93fc5bfbeb0db59d383898d201034f85 Mon Sep 17 00:00:00 2001 From: stasyzar Date: Mon, 16 Jun 2025 21:56:55 +0300 Subject: [PATCH 07/10] add js code(creating new vote form, voting, filter) --- index.html | 170 +++--------------------- src/main.js | 346 ++++++++++++++++++++++++++++++++++++++++++++++++ style/style.css | 44 +++++- 3 files changed, 404 insertions(+), 156 deletions(-) diff --git a/index.html b/index.html index 5a5082d..12ee7ec 100644 --- a/index.html +++ b/index.html @@ -21,167 +21,18 @@ + + +
-
- -
What is your favorite programming language?
-
- JavaScript -
-
-
- 45% -
-
- Python -
-
-
- 45% -
-
- Java -
-
-
- 35% -
-
- C++ -
-
-
- 3% -
-
-
Business
-
150 votes
-
- - -
Which social media platform do you use the most?
-
- Facebook -
-
-
- 35% -
-
- Twitter -
-
-
- 25% -
-
- Instagram -
-
-
- 30% -
-
- LinkedIn -
-
-
- 10% -
-
-
Business
-
180 votes
-
- +
- - - - - +