diff --git a/client/Make_Suggestion_Code/makeSuggestion.css b/client/Make_Suggestion_Code/makeSuggestion.css index 644d3c84f442978081581bc1dffa4083f49a192c..0d203150d0ac011d08be442db01f4f302ba09566 100644 --- a/client/Make_Suggestion_Code/makeSuggestion.css +++ b/client/Make_Suggestion_Code/makeSuggestion.css @@ -1,90 +1,98 @@ -.filter { - margin-left: 2%; - margin-top: 1%; -} - -.filterFont { - font-family: 'Gill Sans MT'; - font-size: 200%; - margin-left: 3%; -} +/* .filterFont { + font-family: "Roboto", sans-serif; + margin-left: 5%; +} */ .makeSuggestionFilterButtons { - text-align: left; - margin-left: 3%; - margin-bottom: 5%; + margin-left: 5%; + margin-bottom: 1%; } -.filterButtonsLabel { - text-align: center; - display: inline-block; - border-radius: 10px 0px 0px 10px; - color: #ffffff; - background: linear-gradient(to right, #bc57ad 12%, #ca41b3 25%, #b72fa5 50%, #a71c94 75%); - font-family: 'Gill Sans MT'; - font-size: 21px; - width: 150px; - height: 32px; - padding-top: 7px; -} - -.filterButtons { - border-radius: 0px 10px 10px 0px; - color: #ffffff; - background: linear-gradient(to right, #a1188c 12%, #92157d 25%, #6d0e60 50%, #4e0b45 75%); - cursor: pointer; - font-family: 'Gill Sans MT'; - font-size: 19.75px; - text-align: center; - width: 150px; - height: 40px; +.filter { + background-image: linear-gradient( + to right, + rgb(201, 164, 213), + rgb(162, 88, 202) + ); + padding: 8px; + color: #fffafa; + font-weight: 1700; + border-radius: 8px; + margin-right: 3%; + width: 12%; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: medium; + text-align: center; } #middleFilterButtonLabel { - margin-left: 2.5%; + margin-left: 2.5%; } #selectSection { - margin-right: 2.5%; + margin-right: 2.5%; } -.option { - color: black; -} +/* .option { + color: black; +} */ #suggestionQuestion { - font-size: 20px; + font-size: 20px; + margin: 0%; } .shadowText { - text-align: left; - margin-top: 5%; - margin-bottom: 10%; - margin-left: 10%; - max-width: 28%; + display: flex; + align-items: center; + text-align: left; + vertical-align: middle; + width: 40%; + padding: 5%; } #suggestionCard { - width: 78%; - margin-top: 1%; - margin-left: 5%; - border: 1px solid rgb(246, 144, 255); - border-radius: 5px; - align-items: right; + width: 78%; + margin-top: 1%; + margin-left: 5%; + border: 1px solid rgb(246, 144, 255); + border-radius: 5px; + align-items: right; } .inputBox { - align-items: right; - margin-left: 27.5%; - margin-right: 0%; + /* align-items: right; */ + margin-left: 8%; + margin-right: 0%; + width: 100%; } .inputBoxForm { - text-align: center; - background-color: transparent; - height: 168px; - width: 200%; - border: none; - border-radius: 5px; + text-align: left; + background-color: transparent; + height: 100%; + width: 98%; + border: none; + border-radius: 5px; + padding-left: 2%; } +#suggestion-button { + background-image: linear-gradient( + to right, + rgb(201, 164, 213), + rgb(162, 88, 202) + ); + padding: 6px; + color: #fffafa; + font-weight: 1700; + border-radius: 8px; + width: 10%; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: medium; + text-align: center; + margin-left: 5%; + margin-top: 1%; +} diff --git a/client/Make_Suggestion_Code/makeSuggestion.html b/client/Make_Suggestion_Code/makeSuggestion.html index 0ab25e6010d5ea6339ae582fe777e47f580eaeac..bde358efdfc072f98e1de6925255040fa849ab44 100644 --- a/client/Make_Suggestion_Code/makeSuggestion.html +++ b/client/Make_Suggestion_Code/makeSuggestion.html @@ -2,45 +2,58 @@ <html lang="en"> <html> <head> - <link rel="stylesheet" href="/Make_Suggestion_Code/makeSuggestion.css" /> - <link rel="stylesheet" href="/Activity_card_code/activitity_card.css" /> + <meta charset="UTF-8" /> + <link rel="stylesheet" href="Make_Suggestion_Code/makeSuggestion.css" /> + <link rel="stylesheet" href="Activity_card_code/activitity_card.css" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" + rel="stylesheet" + /> + <title>Make Suggestion</title> </head> <body> - <script src="/dist/makeSuggestion.bundle.js" type="module"></script> + <script src="../../dist/makeSuggestion.bundle.js" type="module"></script> <div id="suggestionPage"> - <div class="filter"> - <p class="filterFont" id="makeSuggestionDivision">Division</p> + <div class="filter-section"> + <!-- <p class="filterFont" id="filter-font"> + Fyll i vårdinstans och avdelning som förslaget gäller + </p> --> <div class="makeSuggestionFilterButtons"> - <label for="department" class="filterButtonsLabel" - >Department: - </label> - <select - name="department" - id="selectDepartment" - class="filterButtons" - > + <select class="filter" id="CareFacilityDropdown"> + <option value="all">Vårdinstans</option> <!-- Options will be added dynamically here --> </select> - <label - for="section" - class="filterButtonsLabel" - id="middleFilterButtonLabel" - >Section: - </label> - <select name="section" id="selectSection" class="filterButtons"> + <select class="filter" id="departmentDropdown"> + <option value="all">Avdelningar</option> <!-- Options will be added dynamically here --> </select> + </div> + </div> - <label for="type" class="filterButtonsLabel">Type: </label> - <select name="type" id="selectDepartment" class="filterButtons"> - <option value="option1" class="option">Option 1</option> - <option value="option2" class="option">Option 2</option> - <option value="option3" class="option">Option 3</option> - </select> + <!-- <p class="filterFont" id="filter-font"> + Fyll i mer information om ditt förslag + </p> --> + <div class="activityCard" id="suggestionCard"> + <div class="activityCardBorder"> + <div class="shadowText"> + <p id="suggestionQuestion" class="activityCardFont">Rubrik</p> + </div> + <div class="inputBox"> + <form action="/url" method="POST" class="inputBoxForm"> + <input + type="text" + class="inputBoxForm" + id="inputBoxFormNameInput" + placeholder="Vad vill du kalla ditt förslag?" + /> + </form> + </div> </div> </div> @@ -52,12 +65,12 @@ </p> </div> <div class="inputBox"> - <form action="/url" method="POST" id="inputBoxFormName"> + <form action="/url" method="POST" class="inputBoxForm"> <input type="text" class="inputBoxForm" id="inputBoxFormNameInput" - placeholder="Berätta om din förbättring och vilket område det hade förbättrat." + placeholder="Berätta om område ditt förslag hade förbättrat." /> </form> </div> @@ -67,17 +80,15 @@ <div class="activityCard" id="suggestionCard"> <div class="activityCardBorder"> <div class="shadowText" id="middleShadowText"> - <p id="suggestionQuestion" class="activityCardFont"> - Hur kan förbättringen implementeras? - </p> + <p id="suggestionQuestion" class="activityCardFont">Bakgrund</p> </div> <div class="inputBox"> - <form action="/url" method="POST" id="inputBoxFormContent"> + <form action="/url" method="POST" class="inputBoxForm"> <input type="text" class="inputBoxForm" id="inputBoxFormContentInput" - placeholder="Skriv hur du tror att förbättringen implementeras på bästa sätt." + placeholder="Beskriv problemet" /> </form> </div> @@ -92,20 +103,58 @@ </p> </div> <div class="inputBox"> - <form action="/url" method="POST" id="inputBoxFormPurpose"> + <form action="/url" method="POST" class="inputBoxForm"> + <input + type="text" + class="inputBoxForm" + id="inputBoxFormPurposeInput" + placeholder="Vad ska åstadkommas och varför? Kom ihåg att få med patientperspektivet" + /> + </form> + </div> + </div> + </div> + + <div class="activityCard" id="suggestionCard"> + <div class="activityCardBorder"> + <div class="shadowText"> + <p id="suggestionQuestion" class="activityCardFont"> + Hur ska det mätas? + </p> + </div> + <div class="inputBox"> + <form action="/url" method="POST" class="inputBoxForm"> + <input + type="text" + class="inputBoxForm" + id="inputBoxFormPurposeInput" + placeholder="Hur vet vi att en förändring är en förbättring?" + /> + </form> + </div> + </div> + </div> + + <div class="activityCard" id="suggestionCard"> + <div class="activityCardBorder"> + <div class="shadowText"> + <p id="suggestionQuestion" class="activityCardFont">Idéer</p> + </div> + <div class="inputBox"> + <form action="/url" method="POST" class="inputBoxForm"> <input type="text" class="inputBoxForm" id="inputBoxFormPurposeInput" - placeholder="Berätta vad du tror att förbättringen kommer leda till och hur det skulle förbättra..." + placeholder="Vilka förändringar kan prövas för att uppnå en förbättring?" /> </form> </div> </div> </div> - <div class="submitButton" id="suggestionButton"> - <button>Submit</button> + <div class="submitButton"> + <button id="suggestion-button">Submit</button> </div> <div id="message"></div> </div> diff --git a/server/main.py b/server/main.py index 757f55d4a14520e3b1e998de51d6d08ed769016c..8f357f1b27705ac0aa69d4246b026177b008028b 100644 --- a/server/main.py +++ b/server/main.py @@ -4,7 +4,7 @@ app = Flask(__name__, static_folder='../client/', static_url_path='/') @app.route("/") def client(): - return app.send_static_file("ideaBank.html") + return app.send_static_file("Make_Suggestion_Code/makeSuggestion.html") if __name__ == "__main__": app.run(port=5001, debug=True)