OSOnWeb/index.html at master · TVke/OSOnWeb · GitHub

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>OSonWeb</title>
    <link rel="stylesheet" href="./dist/index.css">
<!--    <link rel="stylesheet" href="./dist/css/macOS.css">-->
</head>
<body class="text-black bg-cover bg-[#919191] bg-[url(./img/High-Sierra.jpg)] bg-no-repeat h-screen">

<nav class="top-menu bg-[rgba(250,250,250,.7)] border-[rgba(0,0,0,.27)] absolute inset-x-0 top-0 pl-2.5 pr-4  backdrop-blur-[30px] backdrop-saturate-[1.5] h-5 shadow-lg border-b flex justify-between text-sm z-30">
    <ul>
        <li><a href="."></a></li>
        <li><a href=".">Finder</a></li>
    </ul>
    <ul>
        <li>
            <a href="." id="clock"></a>
        </li>
        <li><a id="spotlight" href="."><img src="./dist/img/spotlight.png" alt="Spotlight"></a></li>
        <li><a id="siri" href="."><img src="./dist/img/siri.png" alt="Siri"></a></li>
        <li><a id="notifications" href="."><img src="./dist/img/notifications.png" alt="Notifications"></a></li>
    </ul>
</nav>

<div id="open-windows"></div>

<nav class="absolute bottom-0 w-full flex h-28 z-50">
    <div class="dock">
        <ul>
            <li class="active">
            <figure>
                <figcaption data-name="{{ $app->name }}">Finder</figcaption>
                <div class="arrow"></div>
                <img src="./dist/img/Finder.png" alt="Finder">
            </figure>
            <div class="menu">
                @if($app->name !== "Launchpad" && $app->name !== "Finder" )
                <p data-action="show" data-open="{{ $app->id }}">{{ __('macOS.show') }} {{ __('macOS.inside') }} {{
                    __('macOS.Finder') }}</p>
                <hr>
                <p data-action="open" data-load="{{ $app->file }}" data-toggle="{{ __('macOS.quit') }}"
                   data-toggle-action="stop" data-toggle-load="{{ $app->name }}">{{ __('macOS.open') }}</p>
                @endif
                @if($app->name === "Finder")
                <p data-action="new" data-load="{{ $app->id }}">{{ __('macOS.new') }} {{ __('macOS.Finder') }} {{
                    __('macOS.window') }}</p>
                <hr>
                <p data-action="restart">{{ __('macOS.restart') }}</p>
                @endif
                @if($app->name === "Launchpad")
                <p data-action="open" data-load="{{ $app->file }}">{{ __('macOS.show') }} {{ __('macOS.Launchpad')
                    }}</p>
                @endif
            </div>
            <div class="arrow"></div>
            </li>
            @endforeach
        </ul>
        <div class="vr"></div>
        <ul>
            @foreach($folders as $folder)
            <li>
                <figure>
                    <figcaption>{{ __('macOS.'.$folder->name) }}</figcaption>
                    <div class="arrow"></div>
                    <img src="{{ asset($folder->visual) }}" alt="{{ __('macOS.'.$folder->name) }}">
                </figure>
                <div class="menu">
                    {{--@if($folder->name !== "Trash")--}}
                    {{--<p data-action="new" data-open="{{ $folder->id }}">{{ __('macOS.show') }} {{ __('macOS.inside')
                    }} {{ __('macOS.Finder') }}</p>--}}
                    {{--
                    <hr>
                    --}}
                    {{--<p data-action="new" data-open="{{ $folder->id }}">{{ __('macOS.open') }} '{{ $folder->name
                    }}'</p>--}}
                    {{--@endif--}}
                    @if($folder->name === "Trash")
                    <p data-action="new" data-open="{{ $folder->id }}">{{ __('macOS.open') }}</p>
                    <hr>
                    <p class="disabled" data-action="empty">{{ __('macOS.empty') }}</p>
                    @endif
                </div>
                <div class="arrow"></div>
            </li>
            @endforeach
        </ul>
    </div>
</nav>
<script src="./dist/index.js"></script>
<script src="./dist/js/macOS.js"></script>
</body>
</html>