From b6eb87eeec76cfa4b73eef8fcfa68bece64092bc Mon Sep 17 00:00:00 2001 From: Serheiev Maksym <01022019serf@gmail.com> Date: Mon, 16 Jun 2025 11:03:51 +0300 Subject: [PATCH 1/4] LAb4 --- index.html | 270 +++++++++++++++++++++++++++++++++++- style/style.css | 358 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 627 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 09c6dc0..bbc0b28 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,279 @@ - Simple HTML Page + Vote-vote-vote +
+
+ +
+
+ + +
+
+
+

Яка ваша улюблена мова програмування?

+
+
+ JavaScript +
+
+
+ 35% +
+
+ Python +
+
+
+ 40% +
+
+ Java +
+
+
+ 20% +
+
+ C++ +
+
+
+ 5% +
+
+
150 голосів
+
+
+

Якою соціальною мережею ви користуєтесь найбільше?

+
+
+ Facebook +
+
+
+ 35% +
+
+ Twitter +
+
+
+ 25% +
+
+ Instagram +
+
+
+ 30% +
+
+ LinkedIn +
+
+
+ 10% +
+
+
180 голосів
+
+
+

Який ваш улюблений колір?

+
+
+ Синій +
+
+
+ 40% +
+
+ Зелений +
+
+
+ 30% +
+
+ Червоний +
+
+
+ 20% +
+
+ Жовтий +
+
+
+ 10% +
+
+
95 голосів
+
+
+
+ + + + \ No newline at end of file diff --git a/style/style.css b/style/style.css index e69de29..b80f080 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,358 @@ + * { + 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: 900px; + margin: 0 auto; + } + + .header { + display: flex; + gap: 20px; + margin-bottom: 30px; + justify-content: center; + } + + .create-poll-btn { + background-color: #4285f4; + color: white; + border: none; + padding: 12px 30px; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s; + width: 100%; + } + + .create-poll-btn:hover { + background-color: #3367d6; + } + + .search-section { + display: flex; + gap: 15px; + margin-bottom: 30px; + align-items: center; + } + + .search-input { + flex: 1; + padding: 12px 16px; + border: 1px solid #dadce0; + border-radius: 8px; + font-size: 16px; + outline: none; + transition: border-color 0.2s; + } + + .search-input:focus { + border-color: #4285f4; + } + + .category-select { + padding: 12px 16px; + border: 1px solid #dadce0; + border-radius: 8px; + font-size: 16px; + background-color: white; + cursor: pointer; + outline: none; + min-width: 120px; + } + + .polls-grid { + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + } + + .poll-card { + background: white; + border-radius: 12px; + padding: 24px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + border: 1px solid #e8eaed; + cursor: pointer; + transition: box-shadow 0.2s; + } + + .poll-card:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + } + + .poll-question { + font-size: 18px; + font-weight: 600; + color: #202124; + margin-bottom: 20px; + line-height: 1.4; + } + + .poll-options { + margin-bottom: 16px; + } + + .poll-option { + display: flex; + align-items: center; + margin-bottom: 12px; + gap: 12px; + } + + .option-text { + min-width: 80px; + font-size: 14px; + color: #3c4043; + font-weight: 500; + } + + .progress-bar { + flex: 1; + height: 8px; + background-color: #f1f3f4; + border-radius: 4px; + overflow: hidden; + } + + .progress-fill { + height: 100%; + background-color: #4285f4; + border-radius: 4px; + transition: width 0.3s ease; + } + + .percentage { + font-size: 14px; + color: #3c4043; + font-weight: 500; + min-width: 35px; + text-align: right; + } + + .vote-count { + text-align: right; + font-size: 12px; + color: #5f6368; + margin-top: 8px; + } + + .modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + justify-content: center; + align-items: center; + z-index: 1000; + } + + .modal-content { + background: white; + border-radius: 12px; + padding: 32px; + max-width: 500px; + width: 90%; + max-height: 80vh; + overflow-y: auto; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); + position: relative; + } + + .close-btn { + position: absolute; + top: 15px; + right: 20px; + background: none; + border: none; + font-size: 24px; + cursor: pointer; + color: #5f6368; + padding: 5px; + } + + .close-btn:hover { + color: #202124; + } + + .modal-title { + font-size: 24px; + font-weight: 600; + color: #202124; + margin-bottom: 8px; + text-align: center; + } + + .modal-question { + font-size: 18px; + color: #3c4043; + margin-bottom: 24px; + text-align: center; + font-weight: 400; + } + + .vote-options { + margin-bottom: 24px; + } + + .vote-option { + display: flex; + align-items: center; + padding: 12px 0; + cursor: pointer; + transition: background-color 0.2s; + border-radius: 8px; + padding-left: 8px; + } + + .vote-option:hover { + background-color: #f8f9fa; + } + + .vote-radio { + width: 20px; + height: 20px; + margin-right: 12px; + cursor: pointer; + } + + .vote-text { + font-size: 16px; + color: #3c4043; + cursor: pointer; + } + + .vote-btn { + width: 100%; + background-color: #4285f4; + color: white; + border: none; + padding: 14px; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s; + } + + .vote-btn:hover { + background-color: #3367d6; + } + + .form-group { + margin-bottom: 24px; + } + + .form-label { + display: block; + font-size: 16px; + font-weight: 500; + color: #3c4043; + margin-bottom: 8px; + } + + .form-input { + width: 100%; + padding: 12px 16px; + border: 1px solid #dadce0; + border-radius: 8px; + font-size: 16px; + outline: none; + transition: border-color 0.2s; + } + + .form-input:focus { + border-color: #4285f4; + } + + .option-input { + margin-bottom: 12px; + } + + .add-option-btn { + color: #4285f4; + background: none; + border: none; + font-size: 14px; + cursor: pointer; + font-weight: 500; + padding: 8px 0; + } + + .add-option-btn:hover { + text-decoration: underline; + } + + .create-btn { + width: 100%; + background-color: #4285f4; + color: white; + border: none; + padding: 14px; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: background-color 0.2s; + } + + .create-btn:hover { + background-color: #3367d6; + } + + @media (max-width: 768px) { + .container { + padding: 0 10px; + } + + .header { + flex-direction: column; + align-items: center; + } + + + .polls-grid { + grid-template-columns: 1fr; + } + + .poll-card { + padding: 20px; + } + + .modal-content { + padding: 24px; + margin: 20px; + } + + .poll-option { + flex-direction: column; + align-items: flex-start; + gap: 8px; + width: 100%; + } + + .progress-bar { + width: 100%; + flex: none; + } + + .percentage { + align-self: flex-end; + width: 100%; + text-align: right; + } + } \ No newline at end of file From 5c490cdc76cdc1f8382f9093ae51b757d3ac1812 Mon Sep 17 00:00:00 2001 From: Serheiev Maksym <01022019serf@gmail.com> Date: Mon, 23 Jun 2025 03:44:34 +0300 Subject: [PATCH 2/4] done lab5 --- index.html | 247 ++------------ polls.json | 98 ++++++ src/main.js | 428 ++++++++++++++++++++++++ style/style.css | 850 ++++++++++++++++++++++++++++-------------------- 4 files changed, 1041 insertions(+), 582 deletions(-) create mode 100644 polls.json diff --git a/index.html b/index.html index bbc0b28..942c098 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,10 @@ - + - Vote-vote-vote - - + Голосування +
@@ -13,144 +12,45 @@
- - -
-
-
-

Яка ваша улюблена мова програмування?

-
-
- JavaScript -
-
-
- 35% -
-
- Python -
-
-
- 40% -
-
- Java -
-
-
- 20% -
-
- C++ -
-
-
- 5% -
-
-
150 голосів
-
-
-

Якою соціальною мережею ви користуєтесь найбільше?

-
-
- Facebook -
-
-
- 35% -
-
- Twitter -
-
-
- 25% -
-
- Instagram -
-
-
- 30% -
-
- LinkedIn -
-
-
- 10% -
-
-
180 голосів
-
-
-

Який ваш улюблений колір?

-
-
- Синій -
-
-
- 40% -
-
- Зелений -
-
-
- 30% -
-
- Червоний -
-
-
- 20% -
-
- Жовтий -
-
-
- 10% -
-
-
95 голосів
+
+ + +
+
+ +