अपने PWA के टाइटल बार की विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाएं

अपने PWA को ऐप्लिकेशन की तरह दिखाने के लिए, विंडो कंट्रोल के बगल में मौजूद टाइटल बार वाली जगह का इस्तेमाल करें.

Amanda Baker

Thomas Steiner

अगर आपको मेरा लेख याद है, अपने PWA को ऐप्लिकेशन की तरह बनाना, तो आपको याद आ सकता है मैंने अपने ऐप्लिकेशन के टाइटल बार को अपनी पसंद के मुताबिक़ बनाने के बारे में कैसे बताया की रणनीति बनाने के लिए किया जा सकता है. यहां उदाहरण के तौर पर बताया गया है कि यह कैसा दिख सकता है macOS Podcasts ऐप्लिकेशन दिख रहा है.

ऐसा हो सकता है कि अब पॉडकास्ट, प्लैटफ़ॉर्म के हिसाब से एक macOS ऐप्लिकेशन, पॉडकास्ट नहीं, जो ब्राउज़र में नहीं चलता है और इसलिए ब्राउज़र के नियम. सही है, लेकिन अच्छी खबर यह है कि विंडो कंट्रोल ओवरले सुविधा, इस लेख में, आपको जल्द ही अपने PWA के लिए मिलते-जुलते यूज़र इंटरफ़ेस बनाने की सुविधा मिलेगी.

विंडो कंट्रोल ओवरले कॉम्पोनेंट

विंडो कंट्रोल ओवरले में चार सब-एट्रिब्यूट होते हैं:

1. इसमें "display_override" फ़ील्ड के लिए "window-controls-overlay" वैल्यू वेब ऐप्लिकेशन मेनिफ़ेस्ट डाउनलोड करें.
2. सीएसएस एनवायरमेंट वैरिएबल titlebar-area-x, titlebar-area-y, titlebar-area-width, और titlebar-area-height.
3. पिछले मालिकाना हक वाली सीएसएस प्रॉपर्टी -webkit-app-region का स्टैंडर्ड वेब कॉन्टेंट में खींचने और छोड़ने लायक इलाके तय करने के लिए app-region प्रॉपर्टी.
4. विंडो कंट्रोल के क्षेत्र के लिए क्वेरी करने और उस पर काम करने का तरीका. इसके लिए, window.navigator सदस्य windowControlsOverlay है.

विंडो कंट्रोल ओवरले क्या है

टाइटल बार एरिया, विंडो कंट्रोल के बाईं या दाईं ओर के स्पेस को दिखाता है (यानी कि बटन छोटा करना, बड़ा करना, बंद करना वगैरह) और अक्सर इसमें ऐप्लिकेशन का शीर्षक शामिल होता है. विंडो कंट्रोल ओवरले की मदद से, प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) को स्वैप करने पर ऐप्लिकेशन जैसा अनुभव मिलता है विंडो कंट्रोल वाले छोटे ओवरले के लिए, मौजूदा पूरी चौड़ाई वाले टाइटल बार को. इससे आपको जिसमें पहले ब्राउज़र कंट्रोल वाले टाइटल बार एरिया में कस्टम कॉन्टेंट शामिल कर सकता था.

मौजूदा स्थिति

विंडो कंट्रोल ओवरले इस्तेमाल करने का तरीका

वेब ऐप्लिकेशन मेनिफ़ेस्ट में window-controls-overlay को जोड़ा जा रहा है

प्रोग्रेसिव वेब ऐप्लिकेशन, विंडो कंट्रोल ओवरले में ऑप्ट-इन कर सकता है. इसके लिए, वेब ऐप्लिकेशन मेनिफ़ेस्ट में, "display_override" के मुख्य सदस्य के तौर पर "window-controls-overlay" ने:

{
  "display_override": ["window-controls-overlay"]
}

विंडो कंट्रोल का ओवरले, नीचे दी गई सभी शर्तों के पूरा होने पर ही दिखेगा:

1. ऐप्लिकेशन को ब्राउज़र में नहीं खोला जाता है, बल्कि एक अलग PWA विंडो में खोला जाता है.
2. मेनिफ़ेस्ट में "display_override": ["window-controls-overlay"] शामिल है. (अन्य वैल्यू हैं बाद में अनुमति दी जाती है.)
3. PWA, डेस्कटॉप ऑपरेटिंग सिस्टम पर चल रहा है.
4. मौजूदा ऑरिजिन, उस ऑरिजिन से मेल खाता है जिसके लिए PWA इंस्टॉल किया गया था.

इससे एक खाली टाइटल बार एरिया हो जाता है, जिसमें बाईं ओर सामान्य विंडो कंट्रोल होते हैं या ऑपरेटिंग सिस्टम के हिसाब से अलग-अलग होते हैं.

कॉन्टेंट को टाइटल बार में ले जाना

अब जब टाइटल बार में जगह बची है, तो वहां कुछ ले जाया जा सकता है. इस लेख के लिए, ने Wikimedia का चुनिंदा कॉन्टेंट PWA बनाया. शब्दों को खोजना, इस ऐप्लिकेशन के लिए एक उपयोगी सुविधा हो सकती है लेख के टाइटल जोड़ें. खोज सुविधा का एचटीएमएल इस तरह दिखता है:

<div class="search">
  <img src="logo.svg" alt="Wikimedia logo." width="32" height="32" />
  <label>
    <input type="search" />
    Search for words in articles
  </label>
</div>

इस div को टाइटल बार में ऊपर ले जाने के लिए, कुछ सीएसएस की ज़रूरत है:

.search {
  /* Make sure the `div` stays there, even when scrolling. */
  position: fixed;
  /**
   * Gradient, because why not. Endless opportunities.
   * The gradient ends in `#36c`, which happens to be the app's
   * `<meta name="theme-color" content="#36c">`.
   */
  background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
  /* Use the environment variable for the left anchoring with a fallback. */
  left: env(titlebar-area-x, 0);
  /* Use the environment variable for the top anchoring with a fallback. */
  top: env(titlebar-area-y, 0);
  /* Use the environment variable for setting the width with a fallback. */
  width: env(titlebar-area-width, 100%);
  /* Use the environment variable for setting the height with a fallback. */
  height: env(titlebar-area-height, 33px);
}

नीचे दिए गए स्क्रीनशॉट में, इस कोड का असर देखा जा सकता है. टाइटल बार पूरी तरह से रिस्पॉन्सिव है. टास्क कब शुरू होगा अगर आपने पीडब्ल्यूए विंडो का साइज़ बदला है, तो टाइटल बार इस तरह काम करता है जैसे कि वह सामान्य एचटीएमएल कॉन्टेंट से बना हो, असल में यही है.

तय करें कि टाइटल बार के किन हिस्सों को खींचकर छोड़ा जा सकता है

जबकि ऊपर दिया गया स्क्रीनशॉट बताता है कि आपने काम पूरा कर लिया है, लेकिन आपने अभी काम पूरा नहीं किया है. यह पीडब्ल्यूए विंडो है अब खींचने लायक नहीं है (बहुत छोटे क्षेत्र के अलावा), क्योंकि विंडो को नियंत्रित करने वाले बटन नहीं खींचे जा सकते और बाकी टाइटल बार में खोज विजेट शामिल होता है. इसका इस्तेमाल करके इसे ठीक करें app-region सीएसएस प्रॉपर्टी, जिसकी वैल्यू drag है. कंक्रीट के केस में, यह बनाना ठीक है input एलिमेंट के अलावा, सब कुछ ड्रैग किया जा सकता है.

/* The entire search `div` is draggable… */
.search {
  -webkit-app-region: drag;
  app-region: drag;
}

/* …except for the `input`. */
input {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

इस सीएसएस के सही जगह पर, उपयोगकर्ता div, img, या label. सिर्फ़ input एलिमेंट इंटरैक्टिव होता है, इसलिए खोज क्वेरी डाली जा सकती है.

सुविधा की पहचान

विंडो कंट्रोल ओवरले के साथ काम करने की सुविधा का पता लगाने के लिए, windowControlsOverlay:

if ('windowControlsOverlay' in navigator) {
  // Window Controls Overlay is supported.
}

windowControlsOverlay की मदद से, विंडो को कंट्रोल करने वाले इलाके की क्वेरी की जा रही है

अब तक के कोड में एक समस्या है: कुछ प्लैटफ़ॉर्म पर विंडो कंट्रोल दाईं ओर, चालू हैं वे बाईं ओर मौजूद होते हैं. स्थिति को और भी खराब करने के लिए, "तीन बिंदु" वाले आइकॉन पर क्लिक करें Chrome मेन्यू बदल जाएगा की स्थिति में भी बदलाव किया जा सकता है. इसका मतलब है कि लीनियर ग्रेडिएंट बैकग्राउंड इमेज को #131313→maroon या maroon→#131313→maroon टाइटल बार के maroon बैकग्राउंड रंग के साथ मिल जाता है, जो इसके आधार पर तय होता है <meta name="theme-color" content="maroon">. इसके लिए, navigator.windowControlsOverlay प्रॉपर्टी पर getTitlebarAreaRect() एपीआई.

if ('windowControlsOverlay' in navigator) {
  const { x } = navigator.windowControlsOverlay.getTitlebarAreaRect();
  // Window controls are on the right (like on Windows).
  // Chrome menu is left of the window controls.
  // [ windowControlsOverlay___________________ […] [_] [■] [X] ]
  if (x === 0) {
    div.classList.add('search-controls-right');
  }
  // Window controls are on the left (like on macOS).
  // Chrome menu is right of the window controls overlay.
  // [ [X] [_] [■] ___________________windowControlsOverlay [⋮] ]
  else {
    div.classList.add('search-controls-left');
  }
} else {
  // When running in a non-supporting browser tab.
  div.classList.add('search-controls-right');
}

सीधे .search क्लास सीएसएस नियमों में (पहले की तरह) बैकग्राउंड इमेज का इस्तेमाल करने के बजाय, बदला गया कोड अब दो क्लास का इस्तेमाल करता है, जिन्हें ऊपर दिया गया कोड डाइनैमिक तौर पर सेट करता है.

/* For macOS: */
.search-controls-left {
  background-image: linear-gradient(90deg, #36c, 45%, #131313, 90%, #36c);
}

/* For Windows: */
.search-controls-right {
  background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
}

तय करना कि विंडो कंट्रोल ओवरले दिख रहा है या नहीं

विंडो कंट्रोल ओवरले, हर स्थिति में टाइटल बार वाले हिस्से में नहीं दिखेगा. हालांकि, यह जो ब्राउज़र विंडो कंट्रोल ओवरले की सुविधा के साथ काम नहीं करते उनमें यह मौजूद नहीं होगा. उस टैब में भी मौजूद नहीं होगा जिसके बारे में शिकायत की गई है. इस स्थिति का पता लगाने के लिए, windowControlsOverlay की visible प्रॉपर्टी से क्वेरी करें:

if (navigator.windowControlsOverlay.visible) {
  // The window controls overlay is visible in the title bar area.
}

इसके अलावा, JavaScript और/या सीएसएस में display-mode मीडिया क्वेरी का इस्तेमाल भी किया जा सकता है:

// Create the query list.
const mediaQueryList = window.matchMedia('(display-mode: window-controls-overlay)');

// Define a callback function for the event listener.
function handleDisplayModeChange(mql) {
  // React on display mode changes.
}

// Run the display mode change handler once.
handleDisplayChange(mediaQueryList);

// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener('change', handleDisplayModeChange);

@media (display-mode: window-controls-overlay) { 
  /* React on display mode changes. */ 
}

ज्यामिति में बदलावों की सूचना पाना

getTitlebarAreaRect() की मदद से विंडो कंट्रोल के ओवरले की जगह की क्वेरी करना, एक बार के लिए काफ़ी हो सकता है इस तरह की चीज़ें, जैसे कि विंडो कंट्रोल की जगह के हिसाब से सही बैकग्राउंड इमेज सेट करना अन्य मामलों में, अधिक बारीकी से नियंत्रण की ज़रूरत होती है. उदाहरण के लिए, इस्तेमाल का एक संभावित उदाहरण यह हो सकता है कि उपलब्ध जगह के हिसाब से विंडो कंट्रोल ओवरले में बदलाव कर सकता है और विंडो में चुटकुला जोड़ सकता है कंट्रोल ओवरले सेट करें.

इसकी सदस्यता लेकर आपको ज्यामिति में होने वाले बदलावों की सूचना दी जा सकती है navigator.windowControlsOverlay.ongeometrychange या geometrychange इवेंट. यह इवेंट सिर्फ़ तब ट्रिगर होगा, जब विंडो कंट्रोल ओवरले दिखेगा जब navigator.windowControlsOverlay.visible true हो.

const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

if ('windowControlsOverlay' in navigator) {
  navigator.windowControlsOverlay.ongeometrychange = debounce((e) => {
    span.hidden = e.titlebarAreaRect.width < 800;
  }, 250);
}

ongeometrychange को कोई फ़ंक्शन असाइन करने के बजाय, इवेंट लिसनर को भी जोड़ा जा सकता है windowControlsOverlay. आप दोनों के बीच के अंतर के बारे में यहां पढ़ सकते हैं एमडीएन.

navigator.windowControlsOverlay.addEventListener(
  'geometrychange',
  debounce((e) => {
    span.hidden = e.titlebarAreaRect.width < 800;
  }, 250),
);

जब किसी टैब में और काम न करने वाले ब्राउज़र पर चल रहे हों

इसके दो संभावित मामले हो सकते हैं:

• ऐसे मामले जहां कोई ऐप्लिकेशन ऐसे ब्राउज़र में चल रहा है जो विंडो कंट्रोल ओवरले का काम करता है, लेकिन जहां ऐप्लिकेशन का इस्तेमाल ब्राउज़र टैब में किया जाता है.
• ऐसे मामले जिनमें कोई ऐप्लिकेशन ऐसे ब्राउज़र में चल रहा है जो विंडो कंट्रोल ओवरले का काम नहीं करता.

दोनों मामलों में, डिफ़ॉल्ट रूप से विंडो कंट्रोल के लिए बनाया गया एचटीएमएल ओवरले, सामान्य एचटीएमएल कॉन्टेंट और env() वैरिएबल की तरह इनलाइन दिखेगा फ़ॉलबैक वैल्यू पोज़िशनिंग के लिए मदद मिलेगी. साथ काम करने वाले ब्राउज़र पर, यह भी तय किया जा सकता है कि विंडो कंट्रोल के लिए तय किया गया एचटीएमएल, ओवरले की visible प्रॉपर्टी की जांच करके ओवरले करता है और अगर यह false रिपोर्ट करता है और फिर एचटीएमएल कॉन्टेंट को छिपा देता है.

आपको याद दिला दें कि इसके साथ काम न करने वाले ब्राउज़र, "display_override" वेब ऐप्लिकेशन मेनिफ़ेस्ट प्रॉपर्टी है या "window-controls-overlay" इसलिए, फ़ॉलबैक चेन के हिसाब से अगली संभावित वैल्यू का इस्तेमाल करता है, उदाहरण के लिए, "standalone".

यूज़र इंटरफ़ेस (यूआई) पर ध्यान दें

यह आपको आकर्षक लग सकता है, लेकिन विंडो कंट्रोल ओवरले एरिया में क्लासिक ड्रॉपडाउन मेन्यू बनाने का सुझाव नहीं दिया जाता. ऐसा करने से macOS पर डिज़ाइन से जुड़े दिशा-निर्देश, ऐसा प्लैटफ़ॉर्म जहां उपयोगकर्ता मेन्यू बार (सिस्टम से मिले और कस्टम पॉप-अप) चुनें.

अगर आपका ऐप्लिकेशन फ़ुलस्क्रीन मोड में काम करता है, तो देखें कि यह काम का है या नहीं आपके विंडो कंट्रोल ओवरले को फ़ुलस्क्रीन व्यू का हिस्सा बनाने के लिए. शायद आप आपके लेआउट को फिर से व्यवस्थित करना चाहते हैं, जब onfullscreenchange इवेंट सक्रिय करता है.

डेमो

मैंने एक डेमो बनाया है. इसे . इसके लिए असल विंडो कंट्रोल ओवरले का इस्तेमाल करने के लिए, आपको ऐप्लिकेशन इंस्टॉल करना होगा. क्या उम्मीद की जानी चाहिए, इसके लिए नीचे दो स्क्रीनशॉट दिए गए हैं. कॉन्टेंट बनाने ऐप्लिकेशन का सोर्स कोड, Glitch पर उपलब्ध है.

विंडो कंट्रोल ओवरले में, खोज की सुविधा पूरी तरह से काम करती है:

सुरक्षा से जुड़ी बातें

Chromium की टीम ने विंडो कंट्रोल ओवरले एपीआई को डिज़ाइन और लागू करने के लिए, इसके मुख्य सिद्धांतों का इस्तेमाल किया शक्तिशाली वेब प्लैटफ़ॉर्म सुविधाओं का ऐक्सेस कंट्रोल करना में बताया गया है. इसमें उपयोगकर्ता भी शामिल है कंट्रोल, पारदर्शिता, और एर्गोनॉमिक्स.

स्पूफ़िंग

साइटों को टाइटल बार का कुछ हद तक कंट्रोल देने से डेवलपर, पहले एक भरोसेमंद और ब्राउज़र कंट्रोल वाला क्षेत्र था. फ़िलहाल, Chromium ब्राउज़र में स्टैंडअलोन मोड में एक टाइटल बार होता है, जो शुरुआती लॉन्च पर बाईं ओर वेबपेज का टाइटल दिखाता है और दाईं ओर मौजूद पेज के ऑरिजिन (इसके बाद "सेटिंग और ज़्यादा" बटन और विंडो) नियंत्रण). कुछ सेकंड के बाद, ऑरिजिन टेक्स्ट गायब हो जाता है. अगर ब्राउज़र दाएं-से-बाएं पर सेट है (RTL) भाषा में है, तो यह लेआउट इस तरह फ़्लिप किया जाता है कि ऑरिजिन टेक्स्ट बाईं ओर हो. इससे, अगर ऑरिजिन और को हाइलाइट करें. उदाहरण के लिए, "evil.ltd" ऑरिजिन को भरोसेमंद सोर्स से जोड़ा जा सकता है "google.com" साइट पर जा सकते हैं. इससे उपयोगकर्ताओं को यह भरोसा हो जाता है कि सोर्स भरोसेमंद है. हमारी योजना है कि ऑरिजिन टेक्स्ट, ताकि उपयोगकर्ता यह जान सकें कि ऐप्लिकेशन का ऑरिजिन क्या है और यह पक्का कर सके कि यह उनके ऐप्लिकेशन के ऑरिजिन से मेल खाता है उम्मीदें. आरटीएल से कॉन्फ़िगर किए गए ब्राउज़र के लिए, ऑरिजिन की दाईं ओर काफ़ी पैडिंग (जगह) होनी चाहिए ताकि नुकसान पहुंचाने वाली वेबसाइट को असुरक्षित ऑरिजिन में भरोसेमंद ऑरिजिन से जोड़ने से रोका जा सके.

फ़िंगरप्रिंटिंग

विंडो कंट्रोल का ओवरले चालू करने और खींचने और छोड़ने लायक इलाके पोज़ नहीं होने चाहिए सुविधाओं की पहचान के अलावा, निजता से जुड़ी अहम समस्याएं शामिल हैं. हालांकि, इस वजह से अलग-अलग ऑपरेटिंग सिस्टम के लिए, विंडो कंट्रोल बटन के अलग-अलग साइज़ और पोज़िशन और सिस्टम, navigator.windowControlsOverlay.getTitlebarAreaRect() अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है तरीका, DOMRect दिखाता है जिसकी स्थिति और आयाम ऑपरेटिंग सिस्टम के बारे में जानकारी जिसे ब्राउज़र में इस्तेमाल किया जा रहा है. फ़िलहाल, डेवलपर ओएस को पहले से ही खोज सकते हैं वह उपयोगकर्ता एजेंट स्ट्रिंग से लिया जाता है, लेकिन फ़िंगरप्रिंटिंग से जुड़ी समस्याओं की वजह से, UA स्ट्रिंग को फ़्रीज़ करने और ओएस वर्शन को एक साथ करने के बारे में चर्चा की गई. कई यह समझने के लिए ब्राउज़र कम्यूनिटी की लगातार कोशिश जारी है कि विंडो कंट्रोल का साइज़, सभी प्लैटफ़ॉर्म पर बदलता है. मौजूदा समय में माना जाता है कि ये सभी OS वर्शन में काफ़ी स्थिर हैं और इसलिए माइनर OS वर्शन देखने में मदद मिलती है. हालांकि, ऐसा हो सकता है फ़िंगरप्रिंटिंग की समस्या है, तो यह सिर्फ़ उन इंस्टॉल किए गए PWA पर लागू होता है जो और यह सामान्य ब्राउज़र उपयोग पर लागू नहीं होता है. साथ ही, navigator.windowControlsOverlay एपीआई उपलब्ध नहीं होगा PWA में एम्बेड किए गए iframe.

नेविगेशन

पीडब्ल्यूए में किसी अलग ऑरिजिन पर जाने पर, वह वापस सामान्य स्टैंडअलोन वर्शन पर चला जाएगा या नहीं, यह ऊपर दिए गए मानदंडों को पूरा करता हो और विंडो कंट्रोल ओवरले के साथ लॉन्च किया गया हो. ऐसा करने से, एक अलग ऑरिजिन पर जाने के लिए नेविगेशन पर दिखने वाले ब्लैक बार को अडजस्ट किया जा सकता है. इस तारीख के बाद ओरिजनल ऑरिजिन पर वापस जाने पर, विंडो कंट्रोल ओवरले फिर से इस्तेमाल किया जाएगा.

सुझाव/राय दें या शिकायत करें

Chromium की टीम, Window Controls Overlay API इस्तेमाल करने के आपके अनुभव के बारे में जानना चाहती है.

हमें एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई में ऐसा कुछ है जो आपकी उम्मीद के मुताबिक काम नहीं करता? या कुछ तरीके उपलब्ध नहीं हैं या प्रॉपर्टी से जोड़ना होगा? सुरक्षा से जुड़े सवाल पूछने या टिप्पणी करने के लिए मॉडल? इससे जुड़े GitHub रेपो पर, स्पेसिफ़िकेशन से जुड़ी समस्या दर्ज करें या अपनी राय मौजूद नहीं है.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chromium को लागू करने में कोई गड़बड़ी मिली? या क्या लागू करने का तरीका, स्पेसिफ़िकेशन से अलग है? new.crbug.com पर जाकर, गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी दें, फिर से बनाने के लिए आसान निर्देश दें और कॉम्पोनेंट में UI>Browser>WebAppInstalls डालें बॉक्स. Glitch, जल्दी और आसान रेप्रस शेयर करने के लिए शानदार काम करता है.

यह एपीआई काम करता है

क्या आपको Window Controls Overlay API इस्तेमाल करना है? आपके सार्वजनिक समर्थन से Chromium टीम को सहायता मिलती है का इस्तेमाल किया जा सकता है. साथ ही, ब्राउज़र के अन्य वेंडर को दिखाया जाता है कि उनके लिए काम करना कितना ज़रूरी है.

@ChromiumDev को #WindowControlsOverlay हैशटैग के साथ हैशटैग शेयर करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

मददगार लिंक

• पूरी जानकारी देने वाला वीडियो
• स्पेक्ट ड्राफ़्ट
• Chromium की गड़बड़ी
• Chrome प्लैटफ़ॉर्म के स्टेटस की एंट्री
• टैग की समीक्षा
• Microsoft Edge के मिलते-जुलते दस्तावेज़

स्वीकार की गई

विंडो कंट्रोल ओवरले को लागू किया गया और इसे इसने तय किया Microsoft Edge टीम से अमैंडा बेकर. इस लेख की समीक्षा जो मेडली ने की है और केनेथ रोह्ड क्रिश्चयन. इन्होंने हीरो इमेज दी है Unस्प्लैश पर Sigmund.