AJLStick.github.io/mobile.html at master · AJLStick/AJLStick.github.io · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<style>
body {
  background: black; color:white;
 }

.iphone-x {
  position: relative;
  margin: 40px auto;
  width: 360px;
  height: 780px;
  background-color: #7371ee;
  background-image: linear-gradient(60deg, purple 1%, red 100%);
  border-radius: 40px;
  box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919, 0px 0px 0px 20px #111;

  // speaker
  i {
    top: 0px;
    left: 50%;
    transform: translate(-50%, 6px);
    height: 8px;
    width: 15%;
    background-color: #101010;
    border-radius: 8px;
    box-shadow: inset 0px -3px 3px 0px rgba(256, 256, 256, 0.2);
  }

  // camera
  b {
    left: 10%;
    top: 0px;
    transform: translate(180px, 4px);
    width: 12px;
    height: 12px;
    background-color: #101010;
    border-radius: 12px;
    box-shadow: inset 0px -3px 2px 0px rgba(256, 256, 256, 0.2);

    &:after {
      content: '';
      position: absolute;
      background-color: #2d4d76;
      width: 6px;
      height: 6px;
      top: 2px;
      left: 2px;
      top: 3px;
      left: 3px;
      display: block;
      border-radius: 4px;
      box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
    }
  }

  // time
  st {
    top: 50px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    width: 100%;
    font-size: 70px;
    font-weight: 100;
    padding-top: 60px;
  }

  // action buttons
  span {
    bottom: 50px;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    left: 30px;

    & + span {
      left: auto;
      right: 30px;
    }
  }
}
bar{background-color:white;}
msgA{border:2px solid white; border-radius:10px; display:inline-block; background-color:white; color:black;}
msgB{border:2px solid blue; border-radius:10px; background-color:blue; color:white; float:right; margin-right:6px;}
</style>
<pre><Center>
<font size=10><b>SOMEPLACE MOBILE</font></b>
2 lines for just $49.99/month for the first 2 months.


---</center>
<div class="iphone-x">
  4:17                            SP MOBILE
______________________________________________

 <msga>had a little bit of trouble, but the
kids are all in the van.</msga>

<msgb>good. send them over.</msgb>

<msgb>where are you?</msgb>

<msgb>hello?</msgb>

 <msga>it's over, john. the cops are on
their way. turn yourself in.</msga>

<msgb>how could you do this to me, steve?</msgb>

 <msga>this is wrong, john. they're telling me
you might get 20 with good behavior.</msga>

 <msga>don't try to skip town, either.
i've already given them your license
plate number and a copy of your ID.</msga>

 <msga>it's over.</msga>
<center>
<font color=white>--you have been blocked--</font>


</div>