Draft of page design

This commit is contained in:
2021-01-18 15:53:30 +01:00
parent cc607be3dd
commit a73736b237
3 changed files with 119 additions and 4 deletions

View File

@@ -0,0 +1,67 @@
#container {
width: 950px;
margin-left: auto;
margin-right: auto;
min-height: 1900px;
background: white;
}
#toolName {
width: 850px;
font-weight: 400;
font-size: 64px;
text-align: center;
padding: 50px;
}
#itemData {
min-height: 1736px;
float: left;
width: 750px;
font-size: 24px;
}
#link {
width: 750px;
margin-bottom: 40px;
}
#messageLink {
width: 680px;
padding: 10px;
background: lightgray;
border: 1px solid gray;
}
.fieldDefault {
width: 100px;
}
.fieldText {
width: 500px;
height: 296px;
resize: none;
}
#selectMenu {
min-height: 1736px;
float: left;
width: 200px;
}
.label {
margin-bottom: 0px;
font-size: 12px;
color: lightgray;
}
.menuItem {
width: 174px;
padding: 13px;
font-size: 24px;
text-align: center;
margin-bottom: 5px;
border: 1px solid lightgray;
}

View File

@@ -0,0 +1,48 @@
<!DOCTYPE HTML>
<html>
<head>
<title>R11 MockedServices</title>
<meta charset="utf-8">
<link rel="stylesheet" href="design.css" type="text/css">
</head>
<body>
<div id="container">
<div id="toolName">Mocked Service</div>
<div id="itemData">
<div id="link">
<p class="label">Your link</p>
<div id="messageLink">
https://www.release11.com/tools/mock/1238715-hjdf7/1
</div>
</div>
<div id="msgBody">
<div id="typeSelection">
<p class="label">Content Type</p>
<select id="typeSelector" class="fieldDefault">
<option value="text/xml">text/xml</option>
<option value="application/json">application/json</option>
</select>
</div>
<div id="bodyEdition">
<p class="label">Body:</p>
<textarea type="text" id="bodyEditor" class="fieldText"><Hello>There!</Hello>
</textarea>
</div>
</div>
<div id="headers" style="display:none;"></div>
<div id="history" style="display:none;"></div>
</div>
<div id="selectMenu">
<div class="menuItem">Item</div>
<div class="menuItem">Item</div>
<div class="menuItem">Item</div>
<div class="menuItem">Item</div>
<div class="menuItem">Item</div>
<div class="menuItem">Item</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>