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 -->
<!-- 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/ReviewCard.css" />
<link rel="stylesheet" href="./static/CreatePage.css" />
<script src="./assets/scripts/CreatePage.js" type="module"></script>
</head>
<body>
<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
<form id="new-food-entry">
<fieldset>
<legend>Pic:</legend>
<label for="mealImage">
Source:
<input type="text" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
Alt Text:
<input type="text" id="imgAlt" name="imgAlt">
</label>
</fieldset>
<fieldset>
<!-- <input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">-->
<div class ="Top-Bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" />
<h1> Food Journal </h1>
<!--
<form id="form">
<input type='search' id="seaching" name="searchBar" placeholder="Search journal...">
<button class="click" type="search">
Search
</button>
</form>
--->
</div>
<div class="journal-form">
<h1>New Entry </h1>
<legend> Meal: </legend>
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<form id="new-food-entry">
<fieldset>
<legend>Pic:</legend>
<label for="mealImage">
Source:
<input type="text" id="mealImg" name="mealImg">
</label>
<label for="image-alt">
Alt Text:
<input type="text" id="imgAlt" name="imgAlt">
</label>
</fieldset>
<fieldset>
<fieldset class="rating">
<legend> Rating: </legend>
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5"> 5 stars </label>
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4"> 4 stars </label>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3"> 3 stars </label>
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2"> 2 stars </label>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1"> 1 star </label>
</fieldset>
<legend> Meal: </legend>
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<fieldset>
<legend>Other Info:</legend>
<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 class="rating">
<legend> Rating: </legend>
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5"> 5 stars </label>
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4"> 4 stars </label>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3"> 3 stars </label>
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2"> 2 stars </label>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1"> 1 star </label>
</fieldset>
</div>
<button type="button" id="tagAdd">Add Tag</button>
</label>
<fieldset>
<legend>Other Info:</legend>
<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>
<button type="submit" id="save-btn" value="Submit">Save Review</button>
</form>
</div>
<button type="button" id="tagAdd">Add Tag</button>
</label>
</fieldset>
<button type="submit" id="save-btn" value="Submit">Save Review</button>
</form>
</div>
</body>
</html>

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,83 +1,37 @@
/* CreatePage.css */
* {
font-family: sans-serif;
body{
background-color: #13323b;
}
body {
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;
h1 {
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 {
color: red;
}
.danger {
background-color: rgb(254 171 171);
border-color: red;
}
.journal-form {
font-size: 120%;
width: 50%;
display: block;
margin: auto;
color: #ccb3bb;
border: 3px solid rgb(7, 0, 0);
background-color: #b52754;
}