mirror of
https://github.com/ilyakooo0/seax.git
synced 2024-09-11 12:05:27 +03:00
Added %seax logo
This commit is contained in:
Evangelos Lamprou
parent
0061279025
commit
2dcf829a80
27
frontend/assets/css/main.css
Normal file
27
frontend/assets/css/main.css
Normal file
@ -0,0 +1,27 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200&family=Roboto+Mono:wght@200&family=Roboto:wght@300&display=swap');
|
||||
|
||||
#tilt:hover {
|
||||
/* box-shadow: 0px 0px 30px rgba(0,0,0, 0.6); */
|
||||
/* cursor: pointer; */
|
||||
/* transition: all 0.1s ease-in-out; */
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #ff7600;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 2px 2px #888888;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 2px 2px #888888;
|
||||
}
|
||||
|
||||
BIN
frontend/assets/img/logo.png
Normal file
BIN
frontend/assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
62
frontend/assets/js/tilt.js
Normal file
62
frontend/assets/js/tilt.js
Normal file
@ -0,0 +1,62 @@
|
||||
/* Store the element in el */
|
||||
let el = document.getElementById('tilt')
|
||||
|
||||
/* Get the height and width of the element */
|
||||
const height = el.clientHeight
|
||||
const width = el.clientWidth
|
||||
|
||||
/* Define function a */
|
||||
function handleMove(e) {
|
||||
|
||||
if (el.id != 'tilt') return; /* TODO: Fix this hack. */
|
||||
|
||||
/*
|
||||
* Get position of mouse cursor
|
||||
* With respect to the element
|
||||
* On mouseover
|
||||
*/
|
||||
/* Store the x position */
|
||||
const xVal = e.layerX
|
||||
/* Store the y position */
|
||||
const yVal = e.layerY
|
||||
|
||||
/*
|
||||
* Calculate rotation valuee along the Y-axis
|
||||
* Here the multiplier 20 is to
|
||||
* Control the rotation
|
||||
* You can change the value and see the results
|
||||
*/
|
||||
const yRotation = 20 * ((xVal - width / 2) / width)
|
||||
|
||||
/* Calculate the rotation along the X-axis */
|
||||
const xRotation = -20 * ((yVal - height / 2) / height)
|
||||
|
||||
/* Generate string for CSS transform property */
|
||||
const string = 'perspective(500px) scale(1.0) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg)'
|
||||
|
||||
/* Apply the calculated transformation */
|
||||
el.style.transform = string
|
||||
}
|
||||
|
||||
/* Add listener for mouseout event, remove the rotation */
|
||||
el.addEventListener('mouseout', function() {
|
||||
el.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)'
|
||||
})
|
||||
|
||||
/* Add listener for mousedown event, to simulate click */
|
||||
el.addEventListener('mousedown', function() {
|
||||
el.style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)'
|
||||
})
|
||||
|
||||
/* Add listener for mouseup, simulate release of mouse click */
|
||||
el.addEventListener('mouseup', function() {
|
||||
el.style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)'
|
||||
})
|
||||
|
||||
|
||||
/*
|
||||
* Add a listener for mousemove event
|
||||
* Which will trigger function 'handleMove'
|
||||
* On mousemove
|
||||
*/
|
||||
let mouseMoveEL = el.addEventListener('mousemove', handleMove)
|
||||
@ -8,6 +8,7 @@
|
||||
"dependencies": {
|
||||
"direct": {
|
||||
"TSFoster/elm-bytes-extra": "1.3.0",
|
||||
"avh4/elm-color": "1.0.0",
|
||||
"cmditch/elm-bigint": "2.0.1",
|
||||
"elm/browser": "1.0.2",
|
||||
"elm/bytes": "1.0.8",
|
||||
@ -21,23 +22,36 @@
|
||||
"elm-community/list-extra": "8.7.0",
|
||||
"elm-community/maybe-extra": "5.3.0",
|
||||
"figbus/elm-urbit-api": "4.0.1",
|
||||
"ianmackenzie/elm-1d-parameter": "1.0.1",
|
||||
"ianmackenzie/elm-3d-camera": "3.1.0",
|
||||
"ianmackenzie/elm-3d-scene": "1.0.1",
|
||||
"ianmackenzie/elm-geometry": "3.11.0",
|
||||
"ianmackenzie/elm-triangular-mesh": "1.1.0",
|
||||
"ianmackenzie/elm-units": "2.10.0",
|
||||
"jasonliang-dev/elm-heroicons": "2.0.0",
|
||||
"jxxcarlson/hex": "4.0.0",
|
||||
"mdgriffith/elm-animator": "1.1.1",
|
||||
"mdgriffith/elm-ui": "1.1.8",
|
||||
"rtfeldman/elm-css": "18.0.0",
|
||||
"rtfeldman/elm-hex": "1.0.0",
|
||||
"toastal/either": "3.6.3"
|
||||
"toastal/either": "3.6.3",
|
||||
"zwilias/elm-html-string": "2.0.2"
|
||||
},
|
||||
"indirect": {
|
||||
"AdrianRibao/elm-derberos-date": "1.2.3",
|
||||
"avh4/elm-color": "1.0.0",
|
||||
"NoRedInk/elm-string-conversions": "1.0.1",
|
||||
"bitsoflogic/elm-radixint": "2.0.0",
|
||||
"elm/file": "1.0.5",
|
||||
"elm/parser": "1.1.0",
|
||||
"elm/random": "1.0.0",
|
||||
"elm/regex": "1.0.0",
|
||||
"elm/virtual-dom": "1.0.3",
|
||||
"ianmackenzie/elm-units": "2.10.0",
|
||||
"elm-explorations/linear-algebra": "1.0.3",
|
||||
"elm-explorations/webgl": "1.1.3",
|
||||
"ianmackenzie/elm-float-extra": "1.1.0",
|
||||
"ianmackenzie/elm-geometry-linear-algebra-interop": "2.0.2",
|
||||
"ianmackenzie/elm-interval": "3.1.0",
|
||||
"ianmackenzie/elm-units-interval": "3.2.0",
|
||||
"ktonon/elm-word": "2.1.2",
|
||||
"robinheghan/murmur3": "1.0.0"
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" >
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<style>
|
||||
body {
|
||||
@ -30,5 +31,6 @@
|
||||
<script src="/elm.js"></script>
|
||||
<script type="module" src="/script.js"></script>
|
||||
</body>
|
||||
<script type="text/javascript" src="assets/js/tilt.js" defer></script>
|
||||
</html>
|
||||
|
||||
|
||||
@ -22,6 +22,10 @@ import Ur.Jam exposing (isSig)
|
||||
import Ur.Run
|
||||
import Ur.Sub
|
||||
import Ur.Types exposing (Noun(..))
|
||||
import Html.String
|
||||
import List
|
||||
import Css
|
||||
import Html.Styled.Attributes exposing (css)
|
||||
|
||||
|
||||
url : String
|
||||
@ -61,7 +65,6 @@ type alias SearchResult =
|
||||
, engines : Set String
|
||||
}
|
||||
|
||||
|
||||
type Msg
|
||||
= Noop
|
||||
| GotShipName String
|
||||
@ -99,18 +102,9 @@ main =
|
||||
, body =
|
||||
[ view model
|
||||
|> layout
|
||||
[ Font.family
|
||||
[ Font.typeface "system-ui"
|
||||
, Font.typeface "-apple-system"
|
||||
, Font.typeface "BlinkMacSystemFont"
|
||||
, Font.typeface "Segoe UI"
|
||||
, Font.typeface "Roboto"
|
||||
, Font.typeface "Helvetica"
|
||||
, Font.typeface "Arial"
|
||||
, Font.sansSerif
|
||||
[ Font.family
|
||||
[ Font.typeface "Inter"
|
||||
, Font.typeface "Apple Color Emoji"
|
||||
, Font.typeface "Segoe UI Emoji"
|
||||
, Font.typeface "Segoe UI Symbol"
|
||||
]
|
||||
, clipX
|
||||
]
|
||||
@ -150,19 +144,27 @@ main =
|
||||
}
|
||||
|
||||
|
||||
logoView : List (Attribute Msg) -> Element Msg
|
||||
logoView attributes =
|
||||
Element.image ( List.append [ Html.Attributes.id "tilt" |> htmlAttribute ] attributes )
|
||||
{ src = "assets/img/logo.png", description = "The logo" }
|
||||
|
||||
view : Model -> Element Msg
|
||||
view model =
|
||||
case model.initiatedSearch of
|
||||
Nothing ->
|
||||
column [ centerX, centerY, padding 8, spacing 16 ]
|
||||
[ el [ centerX, Font.size 67, Font.heavy ] (text "%seax")
|
||||
, searchView model
|
||||
[
|
||||
-- el [ centerX, Font.size 67, Font.heavy] (text "%seax") ,
|
||||
-- Element.image [ centerX, width (px 510), height (px 161), Html.Attributes.id "tilt" |> htmlAttribute ] { src = "assets/img/logo.png", description = "The logo" },
|
||||
logoView [centerX, width (px 510), height (px 161) ],
|
||||
searchView model
|
||||
]
|
||||
|
||||
Just _ ->
|
||||
column [ width fill, spacing 16 ]
|
||||
[ column [ spacing 16, width (minimum 0 fill), padding 8 ]
|
||||
[ searchView model |> el []
|
||||
[ column [ spacing 16, width (minimum 0 fill), padding 8]
|
||||
[ row [] [ logoView [height (px 40)], searchView model |> el [] ]
|
||||
, row [ spacing 8, paddingEach { top = 16, bottom = 16, left = 0, right = 0 } ]
|
||||
[ text "Sources: "
|
||||
, model.engines
|
||||
@ -273,7 +275,7 @@ view model =
|
||||
searchView : { a | search : String } -> Element Msg
|
||||
searchView model =
|
||||
row [ spacing 8 ]
|
||||
[ Input.text [ width (px 250) ]
|
||||
[ Input.text [ Html.Attributes.class "shadow" |> htmlAttribute, width (px 400)]
|
||||
{ onChange = UpdateSearch
|
||||
, placeholder = Nothing
|
||||
, text = model.search
|
||||
@ -283,7 +285,8 @@ searchView model =
|
||||
{ label =
|
||||
text "search"
|
||||
|> el
|
||||
[ Border.width 4
|
||||
[ Html.Attributes.class "button" |> htmlAttribute
|
||||
, Border.width 4
|
||||
, padding 4
|
||||
, Font.size 29
|
||||
, Font.bold
|
||||
|
||||
Loading…
Reference in New Issue
Block a user