testing images

Co-authored-by: d7hernan <d7hernan@users.noreply.github.com>
This commit is contained in:
Gavyn Ezell 2022-11-19 11:19:57 -08:00
parent 1379c22f6f
commit 23ae101f56
5 changed files with 94 additions and 124 deletions

View File

@ -14,64 +14,80 @@
<!-- Main Stylesheets & Scripts --> <!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config--> <!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> --> <!-- <link rel="stylesheet" href="/static/reset.css" /> -->
<link rel="stylesheet" href="./static/ReviewCard.css" /> <link rel="stylesheet" href="./static/CreatePage.css" />
<script src="./assets/scripts/CreatePage.js" type="module"></script> <script src="./assets/scripts/CreatePage.js" type="module"></script>
</head> </head>
<body> <body>
<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')"> <!-- <input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">-->
<form id="new-food-entry"> <div class ="Top-Bar">
<fieldset> <img src ="./assets/images/icons/Logo.png" alt="logo" />
<legend>Pic:</legend> <h1> Food Journal </h1>
<label for="mealImage"> <!--
Source: <form id="form">
<input type="text" id="mealImg" name="mealImg"> <input type='search' id="seaching" name="searchBar" placeholder="Search journal...">
</label> <button class="click" type="search">
<label for="image-alt"> Search
Alt Text: </button>
<input type="text" id="imgAlt" name="imgAlt"> </form>
</label> --->
</fieldset> </div>
<fieldset> <div class="journal-form">
<h1>New Entry </h1>
<legend> Meal: </legend> <form id="new-food-entry">
<label for="Meal: ">Meal: <fieldset>
<input type="text" id="mealName" name="mealName" required> <legend>Pic:</legend>
</label> <label for="mealImage">
<label for="comments">Comments: Source:
<br> <input type="text" id="mealImg" name="mealImg">
<textarea name="comments" id="comments"></textarea> </label>
</label> <label for="image-alt">
</fieldset> Alt Text:
<input type="text" id="imgAlt" name="imgAlt">
</label>
</fieldset>
<fieldset>
<fieldset class="rating"> <legend> Meal: </legend>
<legend> Rating: </legend> <label for="Meal: ">Meal:
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5"> 5 stars </label> <input type="text" id="mealName" name="mealName" required>
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4"> 4 stars </label> </label>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3"> 3 stars </label> <label for="comments">Comments:
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2"> 2 stars </label> <br>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1"> 1 star </label> <textarea name="comments" id="comments"></textarea>
</fieldset> </label>
</fieldset>
<fieldset> <fieldset class="rating">
<legend>Other Info:</legend> <legend> Rating: </legend>
<label for="restaurant"> <input type="radio" id="s5" name="rating" value="5"/> <label for="s5"> 5 stars </label>
Restaurant: <input type="radio" id="s4" name="rating" value="4"/> <label for="s4"> 4 stars </label>
<input type="text" id="restaurant" name="restaurant" required> <input type="radio" id="s3" name="rating" value="3"/> <label for="s3"> 3 stars </label>
</label> <input type="radio" id="s2" name="rating" value="2"/> <label for="s2"> 2 stars </label>
<label for="tag-form"> <input type="radio" id="s1" name="rating" value="1"/> <label for="s1"> 1 star </label>
Tags: </fieldset>
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div> <fieldset>
<button type="button" id="tagAdd">Add Tag</button> <legend>Other Info:</legend>
</label> <label for="restaurant">
Restaurant:
<input type="text" id="restaurant" name="restaurant" required>
</label>
<label for="tag-form">
Tags:
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</fieldset> </div>
<button type="submit" id="save-btn" value="Submit">Save Review</button> <button type="button" id="tagAdd">Add Tag</button>
</form> </label>
</fieldset>
<button type="submit" id="save-btn" value="Submit">Save Review</button>
</form>
</div>
</body> </body>
</html> </html>

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,83 +1,37 @@
/* CreatePage.css */ /* CreatePage.css */
* { body{
font-family: sans-serif; background-color: #13323b;
} }
body { h1 {
height: 100%;
width: 100%;
}
fieldset {
border: 2px solid rgb(214 214 214);
box-sizing: border-box;
display: block;
width: max-content;
}
form button {
display: block;
margin-top: 5px;
}
label[for="ingredients"] p {
margin: 0;
}
label[for="numRatings"] {
margin: 10px 0 0;
}
label[for^="rating"] {
padding-right: 10px;
}
label:not([for^="rating"]) {
display: block;
margin-bottom: 5px;
}
main {
column-gap: 10px;
display: flex;
flex-wrap: wrap;
height: auto;
max-width: 660px;
row-gap: 10px;
width: 100%;
}
.tag-container {
display: flex;
flex-flow: row wrap;
}
.tag {
background-color: grey;
border-radius: 7px;
color: white;
padding-right: 7px;
padding-left: 7px;
margin: 3px;
}
.tag::before {
display: inline-block;
content: "x";
height: 15px;
width: 15px;
margin-right: 4px;
text-align: center; text-align: center;
color: white; }
cursor: pointer; .Top-Bar{
margin-top: -8cm;
}
.Top-Bar > img{
position: relative;
top: 7.85cm;
}
.Top-Bar > h1{
position: relative;
top: 2.2cm;
font-size: 3cm;
color: #EAA9BC
}
.Top-Bar > form{
position: relative;
left: 32cm;
} }
.tag:hover::before { .journal-form {
color: red; font-size: 120%;
} width: 50%;
display: block;
.danger { margin: auto;
background-color: rgb(254 171 171); color: #ccb3bb;
border-color: red; border: 3px solid rgb(7, 0, 0);
} background-color: #b52754;
}