-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (66 loc) · 10.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<body>
<style>
* {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
body {
max-width: 35em;
margin: auto;
}
img {
border-radius: 12px;
}
footer {
text-align: center;
font-size: 48px;
}
#book, #bookmark, #cup {
display: none;
background-color: yellow;
padding: 20px;
border-radius: 12px;
position: absolute;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
}
</style>
<h1>Cafe Vibes ✨</h1>
<img src="image.jpg" usemap="#image-map" height="500" width="500">
<map name="image-map">
<area shape="poly" coords="488,2791,492,2787,689,2787,696,2779,878,2779,885,2772,1059,2772,1067,2764,1208,2764,1216,2772,1224,2772,1232,2764,1256,2764,1263,2772,1508,2772,1512,2768,1512,2712,1504,2705,1504,2649,1496,2642,1496,2579,1488,2571,1488,2508,1480,2500,1480,2421,1472,2413,1472,2366,1464,2358,1464,2303,1456,2295,1456,2232,1449,2224,1449,2169,1441,2161,1441,2114,1433,2106,1433,2043,1425,2035,1425,1980,1417,1972,1417,1909,1409,1901,1409,1846,1401,1838,1401,1783,1393,1775,1393,1704,1386,1697,1386,1634,1378,1626,1378,1563,1370,1555,1370,1476,1362,1468,1362,1413,1354,1405,1354,1389,1334,1370,1311,1370,1287,1354,1248,1354,1240,1346,1216,1346,1208,1338,1177,1338,1169,1330,1145,1330,1137,1323,1122,1323,1114,1315,1090,1315,1082,1307,1059,1307,1051,1299,1027,1299,1019,1291,996,1291,988,1283,972,1283,964,1275,941,1275,933,1267,917,1267,909,1260,893,1260,885,1252,862,1252,854,1244,838,1244,830,1236,815,1236,807,1228,791,1228,767,1212,752,1212,728,1197,712,1197,704,1189,689,1189,681,1181,673,1181,665,1173,657,1173,633,1157,618,1157,610,1149,602,1149,594,1141,586,1141,578,1134,570,1134,563,1126,555,1126,547,1118,539,1118,531,1110,507,1102,492,1086,484,1086,476,1078,452,1071,437,1055,429,1055,413,1039,405,1039,389,1023,381,1023,358,1000,350,1000,311,960,303,960,295,952,271,952,263,945,232,945,220,956,220,964,196,988,196,996,133,1059,129,1071,122,1071,90,1102,82,1102,51,1134,43,1134,27,1149,19,1149,0,1169,0,1901,7,1909,7,2067,15,2075,7,2082,7,2122,15,2130,15,2216,7,2224,7,2547,0,2555,0,2563,7,2571,0,2579,0,2610,7,2618,7,2736,15,2744,15,2752,27,2764,66,2764,74,2772,169,2772,177,2779,271,2779,279,2787,468,2787,476,2795" alt="book" href="#book" onclick="showFragments('book')">
<area shape="poly" coords="2252,3508,2256,3504,2319,3504,2327,3496,2421,3496,2429,3488,2460,3488,2480,3468,2468,3465,2460,3457,2453,3457,2429,3433,2405,3433,2397,3425,2390,3425,2386,3421,2394,3413,2390,3402,2334,3402,2323,3390,2331,3382,2327,3378,2303,3378,2283,3358,2283,3287,2295,3276,2303,3276,2307,3264,2319,3252,2358,3252,2366,3244,2382,3244,2390,3252,2405,3252,2425,3272,2425,3279,2433,3287,2437,3299,2445,3291,2449,3303,2468,3323,2476,3323,2500,3346,2508,3346,2531,3370,2547,3370,2594,3417,2602,3417,2610,3425,2634,3433,2649,3449,2665,3449,2673,3457,2705,3457,2716,3445,2716,3405,2709,3398,2709,3382,2693,3358,2693,3342,2677,3327,2677,3303,2669,3295,2669,3287,2653,3264,2661,3256,2646,3232,2646,3209,2638,3201,2638,3185,2622,3161,2622,3146,2614,3138,2614,3122,2606,3114,2606,3106,2598,3098,2598,3090,2583,3067,2583,3051,2575,3043,2575,3027,2567,3020,2567,2996,2559,2988,2559,2972,2551,2964,2551,2941,2535,2925,2535,2909,2527,2901,2527,2886,2520,2878,2520,2862,2512,2854,2512,2846,2496,2823,2496,2807,2488,2799,2488,2791,2472,2768,2472,2752,2464,2744,2464,2728,2457,2720,2457,2705,2449,2697,2449,2681,2433,2665,2433,2649,2425,2642,2425,2618,2409,2594,2409,2571,2401,2563,2401,2555,2394,2547,2394,2531,2378,2508,2378,2492,2370,2484,2370,2468,2362,2460,2362,2445,2354,2437,2354,2429,2338,2405,2338,2390,2331,2382,2331,2366,2323,2358,2323,2350,2307,2327,2307,2311,2299,2303,2299,2287,2283,2264,2283,2248,2275,2240,2275,2224,2268,2216,2268,2201,2252,2177,2252,2161,2244,2153,2244,2138,2236,2130,2236,2114,2220,2090,2220,2075,2205,2051,2205,2035,2189,2012,2189,1988,2173,1964,2173,1949,2165,1941,2165,1925,2149,1909,2149,1901,2138,1890,2043,1890,2035,1897,1878,1897,1870,1905,1767,1905,1760,1913,1744,1913,1732,1925,1732,1956,1740,1964,1740,1988,1748,1996,1748,2019,1756,2027,1756,2059,1764,2067,1764,2098,1771,2106,1771,2130,1779,2138,1779,2169,1787,2177,1787,2201,1795,2208,1795,2248,1803,2256,1803,2271,1811,2279,1811,2303,1819,2311,1819,2334,1827,2342,1827,2374,1834,2382,1834,2405,1842,2413,1842,2437,1850,2445,1850,2468,1858,2476,1858,2500,1866,2508,1866,2531,1874,2539,1874,2555,1882,2563,1882,2602,1890,2610,1890,2634,1897,2642,1897,2665,1905,2673,1905,2697,1913,2705,1913,2728,1921,2736,1921,2768,1929,2775,1929,2799,1937,2807,1937,2823,1953,2846,1953,2894,1960,2901,1960,2933,1968,2941,1968,2972,1976,2980,1976,3012,1984,3020,1984,3043,1992,3051,1992,3067,2000,3075,2000,3090,2008,3098,2008,3130,2016,3138,2016,3153,2023,3161,2023,3185,2031,3193,2031,3209,2039,3216,2039,3240,2047,3248,2047,3279,2055,3287,2055,3311,2063,3319,2063,3342,2071,3350,2071,3374,2079,3382,2079,3398,2086,3405,2086,3437,2094,3445,2094,3461,2102,3468,2102,3492,2122,3512,2248,3512" href="#bookmark" alt="bookmark" onclick="showFragments('bookmark')">
<area shape="poly" coords="3016,2169,3024,2161,3024,2145,3016,2138,3016,2130,3024,2122,3024,2114,3016,2106,3016,2067,3024,2059,3024,2043,3016,2035,3016,2012,3024,2004,3024,1980,3016,1972,3016,1925,3008,1917,3016,1909,3016,1862,3024,1854,3024,1752,3016,1744,3016,1712,3024,1704,3024,1641,3016,1634,3016,1626,3012,1622,2949,1622,2941,1614,2894,1614,2886,1606,2854,1606,2846,1598,2815,1598,2807,1590,2783,1590,2775,1582,2760,1582,2752,1575,2736,1575,2728,1567,2720,1567,2697,1551,2681,1551,2673,1543,2657,1543,2649,1535,2642,1535,2634,1527,2626,1527,2618,1519,2610,1519,2602,1512,2579,1504,2563,1488,2555,1488,2539,1472,2531,1472,2508,1449,2500,1449,2425,1374,2425,1366,2409,1350,2409,1334,2394,1319,2394,1295,2386,1287,2386,1271,2394,1263,2394,1248,2417,1224,2425,1200,2445,1181,2453,1181,2468,1165,2492,1157,2531,1118,2563,1118,2571,1110,2610,1110,2618,1126,2649,1126,2657,1134,2665,1134,2673,1126,2697,1126,2705,1110,2768,1110,2775,1126,2791,1126,2815,1141,2831,1141,2838,1134,2846,1134,2854,1141,2894,1141,2901,1149,2909,1149,2917,1141,2925,1157,3012,1157,3016,1153,3016,1137,3024,1130,3024,1114,3012,1102,3004,1102,2996,1094,2980,1094,2972,1086,2949,1086,2941,1078,2901,1078,2894,1071,2846,1071,2838,1063,2783,1063,2775,1055,2697,1055,2689,1063,2618,1063,2610,1071,2579,1071,2571,1078,2547,1078,2539,1086,2523,1086,2500,1102,2484,1102,2468,1118,2445,1126,2421,1149,2413,1149,2394,1169,2394,1177,2378,1193,2378,1200,2370,1208,2370,1224,2362,1232,2362,1256,2354,1263,2354,1271,2346,1279,2342,1291,2319,1291,2311,1299,2295,1299,2271,1315,2256,1315,2248,1323,2224,1330,2185,1362,2177,1362,2153,1386,2142,1389,2142,1397,2110,1429,2110,1437,2079,1476,2079,1484,2071,1492,2071,1508,2063,1515,2063,1539,2055,1547,2055,1641,2063,1649,2063,1673,2071,1681,2071,1697,2079,1704,2079,1720,2086,1728,2086,1736,2094,1744,2094,1752,2102,1760,2110,1783,2126,1799,2126,1807,2149,1830,2149,1838,2264,1953,2271,1953,2287,1968,2295,1968,2319,1992,2327,1992,2342,2008,2366,2016,2382,2031,2390,2031,2397,2039,2405,2039,2413,2047,2421,2047,2429,2055,2437,2055,2445,2063,2453,2063,2476,2079,2492,2079,2516,2094,2531,2094,2539,2102,2547,2102,2555,2110,2571,2110,2594,2126,2618,2126,2626,2134,2642,2134,2649,2142,2681,2142,2689,2149,2720,2149,2728,2157,2760,2157,2768,2165,2807,2165,2815,2173,3012,2173" alt="cup" onclick="showFragments('cup')" href="#cup">
</map>
<script>
!function(){"use strict";function r(){function e(){var r={width:u.width/u.naturalWidth,height:u.height/u.naturalHeight},a={width:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-top"),10)};i.forEach(function(e,t){var n=0;o[t].coords=e.split(",").map(function(e){var t=1==(n=1-n)?"width":"height";return a[t]+Math.floor(Number(e)*r[t])}).join(",")})}function t(e){return e.coords.replace(/ *, */g,",").replace(/ +/g,",")}function n(){clearTimeout(d),d=setTimeout(e,250)}function r(e){return document.querySelector('img[usemap="'+e+'"]')}var a=this,o=null,i=null,u=null,d=null;"function"!=typeof a._resize?(o=a.getElementsByTagName("area"),i=Array.prototype.map.call(o,t),u=r("#"+a.name)||r(a.name),a._resize=e,u.addEventListener("load",e,!1),window.addEventListener("focus",e,!1),window.addEventListener("resize",n,!1),window.addEventListener("readystatechange",e,!1),document.addEventListener("fullscreenchange",e,!1),u.width===u.naturalWidth&&u.height===u.naturalHeight||e()):a._resize()}function e(){function t(e){e&&(!function(e){if(!e.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==e.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+e.tagName+">.")}(e),r.call(e),n.push(e))}var n;return function(e){switch(n=[],typeof e){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(e||"map"),t);break;case"object":t(e);break;default:throw new TypeError("Unexpected data type ("+typeof e+").")}return n}}"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&"object"==typeof module.exports?module.exports=e():window.imageMapResize=e(),"jQuery"in window&&(window.jQuery.fn.imageMapResize=function(){return this.filter("map").each(r).end()})}();
//# sourceMappingURL=imageMapResizer.map
imageMapResize();
// when # fragment in url, show section
function showFragments (id) {
event.preventDefault();
document.querySelectorAll('section').forEach(function (section) {
section.style.display = 'none'
})
var item = document.querySelector("#" + id);
item.style.display = 'block';
// overlay at xy of click
item.style.position = 'absolute';
// offset to the left by 100px
item.style.top = (event.clientY - 100) + 'px';
item.style.left = (event.clientX - 100) + 'px';
}
</script>
<section id="book">
<p>Book: Second week of reading.</p>
</section>
<section id="bookmark">
<p>A bookmark: my first, I remember the pages now. It goes with me everywhere.</p>
</section>
<section id="cup">
<p>Coffee; wakes me up from a night with poor rest.</p>
</section>
<iframe style="border-radius:12px; width:500px; display: block;" src="https://open.spotify.com/embed/track/2HvtedoEeymVWrBPyAMNwZ?utm_source=generator&theme=0" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
<footer><p>❦</p></footer>
</body>
</html>