git.iko.soy/seax
on master help sign in
Added %seax logo
commit2dcf829a80ed88cc699b594f6f9f08e5390586b9 authorEvangelos Lamprou <e.lamprou@upnet.gr> dateSun 8 Oct 2023, 15:33 (3 years ago) parent0061279
6 files changed+129−21
compare with master
unifiedsplit
frontend/assets/css/main.css+27 frontend/assets/img/logo.png frontend/assets/js/tilt.js+62 frontend/elm.json+17−3 frontend/index.html+2 frontend/src/Main.elm+21−18
frontend/assets/css/main.cssnew file+27
@@ -0,0 +1,27 @@
1+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200&family=Roboto+Mono:wght@200&family=Roboto:wght@300&display=swap');
2+
3+#tilt:hover {
4+ /* box-shadow: 0px 0px 30px rgba(0,0,0, 0.6); */
5+ /* cursor: pointer; */
6+ /* transition: all 0.1s ease-in-out; */
7+}
8+
9+.button {
10+ background-color: #ff7600;
11+ border: none;
12+ color: white;
13+ padding: 15px 32px;
14+ text-align: center;
15+ text-decoration: none;
16+ font-size: 16px;
17+ display: inline-block;
18+ margin: 4px 2px;
19+ cursor: pointer;
20+ border-radius: 0;
21+ box-shadow: 0 2px 2px #888888;
22+}
23+
24+.shadow {
25+ box-shadow: 0 2px 2px #888888;
26+}
27+
frontend/assets/img/logo.pngnew file

Binary file not shown.

frontend/assets/js/tilt.jsnew file+62
@@ -0,0 +1,62 @@
1+/* Store the element in el */
2+let el = document.getElementById('tilt')
3+
4+/* Get the height and width of the element */
5+const height = el.clientHeight
6+const width = el.clientWidth
7+
8+/* Define function a */
9+function handleMove(e) {
10+
11+ if (el.id != 'tilt') return; /* TODO: Fix this hack. */
12+
13+ /*
14+ * Get position of mouse cursor
15+ * With respect to the element
16+ * On mouseover
17+ */
18+ /* Store the x position */
19+ const xVal = e.layerX
20+ /* Store the y position */
21+ const yVal = e.layerY
22+
23+ /*
24+ * Calculate rotation valuee along the Y-axis
25+ * Here the multiplier 20 is to
26+ * Control the rotation
27+ * You can change the value and see the results
28+ */
29+ const yRotation = 20 * ((xVal - width / 2) / width)
30+
31+ /* Calculate the rotation along the X-axis */
32+ const xRotation = -20 * ((yVal - height / 2) / height)
33+
34+ /* Generate string for CSS transform property */
35+ const string = 'perspective(500px) scale(1.0) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg)'
36+
37+ /* Apply the calculated transformation */
38+ el.style.transform = string
39+}
40+
41+/* Add listener for mouseout event, remove the rotation */
42+el.addEventListener('mouseout', function() {
43+ el.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)'
44+})
45+
46+/* Add listener for mousedown event, to simulate click */
47+el.addEventListener('mousedown', function() {
48+ el.style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)'
49+})
50+
51+/* Add listener for mouseup, simulate release of mouse click */
52+el.addEventListener('mouseup', function() {
53+ el.style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)'
54+})
55+
56+
57+/*
58+ * Add a listener for mousemove event
59+ * Which will trigger function 'handleMove'
60+ * On mousemove
61+ */
62+let mouseMoveEL = el.addEventListener('mousemove', handleMove)
frontend/elm.json+17−3
@@ -8,6 +8,7 @@
88 "dependencies": {
99 "direct": {
1010 "TSFoster/elm-bytes-extra": "1.3.0",
11+ "avh4/elm-color": "1.0.0",
1112 "cmditch/elm-bigint": "2.0.1",
1213 "elm/browser": "1.0.2",
1314 "elm/bytes": "1.0.8",
@@ -21,23 +22,36 @@
2122 "elm-community/list-extra": "8.7.0",
2223 "elm-community/maybe-extra": "5.3.0",
2324 "figbus/elm-urbit-api": "4.0.1",
25+ "ianmackenzie/elm-1d-parameter": "1.0.1",
26+ "ianmackenzie/elm-3d-camera": "3.1.0",
27+ "ianmackenzie/elm-3d-scene": "1.0.1",
28+ "ianmackenzie/elm-geometry": "3.11.0",
29+ "ianmackenzie/elm-triangular-mesh": "1.1.0",
30+ "ianmackenzie/elm-units": "2.10.0",
2431 "jasonliang-dev/elm-heroicons": "2.0.0",
2532 "jxxcarlson/hex": "4.0.0",
2633 "mdgriffith/elm-animator": "1.1.1",
2734 "mdgriffith/elm-ui": "1.1.8",
35+ "rtfeldman/elm-css": "18.0.0",
2836 "rtfeldman/elm-hex": "1.0.0",
29− "toastal/either": "3.6.3"
37+ "toastal/either": "3.6.3",
38+ "zwilias/elm-html-string": "2.0.2"
3039 },
3140 "indirect": {
3241 "AdrianRibao/elm-derberos-date": "1.2.3",
33− "avh4/elm-color": "1.0.0",
42+ "NoRedInk/elm-string-conversions": "1.0.1",
3443 "bitsoflogic/elm-radixint": "2.0.0",
3544 "elm/file": "1.0.5",
3645 "elm/parser": "1.1.0",
3746 "elm/random": "1.0.0",
3847 "elm/regex": "1.0.0",
3948 "elm/virtual-dom": "1.0.3",
40− "ianmackenzie/elm-units": "2.10.0",
49+ "elm-explorations/linear-algebra": "1.0.3",
50+ "elm-explorations/webgl": "1.1.3",
51+ "ianmackenzie/elm-float-extra": "1.1.0",
52+ "ianmackenzie/elm-geometry-linear-algebra-interop": "2.0.2",
53+ "ianmackenzie/elm-interval": "3.1.0",
54+ "ianmackenzie/elm-units-interval": "3.2.0",
4155 "ktonon/elm-word": "2.1.2",
4256 "robinheghan/murmur3": "1.0.0"
4357 }
frontend/index.html+2
@@ -2,6 +2,7 @@
22<html lang="en">
33 <head>
44 <meta charset="UTF-8" />
5+ <link rel="stylesheet" href="assets/css/main.css" >
56 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
67 <style>
78 body {
@@ -30,5 +31,6 @@
3031 <script src="/elm.js"></script>
3132 <script type="module" src="/script.js"></script>
3233 </body>
34+ <script type="text/javascript" src="assets/js/tilt.js" defer></script>
3335</html>
3436
frontend/src/Main.elm+21−18
@@ -22,6 +22,10 @@ import Ur.Jam exposing (isSig)
2222import Ur.Run
2323import Ur.Sub
2424import Ur.Types exposing (Noun(..))
25+import Html.String
26+import List
27+import Css
28+import Html.Styled.Attributes exposing (css)
2529
2630
2731url : String
@@ -61,7 +65,6 @@ type alias SearchResult =
6165 , engines : Set String
6266 }
6367
64−
6568type Msg
6669 = Noop
6770 | GotShipName String
@@ -99,18 +102,9 @@ main =
99102 , body =
100103 [ view model
101104 |> layout
102− [ Font.family
103− [ Font.typeface "system-ui"
104− , Font.typeface "-apple-system"
105− , Font.typeface "BlinkMacSystemFont"
106− , Font.typeface "Segoe UI"
107− , Font.typeface "Roboto"
108− , Font.typeface "Helvetica"
109− , Font.typeface "Arial"
110− , Font.sansSerif
105+ [ Font.family
106+ [ Font.typeface "Inter"
111107 , Font.typeface "Apple Color Emoji"
112− , Font.typeface "Segoe UI Emoji"
113− , Font.typeface "Segoe UI Symbol"
114108 ]
115109 , clipX
116110 ]
@@ -150,19 +144,27 @@ main =
150144 }
151145
152146
147+logoView : List (Attribute Msg) -> Element Msg
148+logoView attributes =
149+ Element.image ( List.append [ Html.Attributes.id "tilt" |> htmlAttribute ] attributes )
150+ { src = "assets/img/logo.png", description = "The logo" }
151+
153152view : Model -> Element Msg
154153view model =
155154 case model.initiatedSearch of
156155 Nothing ->
157156 column [ centerX, centerY, padding 8, spacing 16 ]
158− [ el [ centerX, Font.size 67, Font.heavy ] (text "%seax")
159− , searchView model
157+ [
158+ -- el [ centerX, Font.size 67, Font.heavy] (text "%seax") ,
159+ -- Element.image [ centerX, width (px 510), height (px 161), Html.Attributes.id "tilt" |> htmlAttribute ] { src = "assets/img/logo.png", description = "The logo" },
160+ logoView [centerX, width (px 510), height (px 161) ],
161+ searchView model
160162 ]
161163
162164 Just _ ->
163165 column [ width fill, spacing 16 ]
164− [ column [ spacing 16, width (minimum 0 fill), padding 8 ]
165− [ searchView model |> el []
166+ [ column [ spacing 16, width (minimum 0 fill), padding 8]
167+ [ row [] [ logoView [height (px 40)], searchView model |> el [] ]
166168 , row [ spacing 8, paddingEach { top = 16, bottom = 16, left = 0, right = 0 } ]
167169 [ text "Sources: "
168170 , model.engines
@@ -273,7 +275,7 @@ view model =
273275searchView : { a | search : String } -> Element Msg
274276searchView model =
275277 row [ spacing 8 ]
276− [ Input.text [ width (px 250) ]
278+ [ Input.text [ Html.Attributes.class "shadow" |> htmlAttribute, width (px 400)]
277279 { onChange = UpdateSearch
278280 , placeholder = Nothing
279281 , text = model.search
@@ -283,7 +285,8 @@ searchView model =
283285 { label =
284286 text "search"
285287 |> el
286− [ Border.width 4
288+ [ Html.Attributes.class "button" |> htmlAttribute
289+ , Border.width 4
287290 , padding 4
288291 , Font.size 29
289292 , Font.bold