A Pen by Patrick O'Connor on CodePen.
Created
September 30, 2023 18:22
-
-
Save PatOConnor43/21c2a5939c8b99808fcd567a1a67833c to your computer and use it in GitHub Desktop.
Liminal Prototype
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="desktop-4"> | |
<div class="left-panel"> | |
<div class="frame-1466"> | |
<div class="file-tree"> | |
<div class="frame-1467"> | |
<span class="weather"> ▼ Weather </span> | |
</div> | |
<div class="frame-1468"> | |
<div class="get-get-weather-for-location"> | |
<span><span class="get-get-weather-for-location-span">GET</span><span class="get-get-weather-for-location-span2"> | |
Get weather for location</span></span> | |
</div> | |
</div> | |
<div class="frame-1469"> | |
<div class="get-get-forecast"> | |
<span><span class="get-get-forecast-span">GET</span><span class="get-get-forecast-span2"> Get forecast</span></span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="frame-1471"> | |
<div class="request-frame"> | |
<div class="tab-body"> | |
<div class="populated"> | |
<div class="value"> | |
<div class="application-json">application/json</div> | |
</div> | |
<div class="key"> | |
<div class="accept">Accept</div> | |
</div> | |
</div> | |
</div> | |
<div class="tabs"> | |
<button class="query-button"> | |
<div class="query">Query</div> | |
</button><button class="headers-button"> | |
<div class="headers">Headers</div> | |
</button> | |
</div> | |
</div> | |
<div class="request-frame2"> | |
<div class="tab-body"> | |
<div id="requestEditor">{ | |
"latitude": 52.52, | |
"longitude": 13.419998, | |
"generationtime_ms": 0.1710653305053711, | |
"utc_offset_seconds": 0, | |
"timezone": "GMT", | |
"timezone_abbreviation": "GMT", | |
"elevation": 38.0, | |
"current_weather": { | |
"temperature": 16.3, | |
"windspeed": 3.3, | |
"winddirection": 347, | |
"weathercode": 3, | |
"is_day": 0, | |
"time": "2023-09-03T20:00" | |
} | |
}</div> | |
</div> | |
<div class="tabs"> | |
<button class="body-button"> | |
<div class="body">Body</div> | |
</button><button class="headers-button2"> | |
<div class="headers">Headers</div> | |
</button> | |
</div> | |
</div> | |
<div class="url-bar"> | |
<div class="frame-1472"> | |
<input class="base-url-simple-weather" value="{{baseUrl}}/simple_weather" /> | |
</div> | |
<button class="method-button"> | |
<div class="get">GET</div> | |
<svg class="vector-286" width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
<path d="M0 0L9.5 9.5L0 19" stroke="#FAF4F9" stroke-width="2" /> | |
</svg> | |
</button> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var editor = ace.edit("requestEditor"); | |
editor.setTheme("ace/theme/xcode"); | |
editor.session.setMode("ace/mode/json"); | |
window.requestEditor = editor; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://unpkg.com/ace-builds@1.24.1/src-min/ace.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.desktop-4, | |
.desktop-4 * { | |
box-sizing: border-box; | |
} | |
.desktop-4 { | |
background: #ffffff; | |
width: 1440px; | |
height: 1024px; | |
position: relative; | |
overflow: hidden; | |
} | |
.left-panel { | |
display: flex; | |
flex-direction: column; | |
gap: 10px; | |
align-items: flex-start; | |
justify-content: center; | |
position: absolute; | |
left: 0px; | |
top: 0px; | |
overflow: hidden; | |
} | |
.frame-1466 { | |
flex-shrink: 0; | |
width: 337px; | |
height: 1024px; | |
position: relative; | |
overflow: hidden; | |
} | |
.file-tree { | |
background: rgba(203, 144, 197, 0.1); | |
padding: 4px 0px 4px 0px; | |
display: flex; | |
flex-direction: column; | |
gap: 0px; | |
align-items: flex-start; | |
justify-content: flex-start; | |
width: 329px; | |
height: 1024px; | |
position: absolute; | |
left: 0px; | |
top: calc(50% - 512px); | |
overflow: hidden; | |
} | |
.frame-1467 { | |
padding: 10px 0px 10px 10px; | |
display: flex; | |
flex-direction: row; | |
gap: 10px; | |
align-items: center; | |
justify-content: flex-start; | |
flex-shrink: 0; | |
width: 323px; | |
height: 52px; | |
position: relative; | |
overflow: hidden; | |
} | |
.weather { | |
color: #000000; | |
text-align: left; | |
font: 400 16px/22px "Rubik", sans-serif; | |
position: relative; | |
align-self: stretch; | |
flex: 1; | |
display: flex; | |
align-items: center; | |
justify-content: flex-start; | |
} | |
.frame-1468 { | |
border-style: solid; | |
border-color: #903286; | |
border-width: 0px 0px 0px 3px; | |
padding: 0px 30px 0px 30px; | |
display: flex; | |
flex-direction: row; | |
gap: 10px; | |
align-items: center; | |
justify-content: flex-start; | |
flex-shrink: 0; | |
width: 330px; | |
height: 42px; | |
position: relative; | |
overflow: hidden; | |
} | |
.get-get-weather-for-location { | |
color: #000000; | |
text-align: left; | |
position: relative; | |
width: 309px; | |
} | |
.get-get-weather-for-location-span { | |
color: #000000; | |
font: 400 12px/22px "Rubik", sans-serif; | |
} | |
.get-get-weather-for-location-span2 { | |
color: #000000; | |
font: 400 16px/22px "Rubik", sans-serif; | |
} | |
.frame-1469 { | |
padding: 0px 30px 0px 30px; | |
display: flex; | |
flex-direction: row; | |
gap: 10px; | |
align-items: center; | |
justify-content: flex-start; | |
flex-shrink: 0; | |
width: 330px; | |
height: 42px; | |
position: relative; | |
overflow: hidden; | |
} | |
.get-get-forecast { | |
color: #000000; | |
text-align: left; | |
position: relative; | |
width: 309px; | |
} | |
.get-get-forecast-span { | |
color: #000000; | |
font: 400 12px/22px "Rubik", sans-serif; | |
} | |
.get-get-forecast-span2 { | |
color: #000000; | |
font: 400 16px/22px "Rubik", sans-serif; | |
} | |
.frame-1471 { | |
width: 1108px; | |
height: 1024px; | |
position: absolute; | |
right: 0px; | |
top: calc(50% - 512px); | |
overflow: hidden; | |
} | |
.request-frame { | |
width: 518px; | |
height: 881px; | |
position: absolute; | |
left: 19px; | |
top: 105px; | |
overflow: hidden; | |
} | |
.tab-body { | |
background: #faf4f9; | |
width: 518px; | |
height: 821px; | |
position: absolute; | |
left: 0px; | |
top: 60px; | |
overflow: hidden; | |
} | |
.populated { | |
width: 497px; | |
height: 47px; | |
position: absolute; | |
left: 10px; | |
top: 21px; | |
overflow: hidden; | |
} | |
.value { | |
border-style: solid; | |
border-color: rgba(203, 144, 197, 0.3); | |
border-width: 0px 0px 2px 0px; | |
width: 234px; | |
height: 38px; | |
position: absolute; | |
left: 263px; | |
top: 9px; | |
overflow: hidden; | |
} | |
.application-json { | |
color: #000000; | |
text-align: left; | |
font: 400 16px/22px "Rubik", sans-serif; | |
position: absolute; | |
left: 5px; | |
top: 12px; | |
} | |
.key { | |
border-style: solid; | |
border-color: rgba(203, 144, 197, 0.3); | |
border-width: 0px 0px 2px 0px; | |
width: 234px; | |
height: 38px; | |
position: absolute; | |
left: 6px; | |
top: 9px; | |
overflow: hidden; | |
} | |
.accept { | |
color: #000000; | |
text-align: left; | |
font: 400 16px/22px "Rubik", sans-serif; | |
position: absolute; | |
left: 5px; | |
top: 12px; | |
} | |
.tabs { | |
display: flex; | |
flex-direction: row; | |
gap: 0px; | |
align-items: center; | |
justify-content: flex-start; | |
height: 48px; | |
position: absolute; | |
left: 0px; | |
top: 0px; | |
} | |
.query-button { | |
background: #ffffff; | |
border-style: solid; | |
border-color: #e6e8ec; | |
border-width: 2px; | |
padding: 10px 20px 10px 20px; | |
display: flex; | |
flex-direction: row; | |
gap: 10px; | |
align-items: center; | |
justify-content: center; | |
flex-shrink: 0; | |
height: 48px; | |
position: relative; | |
} | |
.query { | |
color: #000000; | |
text-align: left; | |
font: 400 16px/22px "Rubik", sans-serif; | |
position: relative; | |
} | |
.headers-button { | |
background: #faf4f9; | |
border-style: solid; | |
border-color: #e6e8ec; | |
border-width: 2px; | |
padding: 10px 20px 10px 20px; | |
display: flex; | |
flex-direction: row; | |
gap: 10px; | |
align-items: center; | |
justify-content: center; | |
flex-shrink: 0; | |
height: 48px; | |
position: relative; | |
} | |
.headers { | |
color: #000000; | |
text-align: left; | |
font: 400 16px/22px "Rubik", sans-serif; | |
position: relative; | |
} | |
.request-frame2 { | |
width: 518px; | |
height: 881px; | |
position: absolute; | |
left: 573px; | |
top: 105px; | |
overflow: hidden; | |
} | |
.image-1 { | |
width: 717px; | |
height: 847px; | |
position: absolute; | |
left: 0px; | |
top: 0px; | |
} | |
.body-button { | |
background: #faf4f9; | |
border-style: solid; | |
border-color: #e6e8ec; | |
border-width: 2px; | |
padding: 10px 20px 10px 20px; | |
display: flex; | |
flex-direction: row; | |
gap: 10px; | |
align-items: center; | |
justify-content: center; | |
flex-shrink: 0; | |
height: 48px; | |
position: relative; | |
} | |
.body { | |
color: #000000; | |
text-align: left; | |
font: 400 16px/22px "Rubik", sans-serif; | |
position: relative; | |
} | |
.headers-button2 { | |
background: #ffffff; | |
border-style: solid; | |
border-color: #e6e8ec; | |
border-width: 2px; | |
padding: 10px 20px 10px 20px; | |
display: flex; | |
flex-direction: row; | |
gap: 10px; | |
align-items: center; | |
justify-content: center; | |
flex-shrink: 0; | |
height: 48px; | |
position: relative; | |
} | |
.url-bar { | |
display: flex; | |
flex-direction: row; | |
align-items: flex-start; | |
justify-content: space-between; | |
width: 518px; | |
position: absolute; | |
left: 19px; | |
top: 22px; | |
} | |
.frame-1472 { | |
background: #ffffff; | |
border-style: solid; | |
border-color: #e6e8ec; | |
border-width: 2px; | |
padding: 10px; | |
display: flex; | |
flex-direction: row; | |
gap: 10px; | |
align-items: center; | |
justify-content: flex-start; | |
flex: 1; | |
position: relative; | |
} | |
.base-url-simple-weather { | |
text-align: left; | |
font: 400 18px/22px "Rubik", sans-serif; | |
position: relative; | |
flex: 1; | |
} | |
.base-url-simple-weather-span { | |
color: #cb90c5; | |
font: 400 18px/22px "Rubik", sans-serif; | |
} | |
.base-url-simple-weather-span2 { | |
color: #777e90; | |
font: 400 18px/22px "Rubik", sans-serif; | |
} | |
.method-button { | |
background: #72276a; | |
display: flex; | |
flex-direction: row; | |
gap: 0px; | |
align-items: center; | |
justify-content: center; | |
flex-shrink: 0; | |
width: 97px; | |
height: 42px; | |
position: relative; | |
} | |
.get { | |
color: #faf4f9; | |
text-align: right; | |
font: 400 18px/22px "Rubik", sans-serif; | |
position: relative; | |
} | |
.vector-286 { | |
flex-shrink: 0; | |
position: absolute; | |
right: 4.5px; | |
top: 10px; | |
overflow: visible; | |
} | |
#requestEditor { | |
position: relative; | |
width: 100%; | |
height: 100%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment